Use Mousetrap for image viewer shortcuts

thelounge · Sep 24, 2017 · 2c0fc67 · 2c0fc67
1 parent 77714ac
commit 2c0fc67
Showing 1 changed file with 7 additions and 15 deletions.
diff --git a/client/js/renderPreview.js b/client/js/renderPreview.js
@@ -5,6 +5,7 @@ const options = require("./options");
 const socket = require("./socket");
 const templates = require("../views");
 const input = $("#input");
+const Mousetrap = require("mousetrap");
 
 module.exports = renderPreview;
 
@@ -111,21 +112,12 @@ imageViewer.on("click", function(event, data = {}) {
 	closeImageViewer(data);
 });
 
-$(document).keydown(function(e) {
-	switch (e.keyCode ? e.keyCode : e.which) {
-	case 27: // Escape
-		closeImageViewer();
-		break;
-	case 37: // Left arrow
-		if (imageViewer.hasClass("opened")) {
-			imageViewer.find(".previous-image-btn").click();
-		}
-		break;
-	case 39: // Right arrow
-		if (imageViewer.hasClass("opened")) {
-			imageViewer.find(".next-image-btn").click();
-		}
-		break;
+Mousetrap.bind("esc", () => closeImageViewer());
+
+Mousetrap.bind(["left", "right"], (e, key) => {
+	if (imageViewer.hasClass("opened")) {
+		const direction = key === "left" ? "previous" : "next";
+		imageViewer.find(`.${direction}-image-btn`).click();
 	}
 });