diff options
Diffstat (limited to 'plugins/shorten_expanded/init.js')
-rw-r--r-- | plugins/shorten_expanded/init.js | 81 |
1 files changed, 50 insertions, 31 deletions
diff --git a/plugins/shorten_expanded/init.js b/plugins/shorten_expanded/init.js index 0abc8c129..85d75d313 100644 --- a/plugins/shorten_expanded/init.js +++ b/plugins/shorten_expanded/init.js @@ -1,10 +1,55 @@ -/* global Plugins, __, require, PluginHost */ - -const _shorten_expanded_threshold = 1.5; //window heights +/* global Plugins, __, require, PluginHost, App, dojo */ Plugins.Shorten_Expanded = { + threshold: 1.5, // of window height + observer: new ResizeObserver((entries) => { + entries.forEach((entry) => { + const row = entry.target; + + Plugins.Shorten_Expanded.shorten_if_needed(row); + }); + }), + shorten_if_needed: function(row) { + + const content = row.querySelector(".content"); + const content_inner = row.querySelector(".content-inner"); + + //console.log('shorten_expanded', row.id, content.offsetHeight, 'vs', this.threshold * window.innerHeight); + + if (content && content_inner && !row.hasAttribute('data-already-shortened') && content.offsetHeight >= this.threshold * window.innerHeight) { + + row.setAttribute('data-already-shortened', true); + + const attachments = row.querySelector(".attachments-inline"); // optional + + content_inner.innerHTML = ` + <div class="content-shrink-wrap"> + ${content_inner.innerHTML} + ${attachments ? attachments.innerHTML : ''} + </div> + <button dojoType="dijit.form.Button" class="alt-info expand-prompt" onclick="return Plugins.Shorten_Expanded.expand('${row.id}')" href="#"> + ${App.FormFields.icon('add')} + ${__("Expand article")} + </button>`; + + if (attachments) + attachments.innerHTML = ""; + + dojo.parser.parse(content_inner); + + return true; + } + return false; + }, + process_row: function(row) { + + if (this.shorten_if_needed(row)) + return; + + this.observer.observe(row); + }, expand: function(id) { - const row = $(id); + const row = App.byId(id); if (row) { const content = row.querySelector(".content-shrink-wrap"); @@ -21,33 +66,7 @@ Plugins.Shorten_Expanded = { require(['dojo/_base/kernel', 'dojo/ready'], function (dojo, ready) { ready(function() { PluginHost.register(PluginHost.HOOK_ARTICLE_RENDERED_CDM, function(row) { - window.setTimeout(function() { - if (row) { - - const content = row.querySelector(".content-inner"); - - //console.log('shorten', row.offsetHeight, 'vs', _shorten_expanded_threshold * window.innerHeight); - - if (content && row.offsetHeight >= _shorten_expanded_threshold * window.innerHeight) { - - const attachments = row.querySelector(".attachments-inline"); // optional - - content.innerHTML = ` - <div class="content-shrink-wrap"> - ${content.innerHTML} - ${attachments ? attachments.innerHTML : ''} - </div> - <button dojoType="dijit.form.Button" class="alt-info expand-prompt" onclick="return Plugins.Shorten_Expanded.expand('${row.id}')" href="#"> - ${__("Click to expand article")}</button>`; - - if (attachments) - attachments.innerHTML = ""; - - dojo.parser.parse(content); - } - } - }, 150); - + Plugins.Shorten_Expanded.process_row(row); return true; }); }); |