feat: support non-singleton explorer

Jacky Zhao

2025-03-10 a8001e9554a319782d8557acb8f19358996b5828

 quartz/components/Explorer.tsx

@@ -6,7 +6,8 @@
import { classNames } from "../util/lang"
import { i18n } from "../i18n"
import { FileTrieNode } from "../util/fileTrie"
import OverflowList from "./OverflowList"
import OverflowListFactory from "./OverflowList"
import { concatenateResources } from "../util/resources"

type OrderEntries = "sort" | "filter" | "map"

@@ -56,6 +57,7 @@

export default ((userOpts?: Partial<Options>) => {
  const opts: Options = { ...defaultOptions, ...userOpts }
  const { OverflowList, overflowListAfterDOMLoaded } = OverflowListFactory()

  const Explorer: QuartzComponent = ({ cfg, displayClass }: QuartzComponentProps) => {
    return (
@@ -73,8 +75,7 @@
      >
        <button
          type="button"
          id="mobile-explorer"
          class="explorer-toggle hide-until-loaded"
          class="explorer-toggle mobile-explorer hide-until-loaded"
          data-mobile={true}
          aria-controls="explorer-content"
        >
@@ -95,8 +96,7 @@
        </button>
        <button
          type="button"
          id="desktop-explorer"
          class="title-button explorer-toggle"
          class="title-button explorer-toggle desktop-explorer"
          data-mobile={false}
          aria-expanded={true}
        >
@@ -116,8 +116,8 @@
            <polyline points="6 9 12 15 18 9"></polyline>
          </svg>
        </button>
        <div id="explorer-content" aria-expanded={false}>
          <OverflowList id="explorer-ul" />
        <div class="explorer-content" aria-expanded={false}>
          <OverflowList class="explorer-ul" />
        </div>
        <template id="template-file">
          <li>
@@ -157,6 +157,6 @@
  }

  Explorer.css = style
  Explorer.afterDOMLoaded = script + OverflowList.afterDOMLoaded("explorer-ul")
  Explorer.afterDOMLoaded = concatenateResources(script, overflowListAfterDOMLoaded)
  return Explorer
}) satisfies QuartzComponentConstructor