Difference between revisions of "User:Knightmare/common.js"

Revision as of 16:21, 18 November 2024

(function() {
    // Find the TOC element
    var toc = document.getElementById('toc');
    if (!toc) return;  // If no TOC, exit

    // Grab all headers in the page (h2, h3, h4, h5, h6)
    var headers = document.querySelectorAll('h2, h3, h4, h5, h6');
    var tocLinks = toc.querySelectorAll('li');

    // Create a function to organize headers into a nested structure
    function organizeToc() {
        var lastLevel = 2;  // Default TOC starts from h2
        var stack = [];  // Used to track the nested structure

        // Iterate over all headers and organize them by header level
        headers.forEach(function(header, index) {
            var level = parseInt(header.tagName[1]);  // Get level from the header tag (h2 -> 2)

            // Find the corresponding TOC list item for this header
            var tocItem = tocLinks[index];

            // If this header is of a higher level, add it to the current stack
            if (level > lastLevel) {
                stack.push(tocItem);
            }
            // If this header is at the same or lower level, pop the stack back to the right level
            else if (level < lastLevel) {
                stack = stack.slice(0, level - 2);
            }

            // If we're nesting, append the toc item to the last item in the stack
            if (stack.length > 0) {
                var parentItem = stack[stack.length - 1];
                var sublist = parentItem.querySelector('ul');
                if (!sublist) {
                    sublist = document.createElement('ul');
                    parentItem.appendChild(sublist);
                }
                sublist.appendChild(tocItem);
            }

            // Push the current item onto the stack
            stack.push(tocItem);

            // Update the last level
            lastLevel = level;
        });
    }

    // Create a function to enable the collapse/expand functionality
    function addCollapseExpand() {
        // Add a toggle button for each nested list
        var subLists = toc.querySelectorAll('ul');

        subLists.forEach(function(subList) {
            // Create a button to toggle the sublist
            var toggleButton = document.createElement('button');
            toggleButton.textContent = '▸';  // Right arrow for collapsed state
            toggleButton.classList.add('toc-toggle');
            subList.parentElement.insertBefore(toggleButton, subList);

            // Set up event listener to handle the click (toggle state)
            toggleButton.addEventListener('click', function() {
                if (subList.style.display === 'none') {
                    subList.style.display = 'block';  // Expand the list
                    toggleButton.textContent = '▸'; // Change button to right arrow
                } else {
                    subList.style.display = 'none';  // Collapse the list
                    toggleButton.textContent = '▶'; // Change button to down arrow
                }
            });
        });
    }

    // Run the TOC nesting function
    organizeToc();

    // Run the collapse/expand functionality
    addCollapseExpand();
})();