Squash me when ready

client/js/lounge.js

@@ -336,8 +336,6 @@ $(function() {
 			state.clickTarget = `#footer button[data-target="${target}"]`;
 		}
 
-		state.clickTarget += ", #image-viewer";
-
 		if (history && history.pushState) {
 			if (data && data.replaceHistory && history.replaceState) {
 				history.replaceState(state, null, null);
@@ -809,8 +807,23 @@ $(function() {
 			return;
 		}
 
-		const {clickTarget} = state;
+		let {clickTarget} = state;
+
 		if (clickTarget) {
+			// This will be true when click target corresponds to opening a thumbnail,
+			// browsing to the previous/next thumbnail, or closing the image viewer.
+			const imageViewerRelated =
+				clickTarget === "#image-viewer" ||
+				clickTarget.includes(".toggle-thumbnail");
+
+			// If the click target is not related to the image viewer but the viewer
+			// is currently opened, we need to close it.
+			if (!imageViewerRelated && $("#image-viewer").hasClass("opened")) {
+				clickTarget += ", #image-viewer";
+			}
+
+			// Emit the click to the target, while making sure it is not going to be
+			// added to the state again.
 			$(clickTarget).trigger("click", {
 				pushState: false
 			});

client/js/renderPreview.js

@@ -92,10 +92,12 @@ function handleImageInPreview(content, container) {
 
 const imageViewer = $("#image-viewer");
 
-$("#chat").on("click", ".toggle-thumbnail", function(event, data) {
+$("#chat").on("click", ".toggle-thumbnail", function(event, data = {}) {
 	const link = $(this);
 
-	openImageViewer(link, {pushState: !data || data.pushState !== false});
+	// Passing `data`, specifically `data.pushState`, to not add the action to the
+	// history state if back or forward buttons were pressed.
+	openImageViewer(link, data);
 
 	// Prevent the link to open a new page since we're opening the image viewer,
 	// but keep it a link to allow for Ctrl/Cmd+click.
@@ -103,8 +105,10 @@ $("#chat").on("click", ".toggle-thumbnail", function(event, data) {
 	return false;
 });
 
-imageViewer.on("click", function(event, data) {
+imageViewer.on("click", function(event, data = {}) {
-	closeImageViewer({pushState: !data || data.pushState !== false});
+	// Passing `data`, specifically `data.pushState`, to not add the action to the
+	// history state if back or forward buttons were pressed.
+	closeImageViewer(data);
 });
 
 $(document).keydown(function(e) {
@@ -125,7 +129,7 @@ $(document).keydown(function(e) {
 	}
 });
 
-function openImageViewer(link, {pushState = true}) {
+function openImageViewer(link, {pushState = true} = {}) {
 	$(".previous-image").removeClass("previous-image");
 	$(".next-image").removeClass("next-image");
 
@@ -171,9 +175,9 @@ function openImageViewer(link, {pushState = true}) {
 	if (pushState) {
 		const clickTarget =
 			`#${link.closest(".msg").attr("id")} ` +
-			`a[href="${link.attr("href")}"] ` +
+			`a.toggle-thumbnail[href="${link.attr("href")}"] ` +
 			"img";
-		history.pushState({clickTarget: clickTarget}, null, null);
+		history.pushState({clickTarget}, null, null);
 	}
 }
 
@@ -187,7 +191,7 @@ imageViewer.on("click", ".next-image-btn", function() {
 	return false;
 });
 
-function closeImageViewer({pushState = true}) {
+function closeImageViewer({pushState = true} = {}) {
 	imageViewer
 		.removeClass("opened")
 		.one("transitionend", function() {