add Headlines.renderAgain() to switch between combined/expanded modes faster

3 files changed, 52 insertions, 25 deletions

diff --git a/js/Article.js b/js/Article.js
index c3b6766c8..235865394 100644
--- a/js/Article.js
+++ b/js/Article.js
@@ -160,6 +160,16 @@ define(["dojo/_base/declare"], function (declare) {
 					${__('Originally from:')} <a target="_blank" rel="noopener noreferrer" href="${hl.orig_feed[1]}">${hl.orig_feed[0]}</a>
 					</span>` : "";
 		},
+		unpack: function(row) {
+			if (row.hasAttribute("data-content")) {
+				console.log("unpacking: " + row.id);
+
+				row.select(".content-inner")[0].innerHTML = row.getAttribute("data-content");
+				row.removeAttribute("data-content");
+
+				PluginHost.run(PluginHost.HOOK_ARTICLE_RENDERED_CDM, row);
+			}
+		},
 		view: function (id, noexpand) {
 			this.setActive(id);
 
@@ -283,14 +293,7 @@ define(["dojo/_base/declare"], function (declare) {
 			const row = $("RROW-" + id);
 
 			if (row) {
-				if (row.hasAttribute("data-content")) {
-					console.log("unpacking: " + row.id);
-
-					row.select(".content-inner")[0].innerHTML = row.getAttribute("data-content");
-					row.removeAttribute("data-content");
-
-					PluginHost.run(PluginHost.HOOK_ARTICLE_RENDERED_CDM, row);
-				}
+				Article.unpack(row);
 
 				if (row.hasClassName("Unread")) {
 
diff --git a/js/Headlines.js b/js/Headlines.js
index 4524f0556..8f267ac6f 100755
--- a/js/Headlines.js
+++ b/js/Headlines.js
@@ -228,12 +228,7 @@ define(["dojo/_base/declare"], function (declare) {
 				const row = rows[i];
 
 				if (row.offsetTop <= threshold) {
-					console.log("unpacking: " + row.id);
-
-					row.select(".content-inner")[0].innerHTML = row.getAttribute("data-content");
-					row.removeAttribute("data-content");
-
-					PluginHost.run(PluginHost.HOOK_ARTICLE_RENDERED_CDM, row);
+					Article.unpack(row);
 				} else {
 					break;
 				}
@@ -242,7 +237,34 @@ define(["dojo/_base/declare"], function (declare) {
 		objectById: function (id){
 			return this.headlines[id];
 		},
-		renderHeadline: function (headlines, hl) {
+		renderAgain: function() {
+			$$("#headlines-frame > div[id*=RROW]").each((row) => {
+				const id = row.getAttribute("data-article-id");
+				const selected = row.hasClassName("Selected");
+				const active = row.hasClassName("active");
+
+				if (this.headlines[id]) {
+					const new_row = this.render({}, this.headlines[id]);
+
+					row.parentNode.replaceChild(new_row, row);
+
+					if (active) {
+						new_row.addClassName("active");
+
+						if (App.isCombinedMode())
+							Article.cdmScrollToId(id);
+						else
+							Article.view(id);
+					}
+
+					if (selected) this.select("all", id);
+
+					Article.unpack(new_row);
+
+				}
+			});
+		},
+		render: function (headlines, hl) {
 			let row = null;
 
 			let row_class = "";
@@ -372,7 +394,7 @@ define(["dojo/_base/declare"], function (declare) {
 
 			PluginHost.run(PluginHost.HOOK_HEADLINE_RENDERED, tmp.firstChild);
 
-			$("headlines-frame").appendChild(tmp.firstChild);
+			return tmp.firstChild;
 		},
 		onLoaded: function (transport, offset) {
 			const reply = App.handleRpcJson(transport);
@@ -434,7 +456,9 @@ define(["dojo/_base/declare"], function (declare) {
 						for (let i = 0; i < reply['headlines']['content'].length; i++) {
 							const hl = reply['headlines']['content'][i];
 
-							this.renderHeadline(reply['headlines'], hl);
+							$("headlines-frame").appendChild(
+								this.render(reply['headlines'], hl));
+
 							this.headlines[parseInt(hl.id)] = hl;
 						}
 					}
@@ -503,7 +527,9 @@ define(["dojo/_base/declare"], function (declare) {
 						for (let i = 0; i < reply['headlines']['content'].length; i++) {
 							const hl = reply['headlines']['content'][i];
 
-							this.renderHeadline(reply['headlines'], hl);
+							$("headlines-frame").appendChild(
+								this.render(reply['headlines'], hl));
+
 							this.headlines[parseInt(hl.id)] = hl;
 						}
 					}
@@ -930,10 +956,12 @@ define(["dojo/_base/declare"], function (declare) {
 
 			this.updateSelectedPrompt();
 		},
-		select: function (mode) {
+		select: function (mode, articleId) {
 			// mode = all,none,unread,invert,marked,published
 			let query = "#headlines-frame > div[id*=RROW]";
 
+			if (articleId) query += "[data-article-id=" + articleId + "]";
+
 			switch (mode) {
 				case "none":
 				case "all":
diff --git a/js/tt-rss.js b/js/tt-rss.js
index 890e35b55..77ef71abe 100644
--- a/js/tt-rss.js
+++ b/js/tt-rss.js
@@ -444,8 +444,6 @@ require(["dojo/_base/kernel",
 						App.helpDialog("main");
 					};
 					this.hotkey_actions["toggle_combined_mode"] = function () {
-						Notify.progress("Loading, please wait...");
-
 						const value = App.isCombinedMode() ? "false" : "true";
 
 						xhrPost("backend.php", {op: "rpc", method: "setpref", key: "COMBINED_DISPLAY_MODE", value: value}, () => {
@@ -453,17 +451,15 @@ require(["dojo/_base/kernel",
 								!App.getInitParam("combined_display_mode"));
 
 							Article.close();
-							Feeds.reloadCurrent();
+							Headlines.renderAgain();
 						})
 					};
 					this.hotkey_actions["toggle_cdm_expanded"] = function () {
-						Notify.progress("Loading, please wait...");
-
 						const value = App.getInitParam("cdm_expanded") ? "false" : "true";
 
 						xhrPost("backend.php", {op: "rpc", method: "setpref", key: "CDM_EXPANDED", value: value}, () => {
 							App.setInitParam("cdm_expanded", !App.getInitParam("cdm_expanded"));
-							Feeds.reloadCurrent();
+							Headlines.renderAgain();
 						});
 					};
 					this.hotkey_actions["toggle_night_mode"] = function () {