error

/*
    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)
    })
}