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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
/*
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) 2024 metamuffin <metamuffin.org>
*/
/// <reference lib="dom" />
import { e } from "./jshelper/src/element.ts";
const DURATION = 200
globalThis.addEventListener("DOMContentLoaded", () => {
patch_page()
})
globalThis.addEventListener("popstate", async (_e) => {
await transition_to(window.location.href, true)
})
let disable_transition = false
globalThis.addEventListener("navigationrequiresreload", () => {
disable_transition = 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) {
stop() // nice!
if (disable_transition) return window.location.href = href
const trigger_load = prepare_load(href, back)
await fade(false)
trigger_load()
disable_transition = false;
}
function show_error(mesg: string) {
clear_spinner()
disable_transition = true
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 show_error("Error response. Try again.")
rt = await r.text()
} catch (e) {
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>")
if (!back) window.history.pushState({}, "", href)
clear_spinner()
document.head.innerHTML = head
document.body.outerHTML = body
globalThis.dispatchEvent(new Event("DOMContentLoaded"))
fade(true)
}
}
let spinner_timeout: number | undefined, spinner_element: HTMLElement | undefined;
function clear_spinner() {
if (spinner_timeout) clearTimeout(spinner_timeout)
if (spinner_element) spinner_element.remove()
spinner_element = spinner_timeout = undefined;
}
function fade(dir: boolean) {
const overlay = document.createElement("div")
overlay.classList.add("jst-fade")
overlay.style.backgroundColor = dir ? "black" : "transparent"
overlay.style.animationName = dir ? "jst-fadeout" : "jst-fadein"
overlay.style.animationFillMode = "forwards"
overlay.style.animationDuration = `${DURATION}ms`
document.body.appendChild(overlay)
return new Promise<void>(res => {
setTimeout(() => {
if (dir) document.body.removeChild(overlay)
spinner_timeout = setTimeout(() => {
overlay.append(spinner_element = e("div", { class: "jst-spinner" }, "This is a spinner."))
}, 500)
res()
}, DURATION)
})
}
|
