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

//// OVERLAY FOR VIEWING MEDIA FILES

const video_formats = ["webm", "mp4", "mov"];
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;

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_current_row = g_back_row;


const file_links = Array.from(g_tbody.children)
	.filter(e => e.lastChild.innerHTML != "DIR").map(l => l.firstChild.firstChild);


if (localStorage.getItem('audio_volume') == null)
	localStorage['audio_volume'] = 0.5;

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;
	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;
}

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;
}

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")
		|| !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", e => {
	do {
		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();
});


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();
	});

//// 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":
				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();
	}
});

//// 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;
}