Initial commit

app/public/app.js

@@ -0,0 +1,208 @@
+// theme preference
+function media_theme_pref() {
+    document.documentElement.removeAttribute("class");
+
+    if (
+        window.matchMedia("(prefers-color-scheme: dark)").matches &&
+        (!window.localStorage.getItem("malachite.app:theme") ||
+            window.localStorage.getItem("malachite.app:theme") === "Auto")
+    ) {
+        document.documentElement.classList.add("dark");
+
+        document.getElementById("switch_light").classList.add("hidden");
+        document.getElementById("switch_dark").classList.remove("hidden");
+    } else if (
+        window.matchMedia("(prefers-color-scheme: light)").matches &&
+        (!window.localStorage.getItem("malachite.app:theme") ||
+            window.localStorage.getItem("malachite.app:theme") === "Auto")
+    ) {
+        document.documentElement.classList.remove("dark");
+
+        document.getElementById("switch_light").classList.remove("hidden");
+        document.getElementById("switch_dark").classList.add("hidden");
+    } else if (window.localStorage.getItem("malachite.app:theme")) {
+        /* restore theme */
+        const current = window.localStorage.getItem("malachite.app:theme");
+        document.documentElement.className = current.toLowerCase();
+
+        if (current === "Light") {
+            document.getElementById("switch_light").classList.remove("hidden");
+            document.getElementById("switch_dark").classList.add("hidden");
+        } else {
+            document.getElementById("switch_light").classList.add("hidden");
+            document.getElementById("switch_dark").classList.remove("hidden");
+        }
+    }
+}
+
+globalThis.temporary_set_theme = (theme) => {
+    document.documentElement.className = theme.toLowerCase();
+
+    if (theme === "Light") {
+        document.getElementById("switch_light").classList.remove("hidden");
+        document.getElementById("switch_dark").classList.add("hidden");
+    } else {
+        document.getElementById("switch_light").classList.add("hidden");
+        document.getElementById("switch_dark").classList.remove("hidden");
+    }
+};
+
+globalThis.set_theme = (theme) => {
+    window.localStorage.setItem("malachite.app:theme", theme);
+    document.documentElement.className = theme;
+    media_theme_pref();
+};
+
+media_theme_pref();
+
+// messages
+function get_cookie(key) {
+    return (document.cookie.split(`${key}=`)[1] || "").split(";")[0];
+}
+
+function check_message() {
+    const element = document.getElementById("messages");
+
+    const message = get_cookie("App-Message");
+    const message_good = get_cookie("App-Message-Good") === "true";
+
+    if (message) {
+        element.style.marginBottom = "1rem";
+        element.style.paddingLeft = "1rem";
+        element.innerHTML = `<li class="${message_good ? "green" : "red"}">${message.replaceAll('"', "")}</li>`;
+    }
+
+    // clear cookies
+    for (cookie of document.cookie.split(";")) {
+        // biome-ignore lint/suspicious/noDocumentCookie: cookie store is barely supported
+        document.cookie = `${cookie.split("=")[0]}=; expires=${new Date(0).toUTCString()}; path=/`;
+    }
+}
+
+globalThis.show_message = (message, message_good = true) => {
+    const element = document.getElementById("messages");
+    element.style.marginBottom = "1rem";
+    element.style.paddingLeft = "1rem";
+    element.innerHTML = `<li class="${message_good ? "green" : "red"}">${message.replaceAll('"', "")}</li>`;
+};
+
+check_message();
+
+// components
+function close_dropdowns() {
+    for (const dropdown of Array.from(
+        document.querySelectorAll(".inner.open"),
+    )) {
+        dropdown.classList.remove("open");
+    }
+}
+
+globalThis.open_dropdown = (event) => {
+    event.stopImmediatePropagation();
+    let target = event.target;
+
+    while (!target.matches(".dropdown")) {
+        target = target.parentElement;
+    }
+
+    // close all others
+    close_dropdowns();
+
+    // open
+    setTimeout(() => {
+        for (const dropdown of Array.from(target.querySelectorAll(".inner"))) {
+            // check y
+            const box = target.getBoundingClientRect();
+
+            let parent = dropdown.parentElement;
+
+            while (!parent.matches("html, .window")) {
+                parent = parent.parentElement;
+            }
+
+            let parent_height = parent.getBoundingClientRect().y;
+
+            if (parent.nodeName === "HTML") {
+                parent_height = window.screen.height;
+            }
+
+            const scroll = window.scrollY;
+            const height = parent_height;
+            const y = box.y + scroll;
+
+            if (y > height - scroll - 375) {
+                dropdown.classList.add("top");
+            } else {
+                dropdown.classList.remove("top");
+            }
+
+            // open
+            dropdown.classList.add("open");
+
+            if (dropdown.classList.contains("open")) {
+                dropdown.removeAttribute("aria-hidden");
+            } else {
+                dropdown.setAttribute("aria-hidden", "true");
+            }
+        }
+    }, 5);
+};
+
+globalThis.init_dropdowns = (bind_to) => {
+    for (const dropdown of Array.from(document.querySelectorAll(".inner"))) {
+        dropdown.setAttribute("aria-hidden", "true");
+    }
+
+    bind_to.addEventListener("click", (event) => {
+        if (
+            event.target.matches(".dropdown") ||
+            event.target.matches("[exclude=dropdown]")
+        ) {
+            return;
+        }
+
+        for (const dropdown of Array.from(
+            document.querySelectorAll(".inner.open"),
+        )) {
+            dropdown.classList.remove("open");
+        }
+    });
+};
+
+globalThis.hash_check = (hash) => {
+    if (hash.startsWith("#/")) {
+        for (const x of Array.from(document.querySelectorAll(".subpage"))) {
+            x.classList.add("hidden");
+        }
+
+        document.getElementById(hash).classList.remove("hidden");
+    }
+};
+
+window.addEventListener("hashchange", (_) => hash_check(window.location.hash));
+
+setTimeout(() => {
+    // run initial hash check
+    hash_check(window.location.hash);
+}, 150);
+
+globalThis.submitter_load = (submitter) => {
+    return {
+        load() {
+            submitter.querySelector("[ui_ident=text]").classList.add("hidden");
+            submitter
+                .querySelector("[ui_ident=loader]")
+                .classList.remove("hidden");
+            submitter.setAttribute("disabled", "true");
+        },
+        failed() {
+            submitter
+                .querySelector("[ui_ident=text]")
+                .classList.remove("hidden");
+            submitter
+                .querySelector("[ui_ident=loader]")
+                .classList.add("hidden");
+            submitter.removeAttribute("disabled");
+        },
+    };
+};