document.addEventListener('DOMContentLoaded', () => { let preventAutoOpen = false; let suppressNextScrollUpdate = false; const tocWrappers = document.querySelectorAll('[fc-toc="wrapper"]'); if (!tocWrappers) return; for (const wrapper of tocWrappers) { // Grab key elements and settings const tocComponent = wrapper.querySelector('[fc-toc="component"]'); const tocContent = wrapper.querySelector('[fc-toc="content"]'); const activeStyleElement = wrapper.querySelector('[fc-toc="active-style"]'); const activeClass = activeStyleElement?.className || ''; const debounceMs = 0; const isCollapsible = tocComponent.getAttribute('fc-toc-collapse') === 'true'; if (!tocComponent || !tocContent) return; // Map of heading levels to placeholder class names const placeholderLinks = tocComponent.querySelectorAll('[fc-toc]'); const headingLevels = new Map(); placeholderLinks.forEach(link => { const level = link.getAttribute('fc-toc'); const className = link.getAttribute('class') || ''; if (/^h[1-6]$/.test(level)) { headingLevels.set(level.toLowerCase(), className); } }); // Find all target headings in the content const selector = [...headingLevels.keys()].join(', '); const headings = tocContent.querySelectorAll(selector); // Generate unique IDs for headings const usedIds = new Set(); const generateSlug = (text, index) => { let slug = text.toLowerCase() .normalize("NFD").replace(/[̀-ͯ]/g, "") .replace(/[^a-z0-9\s-]/g, '') .replace(/\s+/g, '-') .replace(/-+/g, '-') .replace(/^-|-$/g, ''); if (!slug) slug = `heading-${index}`; let uniqueSlug = slug; let count = 1; while (usedIds.has(uniqueSlug)) { uniqueSlug = `${slug}-${count++}`; } usedIds.add(uniqueSlug); return uniqueSlug; }; // Assign IDs to headings headings.forEach((heading, index) => { const id = generateSlug(heading.textContent.trim(), index); heading.id = id; }); // Build the TOC from placeholder links and real headings let currentParentLi = null; let subList = null; headings.forEach((heading, index) => { const level = heading.tagName.toLowerCase(); const className = headingLevels.get(level) || ''; const placeholderLink = tocComponent.querySelector(`[fc-toc="${level}"]`); if (!placeholderLink) return; const listItem = placeholderLink.closest('li'); if (!listItem) return; const clonedItem = listItem.cloneNode(true); const link = clonedItem.querySelector(`[fc-toc="${level}"]`); if (link) { link.href = `#${heading.id}`; link.textContent = heading.textContent.trim(); link.setAttribute('fc-toc-link', level); } if (isCollapsible && level === 'h2') { tocComponent.appendChild(clonedItem); currentParentLi = clonedItem; subList = document.createElement('ul'); subList.classList.add('toc-subitems'); currentParentLi.appendChild(subList); } else if (isCollapsible && currentParentLi && subList) { subList.appendChild(clonedItem); } else { tocComponent.appendChild(clonedItem); } }); // Initially collapse all groups if collapsible if (isCollapsible) { tocComponent.querySelectorAll('.toc-subitems').forEach(group => { group.style.maxHeight = '0'; }); } // Remove placeholder links placeholderLinks.forEach(link => { const parentLi = link.closest('li'); if (parentLi) parentLi.remove(); }); let debounceTimer; let lastActiveLink = null; let lastActiveGroupWrapper = null; // Scroll TOC and manage group expansion on active link update const scrollToActiveLink = () => { if (suppressNextScrollUpdate) { suppressNextScrollUpdate = false; return; } if (preventAutoOpen) return; const activeLink = tocComponent.querySelector('.w--current'); if (!activeLink || activeLink === lastActiveLink) return; tocComponent.querySelectorAll('[fc-toc-link]').forEach(link => { if (activeClass) link.classList.remove(activeClass); }); if (activeClass) activeLink.classList.add(activeClass); lastActiveLink = activeLink; tocComponent.scrollBy({ top: activeLink.getBoundingClientRect().top - tocComponent.getBoundingClientRect().top - (tocComponent.getBoundingClientRect().height / 2) + (activeLink.getBoundingClientRect().height / 2), behavior: 'smooth' }); if (isCollapsible) { const currentLi = activeLink.closest('li'); let groupWrapperLi = currentLi; if (currentLi?.parentElement?.classList.contains('toc-subitems')) { groupWrapperLi = currentLi.parentElement.closest('li'); } tocComponent.querySelectorAll('li').forEach(li => { const sub = li.querySelector('.toc-subitems'); if ( sub && li !== groupWrapperLi && sub.style.maxHeight !== '0px' && (!preventAutoOpen || li !== lastActiveGroupWrapper) ) { collapseElement(sub); } }); expandElement(groupWrapperLi.querySelector('.toc-subitems')); lastActiveGroupWrapper = groupWrapperLi; } }; const debouncedScroll = () => { clearTimeout(debounceTimer); debounceTimer = setTimeout(scrollToActiveLink, debounceMs); }; // Observe class changes to trigger scroll update const observer = new MutationObserver(() => { if (!isAutoScrolling) debouncedScroll(); }); observer.observe(tocComponent, { subtree: true, attributes: true, attributeFilter: ['class'] }); // Expand group for active link on page load const expandActiveGroupOnLoad = () => { if (!isCollapsible) return; let attempts = 0; const tryExpand = () => { const activeLink = tocComponent.querySelector('.w--current'); if (activeLink) { scrollToActiveLink(); } else if (++attempts < 20) { setTimeout(tryExpand, 50); } }; tryExpand(); }; // Set up toggle buttons for manual group expansion const setupManualToggles = () => { if (!isCollapsible) return; tocComponent.querySelectorAll('[fc-toc="open-group"]').forEach(toggleBtn => { const subList = toggleBtn.closest('li')?.querySelector('.toc-subitems'); if (!subList || subList.children.length === 0) { toggleBtn.style.display = 'none'; return; } for (const item of tocComponent.querySelectorAll('li')) { item.style.display = 'grid'; item.style.gridTemplateColumns = '1fr auto'; } subList.style.gridColumn = '1 / 3'; toggleBtn.addEventListener('click', (e) => { e.stopPropagation(); preventAutoOpen = true; const listItem = toggleBtn.closest('li'); if (!listItem) return; const subList = listItem.querySelector('.toc-subitems'); if (!subList) return; const isOpen = subList.style.maxHeight !== '0px'; const hasActive = listItem.querySelector(`.${activeClass}`); if (isOpen && !hasActive) { collapseElement(subList); if (lastActiveGroupWrapper === listItem) { lastActiveGroupWrapper = null; } } else if (!isOpen) { expandElement(subList); if ( lastActiveGroupWrapper && lastActiveGroupWrapper !== listItem && !lastActiveGroupWrapper.querySelector(`.${activeClass}`) ) { const previousGroup = lastActiveGroupWrapper.querySelector('.toc-subitems'); if (previousGroup) collapseElement(previousGroup); } lastActiveGroupWrapper = listItem; } setTimeout(() => { preventAutoOpen = false; }, 100); }); }); }; expandActiveGroupOnLoad(); setupManualToggles(); let isAutoScrolling = false; let scrollTimeout; const handleScrollStop = () => { clearTimeout(scrollTimeout); scrollTimeout = setTimeout(() => { isAutoScrolling = false; debouncedScroll(); }, 150); }; // Handle anchor clicks and scroll positioning tocComponent.querySelectorAll('a[fc-toc-link]').forEach(link => { link.addEventListener('click', function (e) { e.preventDefault(); const targetId = this.getAttribute('href')?.substring(1); const target = document.getElementById(targetId); if (!target) return; const originalHref = this.getAttribute('href'); this.removeAttribute('href'); isAutoScrolling = true; window.addEventListener('scroll', handleScrollStop); const rect = target.getBoundingClientRect(); const scrollTo = window.scrollY + rect.top - (window.innerHeight / 2) + (rect.height / 2); window.scrollTo({ top: scrollTo, behavior: 'smooth' }); const closeToc = document.querySelector('[fc-toc = close]') if(closeToc) closeToc.click() setTimeout(() => { this.setAttribute('href', originalHref); }, 100); }); }); } // Expand/collapse utility with icon rotation function expandElement(el) { const clone = el.cloneNode(true); clone.style.visibility = 'hidden'; clone.style.position = 'absolute'; clone.style.height = 'auto'; clone.style.maxHeight = 'none'; clone.style.pointerEvents = 'none'; clone.style.opacity = '0'; el.parentElement.appendChild(clone); const fullHeight = clone.scrollHeight; el.parentElement.removeChild(clone); el.style.maxHeight = fullHeight + 'px'; const icon = el.closest('li')?.querySelector('[fc-toc="open-group"]'); if (icon) { const rotation = icon.getAttribute('fc-toc-rotate') || '180deg'; icon.style.transform = `rotate(${rotation}deg)`; } } function collapseElement(el) { el.style.maxHeight = '0px'; const icon = el.closest('li')?.querySelector('[fc-toc="open-group"]'); if (icon) { icon.style.transform = 'rotate(0deg)'; } } });