diff options
| author | metamuffin <metamuffin@disroot.org> | 2023-10-21 21:12:05 +0200 |
|---|---|---|
| committer | metamuffin <metamuffin@disroot.org> | 2023-10-21 21:12:05 +0200 |
| commit | 3a58f62d819ef37be536d259461ce50d54b7c5ac (patch) | |
| tree | 448160e19a9a7b86e78db377bfc9d9be2b4e031e /web/script | |
| parent | 704d65109a0a249583e49e600fef848934cfc13e (diff) | |
| download | jellything-3a58f62d819ef37be536d259461ce50d54b7c5ac.tar jellything-3a58f62d819ef37be536d259461ce50d54b7c5ac.tar.bz2 jellything-3a58f62d819ef37be536d259461ce50d54b7c5ac.tar.zst | |
transition errors
Diffstat (limited to 'web/script')
| -rw-r--r-- | web/script/transition.ts | 21 |
1 files changed, 10 insertions, 11 deletions
diff --git a/web/script/transition.ts b/web/script/transition.ts index 809abd6..747ed70 100644 --- a/web/script/transition.ts +++ b/web/script/transition.ts @@ -5,6 +5,8 @@ */ /// <reference lib="dom" /> +import { e } from "./jshelper/src/element.ts"; + const duration = 200 globalThis.addEventListener("load", () => { patch_page() @@ -12,7 +14,6 @@ globalThis.addEventListener("load", () => { globalThis.addEventListener("popstate", (_e) => { transition_to(window.location.href, true) - // transition_to(_e.state.href, true) }) function patch_page() { @@ -30,23 +31,26 @@ async function transition_to(href: string, back?: boolean) { trigger_load() } +function show_error(mesg: string) { + document.body.append(e("span", { class: "jst-error" }, mesg)) +} + 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>" + if (!r.ok) return show_error("Error response. Try again.") rt = await r.text() } catch (e) { - console.error(e) - return + if (e instanceof TypeError) return show_error("Navigation failed. Check your connection.") + return show_error("unknown error when fetching page") } 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() } @@ -54,13 +58,8 @@ function prepare_load(href: string, back?: boolean) { 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.classList.add("jst-fade") overlay.style.backgroundColor = dir ? "black" : "transparent" - overlay.style.zIndex = "99999"; overlay.style.animationName = dir ? "jst-fadeout" : "jst-fadein" overlay.style.animationFillMode = "forwards" overlay.style.animationDuration = `${duration}ms` |