table-of-contents.js

const getPageToc = () => document.getElementsByClassName('pagetoc')[0];

const pageToc = getPageToc();
const pageTocChildren = [...pageToc.children];
const headers = [...document.getElementsByClassName('header')];


// Select highlighted item in ToC when clicking an item
pageTocChildren.forEach(child => {
    child.addEventHandler('click', () => {
        pageTocChildren.forEach(child => {
            child.classList.remove('active');
        });
        child.classList.add('active');
    });
});


/**
 * Test whether a node is in the viewport
 */
function isInViewport(node) {
    const rect = node.getBoundingClientRect();
    return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
}


/**
 * Set a new ToC entry.
 * Clear any previously highlighted ToC items, set the new one,
 * and adjust the ToC scroll position.
 */
function setTocEntry() {
    let activeEntry;
    const pageTocChildren = [...getPageToc().children];

    // Calculate which header is the current one at the top of screen
    headers.forEach(header => {
        if (window.pageYOffset >= header.offsetTop) {
            activeEntry = header;
        }
    });

    // Update selected item in ToC when scrolling
    pageTocChildren.forEach(child => {
        if (activeEntry.href.localeCompare(child.href) === 0) {
            child.classList.add('active');
        } else {
            child.classList.remove('active');
        }
    });

    let tocEntryForLocation = document.querySelector(`nav a[href="${activeEntry.href}"]`);
    if (tocEntryForLocation) {
        const headingForLocation = document.querySelector(activeEntry.hash);
        if (headingForLocation && isInViewport(headingForLocation)) {
            // Update ToC scroll
            const nav = getPageToc();
            const content = document.querySelector('html');
            if (content.scrollTop !== 0) {
                nav.scrollTo({
                    top: tocEntryForLocation.offsetTop - 100,
                    left: 0,
                    behavior: 'smooth',
                });
            } else {
                nav.scrollTop = 0;
            }
        }
    }
}


/**
 * Populate sidebar on load
 */
window.addEventListener('load', () => {
    // Only create table of contents if there is more than one header on the page
    if (headers.length <= 1) {
        return;
    }

    // Create an entry in the page table of contents for each header in the document
    headers.forEach((header, index) => {
        const link = document.createElement('a');

        // Indent shows hierarchy
        let indent = '0px';
        switch (header.parentElement.tagName) {
            case 'H1':
                indent = '5px';
                break;
            case 'H2':
                indent = '20px';
                break;
            case 'H3':
                indent = '30px';
                break;
            case 'H4':
                indent = '40px';
                break;
            case 'H5':
                indent = '50px';
                break;
            case 'H6':
                indent = '60px';
                break;
            default:
                break;
        }

        let tocEntry;
        if (index == 0) {
            // Create a bolded title for the first element
            tocEntry = document.createElement("strong");
            tocEntry.innerHTML = header.text;
        } else {
            // All other elements are non-bold
            tocEntry = document.createTextNode(header.text);
        }
        link.appendChild(tocEntry);

        link.style.paddingLeft = indent;
        link.href = header.href;
        pageToc.appendChild(link);
    });
    setTocEntry.call();
});


// Handle active headers on scroll, if there is more than one header on the page
if (headers.length > 1) {
    window.addEventListener('scroll', setTocEntry);
}