1 files changed, 53 insertions, 0 deletions
diff --git a/server/src/routes/ui/style/transition.js b/server/src/routes/ui/style/transition.js
new file mode 100644
index 0000000..193f5a2
--- /dev/null
+++ b/server/src/routes/ui/style/transition.js
@@ -0,0 +1,53 @@
+/// <reference lib="dom" />
+
+const duration = 0.2
+globalThis.addEventListener("load", () => {
+    patch_page()
+})
+
+function patch_page() {
+    document.querySelectorAll("a").forEach(el => {
+        el.addEventListener("click", async ev => {
+            ev.preventDefault()
+            const trigger_load = prepare_load(el.href)
+            await fade(false)
+            trigger_load()
+        })
+    })
+}
+
+function prepare_load(href) {
+    const r_promise = fetch(href)
+    return async () => {
+        const r = await r_promise
+        const rt = await r.text()
+        const [head, body] = rt.split("<head>")[1].split("</body>")[0].split("</head><body>")
+        document.head.innerHTML = head
+        document.body.innerHTML = body
+        fade(true)
+        window.history.pushState({}, "", href)
+        patch_page()
+    }
+}
+
+function fade(dir) {
+    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(res => {
+        setTimeout(() => {
+            document.body.removeChild(overlay)
+            res()
+        }, duration * 1000)
+    })
+}
+\ No newline at end of file