From 23737319d2f01776a56d1376bd6dccf902559d17 Mon Sep 17 00:00:00 2001 From: "Alexander \"Arav\" Andreev" Date: Mon, 31 Oct 2022 01:39:55 +0400 Subject: [PATCH] Code was reorginised. Added ability to navigate through directory list. --- web/assets/js/main.js | 100 ++++++++++++++++++++++++++++-------------- 1 file changed, 66 insertions(+), 34 deletions(-) diff --git a/web/assets/js/main.js b/web/assets/js/main.js index 226588b..91b47f9 100644 --- a/web/assets/js/main.js +++ b/web/assets/js/main.js @@ -8,14 +8,16 @@ const overlay = document.getElementById("overlay"); const overlay_content = overlay.children[1].firstChild; const overlay_label = overlay.children[1].lastChild; +const g_tbody = document.getElementsByTagName('tbody')[0]; +const g_first_row = g_tbody.firstChild; +const g_last_row = g_tbody.lastChild; +const g_back_row = document.getElementsByTagName("tr")[1]; + let g_scale = 1; - -let g_current_row = null; -const g_first_row = document.getElementsByTagName("tbody")[0].firstChild; -const g_last_row = document.getElementsByTagName("tbody")[0].lastChild; +let g_current_row = g_back_row; -const file_links = Array.from(document.getElementsByTagName("tbody")[0].children) +const file_links = Array.from(g_tbody.children) .filter(e => e.lastChild.innerHTML != "DIR").map(l => l.firstChild.firstChild); @@ -74,42 +76,73 @@ function send_to_overlay(pathname, media_type_element) { return true; } +function getSibling(isNext = true, upDown = false) { + if (upDown && g_current_row == g_back_row) + g_current_row = isNext ? g_first_row : g_last_row; + else + g_current_row = isNext ? + ( (g_current_row.nextSibling === null) ? + (upDown ? g_back_row : g_first_row) : g_current_row.nextSibling ) + : ( (g_current_row.previousSibling === null) ? + (upDown ? g_back_row : g_last_row) : g_current_row.previousSibling ); + return g_current_row; +} const [b_prev, b_next] = overlay.getElementsByTagName("button"); b_prev.addEventListener("click", e => { do { - if (g_current_row.previousSibling === null) - g_current_row = g_last_row; - else - g_current_row = g_current_row.previousSibling; + 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))); + g_current_row.firstChild.firstChild.focus(); e.preventDefault(); }); -b_next.addEventListener("click", () => { +b_next.addEventListener("click", e => { do { - if (g_current_row.nextSibling === null) - g_current_row = g_first_row; - else - g_current_row = g_current_row.nextSibling; - + 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))); + g_current_row.firstChild.firstChild.focus(); + e.preventDefault(); }); window.addEventListener("keydown", e => { - if (overlay.style.visibility === "hidden" || e.isComposing) + if (e.isComposing) return; - if (e.code === "ArrowLeft") - b_prev.click(); - else if (e.code === "ArrowRight") - b_next.click(); - else if (e.code === "Escape") - overlay_close(); + + if (overlay.style.visibility === "hidden" || overlay.style.visibility === "") { + switch (e.code) { + case "Backspace": if (e.ctrlKey) window.location = "../"; break; + 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": + e.preventDefault(); + getSibling(false, true); + g_current_row.firstChild.firstChild.focus(); + break; + case "ArrowDown": + e.preventDefault(); + getSibling(true, true); + g_current_row.firstChild.firstChild.focus(); + break; + } + return; + } + + switch (e.code) { + case "ArrowLeft": b_prev.click(); break; + case "ArrowRight": b_next.click(); break; + case "Escape": overlay_close(); break; + case "Space": + e.preventDefault(); + const el = overlay_content.firstChild; + if (el.paused !== undefined) + el.paused ? el.play() : el.pause(); + } }); @@ -122,22 +155,22 @@ for (let i = 0; i < file_links.length; ++i) //// FILTERING + +document.getElementsByName("filter")[0].classList.remove("hidden"); function filter(sub) { - const table = document.getElementsByTagName("tbody")[0].children + const table = g_tbody.children; for (let j = 0; j < table.length; ++j) - if (sub === "" || table[j].children[0].children[0].innerText.toLowerCase().indexOf(sub) != -1) - table[j].classList.remove("hidden"); - else - table[j].classList.add("hidden"); + table[j].classList.toggle("hidden", + !(sub === "" || table[j].firstChild.firstChild.innerText.toLowerCase().indexOf(sub) != -1)); } document.getElementsByName("filter")[0].addEventListener("input", e => filter(e.target.value.toLowerCase())); //// SORT BY COLUMN +const units = {"B": 0, "KiB": 1, "MiB": 2, "GiB": 3, "TiB": 4}; const [thead_name, thead_date, thead_size] = document.getElementsByTagName('thead')[0] .children[0].children; -const tbody = document.getElementsByTagName('tbody')[0]; let g_sort_reverse = false; @@ -161,7 +194,6 @@ thead_date.addEventListener('click', e => { }, null, null, thead_date, [thead_name, thead_size]); }); -const units = {"B": 0, "KiB": 1, "MiB": 2, "GiB": 3, "TiB": 4}; function sizeToBytes(size, unit) { if (units[unit] == 0) return size; @@ -186,7 +218,7 @@ thead_size.addEventListener('click', e => { }); function sortTable(compareFn, filterFn, filterNegFn, target, other) { - let records = Array.from(document.getElementsByTagName('tbody')[0].children); + let records = Array.from(g_tbody.children); let dirs = []; if (filterFn != null) { @@ -196,7 +228,7 @@ function sortTable(compareFn, filterFn, filterNegFn, target, other) { records.sort(compareFn); - tbody.textContent = ""; + g_tbody.textContent = ""; other.forEach(v => { v.classList.remove("sort-up"); @@ -204,14 +236,14 @@ function sortTable(compareFn, filterFn, filterNegFn, target, other) { }); if (filterFn != null) - tbody.append(...dirs); + g_tbody.append(...dirs); if (g_sort_reverse) { - tbody.append(...records.reverse()); + g_tbody.append(...records.reverse()); target.classList.add("sort-up"); target.classList.remove("sort-down"); } else { - tbody.append(...records); + g_tbody.append(...records); target.classList.add("sort-down"); target.classList.remove("sort-up"); }