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

From ARMCO
Jump to navigation Jump to search
Line 1: Line 1:
(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
// Create a function to enable the collapse/expand functionality
function addCollapseExpand() {
function addCollapseExpand() {
Line 72: Line 23:
});
});
}
}

// Run the TOC nesting function
organizeToc();


// Run the collapse/expand functionality
// Run the collapse/expand functionality

Revision as of 16:23, 18 November 2024

    // 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 collapse/expand functionality
    addCollapseExpand();
})();
Retrieved from "https://armco.jdsnetwork.com/index.php?title=User:Knightmare/common.js&oldid=75"