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"); } }