diff --git a/web/assets/js/main.js b/web/assets/js/main.js index ce0b332..8993b26 100644 --- a/web/assets/js/main.js +++ b/web/assets/js/main.js @@ -24,13 +24,18 @@ let g_current_row = g_back_row; if (localStorage.getItem('audio_volume') == null) localStorage['audio_volume'] = 0.5; -function overlay_close() { + +function overlayClose() { overlay_content.firstChild.remove(); overlay.style.visibility = "hidden"; g_scale = 1; g_oc_offset = g_oc_translate = [0, 0]; } + +overlay.addEventListener("mouseup", e => { + if (e.target.tagName === "DIV" && e.button === 0) overlayClose(); }); + overlay_content.addEventListener("wheel", e => { e.preventDefault(); g_scale = Math.min(Math.max(0.25, g_scale + (e.deltaY * -0.001)), 4); @@ -38,9 +43,6 @@ overlay_content.addEventListener("wheel", e => { `translate(${g_oc_translate[0]}px, ${g_oc_translate[1]}px) scale(${g_scale})`; }); -overlay.addEventListener("mouseup", e => { - if (e.target.tagName === "DIV" && e.button === 0) overlay_close(); }); - overlay_content.addEventListener("mousedown", e => { if (e.buttons !== 1) return; e.preventDefault(); @@ -52,24 +54,12 @@ overlay_content.addEventListener("mousemove", e => { e.preventDefault(); g_oc_translate[0] = e.clientX - e.target.x - g_oc_offset[0]; g_oc_translate[1] = e.clientY - e.target.y - g_oc_offset[1]; - e.target.style.transform = `translate(${g_oc_translate[0]}px, ${g_oc_translate[1]}px) scale(${g_scale})`; -}); - -overlay_autoplay = document.getElementsByName("autoplay")[0]; - -if (localStorage.getItem('autoplay') == null) - localStorage['autoplay'] = overlay_autoplay.checked = false; - -overlay_autoplay.addEventListener("change", e => { - localStorage['autoplay'] = e.target.checked; - if (e.target.checked && overlay_content.firstChild !== undefined) - if (overlay_content.firstChild.tagName === "AUDIO" || overlay_content.firstChild.tagName === "VIDEO") - if (overlay_content.firstChild.ended) - b_next.click(); + e.target.style.transform = + `translate(${g_oc_translate[0]}px, ${g_oc_translate[1]}px) scale(${g_scale})`; }); -function determine_media_element(path) { +function determineMediaElement(path) { path = path.toLowerCase(); if (video_formats.some(ext => path.endsWith(ext))) return "video"; @@ -80,7 +70,7 @@ function determine_media_element(path) { return undefined; } -function send_to_overlay(pathname, media_type_element) { +function overlaySet(pathname, media_type_element) { if (media_type_element === undefined) return false; if (overlay_content.children.length != 0) { @@ -120,14 +110,15 @@ function getSibling(isNext = true, upDown = false) { return g_current_row; } + const [b_prev, b_next] = overlay.getElementsByTagName("button"); b_prev.addEventListener("click", e => { do { getSibling(false, false); } while (g_current_row.classList.contains("hidden") - || !send_to_overlay(g_current_row.firstChild.firstChild.pathname, - determine_media_element(g_current_row.firstChild.firstChild.pathname))); + || !overlaySet(g_current_row.firstChild.firstChild.pathname, + determineMediaElement(g_current_row.firstChild.firstChild.pathname))); g_current_row.firstChild.firstChild.focus(); e.preventDefault(); }); @@ -136,22 +127,38 @@ b_next.addEventListener("click", e => { do { getSibling(true, false); } while (g_current_row.classList.contains("hidden") - || !send_to_overlay(g_current_row.firstChild.firstChild.pathname, - determine_media_element(g_current_row.firstChild.firstChild.pathname))); + || !overlaySet(g_current_row.firstChild.firstChild.pathname, + determineMediaElement(g_current_row.firstChild.firstChild.pathname))); g_current_row.firstChild.firstChild.focus(); e.preventDefault(); }); + Array.from(g_tbody.children) .forEach(v => { if (v.lastChild.innerHTML === "DIR") return; v.firstChild.firstChild.addEventListener("click", e => { g_current_row = e.target.parentNode.parentNode; - if (send_to_overlay(e.target.pathname, determine_media_element(e.target.pathname))) + if (overlaySet(e.target.pathname, determineMediaElement(e.target.pathname))) e.preventDefault(); }); }); + +overlay_autoplay = document.getElementsByName("autoplay")[0]; + +if (localStorage.getItem('autoplay') == null) + localStorage['autoplay'] = overlay_autoplay.checked = false; + +overlay_autoplay.addEventListener("change", e => { + localStorage['autoplay'] = e.target.checked; + const media_element = overlay_content.firstChild + if (e.target.checked && media_element !== undefined) + if (media_element.tagName === "AUDIO" || media_element.tagName === "VIDEO") + if (media_element.ended) + b_next.click(); +}); + //// KEYBOARD HANDLING window.addEventListener("keydown", e => { @@ -190,7 +197,7 @@ window.addEventListener("keydown", e => { e.preventDefault(); b_next.click(); break; - case "Escape": overlay_close(); break; + case "Escape": overlayClose(); break; case "Space": e.preventDefault(); const el = overlay_content.firstChild; @@ -203,6 +210,7 @@ window.addEventListener("keydown", e => { document.getElementsByName("filter")[0].classList.remove("hidden"); + function filter(sub) { const table = g_tbody.children; for (let j = 0; j < table.length; ++j)