scapegoat/Docs2.git

			@@ -1,31 +1,40 @@
			import { FolderState } from "../ExplorerNode"
			import { FileTrieNode } from "../../util/fileTrie"
			import { FullSlug, resolveRelative, simplifySlug } from "../../util/path"
			import { ContentDetails } from "../../plugins/emitters/contentIndex"

			type MaybeHTMLElement = HTMLElement \| undefined
			let currentExplorerState: FolderState[]
			const observer = new IntersectionObserver((entries) => {
			// If last element is observed, remove gradient of "overflow" class so element is visible
			const explorerUl = document.getElementById("explorer-ul")
			if (!explorerUl) return
			for (const entry of entries) {
			if (entry.isIntersecting) {
			explorerUl.classList.add("no-background")
			} else {
			explorerUl.classList.remove("no-background")
			}
			}
			})

			interface ParsedOptions {
			folderClickBehavior: "collapse" \| "link"
			folderDefaultState: "collapsed" \| "open"
			useSavedState: boolean
			sortFn: (a: FileTrieNode, b: FileTrieNode) => number
			filterFn: (node: FileTrieNode) => boolean
			mapFn: (node: FileTrieNode) => void
			order: "sort" \| "filter" \| "map"[]
			}

			type FolderState = {
			path: string
			collapsed: boolean
			}

			let currentExplorerState: Array<FolderState>
			function toggleExplorer(this: HTMLElement) {
			this.classList.toggle("collapsed")
			this.setAttribute(
			const nearestExplorer = this.closest(".explorer") as HTMLElement
			if (!nearestExplorer) return
			const explorerCollapsed = nearestExplorer.classList.toggle("collapsed")
			nearestExplorer.setAttribute(
			"aria-expanded",
			this.getAttribute("aria-expanded") === "true" ? "false" : "true",
			nearestExplorer.getAttribute("aria-expanded") === "true" ? "false" : "true",
			)
			const content = this.nextElementSibling as MaybeHTMLElement
			if (!content) return

			content.classList.toggle("collapsed")
			content.style.maxHeight = content.style.maxHeight === "0px" ? content.scrollHeight + "px" : "0px"
			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) {
			@@ -33,104 +42,264 @@
			const target = evt.target as MaybeHTMLElement
			if (!target) return

			// Check if target was svg icon or button
			const isSvg = target.nodeName === "svg"
			const childFolderContainer = (

			// corresponding <ul> element relative to clicked button/folder
			const folderContainer = (
			isSvg
			? target.parentElement?.nextSibling
			: target.parentElement?.parentElement?.nextElementSibling
			? // svg -> div.folder-container
			target.parentElement
			: // button.folder-button -> div -> div.folder-container
			target.parentElement?.parentElement
			) as MaybeHTMLElement
			const currentFolderParent = (
			isSvg ? target.nextElementSibling : target.parentElement
			) as MaybeHTMLElement
			if (!(childFolderContainer && currentFolderParent)) return
			if (!folderContainer) return
			const childFolderContainer = folderContainer.nextElementSibling as MaybeHTMLElement
			if (!childFolderContainer) return

			childFolderContainer.classList.toggle("open")
			const isCollapsed = childFolderContainer.classList.contains("open")
			setFolderState(childFolderContainer, !isCollapsed)
			const fullFolderPath = currentFolderParent.dataset.folderpath as string
			toggleCollapsedByPath(currentExplorerState, fullFolderPath)

			// Collapse folder container
			const isCollapsed = !childFolderContainer.classList.contains("open")
			setFolderState(childFolderContainer, isCollapsed)

			const currentFolderState = currentExplorerState.find(
			(item) => item.path === folderContainer.dataset.folderpath,
			)
			if (currentFolderState) {
			currentFolderState.collapsed = isCollapsed
			} else {
			currentExplorerState.push({
			path: folderContainer.dataset.folderpath as FullSlug,
			collapsed: isCollapsed,
			})
			}

			const stringifiedFileTree = JSON.stringify(currentExplorerState)
			localStorage.setItem("fileTree", stringifiedFileTree)
			}

			function setupExplorer() {
			const explorer = document.getElementById("explorer")
			if (!explorer) return
			function createFileNode(currentSlug: FullSlug, node: FileTrieNode): HTMLLIElement {
			const template = document.getElementById("template-file") as HTMLTemplateElement
			const clone = template.content.cloneNode(true) as DocumentFragment
			const li = clone.querySelector("li") as HTMLLIElement
			const a = li.querySelector("a") as HTMLAnchorElement
			a.href = resolveRelative(currentSlug, node.slug)
			a.dataset.for = node.slug
			a.textContent = node.displayName

			if (explorer.dataset.behavior === "collapse") {
			for (const item of document.getElementsByClassName(
			"folder-button",
			) as HTMLCollectionOf<HTMLElement>) {
			item.addEventListener("click", toggleFolder)
			window.addCleanup(() => item.removeEventListener("click", toggleFolder))
			}
			if (currentSlug === node.slug) {
			a.classList.add("active")
			}

			explorer.addEventListener("click", toggleExplorer)
			window.addCleanup(() => explorer.removeEventListener("click", toggleExplorer))

			// Set up click handlers for each folder (click handler on folder "icon")
			for (const item of document.getElementsByClassName(
			"folder-icon",
			) as HTMLCollectionOf<HTMLElement>) {
			item.addEventListener("click", toggleFolder)
			window.addCleanup(() => item.removeEventListener("click", toggleFolder))
			}

			// Get folder state from local storage
			const storageTree = localStorage.getItem("fileTree")
			const useSavedFolderState = explorer?.dataset.savestate === "true"
			const oldExplorerState: FolderState[] =
			storageTree && useSavedFolderState ? JSON.parse(storageTree) : []
			const oldIndex = new Map(oldExplorerState.map((entry) => [entry.path, entry.collapsed]))
			const newExplorerState: FolderState[] = explorer.dataset.tree
			? JSON.parse(explorer.dataset.tree)
			: []
			currentExplorerState = []
			for (const { path, collapsed } of newExplorerState) {
			currentExplorerState.push({ path, collapsed: oldIndex.get(path) ?? collapsed })
			}

			currentExplorerState.map((folderState) => {
			const folderLi = document.querySelector(
			`[data-folderpath='${folderState.path}']`,
			) as MaybeHTMLElement
			const folderUl = folderLi?.parentElement?.nextElementSibling as MaybeHTMLElement
			if (folderUl) {
			setFolderState(folderUl, folderState.collapsed)
			}
			})
			return li
			}

			window.addEventListener("resize", setupExplorer)
			document.addEventListener("nav", () => {
			setupExplorer()
			observer.disconnect()
			function createFolderNode(
			currentSlug: FullSlug,
			node: FileTrieNode,
			opts: ParsedOptions,
			): HTMLLIElement {
			const template = document.getElementById("template-folder") as HTMLTemplateElement
			const clone = template.content.cloneNode(true) as DocumentFragment
			const li = clone.querySelector("li") as HTMLLIElement
			const folderContainer = li.querySelector(".folder-container") as HTMLElement
			const titleContainer = folderContainer.querySelector("div") as HTMLElement
			const folderOuter = li.querySelector(".folder-outer") as HTMLElement
			const ul = folderOuter.querySelector("ul") as HTMLUListElement

			// select pseudo element at end of list
			const lastItem = document.getElementById("explorer-end")
			if (lastItem) {
			observer.observe(lastItem)
			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
			const a = document.createElement("a")
			a.href = resolveRelative(currentSlug, folderPath)
			a.dataset.for = folderPath
			a.className = "folder-title"
			a.textContent = node.displayName
			button.replaceWith(a)
			} else {
			const span = titleContainer.querySelector(".folder-title") as HTMLElement
			span.textContent = node.displayName
			}

			// if the saved state is collapsed or the default state is collapsed
			const isCollapsed =
			currentExplorerState.find((item) => item.path === folderPath)?.collapsed ??
			opts.folderDefaultState === "collapsed"

			// if this folder is a prefix of the current path we
			// want to open it anyways
			const simpleFolderPath = simplifySlug(folderPath)
			const folderIsPrefixOfCurrentSlug =
			simpleFolderPath === currentSlug.slice(0, simpleFolderPath.length)

			if (!isCollapsed \|\| folderIsPrefixOfCurrentSlug) {
			folderOuter.classList.add("open")
			}

			for (const child of node.children) {
			const childNode = child.isFolder
			? createFolderNode(currentSlug, child, opts)
			: createFileNode(currentSlug, child)
			ul.appendChild(childNode)
			}

			return li
			}

			async function setupExplorer(currentSlug: FullSlug) {
			const allExplorers = document.querySelectorAll("div.explorer") as NodeListOf<HTMLElement>

			for (const explorer of allExplorers) {
			const dataFns = JSON.parse(explorer.dataset.dataFns \|\| "{}")
			const opts: ParsedOptions = {
			folderClickBehavior: (explorer.dataset.behavior \|\| "collapse") as "collapse" \| "link",
			folderDefaultState: (explorer.dataset.collapsed \|\| "collapsed") as "collapsed" \| "open",
			useSavedState: explorer.dataset.savestate === "true",
			order: dataFns.order \|\| ["filter", "map", "sort"],
			sortFn: new Function("return " + (dataFns.sortFn \|\| "undefined"))(),
			filterFn: new Function("return " + (dataFns.filterFn \|\| "undefined"))(),
			mapFn: new Function("return " + (dataFns.mapFn \|\| "undefined"))(),
			}

			// Get folder state from local storage
			const storageTree = localStorage.getItem("fileTree")
			const serializedExplorerState = storageTree && opts.useSavedState ? JSON.parse(storageTree) : []
			const oldIndex = new Map<string, boolean>(
			serializedExplorerState.map((entry: FolderState) => [entry.path, entry.collapsed]),
			)

			const data = await fetchData
			const entries = [...Object.entries(data)] as [FullSlug, ContentDetails][]
			const trie = FileTrieNode.fromEntries(entries)

			// Apply functions in order
			for (const fn of opts.order) {
			switch (fn) {
			case "filter":
			if (opts.filterFn) trie.filter(opts.filterFn)
			break
			case "map":
			if (opts.mapFn) trie.map(opts.mapFn)
			break
			case "sort":
			if (opts.sortFn) trie.sort(opts.sortFn)
			break
			}
			}

			// Get folder paths for state management
			const folderPaths = trie.getFolderPaths()
			currentExplorerState = folderPaths.map((path) => {
			const previousState = oldIndex.get(path)
			return {
			path,
			collapsed:
			previousState === undefined ? opts.folderDefaultState === "collapsed" : previousState,
			}
			})

			const explorerUl = explorer.querySelector(".explorer-ul")
			if (!explorerUl) continue

			// Create and insert new content
			const fragment = document.createDocumentFragment()
			for (const child of trie.children) {
			const node = child.isFolder
			? createFolderNode(currentSlug, child, opts)
			: createFileNode(currentSlug, child)

			fragment.appendChild(node)
			}
			explorerUl.insertBefore(fragment, explorerUl.firstChild)

			// restore explorer scrollTop position if it exists
			const scrollTop = sessionStorage.getItem("explorerScrollTop")
			if (scrollTop) {
			explorerUl.scrollTop = parseInt(scrollTop)
			} else {
			// try to scroll to the active element if it exists
			const activeElement = explorerUl.querySelector(".active")
			if (activeElement) {
			activeElement.scrollIntoView({ behavior: "smooth" })
			}
			}

			// Set up event handlers
			const explorerButtons = explorer.getElementsByClassName(
			"explorer-toggle",
			) as HTMLCollectionOf<HTMLElement>
			for (const button of explorerButtons) {
			button.addEventListener("click", toggleExplorer)
			window.addCleanup(() => button.removeEventListener("click", toggleExplorer))
			}

			// Set up folder click handlers
			if (opts.folderClickBehavior === "collapse") {
			const folderButtons = explorer.getElementsByClassName(
			"folder-button",
			) as HTMLCollectionOf<HTMLElement>
			for (const button of folderButtons) {
			button.addEventListener("click", toggleFolder)
			window.addCleanup(() => button.removeEventListener("click", toggleFolder))
			}
			}

			const folderIcons = explorer.getElementsByClassName(
			"folder-icon",
			) as HTMLCollectionOf<HTMLElement>
			for (const icon of folderIcons) {
			icon.addEventListener("click", toggleFolder)
			window.addCleanup(() => icon.removeEventListener("click", toggleFolder))
			}
			}
			}

			document.addEventListener("prenav", async () => {
			// save explorer scrollTop position
			const explorer = document.querySelector(".explorer-ul")
			if (!explorer) return
			sessionStorage.setItem("explorerScrollTop", explorer.scrollTop.toString())
			})

			document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
			const currentSlug = e.detail.url
			await setupExplorer(currentSlug)

			// if mobile hamburger is visible, collapse by default
			for (const explorer of document.getElementsByClassName("explorer")) {
			const mobileExplorer = explorer.querySelector(".mobile-explorer")
			if (!mobileExplorer) return

			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")
			}
			})

			/**
			* Toggles the state of a given folder
			* @param folderElement <div class="folder-outer"> Element of folder (parent)
			* @param collapsed if folder should be set to collapsed or not
			*/
			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")
			}

			/**
			* Toggles visibility of a folder
			* @param array array of FolderState (`fileTree`, either get from local storage or data attribute)
			* @param path path to folder (e.g. 'advanced/more/more2')
			*/
			function toggleCollapsedByPath(array: FolderState[], path: string) {
			const entry = array.find((item) => item.path === path)
			if (entry) {
			entry.collapsed = !entry.collapsed
			}
			}