31 lines
1.4 KiB
JavaScript
31 lines
1.4 KiB
JavaScript
window.addEventListener('DOMContentLoaded', () => {
|
|
if (document.getElementById("text-table-of-contents")) {
|
|
const sections = document.querySelectorAll('h1[id],h2[id],h3[id],h4[id],h5[id],h6[id]');
|
|
const activate = (entry) => {
|
|
entry.classList.add('active');
|
|
if (["LI", "UL"].includes(entry.parentElement.tagName)) {
|
|
activate(entry.parentElement);
|
|
}
|
|
};
|
|
const activateLast = () => {
|
|
document.querySelectorAll('#text-table-of-contents li.active, #text-table-of-contents ul.active').forEach(a => {
|
|
a.classList.remove('active')
|
|
});
|
|
let mostRecent = { section: sections[0], bottom: -Infinity };
|
|
const windowHeight = window.innerHeight;
|
|
sections.forEach((section) => {
|
|
const bounds = section.getBoundingClientRect()
|
|
if ( bounds.bottom > mostRecent.bottom && bounds.top < windowHeight ) {
|
|
mostRecent = { section, bottom: bounds.bottom };
|
|
}
|
|
})
|
|
activate(document.querySelector(`#text-table-of-contents li a[href="#${mostRecent.section.getAttribute('id')}"]`).parentElement);
|
|
}
|
|
const observer = new IntersectionObserver(entries => {
|
|
activateLast();
|
|
});
|
|
sections.forEach((section) => {
|
|
observer.observe(section);
|
|
});}
|
|
});
|