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; + } +}));