From dbabdd83dcadc2e481ea47ff874b69a033f31fb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Sun, 8 Apr 2018 01:04:25 -0400
Subject: [PATCH] Lighten the "More" button handler when checks are not
 necessary

---
 client/js/lounge.js        |  4 ++--
 client/js/renderPreview.js | 40 +++++++++++++++++++++++++-------------
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/client/js/lounge.js b/client/js/lounge.js
index be9d6fc9..bf35b900 100644
--- a/client/js/lounge.js
+++ b/client/js/lounge.js
@@ -254,8 +254,6 @@ $(function() {
 			if (!keepSidebarOpen && $(window).outerWidth() < utils.mobileViewportPixels) {
 				slideoutMenu.toggle(false);
 			}
-
-			utils.togglePreviewMoreButtonsIfNeeded();
 		}
 
 		const lastActive = $("#windows > .active");
@@ -281,6 +279,8 @@ $(function() {
 			.addClass("active")
 			.trigger("show");
 
+		utils.togglePreviewMoreButtonsIfNeeded();
+
 		let title = $(document.body).data("app-name");
 		const chanTitle = chan.attr("aria-label");
 
diff --git a/client/js/renderPreview.js b/client/js/renderPreview.js
index 9598bd58..47364883 100644
--- a/client/js/renderPreview.js
+++ b/client/js/renderPreview.js
@@ -72,32 +72,44 @@ function appendPreview(preview, msg, template) {
 	const moreBtn = previewContainer.find(".more");
 	const previewContent = previewContainer.find(".toggle-content");
 
+	// Depending on the size of the preview and the text within it, show or hide a
+	// "More" button that allows users to expand without having to open the link.
+	// Warning: Make sure to call this only on active channel, link previews only,
+	// expanded only.
 	const showMoreIfNeeded = () => {
-		// Only applies on previews:
-		if (channel.hasClass("active") && // in the current channel
-				previewContent.hasClass("show") // that are expanded
-		) {
-			const isVisible = moreBtn.is(":visible");
-			const shouldShow = previewContent[0].offsetWidth >= previewContainer[0].offsetWidth;
+		const isVisible = moreBtn.is(":visible");
+		const shouldShow = previewContent[0].offsetWidth >= previewContainer[0].offsetWidth;
 
-			if (!isVisible && shouldShow) {
-				moreBtn.show();
-			} else if (isVisible && !shouldShow) {
-				togglePreviewMore(moreBtn, false);
-				moreBtn.hide();
-			}
+		if (!isVisible && shouldShow) {
+			moreBtn.show();
+		} else if (isVisible && !shouldShow) {
+			togglePreviewMore(moreBtn, false);
+			moreBtn.hide();
 		}
 	};
 
+	// "More" button only applies on text previews
 	if (preview.type === "link") {
-		$(window).on("resize", debounce(showMoreIfNeeded, 150));
-		window.requestAnimationFrame(showMoreIfNeeded);
+		// On resize, only touch previews in the current channel that are expanded
+		$(window).on("resize", debounce(() => {
+			if (channel.hasClass("active") && previewContent.hasClass("show")) {
+				showMoreIfNeeded();
+			}
+		}, 150));
+
+		// This event is triggered when a side menu is opened/closed, or when the
+		// preview gets expanded/collapsed.
 		previewContent.on("showMoreIfNeeded",
 			() => window.requestAnimationFrame(showMoreIfNeeded)
 		);
 	}
 
 	if (activeChannelId === channelId) {
+		// If this preview is in active channel, hide "More" button if necessary
+		if (preview.type === "link") {
+			window.requestAnimationFrame(showMoreIfNeeded);
+		}
+
 		container.trigger("keepToBottom");
 	}
 }