diff options
| author | metamuffin <metamuffin@disroot.org> | 2023-10-21 20:43:16 +0200 |
|---|---|---|
| committer | metamuffin <metamuffin@disroot.org> | 2023-10-21 20:43:16 +0200 |
| commit | b6139239e35d05621603a2b419bff4c0dc9cdf40 (patch) | |
| tree | 9202e145bb5cf273b5c268ed38192bcc550126a3 /web/script/transition.ts | |
| parent | 96a17db4701fa13837f173d228d1b45cb1a5316f (diff) | |
| download | jellything-b6139239e35d05621603a2b419bff4c0dc9cdf40.tar jellything-b6139239e35d05621603a2b419bff4c0dc9cdf40.tar.bz2 jellything-b6139239e35d05621603a2b419bff4c0dc9cdf40.tar.zst | |
port js transitions to ts
Diffstat (limited to 'web/script/transition.ts')
| -rw-r--r-- | web/script/transition.ts | 75 |
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 |