1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
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)
})
}
|
