From a3816d6c25b0398da5694d72fa25db2fb56aa9fd Mon Sep 17 00:00:00 2001
From: "Alexander \"Arav\" Andreev" <me@arav.top>
Date: Thu, 9 Sep 2021 20:35:40 +0400
Subject: [PATCH] Added image handling. Scaling. Auto-exec function removed for
 it is not necessary.

---
 files/static/assets/js/main.js | 69 +++++++++++++++++++++-------------
 1 file changed, 43 insertions(+), 26 deletions(-)

diff --git a/files/static/assets/js/main.js b/files/static/assets/js/main.js
index a38a586..356b60a 100644
--- a/files/static/assets/js/main.js
+++ b/files/static/assets/js/main.js
@@ -1,32 +1,49 @@
 const video_formats = ["webm", "mp4"];
 const audio_formats = ["mp3", "flac", "opus", "ogg", "m4a"];
+const image_formats = ["jpg", "jpeg", "gif", "png", "bmp", "webp"];
+const view_display_style = "flex";
 
-(() => {
-    document.getElementById("view").addEventListener("click", e => {
-        e.target.firstChild.remove();
-        e.target.style.display = "none";
-    });
+let scale = 1;
 
-    const file_links = Array.from(document.getElementsByTagName('tr')).slice(2).filter((e) => e.lastChild.innerHTML != "DIR").map(v => v.firstChild.firstChild);
+function mousescroll(e) {
+    e.preventDefault();
+    scale += e.deltaY * -0.001;
+    scale = Math.min(Math.max(0.25, scale), 4);
+    e.target.style.transform = `scale(${scale})`;
+}
 
-    file_links.forEach(f => f.addEventListener('click', e => {
-        if (video_formats.some(ext => e.target.pathname.endsWith(ext))) {
-            e.preventDefault();
-            const video = document.createElement("video");
-            video.autoplay = true;
-            video.controls = true;
-            video.src = e.target.pathname;
-            document.getElementById("view").appendChild(video);
-            document.getElementById("view").style.display = "flex";
-        } else if (audio_formats.some(ext => e.target.pathname.endsWith(ext))) {
-            e.preventDefault();
-            const audio = document.createElement("audio");
-            audio.autoplay = true;
-            audio.controls = true;
-            audio.src = e.target.pathname;
-            document.getElementById("view").appendChild(audio);
-            document.getElementById("view").style.display = "flex";
-        }
-    }));
-})();
+document.getElementById("view").addEventListener("click", e => {
+    e.target.firstChild.remove();
+    e.target.style.display = "none";
+});
+
+const file_links = Array.from(document.getElementsByTagName('tr')).slice(2).filter((e) => e.lastChild.innerHTML != "DIR").map(v => v.firstChild.firstChild);
+
+file_links.forEach(f => f.addEventListener('click', e => {
+    if (video_formats.some(ext => e.target.pathname.endsWith(ext))) {
+        e.preventDefault();
+        const video = document.createElement("video");
+        video.addEventListener('wheel', mousescroll);
+        video.autoplay = true;
+        video.controls = true;
+        video.src = e.target.pathname;
+        document.getElementById("view").appendChild(video);
+        document.getElementById("view").style.display = view_display_style;
+    } else if (audio_formats.some(ext => e.target.pathname.endsWith(ext))) {
+        e.preventDefault();
+        const audio = document.createElement("audio");
+        audio.autoplay = true;
+        audio.controls = true;
+        audio.src = e.target.pathname;
+        document.getElementById("view").appendChild(audio);
+        document.getElementById("view").style.display = view_display_style;
+    } else if (image_formats.some(ext => e.target.pathname.endsWith(ext))) {
+        e.preventDefault();
+        const image = document.createElement("img");
+        image.addEventListener('wheel', mousescroll);
+        image.src = e.target.pathname;
+        document.getElementById("view").appendChild(image);
+        document.getElementById("view").style.display = view_display_style;
+    }
+}));