Merge pull request #1365 from thelounge/astorije/image-viewer-previous-next

Add Previous/Next cycling buttons to the image viewer

client/css/style.css

@@ -209,7 +209,9 @@ kbd {
 #chat .action .from:before,
 #chat .toggle-button:after,
 .context-menu-item:before,
-#nick button:before {
+#nick button:before,
+#image-viewer .previous-image-btn:before,
+#image-viewer .next-image-btn:before {
 	font: normal normal normal 14px/1 FontAwesome;
 	font-size: inherit; /* Can't have font-size inherit on line above, so need to override */
 	-webkit-font-smoothing: antialiased;
@@ -332,6 +334,14 @@ kbd {
 	content: "\f00d"; /* http://fontawesome.io/icon/times/ */
 }
 
+#image-viewer .previous-image-btn:before {
+	content: "\f104"; /* http://fontawesome.io/icon/angle-left/ */
+}
+
+#image-viewer .next-image-btn:before {
+	content: "\f105"; /* http://fontawesome.io/icon/angle-right/ */
+}
+
 /* End icons */
 
 #wrap {
@@ -2051,20 +2061,45 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	opacity: 1;
 }
 
-#image-viewer .close-btn {
+#image-viewer .close-btn,
+#image-viewer .previous-image-btn,
+#image-viewer .next-image-btn {
 	position: fixed;
 	top: 0;
-	right: 0;
 	width: 2em;
-	height: 2em;
 	font-size: 36px;
 	color: white;
-	z-index: 1001;
 	opacity: .6;
 	transition: .2s opacity;
 }
 
-#image-viewer .close-btn:hover {
+#image-viewer .close-btn {
+	right: 0;
+	height: 2em;
+	z-index: 1002;
+}
+
+#image-viewer .close-btn:before {
+	content: "×";
+}
+
+#image-viewer .previous-image-btn,
+#image-viewer .next-image-btn {
+	bottom: 0;
+	z-index: 1001;
+}
+
+#image-viewer .previous-image-btn {
+	left: 0;
+}
+
+#image-viewer .next-image-btn {
+	right: 0;
+}
+
+#image-viewer .close-btn:hover,
+#image-viewer .previous-image-btn:hover,
+#image-viewer .next-image-btn:hover {
 	opacity: 1;
 }
 

client/js/renderPreview.js

@@ -100,19 +100,68 @@ $(document).keydown(function(e) {
 	case 27: // Escape
 		closeImageViewer();
 		break;
+	case 37: // Left arrow
+		if ($(document.body).hasClass("image-viewer-opened")) {
+			$("#image-viewer .previous-image-btn").click();
+		}
+		break;
+	case 39: // Right arrow
+		if ($(document.body).hasClass("image-viewer-opened")) {
+			$("#image-viewer .next-image-btn").click();
+		}
+		break;
 	}
 });
 
 function openImageViewer(link) {
+	$(".previous-image").removeClass("previous-image");
+	$(".next-image").removeClass("next-image");
+
+	// The next two blocks figure out what are the previous/next images. We first
+	// look within the same message, as there can be multiple thumbnails per
+	// message, and if not, we look at previous/next messages and take the
+	// last/first thumbnail available.
+	// Only expanded thumbnails are being cycled through.
+
+	// Previous image
+	let previousCandidates = link.closest(".preview").prev(".preview");
+	if (!previousCandidates.length) {
+		previousCandidates = link.closest(".msg").prevAll();
+	}
+	const previousImage = previousCandidates
+		.find(".toggle-content.show .toggle-thumbnail").last();
+	previousImage.addClass("previous-image");
+
+	// Next image
+	let nextCandidates = link.closest(".preview").next(".preview");
+	if (!nextCandidates.length) {
+		nextCandidates = link.closest(".msg").nextAll();
+	}
+	const nextImage = nextCandidates
+		.find(".toggle-content.show .toggle-thumbnail").first();
+	nextImage.addClass("next-image");
+
 	$("#image-viewer").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-image") ? "image" : "link",
+		hasPreviousImage: previousImage.length > 0,
+		hasNextImage: nextImage.length > 0,
 	}));
 
 	$(document.body).addClass("image-viewer-opened");
 }
 
+$("#image-viewer").on("click", ".previous-image-btn", function() {
+	$(".previous-image").click();
+	return false;
+});
+
+$("#image-viewer").on("click", ".next-image-btn", function() {
+	$(".next-image").click();
+	return false;
+});
+
 function closeImageViewer() {
 	$(document.body)
 		.removeClass("image-viewer-opened")

client/views/image_viewer.tpl

@@ -1,7 +1,15 @@
-<button class="close-btn" aria-label="Close">×</button>
+<button class="close-btn" aria-label="Close"></button>
+
+{{#if hasPreviousImage}}
+  <button class="previous-image-btn" aria-label="Previous image"></button>
+{{/if}}
+
+{{#if hasNextImage}}
+  <button class="next-image-btn" aria-label="Next image"></button>
+{{/if}}
 
 <a class="image-link" href="{{link}}" target="_blank">
-  <img src="{{image}}">
+  <img src="{{image}}" alt="Preview of {{link}}">
 </a>
 
 <a class="btn open-btn" href="{{link}}" target="_blank">