Merge pull request #1503 from thelounge/astorije/image-preview-history

Handle browser history when opening/closing image preview

client/js/lounge.js

@@ -315,7 +315,7 @@ $(function() {
 		const state = {};
 
 		if (self.hasClass("chan")) {
-			state.clickTarget = `.chan[data-id="${self.data("id")}"]`;
+			state.clickTarget = `#sidebar .chan[data-id="${self.data("id")}"]`;
 		} else {
 			state.clickTarget = `#footer button[data-target="${target}"]`;
 		}
@@ -598,8 +598,21 @@ $(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.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() {
+$("#chat").on("click", ".toggle-thumbnail", function(event, data = {}) {
 	const link = $(this);
 
-	openImageViewer(link);
+	// 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() {
 	return false;
 });
 
-imageViewer.on("click", function() {
+imageViewer.on("click", function(event, data = {}) {
-	closeImageViewer();
+	// 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) {
+function openImageViewer(link, {pushState = true} = {}) {
 	$(".previous-image").removeClass("previous-image");
 	$(".next-image").removeClass("next-image");
 
@@ -166,6 +170,15 @@ function openImageViewer(link) {
 	imageViewer
 		.off("transitionend")
 		.addClass("opened");
+
+	// History management
+	if (pushState) {
+		const clickTarget =
+			`#${link.closest(".msg").attr("id")} ` +
+			`a.toggle-thumbnail[href="${link.attr("href")}"] ` +
+			"img";
+		history.pushState({clickTarget}, null, null);
+	}
 }
 
 imageViewer.on("click", ".previous-image-btn", function() {
@@ -178,7 +191,7 @@ imageViewer.on("click", ".next-image-btn", function() {
 	return false;
 });
 
-function closeImageViewer() {
+function closeImageViewer({pushState = true} = {}) {
 	imageViewer
 		.removeClass("opened")
 		.one("transitionend", function() {
@@ -186,4 +199,12 @@ function closeImageViewer() {
 		});
 
 	input.focus();
+
+	// History management
+	if (pushState) {
+		const clickTarget =
+			"#sidebar " +
+			`.chan[data-id="${$("#sidebar .chan.active").data("id")}"]`;
+		history.pushState({clickTarget}, null, null);
+	}
 }