From 36ad46e60db2e44f508b942379abd189bbb3dfa6 Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Wed, 10 Mar 2021 14:57:03 +0300 Subject: [PATCH] * shorten_expanded: use promises instead of a timeout hack * normalize some icon colors --- plugins/shorten_expanded/init.css | 3 +- plugins/shorten_expanded/init.js | 94 +++++++++++++++++++++---------- themes/compact.css | 18 ++++-- themes/compact_night.css | 22 +++++--- themes/light.css | 18 ++++-- themes/light/cdm.less | 8 ++- themes/light/defines.less | 1 + themes/light/tt-rss.less | 7 ++- themes/night.css | 22 +++++--- themes/night_base.less | 2 +- themes/night_blue.css | 22 +++++--- 11 files changed, 148 insertions(+), 69 deletions(-) diff --git a/plugins/shorten_expanded/init.css b/plugins/shorten_expanded/init.css index 0966aa1f9..e0a209903 100644 --- a/plugins/shorten_expanded/init.css +++ b/plugins/shorten_expanded/init.css @@ -1,7 +1,8 @@ .content-shrink-wrap { overflow : hidden; text-overflow: ellipsis; - height : 800px; + height : 80vh; + margin-bottom : 8px; } .expand-prompt { 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 = ` +
+ ${content_inner.innerHTML} + ${attachments ? attachments.innerHTML : ''} +
+ `; + + 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 = ` -
- ${content.innerHTML} - ${attachments ? attachments.innerHTML : ''} -
- `; - - if (attachments) - attachments.innerHTML = ""; - - dojo.parser.parse(content); - } - } - }, 150); - + Plugins.Shorten_Expanded.process_row(row); return true; }); }); diff --git a/themes/compact.css b/themes/compact.css index e484323e1..ddaf8c4de 100644 --- a/themes/compact.css +++ b/themes/compact.css @@ -982,6 +982,11 @@ body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-show body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-shows-special="false"] #feeds-holder #feedTree .dijitTreeRow:not(.Unread):not(.AlwaysVisible) { display: none; } +body.ttrss_main { + /*.score-neutral i.icon-score { + opacity : 0.5; + }*/ +} body.ttrss_main #toolbar-headlines i.icon-syndicate { color: #ff7c4b; margin-right: 8px; @@ -1018,11 +1023,9 @@ body.ttrss_main .score-high i.icon-score { body.ttrss_main .score-low i.icon-score { color: #500; } -body.ttrss_main .score-neutral i.icon-score { - opacity: 0.5; -} body.ttrss_main i.icon-score { cursor: pointer; + color: #777; } body.ttrss_main .panel { border: 1px solid #ddd; @@ -1206,8 +1209,10 @@ body.ttrss_utility div.autocomplete ul li { video::-webkit-media-controls-overlay-play-button { display: none; } -.cdm i.material-icons { - color: #777; +.cdm { + /*i.material-icons { + color : @color-icon; + }*/ } .cdm .header { position: sticky; @@ -1269,6 +1274,9 @@ video::-webkit-media-controls-overlay-play-button { clear: both; align-items: center; } +.cdm .footer i.material-icons { + color: #777; +} .cdm .footer .left { flex-grow: 2; } diff --git a/themes/compact_night.css b/themes/compact_night.css index d086a4bd4..54dcb9b04 100644 --- a/themes/compact_night.css +++ b/themes/compact_night.css @@ -51,7 +51,7 @@ body.ttrss_main div.post div.header img, body.ttrss_main div.post div.header i.material-icons { margin: 0px 4px; vertical-align: middle; - color: #777; + color: #999; } body.ttrss_main div.post div.header .title { flex-grow: 2; @@ -226,7 +226,7 @@ body.ttrss_main .hl .right i.material-icons { font-size: 21px; } body.ttrss_main .hl .right i.material-icons { - color: #777; + color: #999; } body.ttrss_main .hl div.title { cursor: pointer; @@ -982,6 +982,11 @@ body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-show body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-shows-special="false"] #feeds-holder #feedTree .dijitTreeRow:not(.Unread):not(.AlwaysVisible) { display: none; } +body.ttrss_main { + /*.score-neutral i.icon-score { + opacity : 0.5; + }*/ +} body.ttrss_main #toolbar-headlines i.icon-syndicate { color: #ff7c4b; margin-right: 8px; @@ -1018,11 +1023,9 @@ body.ttrss_main .score-high i.icon-score { body.ttrss_main .score-low i.icon-score { color: #500; } -body.ttrss_main .score-neutral i.icon-score { - opacity: 0.5; -} body.ttrss_main i.icon-score { cursor: pointer; + color: #999; } body.ttrss_main .panel { border: 1px solid #222; @@ -1206,8 +1209,10 @@ body.ttrss_utility div.autocomplete ul li { video::-webkit-media-controls-overlay-play-button { display: none; } -.cdm i.material-icons { - color: #777; +.cdm { + /*i.material-icons { + color : @color-icon; + }*/ } .cdm .header { position: sticky; @@ -1269,6 +1274,9 @@ video::-webkit-media-controls-overlay-play-button { clear: both; align-items: center; } +.cdm .footer i.material-icons { + color: #999; +} .cdm .footer .left { flex-grow: 2; } diff --git a/themes/light.css b/themes/light.css index 93acc0f1e..4b2baa286 100644 --- a/themes/light.css +++ b/themes/light.css @@ -982,6 +982,11 @@ body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-show body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-shows-special="false"] #feeds-holder #feedTree .dijitTreeRow:not(.Unread):not(.AlwaysVisible) { display: none; } +body.ttrss_main { + /*.score-neutral i.icon-score { + opacity : 0.5; + }*/ +} body.ttrss_main #toolbar-headlines i.icon-syndicate { color: #ff7c4b; margin-right: 8px; @@ -1018,11 +1023,9 @@ body.ttrss_main .score-high i.icon-score { body.ttrss_main .score-low i.icon-score { color: #500; } -body.ttrss_main .score-neutral i.icon-score { - opacity: 0.5; -} body.ttrss_main i.icon-score { cursor: pointer; + color: #777; } body.ttrss_main .panel { border: 1px solid #ddd; @@ -1206,8 +1209,10 @@ body.ttrss_utility div.autocomplete ul li { video::-webkit-media-controls-overlay-play-button { display: none; } -.cdm i.material-icons { - color: #777; +.cdm { + /*i.material-icons { + color : @color-icon; + }*/ } .cdm .header { position: sticky; @@ -1269,6 +1274,9 @@ video::-webkit-media-controls-overlay-play-button { clear: both; align-items: center; } +.cdm .footer i.material-icons { + color: #777; +} .cdm .footer .left { flex-grow: 2; } diff --git a/themes/light/cdm.less b/themes/light/cdm.less index 91e07e3f4..760fa44c7 100644 --- a/themes/light/cdm.less +++ b/themes/light/cdm.less @@ -1,7 +1,7 @@ .cdm { - i.material-icons { + /*i.material-icons { color : @color-icon; - } + }*/ .header { position: sticky; @@ -70,6 +70,10 @@ clear : both; align-items : center; + i.material-icons { + color : @color-icon; + } + .left { flex-grow : 2; } diff --git a/themes/light/defines.less b/themes/light/defines.less index dd3f62251..0786775ad 100644 --- a/themes/light/defines.less +++ b/themes/light/defines.less @@ -14,6 +14,7 @@ @border-default : #ddd; @default-text: #555; @color-icon: #777; +@color-hl-icon: #ccc; @color-tooltip-fg: @color-panel-bg; @color-tooltip-bg: darken(@color-accent, 10%); diff --git a/themes/light/tt-rss.less b/themes/light/tt-rss.less index fa7e3e2a1..38593a8a5 100644 --- a/themes/light/tt-rss.less +++ b/themes/light/tt-rss.less @@ -423,7 +423,7 @@ body.ttrss_main { i.marked-pic, i.pub-pic { cursor : pointer; - color : #ccc; + color : @color-hl-icon; } div.errorExplained { @@ -1208,12 +1208,13 @@ body.ttrss_main { color : #500; } - .score-neutral i.icon-score { + /*.score-neutral i.icon-score { opacity : 0.5; - } + }*/ i.icon-score { cursor : pointer; + color : @color-icon; } .panel { diff --git a/themes/night.css b/themes/night.css index 7bc8e10e3..59cde9826 100644 --- a/themes/night.css +++ b/themes/night.css @@ -52,7 +52,7 @@ body.ttrss_main div.post div.header img, body.ttrss_main div.post div.header i.material-icons { margin: 0px 4px; vertical-align: middle; - color: #777; + color: #999; } body.ttrss_main div.post div.header .title { flex-grow: 2; @@ -227,7 +227,7 @@ body.ttrss_main .hl .right i.material-icons { font-size: 21px; } body.ttrss_main .hl .right i.material-icons { - color: #777; + color: #999; } body.ttrss_main .hl div.title { cursor: pointer; @@ -983,6 +983,11 @@ body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-show body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-shows-special="false"] #feeds-holder #feedTree .dijitTreeRow:not(.Unread):not(.AlwaysVisible) { display: none; } +body.ttrss_main { + /*.score-neutral i.icon-score { + opacity : 0.5; + }*/ +} body.ttrss_main #toolbar-headlines i.icon-syndicate { color: #ff7c4b; margin-right: 8px; @@ -1019,11 +1024,9 @@ body.ttrss_main .score-high i.icon-score { body.ttrss_main .score-low i.icon-score { color: #500; } -body.ttrss_main .score-neutral i.icon-score { - opacity: 0.5; -} body.ttrss_main i.icon-score { cursor: pointer; + color: #999; } body.ttrss_main .panel { border: 1px solid #222; @@ -1207,8 +1210,10 @@ body.ttrss_utility div.autocomplete ul li { video::-webkit-media-controls-overlay-play-button { display: none; } -.cdm i.material-icons { - color: #777; +.cdm { + /*i.material-icons { + color : @color-icon; + }*/ } .cdm .header { position: sticky; @@ -1270,6 +1275,9 @@ video::-webkit-media-controls-overlay-play-button { clear: both; align-items: center; } +.cdm .footer i.material-icons { + color: #999; +} .cdm .footer .left { flex-grow: 2; } diff --git a/themes/night_base.less b/themes/night_base.less index 6c7ba9964..78056d710 100644 --- a/themes/night_base.less +++ b/themes/night_base.less @@ -9,7 +9,7 @@ @default-fg: @default-text; @border-default: #222; @default-bg : #333; - +@color-icon: #999; @border-light : #666; @default-text: #ccc; diff --git a/themes/night_blue.css b/themes/night_blue.css index 052ebf5ae..dd3308cb0 100644 --- a/themes/night_blue.css +++ b/themes/night_blue.css @@ -52,7 +52,7 @@ body.ttrss_main div.post div.header img, body.ttrss_main div.post div.header i.material-icons { margin: 0px 4px; vertical-align: middle; - color: #777; + color: #999; } body.ttrss_main div.post div.header .title { flex-grow: 2; @@ -227,7 +227,7 @@ body.ttrss_main .hl .right i.material-icons { font-size: 21px; } body.ttrss_main .hl .right i.material-icons { - color: #777; + color: #999; } body.ttrss_main .hl div.title { cursor: pointer; @@ -983,6 +983,11 @@ body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-show body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-shows-special="false"] #feeds-holder #feedTree .dijitTreeRow:not(.Unread):not(.AlwaysVisible) { display: none; } +body.ttrss_main { + /*.score-neutral i.icon-score { + opacity : 0.5; + }*/ +} body.ttrss_main #toolbar-headlines i.icon-syndicate { color: #ff7c4b; margin-right: 8px; @@ -1019,11 +1024,9 @@ body.ttrss_main .score-high i.icon-score { body.ttrss_main .score-low i.icon-score { color: #500; } -body.ttrss_main .score-neutral i.icon-score { - opacity: 0.5; -} body.ttrss_main i.icon-score { cursor: pointer; + color: #999; } body.ttrss_main .panel { border: 1px solid #222; @@ -1207,8 +1210,10 @@ body.ttrss_utility div.autocomplete ul li { video::-webkit-media-controls-overlay-play-button { display: none; } -.cdm i.material-icons { - color: #777; +.cdm { + /*i.material-icons { + color : @color-icon; + }*/ } .cdm .header { position: sticky; @@ -1270,6 +1275,9 @@ video::-webkit-media-controls-overlay-play-button { clear: both; align-items: center; } +.cdm .footer i.material-icons { + color: #999; +} .cdm .footer .left { flex-grow: 2; }