diff options
author | Andrew Dolgov <[email protected]> | 2021-03-10 14:57:03 +0300 |
---|---|---|
committer | Andrew Dolgov <[email protected]> | 2021-03-10 14:57:03 +0300 |
commit | 36ad46e60db2e44f508b942379abd189bbb3dfa6 (patch) | |
tree | 3bdc0dfedd3cb289a10511b2c95979066aaf8c90 /plugins/shorten_expanded/init.js | |
parent | 96031c80bf380e3816ab81a74524d47983631ce4 (diff) |
* shorten_expanded: use promises instead of a timeout hack
* normalize some icon colors
Diffstat (limited to 'plugins/shorten_expanded/init.js')
-rw-r--r-- | plugins/shorten_expanded/init.js | 94 |
1 files changed, 63 insertions, 31 deletions
diff --git a/plugins/shorten_expanded/init.js b/plugins/shorten_expanded/init.js index 0abc8c129..40bb80790 100644 --- a/plugins/shorten_expanded/init.js +++ b/plugins/shorten_expanded/init.js @@ -1,10 +1,68 @@ -/* 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 + 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 && content.offsetHeight >= this.threshold * window.innerHeight) { + + 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; + + const promises = []; + + [...row.querySelectorAll("img, video")].forEach((img) => { + const promise = new Promise((resolve, reject) => { + img.onload = () => resolve(img); + img.onloadeddata = () => resolve(img); + img.error = () => reject(new Error("unable to load video")); + img.onerror = () => reject(new Error("unable to load image")); + }); + + const timeout = new Promise((resolve, reject) => { + const id = setTimeout(() => { + clearTimeout(id); + reject(new Error("timed out")); + }, 250) + }) + + promises.push(Promise.race([promise, timeout])); + }); + + Promise.allSettled(promises).then(() => { + this.shorten_if_needed(row); + }); + }, expand: function(id) { - const row = $(id); + const row = App.byId(id); if (row) { const content = row.querySelector(".content-shrink-wrap"); @@ -21,33 +79,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; }); }); |