Build: Update typesense-minibar to 1.3.2

Ref https://github.com/jquery/typesense-minibar

Author: Krinkle

Makefile

@@ -1,4 +1,4 @@
-MINIBAR_VERSION=1.3.1
+MINIBAR_VERSION=1.3.2
 
 .PHONY: deps
 

_includes/search.html

@@ -1,5 +1,5 @@
-<typesense-minibar>
-<form role="search"{% if site.amethyst.typesense.search_only_api_key %} data-origin="{{ site.amethyst.typesense.origin | escape }}" data-collection="{{ site.amethyst.typesense.collection | escape }}" data-key="{{ site.amethyst.typesense.search_only_api_key | escape }}" data-foot="true"{% endif %} action="https://duckduckgo.com">
+<typesense-minibar{% if site.amethyst.typesense.search_only_api_key %} data-origin="{{ site.amethyst.typesense.origin | escape }}" data-collection="{{ site.amethyst.typesense.collection | escape }}" data-key="{{ site.amethyst.typesense.search_only_api_key | escape }}" data-foot="true"{% endif %}>
+<form role="search" action="https://duckduckgo.com">
     <input type="search" name="q" aria-label="Search" placeholder="Search..." autocomplete="off">
     <input type="hidden" name="sites" value="{{ site.url | remove_first: 'http://' | remove_first: 'https://' }}">
 </form>

_sass/typesense-minibar.css

