Skip to content

Commit

Permalink
Build: Update typesense-minibar from 1.0.2 to 1.1.1
Browse files Browse the repository at this point in the history 
https://github.com/jquery/typesense-minibar/commits/1.1.1
  • Loading branch information
@Krinkle
Krinkle committed Oct 13, 2023
1 parent 21ed065 commit 757fb8a
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 48 deletions.
2 changes: 1 addition & 1 deletion Makefile
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
MINIBAR_VERSION=1.0.2
MINIBAR_VERSION=1.1.1

.PHONY: deps

Expand Down
37 changes: 23 additions & 14 deletions _sass/typesense-minibar.css
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
/*! https://github.com/jquery/typesense-minibar 1.0.2 */
/*! https://github.com/jquery/typesense-minibar 1.1.1 */
.tsmb-form {
--tsmb-size-edge: 1px;
--tsmb-size-radius: 3px;
--tsmb-size-highlight: 2px;
--tsmb-size-base: 1rem;
--tsmb-size-sm: 0.8rem;
--tsmb-size-half: calc( var(--tsmb-size-sm) * 0.5 );
--tsmb-size-input: calc( var(--tsmb-size-base) * 1.2 );
--tsmb-size-half: calc(var(--tsmb-size-sm)/2);
--tsmb-size-input: calc(var(--tsmb-size-base) * 1.2);

--tsmb-color-base-background: #fff;
--tsmb-color-base30: #333;
Expand All @@ -24,10 +24,12 @@
position: relative;
width: 20rem;
max-width: 100%;
padding: 0;
color: var(--tsmb-color-base30);
}

.tsmb-form input[type=search] {
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
Expand Down Expand Up @@ -68,15 +70,22 @@
background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='654 -372 1664 1664' width='20' height='20'><path d='M1806,332c0-123.3-43.8-228.8-131.5-316.5C1586.8-72.2,1481.3-116,1358-116s-228.8,43.8-316.5,131.5 C953.8,103.2,910,208.7,910,332s43.8,228.8,131.5,316.5C1129.2,736.2,1234.7,780,1358,780s228.8-43.8,316.5-131.5 C1762.2,560.8,1806,455.3,1806,332z M2318,1164c0,34.7-12.7,64.7-38,90s-55.3,38-90,38c-36,0-66-12.7-90-38l-343-342 c-119.3,82.7-252.3,124-399,124c-95.3,0-186.5-18.5-273.5-55.5s-162-87-225-150s-113-138-150-225S654,427.3,654,332 s18.5-186.5,55.5-273.5s87-162,150-225s138-113,225-150S1262.7-372,1358-372s186.5,18.5,273.5,55.5s162,87,225,150s113,138,150,225 S2062,236.7,2062,332c0,146.7-41.3,279.7-124,399l343,343C2305.7,1098.7,2318,1128.7,2318,1164z'/></svg>") 0 50% / contain no-repeat;
position: absolute;
top: calc(var(--tsmb-size-sm) + var(--tsmb-size-edge));
left: var(--tsmb-size-base);
left: var(--tsmb-size-sm);
width: var(--tsmb-size-base);
height: var(--tsmb-size-input);
opacity: 0.5;
}

/* js only */
.tsmb-form--open input[type=search],
.tsmb-form--slash input[type=search] {
padding-right: calc(var(--tsmb-size-sm) + var(--tsmb-size-base) + var(--tsmb-size-base));
}

.tsmb-icon-close {
box-sizing: border-box;
position: absolute;
top: calc(50% - var(--tsmb-size-base) / 2);
top: calc(50% - var(--tsmb-size-base)/2);
right: var(--tsmb-size-base);
width: var(--tsmb-size-base);
height: var(--tsmb-size-base);
Expand All @@ -95,15 +104,16 @@
content: '/';
display: inline-block;
position: absolute;
top: calc(var(--tsmb-size-sm) + var(--tsmb-size-edge) + (var(--tsmb-size-input) / 2) - 1em - var(--tsmb-size-edge));
right: var(--tsmb-size-base);
width: 2em;
height: 2em;
top: calc(50% - (var(--tsmb-size-input) + var(--tsmb-size-sm)/2)/2);
right: var(--tsmb-size-sm);
width: calc(var(--tsmb-size-input) + var(--tsmb-size-sm)/2);
height: calc(var(--tsmb-size-input) + var(--tsmb-size-sm)/2);

font-size: var(--tsmb-size-sm);
line-height: 2;
font-size: var(--tsmb-size-base);
line-height: calc(var(--tsmb-size-input) + var(--tsmb-size-sm)/2);
text-align: center;

background: var(--tsmb-color-base-background);
border: var(--tsmb-size-edge) solid var(--tsmb-color-base90);
border-radius: var(--tsmb-size-radius);
color: var(--tsmb-color-base90);
Expand Down Expand Up @@ -179,15 +189,14 @@
padding: var(--tsmb-size-base);
}

