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.js | |
| 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.js')
| -rw-r--r-- | web/script/transition.js | 75 |
1 files changed, 0 insertions, 75 deletions
diff --git a/web/script/transition.js b/web/script/transition.js deleted file mode 100644 index 7d39176..0000000 --- a/web/script/transition.js +++ /dev/null @@ -1,75 +0,0 @@ -/* - 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, back) { - const trigger_load = prepare_load(href, back) - await fade(false) - trigger_load() -} - -function prepare_load(href, back) { - 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) { - 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(() => { - if (dir) document.body.removeChild(overlay) - res() - }, duration * 1000) - }) -}
\ No newline at end of file |