public/tt-rss
1
0
Fork 0
mirror of https://git.tt-rss.org/git/tt-rss.git synced 2025-12-13 05:25:56 +00:00
Code Issues Releases Wiki Activity

* shorten_expanded: use promises instead of a timeout hack

Browse Source 
* normalize some icon colors
This commit is contained in:
Andrew Dolgov
2021-03-10 14:57:03 +03:00
parent 96031c80bf
commit 36ad46e60d
11 changed files with 148 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
plugins/shorten_expanded/init.css
View File

@@ -1,7 +1,8 @@
.content-shrink-wrap {
overflow : hidden;
text-overflow: ellipsis;
height : 800px;
height : 80vh;
margin-bottom : 8px;
}
.expand-prompt {

94
plugins/shorten_expanded/init.js
View File

@@ -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;
});
});