310 lines
8.9 KiB
JavaScript
310 lines
8.9 KiB
JavaScript
document.getElementById("instruction").classList.remove("hidden");
|
|
|
|
//// OVERLAY FOR VIEWING MEDIA FILES
|
|
|
|
const overlay = document.getElementById("overlay");
|
|
const overlay_content = overlay.children[1];
|
|
const overlay_label = overlay.children[2];
|
|
|
|
const g_tbody = document.getElementsByTagName('tbody')[0];
|
|
let g_first_row = g_tbody.firstChild;
|
|
let g_last_row = g_tbody.lastChild;
|
|
const g_back_row = document.getElementsByTagName("tr")[1];
|
|
|
|
let g_scale = 1;
|
|
let g_oc_offset = [0, 0];
|
|
let g_oc_translate = [0, 0];
|
|
let g_current_row = g_back_row;
|
|
|
|
|
|
if (localStorage.getItem('audio_volume') == null)
|
|
localStorage['audio_volume'] = 0.5;
|
|
|
|
|
|
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);
|
|
e.target.style.transform =
|
|
`translate(${g_oc_translate[0]}px, ${g_oc_translate[1]}px) scale(${g_scale})`;
|
|
});
|
|
|
|
overlay_content.addEventListener("mousedown", e => {
|
|
if (e.buttons !== 1) return;
|
|
e.preventDefault();
|
|
g_oc_offset = [e.offsetX, e.offsetY];
|
|
});
|
|
|
|
overlay_content.addEventListener("mousemove", e => {
|
|
if (e.buttons !== 1) return;
|
|
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})`;
|
|
});
|
|
|
|
|
|
function determineMediaElement(path) {
|
|
path = path.toLowerCase();
|
|
if (["webm", "mp4", "mov"].some(ext => path.endsWith(ext)))
|
|
return "video";
|
|
else if (["mp3", "flac", "opus", "ogg", "m4a"].some(ext => path.endsWith(ext)))
|
|
return "audio";
|
|
else if (["jpg", "jpeg", "gif", "png", "bmp", "webp"].some(ext => path.endsWith(ext)))
|
|
return "img";
|
|
return undefined;
|
|
}
|
|
|
|
function overlaySet(pathname, media_type_element) {
|
|
if (media_type_element === undefined)
|
|
return false;
|
|
if (overlay_content.children.length != 0) {
|
|
g_oc_offset = g_oc_translate = [0, 0];
|
|
g_scale = 1;
|
|
}
|
|
|
|
const media_element = document.createElement(media_type_element);
|
|
media_element.src = pathname;
|
|
|
|
if (media_type_element !== "img") {
|
|
media_element.autoplay = media_element.controls = true;
|
|
media_element.addEventListener("volumechange", e => {
|
|
localStorage['audio_volume'] = e.target.volume; });
|
|
media_element.volume = localStorage["audio_volume"];
|
|
media_element.addEventListener("ended", e => { if (overlay_autoplay.checked) b_next.click(); });
|
|
}
|
|
|
|
overlay_label.textContent = decodeURI(pathname.substr(pathname.lastIndexOf("/") + 1));
|
|
|
|
overlay_content.replaceChildren(media_element);
|
|
|
|
overlay.style.visibility = "visible";
|
|
|
|
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 {
|
|
getSibling(false, false);
|
|
} while (g_current_row.classList.contains("hidden")
|
|
|| !overlaySet(g_current_row.firstChild.firstChild.pathname,
|
|
determineMediaElement(g_current_row.firstChild.firstChild.pathname)));
|
|
g_current_row.firstChild.firstChild.focus();
|
|
e.preventDefault();
|
|
});
|
|
|
|
b_next.addEventListener("click", e => {
|
|
do {
|
|
getSibling(true, false);
|
|
} while (g_current_row.classList.contains("hidden")
|
|
|| !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 (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;
|
|
else
|
|
overlay_autoplay.checked = localStorage['autoplay'];
|
|
|
|
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 => {
|
|
if (e.isComposing)
|
|
return;
|
|
|
|
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":
|
|
case "ArrowLeft":
|
|
e.preventDefault();
|
|
getSibling(false, true);
|
|
g_current_row.firstChild.firstChild.focus();
|
|
break;
|
|
case "ArrowDown":
|
|
case "ArrowRight":
|
|
e.preventDefault();
|
|
getSibling(true, true);
|
|
g_current_row.firstChild.firstChild.focus();
|
|
break;
|
|
}
|
|
return;
|
|
}
|
|
|
|
switch (e.code) {
|
|
case "ArrowUp":
|
|
case "ArrowLeft":
|
|
e.preventDefault();
|
|
b_prev.click();
|
|
break;
|
|
case "ArrowDown":
|
|
case "ArrowRight":
|
|
e.preventDefault();
|
|
b_next.click();
|
|
break;
|
|
case "Escape": overlayClose(); break;
|
|
case "Space":
|
|
e.preventDefault();
|
|
const el = overlay_content.firstChild;
|
|
if (el.paused !== undefined)
|
|
el.paused ? el.play() : el.pause();
|
|
}
|
|
});
|
|
|
|
//// FILTERING
|
|
|
|
|
|
document.getElementsByName("filter")[0].classList.remove("hidden");
|
|
|
|
function filter(sub) {
|
|
const table = g_tbody.children;
|
|
for (let j = 0; j < table.length; ++j)
|
|
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;
|
|
|
|
let g_sort_reverse = false;
|
|
|
|
thead_name.classList.toggle("clickable");
|
|
thead_name.addEventListener('click', e => {
|
|
e.preventDefault();
|
|
sortTable((a,b) => {
|
|
const a_name = a.children[0].textContent.toLowerCase();
|
|
const b_name = b.children[0].textContent.toLowerCase();
|
|
return a_name < b_name ? -1 : a_name > b_name ? 1 : 0;
|
|
}, null, null, thead_name, [thead_date, thead_size]);
|
|
g_first_row = g_tbody.firstChild;
|
|
g_last_row = g_tbody.lastChild;
|
|
});
|
|
|
|
thead_date.classList.toggle("clickable");
|
|
thead_date.addEventListener('click', e => {
|
|
e.preventDefault();
|
|
sortTable((a,b) => {
|
|
const a_date = new Date(a.children[1].textContent.slice(0, -4));
|
|
const b_date = new Date(b.children[1].textContent.slice(0, -4));
|
|
return a_date - b_date;
|
|
}, null, null, thead_date, [thead_name, thead_size]);
|
|
g_first_row = g_tbody.firstChild;
|
|
g_last_row = g_tbody.lastChild;
|
|
});
|
|
|
|
|
|
function sizeToBytes(size, unit) {
|
|
if (units[unit] == 0) return size;
|
|
for (let i = 0; i <= units[unit]; ++i) size *= 1024;
|
|
return size;
|
|
}
|
|
|
|
thead_size.classList.toggle("clickable");
|
|
thead_size.addEventListener('click', e => {
|
|
e.preventDefault();
|
|
sortTable(
|
|
(a,b) => {
|
|
if (a.textContent == "DIR")
|
|
return 1;
|
|
let [a_size, a_unit] = a.children[2].textContent.split(" ");
|
|
let [b_size, b_unit] = b.children[2].textContent.split(" ");
|
|
return sizeToBytes(+a_size, a_unit) - sizeToBytes(+b_size, b_unit);
|
|
},
|
|
e => e.children[2].textContent == "DIR",
|
|
e => e.children[2].textContent != "DIR",
|
|
thead_size, [thead_name, thead_date]);
|
|
g_first_row = g_tbody.firstChild;
|
|
g_last_row = g_tbody.lastChild;
|
|
});
|
|
|
|
function sortTable(compareFn, filterFn, filterNegFn, target, other) {
|
|
let records = Array.from(g_tbody.children);
|
|
|
|
let dirs = [];
|
|
if (filterFn != null) {
|
|
dirs = records.filter(filterFn);
|
|
records = records.filter(filterNegFn);
|
|
}
|
|
|
|
records.sort(compareFn);
|
|
|
|
g_tbody.textContent = "";
|
|
|
|
other.forEach(v => {
|
|
v.classList.remove("sort-up");
|
|
v.classList.remove("sort-down");
|
|
});
|
|
|
|
if (filterFn != null)
|
|
g_tbody.append(...dirs);
|
|
|
|
if (g_sort_reverse) {
|
|
g_tbody.append(...records.reverse());
|
|
target.classList.add("sort-up");
|
|
target.classList.remove("sort-down");
|
|
} else {
|
|
g_tbody.append(...records);
|
|
target.classList.add("sort-down");
|
|
target.classList.remove("sort-up");
|
|
}
|
|
|
|
g_sort_reverse = !g_sort_reverse;
|
|
} |