1
0
dwelling-files/web/assets/js/main.js

204 lines
5.9 KiB
JavaScript
Raw Normal View History

//// OVERLAY FOR VIEWING MEDIA FILES
2022-07-25 21:10:35 +04:00
const video_formats = ["webm", "mp4", "mov"];
2022-06-27 23:44:53 +04:00
const audio_formats = ["mp3", "flac", "opus", "ogg", "m4a"];
const image_formats = ["jpg", "jpeg", "gif", "png", "bmp", "webp"];
const overlay = document.getElementById("overlay");
const overlay_content = overlay.children[1].firstChild;
const overlay_label = overlay.children[1].lastChild;
let g_scale = 1;
2022-06-27 23:44:53 +04:00
let g_current_row = null;
const g_first_row = document.getElementsByTagName("tbody")[0].firstChild;
const g_last_row = document.getElementsByTagName("tbody")[0].lastChild;
const file_links = Array.from(document.getElementsByTagName("tbody")[0].children)
.filter(e => e.lastChild.innerHTML != "DIR").map(l => l.firstChild.firstChild);
2022-06-27 23:44:53 +04:00
if (localStorage.getItem('audio_volume') == null)
localStorage['audio_volume'] = 0.5;
2022-09-20 04:28:29 +04:00
function overlay_close() {
overlay_content.children[0].remove();
overlay.style.visibility = "hidden";
g_scale = 1;
}
overlay.addEventListener("mouseup", e => {
if (e.target.tagName !== "DIV") return;
2022-09-20 04:28:29 +04:00
if (e.button === 0) overlay_close(); });
function determine_media_element(path) {
path = path.toLowerCase();
if (video_formats.some(ext => path.endsWith(ext)))
return "video";
else if (audio_formats.some(ext => path.endsWith(ext)))
return "audio";
else if (image_formats.some(ext => path.endsWith(ext)))
return "img";
return undefined;
2022-06-27 23:44:53 +04:00
}
function send_to_overlay(pathname, media_type_element) {
if (media_type_element === undefined)
return false;
if (overlay_content.children.length != 0)
overlay_content.children[0].remove();
const media_element = document.createElement(media_type_element);
media_element.src = pathname;
overlay_label.textContent = decodeURI(pathname.substr(pathname.lastIndexOf("/") + 1));
if (media_type_element !== "audio") {
media_element.addEventListener("wheel", 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})`; });
}
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"];
}
overlay_content.appendChild(media_element);
overlay.style.visibility = "visible";
return true;
2022-06-27 23:44:53 +04:00
}
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;
} while (!send_to_overlay(g_current_row.firstChild.firstChild.pathname,
determine_media_element(g_current_row.firstChild.firstChild.pathname)));
e.preventDefault();
});
b_next.addEventListener("click", () => {
do {
if (g_current_row.nextSibling === null)
g_current_row = g_first_row;
else
g_current_row = g_current_row.nextSibling;
} while (!send_to_overlay(g_current_row.firstChild.firstChild.pathname,
determine_media_element(g_current_row.firstChild.firstChild.pathname)));
2022-06-27 23:44:53 +04:00
});
window.addEventListener("keydown", e => {
if (overlay.style.visibility === "hidden" || 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();
});
for (let i = 0; i < file_links.length; ++i)
file_links[i].addEventListener("click", e => {
g_current_row = e.target.parentNode.parentNode;
if (send_to_overlay(e.target.pathname, determine_media_element(e.target.pathname)))
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;
}