diff --git a/client/js/renderPreview.js b/client/js/renderPreview.js index 626e0f83..79dd34f7 100644 --- a/client/js/renderPreview.js +++ b/client/js/renderPreview.js @@ -99,7 +99,7 @@ function handleImageInPreview(content, container) { const imageViewer = $("#image-viewer"); -$("#chat").on("click", ".toggle-thumbnail", function(event, data = {}) { +$("#windows").on("click", ".toggle-thumbnail", function(event, data = {}) { const link = $(this); // Passing `data`, specifically `data.pushState`, to not add the action to the @@ -158,7 +158,7 @@ function openImageViewer(link, {pushState = true} = {}) { imageViewer.html(templates.image_viewer({ image: link.find("img").attr("src"), link: link.attr("href"), - type: link.parent().hasClass("toggle-type-image") ? "image" : "link", + type: link.parent().hasClass("toggle-type-link") ? "link" : "image", hasPreviousImage: previousImage.length > 0, hasNextImage: nextImage.length > 0, })); @@ -171,10 +171,14 @@ function openImageViewer(link, {pushState = true} = {}) { // History management if (pushState) { - const clickTarget = - `#${link.closest(".msg").attr("id")} ` + - `a.toggle-thumbnail[href="${link.attr("href")}"] ` + - "img"; + let clickTarget = ""; + // Images can be in a message (channel URL previews) or not (window URL + // preview, e.g. changelog). This is sub-optimal and needs improvement to + // make image preview more generic and not specific for channel previews. + if (link.closest(".msg").length > 0) { + clickTarget = `#${link.closest(".msg").attr("id")} `; + } + clickTarget += `a.toggle-thumbnail[href="${link.attr("href")}"] img`; history.pushState({clickTarget}, null, null); } } diff --git a/client/js/socket-events/changelog.js b/client/js/socket-events/changelog.js index 9e08802c..34149fbf 100644 --- a/client/js/socket-events/changelog.js +++ b/client/js/socket-events/changelog.js @@ -21,8 +21,12 @@ function requestIfNeeded() { socket.on("changelog", function(data) { // 1. Release notes window for the current version $("#changelog").html(templates.windows.changelog(data.current)); + + const links = $("#changelog .changelog-text a"); // Make sure all links will open a new tab instead of exiting the application - $("#changelog .changelog-text a").attr("target", "_blank"); + links.attr("target", "_blank"); + // Add required metadata to image links, to support built-in image viewer + links.has("img").addClass("toggle-thumbnail"); // 2. Version checker visible in Help window let status;