alrayyes/wiki
1
0
Fork 0
mirror of https://github.com/alrayyes/wiki.git synced 2025-06-07 06:06:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix back button in spa not working between two pages that both have hash fragments

Browse source
This commit is contained in:
Jacky Zhao 2023-08-17 01:34:50 -07:00
parent 58d9dc0528
commit 07a327e05a
4 changed files with 15 additions and 11 deletions
quartz/components/scripts
spa.inline.ts

21
quartz/components/scripts/spa.inline.ts
View file

@ -46,10 +46,6 @@ async function navigate(url: URL, isBack: boolean = false) {
})
if (!contents) return
if (!isBack) {
history.pushState({}, "", url)
window.scrollTo({ top: 0 })
}
const html = p.parseFromString(contents, "text/html")
let title = html.querySelector("title")?.textContent
@ -65,8 +61,20 @@ async function navigate(url: URL, isBack: boolean = false) {
announcer.dataset.persist = ""
html.body.appendChild(announcer)
// morph body
micromorph(document.body, html.body)
// scroll into place and add history
if (!isBack) {
history.pushState({}, "", url)
if (url.hash) {
const el = document.getElementById(url.hash.substring(1))
el?.scrollIntoView()
} else {
window.scrollTo({ top: 0 })
}
}
// now, patch head
const elementsToRemove = document.head.querySelectorAll(":not([spa-preserve])")
elementsToRemove.forEach((el) => el.remove())
@ -92,8 +100,9 @@ function createRouter() {
}
})
window.addEventListener("popstate", () => {
if (window.location.hash) return
window.addEventListener("popstate", (event) => {
const { url } = getOpts(event) ?? {}
if (window.location.hash && window.location.pathname === url?.pathname) return
try {
navigate(new URL(window.location.toString()), true)
} catch (e) {