| | |
| | | const bufferPx = 150 |
| | | const observer = new IntersectionObserver((entries) => { |
| | | for (const entry of entries) { |
| | | const slug = entry.target.id |
| | | const tocEntryElement = document.querySelector(`a[data-for="${slug}"]`) |
| | | const tocEntryElements = document.querySelectorAll(`a[data-for="${slug}"]`) |
| | | const windowHeight = entry.rootBounds?.height |
| | | if (windowHeight && tocEntryElement) { |
| | | if (windowHeight && tocEntryElements.length > 0) { |
| | | if (entry.boundingClientRect.y < windowHeight) { |
| | | tocEntryElement.classList.add("in-view") |
| | | tocEntryElements.forEach((tocEntryElement) => tocEntryElement.classList.add("in-view")) |
| | | } else { |
| | | tocEntryElement.classList.remove("in-view") |
| | | tocEntryElements.forEach((tocEntryElement) => tocEntryElement.classList.remove("in-view")) |
| | | } |
| | | } |
| | | } |
| | |
| | | const content = this.nextElementSibling as HTMLElement | undefined |
| | | if (!content) return |
| | | content.classList.toggle("collapsed") |
| | | content.style.maxHeight = content.style.maxHeight === "0px" ? content.scrollHeight + "px" : "0px" |
| | | } |
| | | |
| | | function setupToc() { |
| | | const toc = document.getElementById("toc") |
| | | if (toc) { |
| | | const collapsed = toc.classList.contains("collapsed") |
| | | const content = toc.nextElementSibling as HTMLElement | undefined |
| | | if (!content) return |
| | | content.style.maxHeight = collapsed ? "0px" : content.scrollHeight + "px" |
| | | toc.addEventListener("click", toggleToc) |
| | | window.addCleanup(() => toc.removeEventListener("click", toggleToc)) |
| | | for (const toc of document.getElementsByClassName("toc")) { |
| | | const button = toc.querySelector(".toc-header") |
| | | const content = toc.querySelector(".toc-content") |
| | | if (!button || !content) return |
| | | button.addEventListener("click", toggleToc) |
| | | window.addCleanup(() => button.removeEventListener("click", toggleToc)) |
| | | } |
| | | } |
| | | |
| | | window.addEventListener("resize", setupToc) |
| | | document.addEventListener("nav", () => { |
| | | setupToc() |
| | | |