147 lines
4.7 KiB
JavaScript
147 lines
4.7 KiB
JavaScript
//// OVERLAY FOR VIEWING MEDIA FILES
|
|
|
|
const video_formats = ["webm", "mp4"];
|
|
const audio_formats = ["mp3", "flac", "opus", "ogg", "m4a"];
|
|
const image_formats = ["jpg", "jpeg", "gif", "png", "bmp", "webp"];
|
|
|
|
const overlay = document.getElementById("overlay");
|
|
let g_scale = 1;
|
|
|
|
if (localStorage.getItem('audio_volume') == null)
|
|
localStorage['audio_volume'] = 0.5;
|
|
|
|
function mousescroll(e) {
|
|
e.preventDefault();
|
|
g_scale = Math.min(Math.max(0.25, g_scale + (e.deltaY * -0.001)), 4);
|
|
e.target.style.transform = `scale(${g_scale})`;
|
|
}
|
|
|
|
function onvolumechange(e) {
|
|
localStorage['audio_volume'] = e.target.volume;
|
|
}
|
|
|
|
const ext_filter = (ext, pathname) => pathname.toLowerCase().endsWith(ext);
|
|
|
|
function to_overlay(eltyp, pathname) {
|
|
const el = document.createElement(eltyp);
|
|
const el_label = document.createElement("span");
|
|
el_label.textContent = decodeURI(pathname.substr(pathname.lastIndexOf("/") + 1));
|
|
if (eltyp !== "audio") el.addEventListener('wheel', mousescroll);
|
|
if (eltyp !== "img") {
|
|
el.autoplay = el.controls = true;
|
|
el.addEventListener("volumechange", onvolumechange);
|
|
el.volume = localStorage['audio_volume'];
|
|
}
|
|
el.src = pathname;
|
|
overlay.appendChild(el);
|
|
overlay.appendChild(el_label);
|
|
overlay.style.visibility = "visible";
|
|
}
|
|
|
|
document.getElementById("overlay").addEventListener("click", e => {
|
|
e.target.firstChild.remove();
|
|
e.target.firstChild.remove();
|
|
e.target.style.visibility = "hidden";
|
|
g_scale = 1;
|
|
});
|
|
|
|
const file_links = Array.from(document.getElementsByTagName('tr')).slice(2)
|
|
.filter(e => e.lastChild.innerHTML != "DIR").map(l => l.firstChild.firstChild);
|
|
|
|
file_links.forEach(f => f.addEventListener('click', e => {
|
|
const pathname = e.target.pathname;
|
|
if (video_formats.some(ext => ext_filter(ext, pathname)))
|
|
to_overlay("video", pathname);
|
|
else if (audio_formats.some(ext => ext_filter(ext, pathname)))
|
|
to_overlay("audio", pathname);
|
|
else if (image_formats.some(ext => ext_filter(ext, pathname)))
|
|
to_overlay("img", pathname);
|
|
if (overlay.firstChild != null)
|
|
e.preventDefault();
|
|
}));
|
|
|
|
//// SORT BY COLUMN
|
|
|
|
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;
|
|
|
|
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]);
|
|
});
|
|
|
|
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]);
|
|
});
|
|
|
|
const units = {"B": 0, "KiB": 1, "MiB": 2, "GiB": 3, "TiB": 4};
|
|
|
|
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]);
|
|
});
|
|
|
|
function sortTable(compareFn, filterFn, filterNegFn, target, other) {
|
|
let records = Array.from(document.getElementsByTagName('tbody')[0].children);
|
|
|
|
let dirs = [];
|
|
if (filterFn != null) {
|
|
dirs = records.filter(filterFn);
|
|
records = records.filter(filterNegFn);
|
|
}
|
|
|
|
records.sort(compareFn);
|
|
|
|
tbody.textContent = "";
|
|
|
|
other.forEach(v => {
|
|
v.classList.remove("sort-up");
|
|
v.classList.remove("sort-down");
|
|
});
|
|
|
|
if (filterFn != null)
|
|
tbody.append(...dirs);
|
|
|
|
if (g_sort_reverse) {
|
|
tbody.append(...records.reverse());
|
|
target.classList.add("sort-up");
|
|
target.classList.remove("sort-down");
|
|
} else {
|
|
tbody.append(...records);
|
|
target.classList.add("sort-down");
|
|
target.classList.remove("sort-up");
|
|
}
|
|
|
|
g_sort_reverse = !g_sort_reverse;
|
|
} |