diff --git a/js/Headlines.js b/js/Headlines.js index 4dad68db9..b35202bcb 100755 --- a/js/Headlines.js +++ b/js/Headlines.js @@ -436,6 +436,7 @@ const Headlines = { dijit.byId('main').resize(); + PluginHost.run(PluginHost.HOOK_HEADLINES_RENDERED); }, render: function (headlines, hl) { let row = null; @@ -832,6 +833,8 @@ const Headlines = { dijit.byId('main').resize(); + PluginHost.run(PluginHost.HOOK_HEADLINES_RENDERED); + Notify.close(); }, reverse: function () { diff --git a/js/PluginHost.js b/js/PluginHost.js index b54f1ece3..e7b4156e6 100644 --- a/js/PluginHost.js +++ b/js/PluginHost.js @@ -19,6 +19,7 @@ const PluginHost = { HOOK_COUNTERS_PROCESSED: 14, HOOK_HEADLINE_MUTATIONS: 15, HOOK_HEADLINE_MUTATIONS_SYNCED: 16, + HOOK_HEADLINES_RENDERED: 17, hooks: [], register: function (name, callback) { if (typeof(this.hooks[name]) == 'undefined') diff --git a/plugins/shorten_expanded/init.js b/plugins/shorten_expanded/init.js index 1463f9808..6fbfdde2e 100644 --- a/plugins/shorten_expanded/init.js +++ b/plugins/shorten_expanded/init.js @@ -2,6 +2,13 @@ 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"); @@ -9,7 +16,9 @@ Plugins.Shorten_Expanded = { console.log('shorten_expanded', row.id, content.offsetHeight, 'vs', this.threshold * window.innerHeight); - if (content && content_inner && content.offsetHeight >= 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 @@ -37,33 +46,7 @@ Plugins.Shorten_Expanded = { if (this.shorten_if_needed(row)) return; - const promises = []; - - [...row.querySelectorAll("img, video")].forEach((img) => { - const promise = new Promise((resolve, reject) => { - - // lazy load breaks our calculations - img.removeAttribute('loading'); - - 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")); - }, 2000) - }) - - promises.push(Promise.race([promise, timeout])); - }); - - Promise.allSettled(promises).then(() => { - this.shorten_if_needed(row); - }); + this.observer.observe(row); }, expand: function(id) { const row = App.byId(id);