Code was reorginised. Added ability to navigate through directory list.
This commit is contained in:
parent
1021945108
commit
23737319d2
@ -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");
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user