garagehq.deuxfleurs.fr/templates/partials/doc/toc_script.html

83 lines
2.5 KiB
HTML
Raw Normal View History

<script>
const menuBarHeight = document.querySelector("nav.navbar").clientHeight;
const mainTocMenuWidth = document.getElementById('main-toc-menu').clientWidth;
const tocItems = document.querySelectorAll(".toc");
const navSections = new Array(tocItems.length);
// Global ToC
/*
Fixed ToC when user scrolls.
*/
window.addEventListener('scroll', function() {
if (window.screen.width >= 1280) {
if (window.scrollY >= menuBarHeight) {
document.getElementById('main-toc-menu').classList.add('fixed', 'top-0', 'left-0');
document.getElementById('main-toc-menu').style.width = mainTocMenuWidth + 'px';
} else {
document.getElementById('main-toc-menu').classList.remove('fixed', 'top-0', 'left-0');
}
}
});
// Page content
/*
Focus effect on current section anchor when user scrolls.
*/
tocItems.forEach((el, i) => {
let id = el.getAttribute("id").substring(5);
navSections[i] = document.getElementById(id);
})
function isVisible(tocIndex) {
const current = navSections[tocIndex];
const next = tocIndex < tocItems.length - 1 ? navSections[tocIndex + 1]
: document.querySelectorAll("section.section").item(1);
const c = current.getBoundingClientRect();
2022-01-31 16:16:02 +00:00
if (next) {
const n = next.getBoundingClientRect();
const h = (window.innerHeight || document.documentElement.clientHeight);
2022-01-31 16:16:02 +00:00
return (c.top <= h) && (n.top - menuBarHeight >= 0);
} else {
const h = (window.innerHeight || document.documentElement.clientHeight);
return (c.top <= h);
}
}
function activateIfVisible() {
for (b = true, i = 0; i < tocItems.length; i++) {
if (b && isVisible(i)) {
tocItems[i].classList.add('is-active');
b = false;
} else
tocItems[i].classList.remove('is-active');
}
}
var isTicking = null;
window.addEventListener('scroll', () => {
if (!isTicking) {
window.requestAnimationFrame(() => {
activateIfVisible();
isTicking = false;
});
isTicking = true;
}
}, false);
document.addEventListener("DOMContentLoaded", function() {
var menusTriggers = document.getElementsByClassName("deploySubMenu");
var activeDocPage = document.getElementsByClassName("activePage")[0];
for (var i = 0; i < menusTriggers.length; i++) {
menusTriggers[i].checked = true;
}
activeDocPage.parentElement.parentElement.previousElementSibling.previousElementSibling.checked = false;
});
2022-01-31 16:16:02 +00:00
</script>