| | |
| | | function toggleExplorer(this: HTMLElement) { |
| | | const nearestExplorer = this.closest(".explorer") as HTMLElement |
| | | if (!nearestExplorer) return |
| | | nearestExplorer.classList.toggle("collapsed") |
| | | const explorerCollapsed = nearestExplorer.classList.toggle("collapsed") |
| | | nearestExplorer.setAttribute( |
| | | "aria-expanded", |
| | | nearestExplorer.getAttribute("aria-expanded") === "true" ? "false" : "true", |
| | | ) |
| | | |
| | | if (!explorerCollapsed) { |
| | | // Stop <html> from being scrollable when mobile explorer is open |
| | | document.documentElement.classList.add("mobile-no-scroll") |
| | | } else { |
| | | document.documentElement.classList.remove("mobile-no-scroll") |
| | | } |
| | | } |
| | | |
| | | function toggleFolder(evt: MouseEvent) { |
| | |
| | | const folderPath = node.slug |
| | | folderContainer.dataset.folderpath = folderPath |
| | | |
| | | if (currentSlug === folderPath) { |
| | | folderContainer.classList.add("active") |
| | | } |
| | | |
| | | if (opts.folderClickBehavior === "link") { |
| | | // Replace button with link for link behavior |
| | | const button = titleContainer.querySelector(".folder-button") as HTMLElement |
| | |
| | | } |
| | | |
| | | for (const child of node.children) { |
| | | const childNode = child.data |
| | | ? createFileNode(currentSlug, child) |
| | | : createFolderNode(currentSlug, child, opts) |
| | | const childNode = child.isFolder |
| | | ? createFolderNode(currentSlug, child, opts) |
| | | : createFileNode(currentSlug, child) |
| | | ul.appendChild(childNode) |
| | | } |
| | | |
| | |
| | | if (mobileExplorer.checkVisibility()) { |
| | | explorer.classList.add("collapsed") |
| | | explorer.setAttribute("aria-expanded", "false") |
| | | |
| | | // Allow <html> to be scrollable when mobile explorer is collapsed |
| | | document.documentElement.classList.remove("mobile-no-scroll") |
| | | } |
| | | |
| | | mobileExplorer.classList.remove("hide-until-loaded") |
| | | } |
| | | }) |
| | | |
| | | window.addEventListener("resize", function () { |
| | | // Desktop explorer opens by default, and it stays open when the window is resized |
| | | // to mobile screen size. Applies `no-scroll` to <html> in this edge case. |
| | | const explorer = document.querySelector(".explorer") |
| | | if (explorer && !explorer.classList.contains("collapsed")) { |
| | | document.documentElement.classList.add("mobile-no-scroll") |
| | | return |
| | | } |
| | | }) |
| | | |
| | | function setFolderState(folderElement: HTMLElement, collapsed: boolean) { |
| | | return collapsed ? folderElement.classList.remove("open") : folderElement.classList.add("open") |
| | | } |