Merge pull request #497 from CloudCannon/feat/page-size

Add configurable page size to the Default UI
CloudCannon · Nov 15, 2023 · 3571dec · 3571dec
2 parents 577f1b1 + 8b0d8b8
commit 3571dec
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/docs/content/docs/ui.md b/docs/content/docs/ui.md
@@ -15,6 +15,19 @@ new PagefindUI({ element: "#search" });
 
 A selector for the HTML element to attach Pagefind UI to. This is the only required argument.
 
+### Page size
+
+{{< diffcode >}}
+```javascript
+new PagefindUI({
+    element: "#search",
++    pageSize: 5
+});
+```
+{{< /diffcode >}}
+
+The number of search results to load at once, before a "Load more" button is shown. Defaults to `5`.
+
 ### Show sub results
 
 {{< diffcode >}}

diff --git a/pagefind_ui/default/svelte/ui.svelte b/pagefind_ui/default/svelte/ui.svelte
@@ -21,6 +21,7 @@
   }
 
   export let base_path = "/pagefind/";
+  export let page_size = 5;
   export let reset_styles = true;
   export let show_images = true;
   export let show_sub_results = false;
@@ -64,7 +65,7 @@
   let searched = false;
   let search_id = 0;
   let search_term = "";
-  let show = 5;
+  let show = page_size;
   let initial_filters = null;
   let available_filters = null;
   let selected_filters = {};
@@ -199,7 +200,7 @@
       }
       searchResult = results;
       loading = false;
-      show = 5;
+      show = page_size;
     }
   };
 
@@ -212,7 +213,7 @@
 
   const showMore = (e) => {
     e?.preventDefault();
-    show += 5;
+    show += page_size;
   };
 </script>
 

diff --git a/pagefind_ui/default/ui-core.js b/pagefind_ui/default/ui-core.js
@@ -15,6 +15,7 @@ export class PagefindUI {
 
     let selector = opts.element ?? "[data-pagefind-ui]";
     let bundlePath = opts.bundlePath ?? scriptBundlePath;
+    let pageSize = opts.pageSize ?? 5;
     let resetStyles = opts.resetStyles ?? true;
     let showImages = opts.showImages ?? true;
     let showSubResults = opts.showSubResults ?? false;
@@ -34,6 +35,7 @@ export class PagefindUI {
     // Remove the UI-specific config before passing it along to the Pagefind backend
     delete opts["element"];
     delete opts["bundlePath"];
+    delete opts["pageSize"];
     delete opts["resetStyles"];
     delete opts["showImages"];
     delete opts["showSubResults"];
@@ -54,6 +56,7 @@ export class PagefindUI {
         target: dom,
         props: {
           base_path: bundlePath,
+          page_size: pageSize,
           reset_styles: resetStyles,
           show_images: showImages,
           show_sub_results: showSubResults,