* cdm: render enclosures into content element

 * deprecate cdm.intermediate
 * implement lazy-load for rendered enclosures
 * simplify pack/unpack logic for articles

2 files changed, 11 insertions, 9 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 = `<div class="text-center text-muted">
 				${__("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...")}
 								</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">