path: root/templates/partials/doc/toc_script.html

<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();
    const n = next.getBoundingClientRect();
    const h = (window.innerHeight || document.documentElement.clientHeight);

    return (c.top <= h) && (n.top - menuBarHeight >= 0);
}

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;
});

</script>