From df145c8064a43218def12ed05d1398977f042744 Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Thu, 22 Apr 2021 10:43:34 +0300 Subject: [PATCH] * cdm: render enclosures into content element * deprecate cdm.intermediate * implement lazy-load for rendered enclosures * simplify pack/unpack logic for articles --- js/Article.js | 11 +++++------ js/Headlines.js | 9 ++++++--- themes/compact.css | 17 +++-------------- themes/compact_night.css | 17 +++-------------- themes/light-high-contrast.css | 17 +++-------------- themes/light.css | 17 +++-------------- themes/light/cdm.less | 24 +++++++----------------- themes/light/tt-rss.less | 13 ++++++------- themes/night.css | 17 +++-------------- themes/night_blue.css | 17 +++-------------- 10 files changed, 42 insertions(+), 117 deletions(-) diff --git a/js/Article.js b/js/Article.js index 16abfbfee..3b23d1d59 100644 --- a/js/Article.js +++ b/js/Article.js @@ -255,12 +255,12 @@ const Article = { return comments; }, unpack: function(row) { - if (row.hasAttribute("data-content")) { + if (row.getAttribute("data-is-packed") == "1") { console.log("unpacking: " + row.id); const container = row.querySelector(".content-inner"); - container.innerHTML = row.getAttribute("data-content").trim(); + container.innerHTML = row.getAttribute("data-content").trim() + row.getAttribute("data-rendered-enclosures").trim(); dojo.parser.parse(container); @@ -272,16 +272,15 @@ const Article = { if (App.isCombinedMode() && App.byId("main").hasClassName("expandable")) row.setAttribute("data-content-original", row.getAttribute("data-content")); - row.removeAttribute("data-content"); + row.setAttribute("data-is-packed", "0"); PluginHost.run(PluginHost.HOOK_ARTICLE_RENDERED_CDM, row); } }, pack: function(row) { - if (row.hasAttribute("data-content-original")) { + if (row.getAttribute("data-is-packed") != "1") { console.log("packing", row.id); - row.setAttribute("data-content", row.getAttribute("data-content-original")); - row.removeAttribute("data-content-original"); + row.setAttribute("data-is-packed", "1"); row.querySelector(".content-inner").innerHTML = `
${__("Loading, please wait...")} diff --git a/js/Headlines.js b/js/Headlines.js index 134bdad6d..d01993838 100755 --- a/js/Headlines.js +++ b/js/Headlines.js @@ -490,7 +490,9 @@ const Headlines = { id="RROW-${hl.id}" data-article-id="${hl.id}" data-orig-feed-id="${hl.feed_id}" + data-is-packed="1" data-content="${App.escapeHtml(hl.content)}" + data-rendered-enclosures="${App.escapeHtml(Article.renderEnclosures(hl.enclosures))}" data-score="${hl.score}" data-article-title="${App.escapeHtml(hl.title)}" onmouseover="Article.mouseIn(${hl.id})" @@ -537,9 +539,10 @@ const Headlines = { ${__("Loading, please wait...")}
-
- ${Article.renderEnclosures(hl.enclosures)} -
+ + +
+
diff --git a/themes/compact.css b/themes/compact.css index 3dbc204ab..4f4c76bce 100644 --- a/themes/compact.css +++ b/themes/compact.css @@ -644,6 +644,9 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr border-top-width: 0; padding: 0 4px 4px 4px; } +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content .content-inner a { + word-break: break-all; +} body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] { top: -8px; border-bottom-width: 1px; @@ -670,10 +673,6 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr overflow: hidden; text-overflow: ellipsis; } -body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner a, -body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .intermediate a { - word-break: break-all; -} body.ttrss_main #headlines-frame { padding: 0; border: 0; @@ -1306,24 +1305,16 @@ body.ttrss_utility hr { .cdm .footer .left { flex-grow: 2; } -.cdm .intermediate { - margin-top: 10px; - margin-left: 10px; - line-height: 1.5; -} .cdm .content-inner { margin: 10px; line-height: 1.5; font-size: 16px; } -.cdm .intermediate iframe, .cdm .content-inner iframe { max-width: 98%; width: auto; height: auto; } -.cdm .intermediate img, -.cdm .intermediate video, .cdm .content-inner img, .cdm .content-inner video { border-width: 0px; @@ -1385,13 +1376,11 @@ body.ttrss_utility hr { .cdm .feed-title a:hover { color: #257aa7; } -.cdm .intermediate .embed-responsive, .cdm .content-inner .embed-responsive { overflow: hidden; padding-bottom: 56.25%; position: relative; } -.cdm .intermediate .embed-responsive iframe, .cdm .content-inner .embed-responsive iframe { border: 0; bottom: 0; diff --git a/themes/compact_night.css b/themes/compact_night.css index 34417a92c..f1b455f2d 100644 --- a/themes/compact_night.css +++ b/themes/compact_night.css @@ -644,6 +644,9 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr border-top-width: 0; padding: 0 4px 4px 4px; } +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content .content-inner a { + word-break: break-all; +} body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] { top: -8px; border-bottom-width: 1px; @@ -670,10 +673,6 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr overflow: hidden; text-overflow: ellipsis; } -body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner a, -body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .intermediate a { - word-break: break-all; -} body.ttrss_main #headlines-frame { padding: 0; border: 0; @@ -1306,24 +1305,16 @@ body.ttrss_utility hr { .cdm .footer .left { flex-grow: 2; } -.cdm .intermediate { - margin-top: 10px; - margin-left: 10px; - line-height: 1.5; -} .cdm .content-inner { margin: 10px; line-height: 1.5; font-size: 16px; } -.cdm .intermediate iframe, .cdm .content-inner iframe { max-width: 98%; width: auto; height: auto; } -.cdm .intermediate img, -.cdm .intermediate video, .cdm .content-inner img, .cdm .content-inner video { border-width: 0px; @@ -1385,13 +1376,11 @@ body.ttrss_utility hr { .cdm .feed-title a:hover { color: #b87d2c; } -.cdm .intermediate .embed-responsive, .cdm .content-inner .embed-responsive { overflow: hidden; padding-bottom: 56.25%; position: relative; } -.cdm .intermediate .embed-responsive iframe, .cdm .content-inner .embed-responsive iframe { border: 0; bottom: 0; diff --git a/themes/light-high-contrast.css b/themes/light-high-contrast.css index 6e799bc9c..0bf179d9f 100644 --- a/themes/light-high-contrast.css +++ b/themes/light-high-contrast.css @@ -644,6 +644,9 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr border-top-width: 0; padding: 0 4px 4px 4px; } +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content .content-inner a { + word-break: break-all; +} body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] { top: -8px; border-bottom-width: 1px; @@ -670,10 +673,6 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr overflow: hidden; text-overflow: ellipsis; } -body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner a, -body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .intermediate a { - word-break: break-all; -} body.ttrss_main #headlines-frame { padding: 0; border: 0; @@ -1306,24 +1305,16 @@ body.ttrss_utility hr { .cdm .footer .left { flex-grow: 2; } -.cdm .intermediate { - margin-top: 10px; - margin-left: 10px; - line-height: 1.5; -} .cdm .content-inner { margin: 10px; line-height: 1.5; font-size: 16px; } -.cdm .intermediate iframe, .cdm .content-inner iframe { max-width: 98%; width: auto; height: auto; } -.cdm .intermediate img, -.cdm .intermediate video, .cdm .content-inner img, .cdm .content-inner video { border-width: 0px; @@ -1385,13 +1376,11 @@ body.ttrss_utility hr { .cdm .feed-title a:hover { color: #257aa7; } -.cdm .intermediate .embed-responsive, .cdm .content-inner .embed-responsive { overflow: hidden; padding-bottom: 56.25%; position: relative; } -.cdm .intermediate .embed-responsive iframe, .cdm .content-inner .embed-responsive iframe { border: 0; bottom: 0; diff --git a/themes/light.css b/themes/light.css index 78a8b24b6..b201da5f4 100644 --- a/themes/light.css +++ b/themes/light.css @@ -644,6 +644,9 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr border-top-width: 0; padding: 0 4px 4px 4px; } +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content .content-inner a { + word-break: break-all; +} body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] { top: -8px; border-bottom-width: 1px; @@ -670,10 +673,6 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr overflow: hidden; text-overflow: ellipsis; } -body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner a, -body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .intermediate a { - word-break: break-all; -} body.ttrss_main #headlines-frame { padding: 0; border: 0; @@ -1306,24 +1305,16 @@ body.ttrss_utility hr { .cdm .footer .left { flex-grow: 2; } -.cdm .intermediate { - margin-top: 10px; - margin-left: 10px; - line-height: 1.5; -} .cdm .content-inner { margin: 10px; line-height: 1.5; font-size: 16px; } -.cdm .intermediate iframe, .cdm .content-inner iframe { max-width: 98%; width: auto; height: auto; } -.cdm .intermediate img, -.cdm .intermediate video, .cdm .content-inner img, .cdm .content-inner video { border-width: 0px; @@ -1385,13 +1376,11 @@ body.ttrss_utility hr { .cdm .feed-title a:hover { color: #257aa7; } -.cdm .intermediate .embed-responsive, .cdm .content-inner .embed-responsive { overflow: hidden; padding-bottom: 56.25%; position: relative; } -.cdm .intermediate .embed-responsive iframe, .cdm .content-inner .embed-responsive iframe { border: 0; bottom: 0; diff --git a/themes/light/cdm.less b/themes/light/cdm.less index a89ceed27..5641a0380 100644 --- a/themes/light/cdm.less +++ b/themes/light/cdm.less @@ -103,35 +103,26 @@ } } - .intermediate { - margin-top : 10px; - margin-left : 10px; - line-height : 1.5; - } - .content-inner { margin : 10px; line-height : 1.5; font-size : 16px; } - .intermediate, .content-inner { iframe { max-width : 98%; width : auto; height : auto; } - } - .intermediate img, - .intermediate video, - .content-inner img, - .content-inner video { - border-width : 0px; - max-width : 98%; - width : auto; - height : auto; + img, + video { + border-width : 0px; + max-width : 98%; + width : auto; + height : auto; + } } &.expanded { @@ -210,7 +201,6 @@ } } - .intermediate, .content-inner { .embed-responsive { overflow : hidden; diff --git a/themes/light/tt-rss.less b/themes/light/tt-rss.less index 088a3c7ff..0e85d53fb 100644 --- a/themes/light/tt-rss.less +++ b/themes/light/tt-rss.less @@ -754,6 +754,12 @@ body.ttrss_main { .content { border-top-width : 0; padding : 0 4px 4px 4px; + + .content-inner { + a { + word-break: break-all; + } + } } .header[data-is-stuck] { @@ -787,13 +793,6 @@ body.ttrss_main { text-overflow: ellipsis; } } - - .content-inner, - .intermediate { - a { - word-break: break-all; - } - } } } diff --git a/themes/night.css b/themes/night.css index d401c50c2..ec4b2f08c 100644 --- a/themes/night.css +++ b/themes/night.css @@ -645,6 +645,9 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr border-top-width: 0; padding: 0 4px 4px 4px; } +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content .content-inner a { + word-break: break-all; +} body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] { top: -8px; border-bottom-width: 1px; @@ -671,10 +674,6 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr overflow: hidden; text-overflow: ellipsis; } -body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner a, -body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .intermediate a { - word-break: break-all; -} body.ttrss_main #headlines-frame { padding: 0; border: 0; @@ -1307,24 +1306,16 @@ body.ttrss_utility hr { .cdm .footer .left { flex-grow: 2; } -.cdm .intermediate { - margin-top: 10px; - margin-left: 10px; - line-height: 1.5; -} .cdm .content-inner { margin: 10px; line-height: 1.5; font-size: 16px; } -.cdm .intermediate iframe, .cdm .content-inner iframe { max-width: 98%; width: auto; height: auto; } -.cdm .intermediate img, -.cdm .intermediate video, .cdm .content-inner img, .cdm .content-inner video { border-width: 0px; @@ -1386,13 +1377,11 @@ body.ttrss_utility hr { .cdm .feed-title a:hover { color: #b87d2c; } -.cdm .intermediate .embed-responsive, .cdm .content-inner .embed-responsive { overflow: hidden; padding-bottom: 56.25%; position: relative; } -.cdm .intermediate .embed-responsive iframe, .cdm .content-inner .embed-responsive iframe { border: 0; bottom: 0; diff --git a/themes/night_blue.css b/themes/night_blue.css index b0686a067..24edfbdf9 100644 --- a/themes/night_blue.css +++ b/themes/night_blue.css @@ -645,6 +645,9 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr border-top-width: 0; padding: 0 4px 4px 4px; } +body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content .content-inner a { + word-break: break-all; +} body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .header[data-is-stuck] { top: -8px; border-bottom-width: 1px; @@ -671,10 +674,6 @@ body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="tr overflow: hidden; text-overflow: ellipsis; } -body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .content-inner a, -body.ttrss_main #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] .cdm.expanded .intermediate a { - word-break: break-all; -} body.ttrss_main #headlines-frame { padding: 0; border: 0; @@ -1307,24 +1306,16 @@ body.ttrss_utility hr { .cdm .footer .left { flex-grow: 2; } -.cdm .intermediate { - margin-top: 10px; - margin-left: 10px; - line-height: 1.5; -} .cdm .content-inner { margin: 10px; line-height: 1.5; font-size: 16px; } -.cdm .intermediate iframe, .cdm .content-inner iframe { max-width: 98%; width: auto; height: auto; } -.cdm .intermediate img, -.cdm .intermediate video, .cdm .content-inner img, .cdm .content-inner video { border-width: 0px; @@ -1386,13 +1377,11 @@ body.ttrss_utility hr { .cdm .feed-title a:hover { color: #257aa7; } -.cdm .intermediate .embed-responsive, .cdm .content-inner .embed-responsive { overflow: hidden; padding-bottom: 56.25%; position: relative; } -.cdm .intermediate .embed-responsive iframe, .cdm .content-inner .embed-responsive iframe { border: 0; bottom: 0;