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

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

})();