Vite.js bringup

public/js/dom.js

@@ -0,0 +1,101 @@
+function get(id) {
+	return document.getElementById(id);
+}
+
+function set(id, text) {
+	get(id).innerText = text;
+}
+
+function get_class(class_name, parent) {
+	if (!parent) parent = document;
+	return parent.getElementsByClassName(class_name);
+}
+
+function for_all(class_name, func, parent) {
+	let a = get_class(class_name, parent);
+	for (let i = 0; i < a.length; i++) {
+		func(a[i]);
+	}
+}
+
+function load_img(img) {
+	img.classList.remove("unloaded");
+}
+
+function get_background() {
+	let bg = get("background");
+	return bg.children[1-1+bg.classList.contains("dark")];
+}
+
+function safe_text(text) {
+	text = text.replaceAll("<", "&lt;");
+	text = text.replaceAll(">", "&gt;");
+	text = text.replaceAll("&", "&amp;");
+	return text;
+}
+
+function mk_entry(app) {
+	let new_tab = get_bool("open_new_tab") ? ` target="_blank"` : "";
+	return `
+		<a class="box" href="${safe_text(app["href"])}"${new_tab}>
+			<img src="${safe_text(app["icon"])}">
+			<div>
+				<div class="name">${safe_text(app["name"])}</div>
+				<div class="desc">${safe_text(app["desc"])}</div>
+			</div>
+		</a>`;
+}
+
+function check_cookies() {
+	try {
+		localStorage;
+		return true;
+	}
+	catch {
+		return false;
+	}
+}
+
+function config(key, value) {
+	let write = value !== undefined;
+	if (check_cookies()) {
+		let val = localStorage.getItem(key);
+		if (CONFIG["ui"][key] == value && !val) return;
+		if (write) localStorage.setItem(key, value);
+		else if (!val) return CONFIG["ui"][key].toString();
+		return val;
+	}
+	if (write) CONFIG["ui"][key] = value.toString();
+	return CONFIG["ui"][key].toString();
+}
+
+function get_bool(key) {
+	return config(key) == "true";
+}
+
+function load_config(conf) {
+	CONFIG_DEFAULT = conf;
+	if (conf) CONFIG = JSON.parse(conf);
+	let ui = CONFIG.ui;
+	set("app-name", ui.name);
+	document.title = ui.name;
+	set("app-desc", ui.desc);
+	get("app-icon").src = ui.icon;
+	get("favicon").href = ui.icon;
+	if (!check_cookies()) get("nocook").classList.remove("none");
+	if (ui.hosted_by) set("app-hostedby", ui.hosted_by);
+	else get("app-hostedby").parentNode.style.display = "none";
+	load_apps();
+	switch_theme(get_bool("dark_mode"));
+	new_tab_toggle(get_bool("open_new_tab"));
+	blur_toggle(get_bool("blur"));
+	animations(get_bool("animations"));
+}
+
+function is_secure(uri) {
+	let secure = uri.indexOf("tps://") != -1;
+	let insecure = uri.indexOf("tp://") != -1;
+	if (secure) return true;
+	if (insecure) return false;
+	return is_secure(location.href);
+}

public/js/main.js

@@ -0,0 +1,143 @@
+document.title = "Loading...";
+function onload() {
+	let xhr = new XMLHttpRequest();
+	xhr.open("GET", "config/config.json");
+	xhr.onload = function() {
+		load_config(this.responseText);
+		for_all("back", (btn) => {
+			btn.onclick = show;
+		});
+		setTimeout(() => {
+			show();
+			document.body.classList.remove("init");
+		}, 50);
+	};
+	xhr.send();
+}
+
+function show(id) {
+	if (typeof(id) != "string") id = "page-home";
+	CURRENT_VIEW = id;
+	for_all("page", (page) => {
+		page.classList.add("hidden");
+	});
+	get(id).classList.remove("hidden");
+	get(id).scrollTop = 0;
+	let bg = get("background").classList;
+	if (CURRENT_VIEW == "page-home") bg.add("scaled");
+	else bg.remove("scaled");
+}
+
+function switch_theme(value) {
+	let is_dark = get_bool("dark_mode");
+	if (value === undefined) is_dark = !is_dark; 
+	config("dark_mode", is_dark);
+	get("css_dark").disabled = !is_dark;
+	let bg = get("background").classList;
+	let setting = get("setting-theme");
+	let icon = get("theme-indicator");
+	if (is_dark) {
+		setting.classList.add("checked");
+		icon.innerText = "dark_mode";
+		bg.add("dark");
+		get_background().src = CONFIG.ui.wallpaper_dark;
+	}
+	else {
+		setting.classList.remove("checked");
+		icon.innerText = "light_mode";
+		bg.remove("dark");
+		get_background().src = CONFIG.ui.wallpaper;
+	}
+}
+
+function load_apps() {
+	let final = "";
+	let secures = 0;
+	let i = 0;
+	while (i < CONFIG["services"].length) {
+		let item = CONFIG["services"][i];
+		let app = mk_entry(item);
+		final += app;
+		i++;
+		if (is_secure(item["href"])) secures++;
+	}
+	get("applist").innerHTML = final;
+	set("services-total", i);
+	set("services-secure", secures);
+	set("security-pp", Math.round(100 * secures / i));
+}
+
+function new_tab_toggle(value) {
+	let v = get_bool("open_new_tab");
+	if (value === undefined) v = !v; 
+	config("open_new_tab", v);
+	setting = get("setting-newtab").classList;
+	v ? setting.add("checked") : setting.remove("checked");
+	load_apps();
+}
+
+function blur_toggle(value) {
+	let v = get_bool("blur");
+	if (value === undefined) v = !v; 
+	config("blur", v);
+	setting = get("setting-blur").classList;
+	let body = document.body.classList;
+	if (v) {
+		setting.add("checked");
+		body.remove("noblur");
+	}
+	else {
+		setting.remove("checked");
+		body.add("noblur");
+	}
+}
+
+function animations(value) {
+	let v = get_bool("animations");
+	if (value === undefined) v = !v; 
+	config("animations", v);
+	setting = get("setting-animations").classList;
+	let body = document.body.classList;
+	if (v) {
+		setting.add("checked");
+		body.remove("noanim");
+	}
+	else {
+		setting.remove("checked");
+		body.add("noanim");
+	}
+}
+
+let S_TAP_LOCK;
+function open_screen(button) {
+	if (S_TAP_LOCK) return;
+	S_TAP_LOCK = true;
+	let parent = button.parentNode;
+	let cursor = parent.getElementsByClassName("bg")[0];
+	let items = parent.getElementsByClassName("entry");
+	let clicked_id = 0;
+	for (let i = 0; i < items.length; i++) {
+		if (items[i] === button) {
+			clicked_id = i;
+			break;
+		}
+	}
+	cursor.style.left = `${100 * clicked_id / items.length}%`;
+	let wrapper = parent.parentNode.parentNode;
+	let screens = get_class("screens", wrapper)[0];
+	let from_height = screens.clientHeight;
+	for_all("screen", (screen) => {
+		screen.classList.add("hidden");
+	}, wrapper);
+	screens.children[clicked_id].classList.remove("hidden");
+	let to_height = screens.children[clicked_id].clientHeight;
+	screens.style.transform = `translateX(calc(-${clicked_id}% * (100 / var(--screens))))`;
+	screens.style.height = `${from_height}px`;
+	setTimeout(() => {
+		screens.style.height = `${to_height}px`;
+	}, 10);
+	setTimeout(() => {
+		screens.style.height = null;
+		S_TAP_LOCK = false;
+	}, 420);
+}