Fix page index with links

This commit is contained in:
Congon4tor 2025-01-03 03:30:44 +01:00
parent 9fcbdf8094
commit 47ba2ab451

View File

@ -1,68 +1,76 @@
let scrollTimeout; let scrollTimeout
const listenActive = () => { const listenActive = () => {
const elems = document.querySelector(".pagetoc").children; const elems = document.querySelector(".pagetoc").children
[...elems].forEach(el => { ;[...elems].forEach((el) => {
el.addEventListener("click", (event) => { el.addEventListener("click", (event) => {
clearTimeout(scrollTimeout); clearTimeout(scrollTimeout)
[...elems].forEach(el => el.classList.remove("active")); ;[...elems].forEach((el) => el.classList.remove("active"))
el.classList.add("active"); el.classList.add("active")
// Prevent scroll updates for a short period // Prevent scroll updates for a short period
scrollTimeout = setTimeout(() => { scrollTimeout = setTimeout(() => {
scrollTimeout = null; scrollTimeout = null
}, 100); // Adjust timing as needed }, 100) // Adjust timing as needed
}); })
}); })
}; }
const getPagetoc = () => document.querySelector(".pagetoc") || autoCreatePagetoc(); const getPagetoc = () =>
document.querySelector(".pagetoc") || autoCreatePagetoc()
const autoCreatePagetoc = () => { const autoCreatePagetoc = () => {
const main = document.querySelector("#content > main"); const main = document.querySelector("#content > main")
const content = Object.assign(document.createElement("div"), { const content = Object.assign(document.createElement("div"), {
className: "content-wrap" className: "content-wrap",
}); })
content.append(...main.childNodes); content.append(...main.childNodes)
main.prepend(content); main.prepend(content)
main.insertAdjacentHTML("afterbegin", '<div class="sidetoc"><nav class="pagetoc"></nav></div>'); main.insertAdjacentHTML(
return document.querySelector(".pagetoc"); "afterbegin",
}; '<div class="sidetoc"><nav class="pagetoc"></nav></div>'
)
return document.querySelector(".pagetoc")
}
const updateFunction = () => { const updateFunction = () => {
if (scrollTimeout) return; // Skip updates if within the cooldown period from a click if (scrollTimeout) return // Skip updates if within the cooldown period from a click
const headers = [...document.getElementsByClassName("header")]; const headers = [...document.getElementsByClassName("header")]
const scrolledY = window.scrollY; const scrolledY = window.scrollY
let lastHeader = null; let lastHeader = null
// Find the last header that is above the current scroll position // Find the last header that is above the current scroll position
for (let i = headers.length - 1; i >= 0; i--) { for (let i = headers.length - 1; i >= 0; i--) {
if (scrolledY >= headers[i].offsetTop) { if (scrolledY >= headers[i].offsetTop) {
lastHeader = headers[i]; lastHeader = headers[i]
break; break
} }
} }
const pagetocLinks = [...document.querySelector(".pagetoc").children]; const pagetocLinks = [...document.querySelector(".pagetoc").children]
pagetocLinks.forEach(link => link.classList.remove("active")); pagetocLinks.forEach((link) => link.classList.remove("active"))
if (lastHeader) { if (lastHeader) {
const activeLink = pagetocLinks.find(link => lastHeader.href === link.href); const activeLink = pagetocLinks.find(
if (activeLink) activeLink.classList.add("active"); (link) => lastHeader.href === link.href
)
if (activeLink) activeLink.classList.add("active")
} }
}; }
window.addEventListener('load', () => { window.addEventListener("load", () => {
const pagetoc = getPagetoc(); const pagetoc = getPagetoc()
const headers = [...document.getElementsByClassName("header")]; const headers = [...document.getElementsByClassName("header")]
headers.forEach(header => { headers.forEach((header) => {
const link = Object.assign(document.createElement("a"), { const link = Object.assign(document.createElement("a"), {
textContent: header.text, textContent: header.text,
href: header.href, href: header.href,
className: `pagetoc-${header.parentElement.tagName}` className: `pagetoc-${header.parentElement.tagName}`,
}); })
pagetoc.appendChild(link); if (header.parentElement.querySelectorAll("a").length === 2) {
}); link.textContent = header.parentElement.querySelectorAll("a")[1].text
updateFunction(); }
listenActive(); pagetoc.appendChild(link)
window.addEventListener("scroll", updateFunction); })
}); updateFunction()
listenActive()
window.addEventListener("scroll", updateFunction)
})