| | |
| | | import { QuartzComponentConstructor, QuartzComponentProps } from "./types" |
| | | import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" |
| | | import explorerStyle from "./styles/explorer.scss" |
| | | |
| | | // @ts-ignore |
| | | import script from "./scripts/explorer.inline" |
| | | import { ExplorerNode, FileNode, Options } from "./ExplorerNode" |
| | | import { QuartzPluginData } from "../plugins/vfile" |
| | | import { classNames } from "../util/lang" |
| | | import { i18n } from "../i18n" |
| | | |
| | | // Options interface defined in `ExplorerNode` to avoid circular dependency |
| | | const defaultOptions = { |
| | | title: "Explorer", |
| | | folderClickBehavior: "collapse", |
| | | folderDefaultState: "collapsed", |
| | | useSavedState: true, |
| | |
| | | // memoized |
| | | let fileTree: FileNode |
| | | let jsonTree: string |
| | | let lastBuildId: string = "" |
| | | |
| | | function constructFileTree(allFiles: QuartzPluginData[]) { |
| | | if (fileTree) { |
| | | return |
| | | } |
| | | |
| | | // Construct tree from allFiles |
| | | fileTree = new FileNode("") |
| | | allFiles.forEach((file) => fileTree.add(file)) |
| | |
| | | } |
| | | |
| | | // Get all folders of tree. Initialize with collapsed state |
| | | const folders = fileTree.getFolderPaths(opts.folderDefaultState === "collapsed") |
| | | |
| | | // Stringify to pass json tree as data attribute ([data-tree]) |
| | | const folders = fileTree.getFolderPaths(opts.folderDefaultState === "collapsed") |
| | | jsonTree = JSON.stringify(folders) |
| | | } |
| | | |
| | | function Explorer({ allFiles, displayClass, fileData }: QuartzComponentProps) { |
| | | constructFileTree(allFiles) |
| | | const Explorer: QuartzComponent = ({ |
| | | ctx, |
| | | cfg, |
| | | allFiles, |
| | | displayClass, |
| | | fileData, |
| | | }: QuartzComponentProps) => { |
| | | if (ctx.buildId !== lastBuildId) { |
| | | lastBuildId = ctx.buildId |
| | | constructFileTree(allFiles) |
| | | } |
| | | |
| | | return ( |
| | | <div class={`explorer ${displayClass ?? ""}`}> |
| | | <div class={classNames(displayClass, "explorer")}> |
| | | <button |
| | | type="button" |
| | | id="explorer" |
| | |
| | | data-collapsed={opts.folderDefaultState} |
| | | data-savestate={opts.useSavedState} |
| | | data-tree={jsonTree} |
| | | aria-controls="explorer-content" |
| | | aria-expanded={opts.folderDefaultState === "open"} |
| | | > |
| | | <h1>{opts.title}</h1> |
| | | <h2>{opts.title ?? i18n(cfg.locale).components.explorer.title}</h2> |
| | | <svg |
| | | xmlns="http://www.w3.org/2000/svg" |
| | | width="14" |