.tsmb-foot {
.tsmb-foot,
.tsmb-foot:hover {
display: block;
text-align: right;
font-size: var(--tsmb-size-sm);
line-height: 18px;
padding: var(--tsmb-size-half) var(--tsmb-size-sm);
box-shadow: 0 0 10px rgba(0,0,0,0.12);
}
.tsmb-foot:hover {
text-decoration: none;
}
.tsmb-foot::before {
Expand Down
72 changes: 39 additions & 33 deletions assets/typesense-minibar.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,23 @@
/*! https://github.com/jquery/typesense-minibar 1.0.2 */
/*! https://github.com/jquery/typesense-minibar 1.1.1 */
globalThis.tsminibar = function tsminibar (form) {
const { origin, key, collection } = form.dataset;
const { origin, collection } = form.dataset;
const group = !!form.dataset.group;
const cache = new Map();
const state = { query: '', hits: [], cursor: -1, open: false };
const state = { query: '', cursor: -1, open: false, hits: [] };
const searchParams = new URLSearchParams({
per_page: '5',
query_by: 'hierarchy.lvl0,hierarchy.lvl1,hierarchy.lvl2,hierarchy.lvl3,hierarchy.lvl4,hierarchy.lvl5,content',
include_fields: 'hierarchy.lvl0,hierarchy.lvl1,hierarchy.lvl2,hierarchy.lvl3,hierarchy.lvl4,hierarchy.lvl5,content,url_without_anchor,url,id',
highlight_full_fields: 'hierarchy.lvl0,hierarchy.lvl1,hierarchy.lvl2,hierarchy.lvl3,hierarchy.lvl4,hierarchy.lvl5,content',
group_by: 'url_without_anchor',
group_limit: '1',
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))
});
const noResults = form.dataset.noResults || "No results for '{}'.";

const input = form.querySelector('input[type=search]');
const listbox = document.createElement('div');
Expand All @@ -12,11 +26,11 @@ globalThis.tsminibar = function tsminibar (form) {
input.after(listbox);

let preconnect = null;
input.addEventListener('focus', () => {
input.addEventListener('focus', function () {
if (!preconnect) {
preconnect = document.createElement('link');
preconnect.rel = 'preconnect';
preconnect.crossOrigin = 'anonymous'; // for fetch mode:cors,credentials:omit
preconnect.crossOrigin = 'anonymous'; // match fetch cors,credentials:omit
preconnect.href = origin;
document.head.append(preconnect);
}
Expand All @@ -25,19 +39,12 @@ globalThis.tsminibar = function tsminibar (form) {
render();
}
});
input.addEventListener('click', () => {
if (!state.open && state.hits.length) {
state.open = true;
render();
}
});
input.addEventListener('input', async () => {
input.addEventListener('input', async function () {
const query = state.query = input.value;
if (!query) {
state.hits = []; // don't leak old hits on focus
state.cursor = -1;
close();
return;
return close();
}
const hits = await search(query);
if (state.query === query) { // ignore non-current query
Expand All @@ -47,8 +54,14 @@ globalThis.tsminibar = function tsminibar (form) {
render();
}
});
input.addEventListener('keydown', (e) => {
if (!(e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)) {
input.addEventListener('click', function () {
if (!state.open && state.hits.length) {
state.open = true;
render();
}
});
input.addEventListener('keydown', function (e) {
if (!e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
if (e.code === 'ArrowDown') moveCursor(1);
if (e.code === 'ArrowUp') moveCursor(-1);
if (e.code === 'Escape') close();
Expand All @@ -58,11 +71,15 @@ globalThis.tsminibar = function tsminibar (form) {
}
}
});
form.addEventListener('submit', (e) => {
form.addEventListener('submit', function (e) {
e.preventDefault(); // disable fallback
});
form.insertAdjacentHTML('beforeend', '<svg viewBox="0 0 12 12" width="20" height="20" aria-hidden="true" class="tsmb-icon-close" style="display: none;"><path d="M9 3L3 9M3 3L9 9"/></svg>');
form.querySelector('.tsmb-icon-close').addEventListener('click', close);
form.querySelector('.tsmb-icon-close').addEventListener('click', function () {
input.value = '';
input.focus();
close();
});
connect();

function close () {
Expand Down Expand Up @@ -98,30 +115,19 @@ globalThis.tsminibar = function tsminibar (form) {
}

async function search (query) {
let lvl0;
let hits = cache.get(query);
if (hits) {
cache.delete(query);
cache.set(query, hits); // LRU
return hits;
}
searchParams.set('q', query);
const resp = await fetch(
`${origin}/collections/${collection}/documents/search?` + new URLSearchParams({
q: query,
per_page: '5',
query_by: 'hierarchy.lvl0,hierarchy.lvl1,hierarchy.lvl2,hierarchy.lvl3,hierarchy.lvl4,hierarchy.lvl5,content',
include_fields: 'hierarchy.lvl0,hierarchy.lvl1,hierarchy.lvl2,hierarchy.lvl3,hierarchy.lvl4,hierarchy.lvl5,content,url_without_anchor,url,id',
highlight_full_fields: 'hierarchy.lvl0,hierarchy.lvl1,hierarchy.lvl2,hierarchy.lvl3,hierarchy.lvl4,hierarchy.lvl5,content',
group_by: 'url_without_anchor',
group_limit: '1',
sort_by: 'item_priority:desc',
snippet_threshold: '8',
highlight_affix_num_tokens: '12',
'x-typesense-api-key': key,
}),
`${origin}/collections/${collection}/documents/search?` + searchParams,
{ mode: 'cors', credentials: 'omit', method: 'GET' }
);
const data = await resp.json();
let lvl0;
hits = data?.grouped_hits?.map(ghit => {
const hit = ghit.hits[0];
return {
Expand All @@ -146,7 +152,7 @@ globalThis.tsminibar = function tsminibar (form) {
listbox.hidden = !state.open;
form.classList.toggle('tsmb-form--open', state.open);
if (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">No results for '${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>`) + (form.dataset.foot ? '<a href="https://typesense.org" class="tsmb-foot" title="Search by Typesense"></a>' : '');
}
}

Expand Down

0 comments on commit 757fb8a

Please sign in to comment.