3 files changed, 52 insertions, 48 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..85d75d313 100644
--- a/plugins/shorten_expanded/init.js
+++ b/plugins/shorten_expanded/init.js
@@ -1,10 +1,55 @@
-/* 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
+	observer: new ResizeObserver((entries) => {
+		entries.forEach((entry) => {
+			const row = entry.target;
+
+			Plugins.Shorten_Expanded.shorten_if_needed(row);
+		});
+	}),
+	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 && !row.hasAttribute('data-already-shortened') && content.offsetHeight >= this.threshold * window.innerHeight) {
+
+			row.setAttribute('data-already-shortened', true);
+
+			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;
+
+		this.observer.observe(row);
+	},
 	expand: function(id) {
-		const row = $(id);
+		const row = App.byId(id);
 
 		if (row) {
 			const content = row.querySelector(".content-shrink-wrap");
@@ -21,33 +66,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;
 		});
 	});
diff --git a/plugins/shorten_expanded/init.php b/plugins/shorten_expanded/init.php
index 9673f581b..c097f1a0d 100644
--- a/plugins/shorten_expanded/init.php
+++ b/plugins/shorten_expanded/init.php
@@ -10,22 +10,6 @@ class Shorten_Expanded extends Plugin {
 
 	function init($host) {
 		$this->host = $host;
-
-		$host->add_hook($host::HOOK_SANITIZE, $this);
-	}
-
-	// native lazy loading messes with plugin height calculation because images get loaded
-	// after headline is actually rendered (off screen) so we force disable it
-	function hook_sanitize($doc) {
-		$xpath = new DOMXPath($doc);
-
-		$entries = $xpath->query('(//*[@loading="lazy"])');
-
-		foreach ($entries as $entry) {
-			$entry->removeAttribute("loading");
-		}
-
-		return $doc;
 	}
 
 	function get_css() {