1 files changed, 75 insertions, 0 deletions
diff --git a/web/script/transition.ts b/web/script/transition.ts
new file mode 100644
index 0000000..aa172f7
--- /dev/null
+++ b/web/script/transition.ts
@@ -0,0 +1,75 @@
+/*
+    This file is part of jellything (https://codeberg.org/metamuffin/jellything)
+    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+    Copyright (C) 2023 metamuffin <metamuffin.org>
+*/
+/// <reference lib="dom" />
+
+const duration = 0.2
+globalThis.addEventListener("load", () => {
+    patch_page()
+})
+
+globalThis.addEventListener("popstate", (_e) => {
+    transition_to(window.location.href, true)
+    // transition_to(_e.state.href, true)
+})
+
+function patch_page() {
+    document.querySelectorAll("a").forEach(el => {
+        el.addEventListener("click", async ev => {
+            ev.preventDefault()
+            await transition_to(el.href)
+        })
+    })
+}
+
+async function transition_to(href: string, back?: boolean) {
+    const trigger_load = prepare_load(href, back)
+    await fade(false)
+    trigger_load()
+}
+
+function prepare_load(href: string, back?: boolean) {
+    const r_promise = fetch(href)
+    return async () => {
+        let rt = ""
+        try {
+            const r = await r_promise
+            if (!r.ok) return document.body.innerHTML = "<h1>error</h1>"
+            rt = await r.text()
+        } catch (e) {
+            console.error(e)
+            return
+        }
+        const [head, body] = rt.split("<head>")[1].split("</head>")
+        document.head.innerHTML = head
+        document.body.outerHTML = body
+        fade(true)
+        // if (!back) window.history.pushState({href}, "", href)
+        if (!back) window.history.pushState({}, "", href)
+        patch_page()
+    }
+}
+
+function fade(dir: boolean) {
+    const overlay = document.createElement("div")
+    overlay.style.position = "absolute"
+    overlay.style.left = "0px"
+    overlay.style.top = "0px"
+    overlay.style.width = "100vw"
+    overlay.style.height = "100vh"
+    overlay.style.backgroundColor = dir ? "black" : "transparent"
+    overlay.style.transition = `background-color ${duration}s`
+    overlay.style.zIndex = "99999";
+    setTimeout(() => {
+        overlay.style.backgroundColor = dir ? "transparent" : "black"
+    }, 0)
+    document.body.appendChild(overlay)
+    return new Promise<void>(res => {
+        setTimeout(() => {
+            if (dir) document.body.removeChild(overlay)
+            res()
+        }, duration * 1000)
+    })
+}
+\ No newline at end of file