* shorten_expanded: use ResizeObserver (DUH)

* add HOOK_HEADLINES_RENDERED
This commit is contained in:
Andrew Dolgov 2021-03-11 22:55:14 +03:00
parent 6e0474a7c8
commit 146b1e0feb
3 changed files with 15 additions and 28 deletions

View File

@ -436,6 +436,7 @@ const Headlines = {
dijit.byId('main').resize(); dijit.byId('main').resize();
PluginHost.run(PluginHost.HOOK_HEADLINES_RENDERED);
}, },
render: function (headlines, hl) { render: function (headlines, hl) {
let row = null; let row = null;
@ -832,6 +833,8 @@ const Headlines = {
dijit.byId('main').resize(); dijit.byId('main').resize();
PluginHost.run(PluginHost.HOOK_HEADLINES_RENDERED);
Notify.close(); Notify.close();
}, },
reverse: function () { reverse: function () {

View File

@ -19,6 +19,7 @@ const PluginHost = {
HOOK_COUNTERS_PROCESSED: 14, HOOK_COUNTERS_PROCESSED: 14,
HOOK_HEADLINE_MUTATIONS: 15, HOOK_HEADLINE_MUTATIONS: 15,
HOOK_HEADLINE_MUTATIONS_SYNCED: 16, HOOK_HEADLINE_MUTATIONS_SYNCED: 16,
HOOK_HEADLINES_RENDERED: 17,
hooks: [], hooks: [],
register: function (name, callback) { register: function (name, callback) {
if (typeof(this.hooks[name]) == 'undefined') if (typeof(this.hooks[name]) == 'undefined')

View File

@ -2,6 +2,13 @@
Plugins.Shorten_Expanded = { Plugins.Shorten_Expanded = {
threshold: 1.5, // of window height 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) { shorten_if_needed: function(row) {
const content = row.querySelector(".content"); 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); 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 const attachments = row.querySelector(".attachments-inline"); // optional
@ -37,33 +46,7 @@ Plugins.Shorten_Expanded = {
if (this.shorten_if_needed(row)) if (this.shorten_if_needed(row))
return; return;
const promises = []; this.observer.observe(row);
[...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);
});
}, },
expand: function(id) { expand: function(id) {
const row = App.byId(id); const row = App.byId(id);