From 470b37150395e712add9b786e6f131da323ad5ff Mon Sep 17 00:00:00 2001
From: "Alexander \"Arav\" Andreev" <me@arav.su>
Date: Sun, 8 Dec 2024 04:13:57 +0400
Subject: [PATCH] Updated main.js. A new feature was added that allows to move
 images and videos. But currently not working for videos.

---
 web/assets/js/main.js | 36 +++++++++++++++++++++++++++++++++---
 1 file changed, 33 insertions(+), 3 deletions(-)

diff --git a/web/assets/js/main.js b/web/assets/js/main.js
index f12ca61..21af4d9 100644
--- a/web/assets/js/main.js
+++ b/web/assets/js/main.js
@@ -58,10 +58,30 @@ function send_to_overlay(pathname, media_type_element) {
 	overlay_label.textContent = decodeURI(pathname.substr(pathname.lastIndexOf("/") + 1));
 
 	if (media_type_element !== "audio") {
+		offset_x = 0;
+		offset_y = 0;
+		translate_x = 0;
+		translate_y = 0;
 		media_element.addEventListener("wheel", e => {
 			e.preventDefault();
 			g_scale = Math.min(Math.max(0.25, g_scale + (e.deltaY * -0.001)), 4);
-			e.target.style.transform = `scale(${g_scale})`; });
+			media_element.style.transform = `translate(${translate_x}px, ${translate_y}px) scale(${g_scale})`;
+			});
+			
+		media_element.addEventListener("mousedown", e => {
+			if (e.buttons == 1)
+				e.preventDefault();
+			offset_x = e.offsetX;
+			offset_y = e.offsetY;
+		});
+		media_element.addEventListener("mousemove", e => {
+			if (e.buttons !== 1) return;
+			e.preventDefault();
+			translate_x = e.clientX - e.target.x - offset_x;
+			translate_y = e.clientY - e.target.y - offset_y;
+			media_element.style.transform = `translate(${translate_x}px, ${translate_y}px) scale(${g_scale})`;
+		});
+		
 	}
 	if (media_type_element !== "img") {
 		media_element.autoplay = media_element.controls = true;
@@ -130,11 +150,13 @@ window.addEventListener("keydown", e => {
 			case "Home": g_current_row = g_back_row; g_back_row.firstChild.firstChild.focus(); break;
 			case "End": g_current_row = g_last_row; g_last_row.firstChild.firstChild.focus(); break;
 			case "ArrowUp":
+			case "ArrowLeft":
 				e.preventDefault();
 				getSibling(false, true);
 				g_current_row.firstChild.firstChild.focus();
 				break;
 			case "ArrowDown":
+			case "ArrowRight":
 				e.preventDefault();
 				getSibling(true, true);
 				g_current_row.firstChild.firstChild.focus();
@@ -144,8 +166,16 @@ window.addEventListener("keydown", e => {
 	}
 
 	switch (e.code) {
-		case "ArrowLeft": b_prev.click(); break;
-		case "ArrowRight": b_next.click(); break;
+		case "ArrowUp":
+		case "ArrowLeft":
+			e.preventDefault();
+			b_prev.click();
+			break;
+		case "ArrowDown":
+		case "ArrowRight":
+			e.preventDefault();
+			b_next.click();
+			break;
 		case "Escape": overlay_close(); break;
 		case "Space":
 			e.preventDefault();