tfcconnection-zola/static/js/page.js
2025-06-27 09:43:33 -05:00

38 lines
1.5 KiB
JavaScript

document.addEventListener("DOMContentLoaded", function() {
// ---------------- TOC Scrollspy --------------------
if (document.getElementById('toc') !== null) {
const table_of_content_links = document.querySelectorAll('#toc li a')
let page_titles_ids = [];
[...table_of_content_links].forEach((item)=> {
page_titles_ids.push(item.href.substring(item.href.indexOf("#")))
})
const page_titles_elements = document.querySelectorAll(page_titles_ids.join(','));
let reversed_title_elements = [...page_titles_elements].reverse();
let elem = getActiveTocElement(reversed_title_elements) || page_titles_elements[0]; //If no element has gone outside of viewport on y axis
findCorrespondingTocTitle(elem).classList.add('bg-blue-700') //page load
var previous_elem = elem
window.addEventListener('scroll', () => {
let element = getActiveTocElement(reversed_title_elements) || page_titles_elements[0];
if (element !== previous_elem) {
findCorrespondingTocTitle(previous_elem).classList.remove('bg-blue-700')
findCorrespondingTocTitle(element).classList.add('bg-blue-700')
previous_elem = element
}
})
}
});
function getActiveTocElement(elements) {
return [...elements].find((item) => {
return (item.getBoundingClientRect().y <= 0)
})
}
function findCorrespondingTocTitle(element) {
return [...document.querySelectorAll('#toc li a')].find((item) => {
return item.href.substring(item.href.indexOf("#")) === `#${element.id}`
})
}