valvin
/
ttrss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

* cdm: render enclosures into content element 

* deprecate cdm.intermediate
 * implement lazy-load for rendered enclosures
 * simplify pack/unpack logic for articles
This commit is contained in:
Andrew Dolgov 2021-04-22 10:43:34 +03:00
parent c6befcddb7
commit df145c8064
10 changed files with 42 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
js/Article.js
View File

@ -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 = `<div class="text-center text-muted">
${__("Loading, please wait...")}

9
js/Headlines.js
View File

@ -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...")}
</div>
</div>
<div class="intermediate">
${Article.renderEnclosures(hl.enclosures)}
</div>
<!-- intermediate: unstyled, kept for compatibility -->
<div class="intermediate"></div>
<div class="footer" onclick="event.stopPropagation()">
<div class="left">

17
themes/compact.css
View File

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

17
themes/compact_night.css
View File

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

17
themes/light-high-contrast.css
View File

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

17
themes/light.css
View File

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

16
themes/light/cdm.less
View File

@ -103,36 +103,27 @@
}
}
.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 {
img,
video {
border-width : 0px;
max-width : 98%;
width : auto;
height : auto;
}
}
&.expanded {
@ -210,7 +201,6 @@
}
}
.intermediate,
.content-inner {
.embed-responsive {
overflow : hidden;

13
themes/light/tt-rss.less
View File

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

17
themes/night.css
View File

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

17
themes/night_blue.css
View File

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