@@ -1,4 +1,4 @@
-/*! https://github.com/jquery/typesense-minibar 1.3.1 */
+/*! https://github.com/jquery/typesense-minibar 1.3.2 */
 .tsmb-form,
 typesense-minibar {
   --tsmb-size-edge: 1px;
@@ -173,12 +173,12 @@ typesense-minibar [role=option] a {
 }
 
 .tsmb-form:not([data-group=true]) [role=option]:not(:first-child) a,
-typesense-minibar form:not([data-group=true]) [role=option]:not(:first-child) a {
+typesense-minibar:not([data-group=true]) [role=option]:not(:first-child) a {
   border-top: var(--tsmb-size-edge) solid var(--tsmb-color-focus90);
 }
 
 .tsmb-form[data-group=true] [role=option] a,
-typesense-minibar form[data-group=true] [role=option] a {
+typesense-minibar[data-group=true] [role=option] a {
   margin: 0 var(--tsmb-size-base);
   padding: var(--tsmb-size-sm);
 }
@@ -210,7 +210,8 @@ typesense-minibar [role=option] mark {
 .tsmb-suggestion_title {
   color: var(--tsmb-color-primary30);
 }
-.tsmb-form[data-group=true] .tsmb-suggestion_title {
+.tsmb-form[data-group=true] .tsmb-suggestion_title,
+typesense-minibar[data-group=true] .tsmb-suggestion_title {
   font-weight: bold;
   font-size: var(--tsmb-size-sm);
 }

assets/typesense-minibar.js

@@ -1,7 +1,5 @@
-/*! https://github.com/jquery/typesense-minibar 1.3.1 */
-globalThis.tsminibar = function tsminibar (form) {
-  const { origin, collection } = form.dataset;
-  const group = !!form.dataset.group;
+/*! https://github.com/jquery/typesense-minibar 1.3.2 */
+globalThis.tsminibar = function tsminibar (form, dataset = form.dataset) {
   const cache = new Map();
   const state = { query: '', cursor: -1, open: false, hits: [] };
   const searchParams = new URLSearchParams({
@@ -14,10 +12,10 @@ globalThis.tsminibar = function tsminibar (form) {
     sort_by: 'item_priority:desc',
     snippet_threshold: '8',
     highlight_affix_num_tokens: '12',
-    'x-typesense-api-key': form.dataset.key,
-    ...Object.fromEntries(new URLSearchParams(form.dataset.searchParams))
+    'x-typesense-api-key': dataset.key,
+    ...Object.fromEntries(new URLSearchParams(dataset.searchParams))
   });
-  const noResults = form.dataset.noResults || "No results for '{}'.";
+  const noResults = dataset.noResults || "No results for '{}'.";
 
   const input = form.querySelector('input[type=search]');
   const listbox = document.createElement('div');
@@ -31,7 +29,7 @@ globalThis.tsminibar = function tsminibar (form) {
       preconnect = document.createElement('link');
       preconnect.rel = 'preconnect';
       preconnect.crossOrigin = 'anonymous'; // match fetch cors,credentials:omit
-      preconnect.href = origin;
+      preconnect.href = dataset.origin;
       document.head.append(preconnect);
     }
     if (!state.open && state.hits.length) {
@@ -92,7 +90,7 @@ globalThis.tsminibar = function tsminibar (form) {
 
   function connect () {
     document.addEventListener('click', onDocClick);
-    if (form.dataset.slash !== 'false') {
+    if (dataset.slash !== 'false') {
       document.addEventListener('keydown', onDocSlash);
       form.classList.add('tsmb-form--slash');
     }
@@ -124,9 +122,10 @@ globalThis.tsminibar = function tsminibar (form) {
     }
     searchParams.set('q', query);
     const resp = await fetch(
-      `${origin}/collections/${collection}/documents/search?` + searchParams,
+      `${dataset.origin}/collections/${dataset.collection}/documents/search?` + searchParams,
       { mode: 'cors', credentials: 'omit', method: 'GET' }
     );
+    const group = !!dataset.group;
     const data = await resp.json();
     hits = data?.grouped_hits?.map(ghit => {
       const hit = ghit.hits[0];
@@ -151,23 +150,22 @@ globalThis.tsminibar = function tsminibar (form) {
   function render () {
     listbox.hidden = !state.open;
     form.classList.toggle('tsmb-form--open', state.open);
-    listbox.innerHTML = (state.hits.map((hit, i) => `<div role="option"${i === state.cursor ? ' aria-selected="true"' : ''}>${hit.lvl0 ? `<div class="tsmb-suggestion_group">${hit.lvl0}</div>` : ''}<a href="${hit.url}" tabindex="-1"><div class="tsmb-suggestion_title">${hit.title}</div><div class="tsmb-suggestion_content">${hit.content}</div></a></div>`).join('') || `<div class="tsmb-empty">${noResults.replace('{}', escape(state.query))}</div>`) + (form.dataset.foot ? '<a href="https://typesense.org" class="tsmb-foot" title="Search by Typesense"></a>' : '');
+    listbox.innerHTML = (state.hits.map((hit, i) => `<div role="option"${i === state.cursor ? ' aria-selected="true"' : ''}>${hit.lvl0 ? `<div class="tsmb-suggestion_group">${hit.lvl0}</div>` : ''}<a href="${hit.url}" tabindex="-1"><div class="tsmb-suggestion_title">${hit.title}</div><div class="tsmb-suggestion_content">${hit.content}</div></a></div>`).join('') || `<div class="tsmb-empty">${noResults.replace('{}', escape(state.query))}</div>`) + (dataset.foot ? '<a href="https://typesense.org" class="tsmb-foot" title="Search by Typesense"></a>' : '');
   }
 
   function moveCursor (offset) {
     state.cursor += offset;
-    // -1 refers to input field
     if (state.cursor >= state.hits.length) state.cursor = -1;
     if (state.cursor < -1) state.cursor = state.hits.length - 1;
     render();
   }
 
   return { form, connect, disconnect };
 };
-document.querySelectorAll('.tsmb-form[data-origin]').forEach(tsminibar);
 window.customElements.define('typesense-minibar', class extends HTMLElement {
   connectedCallback () {
     const form = this.querySelector('form');
-    if (form) tsminibar(form);
+    if (form && this.dataset.origin) tsminibar(form, this.dataset);
   }
 });
+document.querySelectorAll('.tsmb-form[data-origin]').forEach(form => tsminibar(form));