* shorten_expanded: use promises instead of a timeout hack

 * normalize some icon colors

2 files changed, 65 insertions, 32 deletions

diff --git a/plugins/shorten_expanded/init.css b/plugins/shorten_expanded/init.css
index 0966aa1f9..e0a209903 100644
--- a/plugins/shorten_expanded/init.css
+++ b/plugins/shorten_expanded/init.css
@@ -1,7 +1,8 @@
 .content-shrink-wrap {
 	overflow : hidden;
 	text-overflow: ellipsis;
-	height : 800px;
+	height : 80vh;
+	margin-bottom : 8px;
 }
 
 .expand-prompt {
diff --git a/plugins/shorten_expanded/init.js b/plugins/shorten_expanded/init.js
index 0abc8c129..40bb80790 100644
--- a/plugins/shorten_expanded/init.js
+++ b/plugins/shorten_expanded/init.js
@@ -1,10 +1,68 @@
-/* global Plugins, __, require, PluginHost */
-
-const _shorten_expanded_threshold = 1.5; //window heights
+/* global Plugins, __, require, PluginHost, App, dojo */
 
 Plugins.Shorten_Expanded = {
+	threshold: 1.5, // of window height
+	shorten_if_needed: function(row) {
+
+		const content = row.querySelector(".content");
+		const content_inner = row.querySelector(".content-inner");
+
+		console.log('shorten_expanded', row.id, content.offsetHeight, 'vs', this.threshold * window.innerHeight);
+
+		if (content && content_inner && content.offsetHeight >= this.threshold * window.innerHeight) {
+
+			const attachments = row.querySelector(".attachments-inline"); // optional
+
+			content_inner.innerHTML = `
+				<div class="content-shrink-wrap">
+					${content_inner.innerHTML}
+					${attachments ? attachments.innerHTML : ''}
+				</div>
+				<button dojoType="dijit.form.Button" class="alt-info expand-prompt" onclick="return Plugins.Shorten_Expanded.expand('${row.id}')" href="#">
+					${App.FormFields.icon('add')}
+					${__("Expand article")}
+				</button>`;
+
+			if (attachments)
+				attachments.innerHTML = "";
+
+			dojo.parser.parse(content_inner);
+
+			return true;
+		}
+		return false;
+	},
+	process_row: function(row) {
+
+		if (this.shorten_if_needed(row))
+			return;
+
+		const promises = [];
+
+		[...row.querySelectorAll("img, video")].forEach((img) => {
+			const promise = new Promise((resolve, reject) => {
+				img.onload = () => resolve(img);
+				img.onloadeddata = () => resolve(img);
+				img.error = () => reject(new Error("unable to load video"));
+				img.onerror = () => reject(new Error("unable to load image"));
+			});
+
+			const timeout = new Promise((resolve, reject) => {
+				const id = setTimeout(() => {
+					clearTimeout(id);
+					reject(new Error("timed out"));
+				}, 250)
+			})
+
+			promises.push(Promise.race([promise, timeout]));
+		});
+
+		Promise.allSettled(promises).then(() => {
+			this.shorten_if_needed(row);
+		});
+	},
 	expand: function(id) {
-		const row = $(id);
+		const row = App.byId(id);
 
 		if (row) {
 			const content = row.querySelector(".content-shrink-wrap");
@@ -21,33 +79,7 @@ Plugins.Shorten_Expanded = {
 require(['dojo/_base/kernel', 'dojo/ready'], function  (dojo, ready) {
 	ready(function() {
 		PluginHost.register(PluginHost.HOOK_ARTICLE_RENDERED_CDM, function(row) {
-			window.setTimeout(function() {
-				if (row) {
-
-					const content = row.querySelector(".content-inner");
-
-					//console.log('shorten', row.offsetHeight, 'vs', _shorten_expanded_threshold * window.innerHeight);
-
-					if (content && row.offsetHeight >= _shorten_expanded_threshold * window.innerHeight) {
-
-						const attachments = row.querySelector(".attachments-inline"); // optional
-
-						content.innerHTML = `
-							<div class="content-shrink-wrap">
-								${content.innerHTML}
-								${attachments ? attachments.innerHTML : ''}
-							</div>
-							<button dojoType="dijit.form.Button" class="alt-info expand-prompt" onclick="return Plugins.Shorten_Expanded.expand('${row.id}')" href="#">
-								${__("Click to expand article")}</button>`;
-
-						if (attachments)
-							attachments.innerHTML = "";
-
-						dojo.parser.parse(content);
-					}
-				}
-			}, 150);
-
+			Plugins.Shorten_Expanded.process_row(row);
 			return true;
 		});
 	});