1 files changed, 30 insertions, 11 deletions

diff --git a/js/Article.js b/js/Article.js
index ed74051a6..a3a75ba21 100644
--- a/js/Article.js
+++ b/js/Article.js
@@ -93,6 +93,16 @@ const Article = {
 		w.opener = null;
 		w.location = url;
 	},
+	cdmToggleGridSpan: function(id) {
+		const row = App.byId(`RROW-${id}`);
+
+		if (row) {
+			row.toggleClassName('grid-span-row');
+
+			this.setActive(id);
+			this.cdmMoveToId(id);
+		}
+	},
 	cdmUnsetActive: function (event) {
 		const row = App.byId(`RROW-${Article.getActive()}`);
 
@@ -245,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);
 
@@ -262,18 +272,23 @@ 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");
+
+			const content_inner = row.querySelector(".content-inner");
 
-			row.querySelector(".content-inner").innerHTML = " ";
+			// missing in unexpanded mode
+			if (content_inner)
+				content_inner.innerHTML = `<div class="text-center text-muted">
+					${__("Loading, please wait...")}
+				</div>`
 		}
 	},
 	view: function (id, no_expand) {
@@ -389,10 +404,12 @@ const Article = {
 		const ctr = App.byId("headlines-frame");
 		const row = App.byId(`RROW-${id}`);
 
-		if (!row || !ctr) return;
+		if (ctr && row) {
+			const grid_gap = parseInt(window.getComputedStyle(ctr).gridGap) || 0;
 
-		if (force_to_top || !App.Scrollable.fitsInContainer(row, ctr)) {
-			ctr.scrollTop = row.offsetTop;
+			if (force_to_top || !App.Scrollable.fitsInContainer(row, ctr)) {
+				ctr.scrollTop = row.offsetTop - grid_gap;
+			}
 		}
 	},
 	setActive: function (id) {
@@ -401,7 +418,9 @@ const Article = {
 
 			App.findAll("div[id*=RROW][class*=active]").forEach((row) => {
 				row.removeClassName("active");
-				Article.pack(row);
+
+				if (App.isCombinedMode() && !App.getInitParam("cdm_expanded"))
+					Article.pack(row);
 			});
 
 			const row = App.byId(`RROW-${id}`);