Merge pull request #579 from vanbroup/open-filters

Add `openFilters` configuration option
CloudCannon · Mar 26, 2024 · aab74d6 · aab74d6
2 parents ce83d6a + d34942e
commit aab74d6
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 1 deletion.
diff --git a/docs/content/docs/ui.md b/docs/content/docs/ui.md
@@ -113,6 +113,19 @@ new PagefindUI({
 
 By default, Pagefind UI shows filters with no results alongside the count (0). Pass `false` to hide filters that have no remaining results.
 
+### Open filters
+
+{{< diffcode >}}
+```javascript
+new PagefindUI({
+    element: "#search",
++    openFilters: ['Tags','Type']
+});
+```
+{{< /diffcode >}}
+
+The default behavior of the filter display is to show values only when there is one filter with six or fewer values. When you include a filter name in `openFilters` it will open by default, regardless of the number of filters or values present.
+
 ### Reset styles
 
 {{< diffcode >}}

diff --git a/pagefind_ui/default/svelte/filters.svelte b/pagefind_ui/default/svelte/filters.svelte
@@ -1,6 +1,7 @@
 <script>
     export let available_filters = null;
     export let show_empty_filters = true;
+    export let open_filters = [];
     export let translate = () => "";
     export let automatic_translations = {};
     export let translations = {};
@@ -28,7 +29,7 @@
             >{translate("filters_label", automatic_translations, translations)}</legend
         >
         {#each Object.entries(available_filters) as [filter, values]}
-            <details class="pagefind-ui__filter-block" open={default_open}>
+            <details class="pagefind-ui__filter-block" open={default_open || open_filters.map(f => f.toLowerCase()).includes(filter.toLowerCase())}>
                 <summary class="pagefind-ui__filter-name"
                     >{@html filter.replace(/^(\w)/, (c) =>
                         c.toLocaleUpperCase()

diff --git a/pagefind_ui/default/svelte/ui.svelte b/pagefind_ui/default/svelte/ui.svelte
@@ -29,6 +29,7 @@
   export let process_result = null;
   export let process_term = null;
   export let show_empty_filters = true;
+  export let open_filters = [];
   export let debounce_timeout_ms = 300;
   export let pagefind_options = {};
   export let merge_index = [];
@@ -264,6 +265,7 @@
       {#if initializing}
         <Filters
           {show_empty_filters}
+          {open_filters}
           {available_filters}
           {translate}
           {automatic_translations}

diff --git a/pagefind_ui/default/ui-core.js b/pagefind_ui/default/ui-core.js
@@ -23,6 +23,7 @@ export class PagefindUI {
     let processResult = opts.processResult ?? null;
     let processTerm = opts.processTerm ?? null;
     let showEmptyFilters = opts.showEmptyFilters ?? true;
+    let openFilters = opts.openFilters ?? [];
     let debounceTimeoutMs = opts.debounceTimeoutMs ?? 300;
     let mergeIndex = opts.mergeIndex ?? [];
     let translations = opts.translations ?? [];
@@ -40,6 +41,7 @@ export class PagefindUI {
     delete opts["processResult"];
     delete opts["processTerm"];
     delete opts["showEmptyFilters"];
+    delete opts["openFilters"];
     delete opts["debounceTimeoutMs"];
     delete opts["mergeIndex"];
     delete opts["translations"];
@@ -63,6 +65,7 @@ export class PagefindUI {
           process_result: processResult,
           process_term: processTerm,
           show_empty_filters: showEmptyFilters,
+          open_filters: openFilters,
           debounce_timeout_ms: debounceTimeoutMs,
           merge_index: mergeIndex,
           translations,