litruv/Docs-Viewer
1
0
Fork 0
mirror of https://github.com/litruv/Docs-Viewer.git synced 2026-07-24 02:36:07 +10:00
Code Issues Packages Projects Releases Wiki Activity

Add header folding toggle functionality to document outline

Browse Source
This commit is contained in:
Litruv
2025-02-04 15:50:48 +11:00
parent d8233b16ef
commit e0942c5643
1 changed files with 25 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
index.js
View File

@@ -298,7 +298,7 @@ async function loadDocument(path) {
hljs.highlightAll(); hljs.highlightAll();
documentOutline.innerHTML = ''; documentOutline.innerHTML = '';
const headings = documentContent.querySelectorAll('h1, h2, h3, h4, h5, h6'); const headings = documentContent.querySelectorAll('h2, h3, h4, h5, h6');
const headingLinks = new Map(); const headingLinks = new Map();
headings.forEach(heading => { headings.forEach(heading => {
@@ -330,6 +330,30 @@ async function loadDocument(path) {
}; };
documentOutline.appendChild(link); documentOutline.appendChild(link);
/* Add header folding toggle */
const toggleBtn = document.createElement('span');
toggleBtn.innerHTML = `<svg width="10" height="10" viewBox="0 0 10 10" style="transform: rotate(90deg); transition: transform 0.2s;">
<path d="M3 2L7 5L3 8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`;
toggleBtn.style.cursor = 'pointer';
toggleBtn.style.userSelect = 'none';
toggleBtn.style.marginLeft = '0.5em';
toggleBtn.style.display = 'inline-flex';
toggleBtn.style.alignItems = 'center';
heading.appendChild(toggleBtn);
toggleBtn.addEventListener('click', (e) => {
e.stopPropagation();
const svg = toggleBtn.querySelector('svg');
const isFolded = svg.style.transform === 'rotate(90deg)';
svg.style.transform = isFolded ? 'rotate(0deg)' : 'rotate(90deg)';
let next = heading.nextElementSibling;
while (next && !/^H[1-6]$/.test(next.tagName)) {
next.style.display = isFolded ? 'none' : '';
next = next.nextElementSibling;
}
});
}); });
const observer = new IntersectionObserver((entries) => { const observer = new IntersectionObserver((entries) => {