feat(nav): smooth loading while changing page
This commit is contained in:
parent
498a4ef4ca
commit
9787e1a1d5
1 changed files with 32 additions and 6 deletions
38
index.ts
38
index.ts
|
@ -1,7 +1,33 @@
|
|||
const tags = document.querySelectorAll<HTMLElement>(".tag")
|
||||
|
||||
tags?.forEach(t => {
|
||||
t.addEventListener("click", _ => {
|
||||
t.classList.toggle("active")
|
||||
function setupEvents() {
|
||||
document.querySelectorAll<HTMLElement>(".tag")?.forEach(t => {
|
||||
t.addEventListener("click", _ => {
|
||||
t.classList.toggle("active")
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
document.querySelectorAll<HTMLAnchorElement>("a")?.forEach(a => {
|
||||
a.addEventListener("click", e => {
|
||||
if (!a.href.startsWith(window.location.origin)) return
|
||||
e.preventDefault()
|
||||
changePage(a.href)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function changePage(href: string) {
|
||||
fetch(href)
|
||||
.then(resp => resp.text())
|
||||
.then(html => {
|
||||
const doc = new DOMParser().parseFromString(html, "text/html")
|
||||
window.history.pushState({}, "", href)
|
||||
document.title = doc.title
|
||||
const distMain = doc.querySelector("main")
|
||||
const currentMain = document.querySelector("main")
|
||||
if (distMain === null || currentMain === null) document.body = doc.body
|
||||
else currentMain.innerHTML = distMain.innerHTML
|
||||
setupEvents()
|
||||
})
|
||||
}
|
||||
|
||||
window.addEventListener("popstate", e => window.location.reload())
|
||||
setupEvents()
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue