diff options
| author | metamuffin <metamuffin@disroot.org> | 2023-01-20 16:36:16 +0100 |
|---|---|---|
| committer | metamuffin <metamuffin@disroot.org> | 2023-01-20 16:36:16 +0100 |
| commit | 1e1c5a05ce8a62c32934e31228a0a9e5e073a6af (patch) | |
| tree | 4413d27189f743072d8dac3a3edea4cbc0671d5b /server/src/routes/ui/style/transition.js | |
| parent | 146243df99605f04f708d3db0eab3c8f78bc61d6 (diff) | |
| download | jellything-1e1c5a05ce8a62c32934e31228a0a9e5e073a6af.tar jellything-1e1c5a05ce8a62c32934e31228a0a9e5e073a6af.tar.bz2 jellything-1e1c5a05ce8a62c32934e31228a0a9e5e073a6af.tar.zst | |
fading js
Diffstat (limited to 'server/src/routes/ui/style/transition.js')
| -rw-r--r-- | server/src/routes/ui/style/transition.js | 53 |
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 |