Revert "somewhat experimental: disable article packing/unpacking, render content immediately"

This reverts commit ab53591957.

js/Article.js

@@ -180,6 +180,36 @@ const Article = {
 				${__('Originally from:')} <a target="_blank" rel="noopener noreferrer" href="${App.escapeHtml(hl.orig_feed[1])}">${hl.orig_feed[0]}</a>
 				</span>` : "";
 	},
+	unpack: function(row) {
+		if (row.hasAttribute("data-content")) {
+			console.log("unpacking: " + row.id);
+
+			const container = row.querySelector(".content-inner");
+
+			container.innerHTML = row.getAttribute("data-content").trim();
+
+			// blank content element might screw up onclick selection and keyboard moving
+			if (container.textContent.length == 0)
+				container.innerHTML += "&nbsp;";
+
+			// in expandable mode, save content for later, so that we can pack unfocused rows back
+			if (App.isCombinedMode() && $("main").hasClassName("expandable"))
+				row.setAttribute("data-content-original", row.getAttribute("data-content"));
+
+			row.removeAttribute("data-content");
+
+			PluginHost.run(PluginHost.HOOK_ARTICLE_RENDERED_CDM, row);
+		}
+	},
+	pack: function(row) {
+		if (row.hasAttribute("data-content-original")) {
+			console.log("packing", row.id);
+			row.setAttribute("data-content", row.getAttribute("data-content-original"));
+			row.removeAttribute("data-content-original");
+
+			row.querySelector(".content-inner").innerHTML = "&nbsp;";
+		}
+	},
 	view: function (id, no_expand) {
 		this.setActive(id);
 		Headlines.scrollToArticleId(id);
@@ -298,11 +328,14 @@ const Article = {
 
 			$$("div[id*=RROW][class*=active]").each((row) => {
 				row.removeClassName("active");
+				Article.pack(row);
 			});
 
 			const row = $("RROW-" + id);
 
 			if (row) {
+				Article.unpack(row);
+
 				row.removeClassName("Unread");
 				row.addClassName("active");
 

js/Headlines.js

@@ -32,6 +32,15 @@ const Headlines = {
 		},
 		{threshold: [0, 1], root: document.querySelector("#headlines-frame")}
 	),
+	unpack_observer: new IntersectionObserver(
+		(entries, observer) => {
+			entries.forEach((entry) => {
+				if (entry.intersectionRatio > 0)
+					Article.unpack(entry.target);
+			});
+		},
+		{threshold: [0], root: document.querySelector("#headlines-frame")}
+	),
 	row_observer: new MutationObserver((mutations) => {
 		const modified = [];
 
@@ -360,6 +369,7 @@ const Headlines = {
 
 				if (hl.active) {
 					new_row.addClassName("active");
+					Article.unpack(new_row);
 
 					if (App.isCombinedMode())
 						Article.cdmMoveToId(id, {noscroll: true});
@@ -375,6 +385,11 @@ const Headlines = {
 			this.sticky_header_observer.observe(e)
 		});
 
+		if (App.getInitParam("cdm_expanded"))
+			$$("#headlines-frame > div[id*=RROW].cdm").each((e) => {
+				this.unpack_observer.observe(e)
+			});
+
 	},
 	render: function (headlines, hl) {
 		let row = null;
@@ -411,6 +426,7 @@ const Headlines = {
 						id="RROW-${hl.id}"
 						data-article-id="${hl.id}"
 						data-orig-feed-id="${hl.feed_id}"
+						data-content="${App.escapeHtml(hl.content)}"
 						data-score="${hl.score}"
 						data-article-title="${App.escapeHtml(hl.title)}"
 						onmouseover="Article.mouseIn(${hl.id})"
@@ -450,7 +466,7 @@ const Headlines = {
 						<div class="content" onclick="return Headlines.click(event, ${hl.id}, true);">
 							<div id="POSTNOTE-${hl.id}">${hl.note}</div>
 							<div class="content-inner" lang="${hl.lang ? hl.lang : 'en'}">
-								${hl.content}
+								<img src="${App.getInitParam('icon_indicator_white')}">
 							</div>
 							<div class="intermediate">
 								${hl.enclosures}
@@ -687,6 +703,11 @@ const Headlines = {
 				this.sticky_header_observer.observe(e)
 			});
 
+			if (App.getInitParam("cdm_expanded"))
+				$$("#headlines-frame > div[id*=RROW].cdm").each((e) => {
+					this.unpack_observer.observe(e)
+				});
+
 		} else {
 			console.error("Invalid object received: " + transport.responseText);
 			dijit.byId("headlines-frame").attr('content', "<div class='whiteBox'>" +
@@ -697,7 +718,7 @@ const Headlines = {
 		Feeds.infscroll_in_progress = 0;
 
 		// this is used to auto-catchup articles if needed after infscroll request has finished,
-		// fill buffer more, etc
+		// unpack visible articles, fill buffer more, etc
 		this.scrollHandler();
 
 		Notify.close();