Skip to content

Commit f1fde96

Browse files
KrinkleKrinkle
committed
All: update typesense-minibar to 1.3.2
* Introduces optional support for `<typesense-minibar>` web component. * Adopt `--tsmb-size-listbox-right: 0;` while at it, introduced in version 1.2.0. * Add cache buster. Ref https://github.com/jquery/typesense-minibar/tree/1.3.2
1 parent c475c28 commit f1fde96

File tree

9 files changed

+87
-76
lines changed

9 files changed

+87
-76
lines changed

‎composer.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
"scripts": {
99
"test": "parallel-lint --exclude vendor/ .",
1010
"deps": [
11-
"curl -O -q --output-dir themes/jquery/lib/typesense-minibar 'https://raw.githubusercontent.com/jquery/typesense-minibar/1.1.1/{typesense-minibar.css,typesense-minibar.js,LICENSE.txt}'",
12-
"curl -q https://raw.githubusercontent.com/jquery/typesense-minibar/1.1.1/typesense-minibar-foot.css >> themes/jquery/lib/typesense-minibar/typesense-minibar.css",
11+
"curl -O -q --output-dir themes/jquery/lib/typesense-minibar 'https://raw.githubusercontent.com/jquery/typesense-minibar/1.3.2/{typesense-minibar.css,typesense-minibar.js,LICENSE.txt}'",
12+
"curl -q https://raw.githubusercontent.com/jquery/typesense-minibar/1.3.2/typesense-minibar-foot.css >> themes/jquery/lib/typesense-minibar/typesense-minibar.css",
1313
"curl -O -q --output-dir plugins/memcached 'https://raw.githubusercontent.com/Automattic/wp-memcached/35e1ea16f6b8cb8a1e6fbca124e33a44db21fa74/{object-cache.php,readme.txt,LICENSE}'"
1414
]
1515
}

‎themes/jquery/css/base.css

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1240,6 +1240,7 @@ nav#main li.current a {
12401240
--tsmb-size-radius: 5px;
12411241
--tsmb-size-base: 12px;
12421242
--tsmb-size-sm: 0.8rem;
1243+
--tsmb-size-listbox-right: 0;
12431244
--tsmb-color-base-background: var(--tsmb-color-primary50);
12441245
--tsmb-color-base30: #fff;
12451246
--tsmb-color-base50: var(--tsmb-color-primary90);
@@ -1273,9 +1274,6 @@ nav#main li.current a {
12731274
.tsmb-form input[type=search] {
12741275
border-width: 0;
12751276
}
1276-
.tsmb-form [role="listbox"] {
1277-
right: 0;
1278-
}
12791277
.tsmb-form [role="option"] mark {
12801278
border-bottom: 2px solid var(--tsmb-color-primary90);
12811279
}

‎themes/jquery/footer-mobile.php

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
</footer>
99

1010
<?php wp_footer(); ?>
11-
<?php jq_search_the_footer(); ?>
1211

1312
</body>
1413
</html>

‎themes/jquery/footer-ui.php

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@
3737
</footer>
3838

3939
<?php wp_footer(); ?>
40-
<?php jq_search_the_footer(); ?>
4140

4241
</body>
4342
</html>

‎themes/jquery/footer.php

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,5 @@
3737
</footer>
3838

3939
<?php wp_footer(); ?>
40-
<?php jq_search_the_footer(); ?>
4140
</body>
4241
</html>

‎themes/jquery/functions.jquery.php

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -183,11 +183,3 @@ function jq_search_get_provider() {
183183
}
184184
return '';
185185
}
186-
187-
function jq_search_the_footer() {
188-
if ( jq_search_get_provider() === 'typesense' ) :
189-
?>
190-
<script defer src="<?php echo get_template_directory_uri(); ?>/lib/typesense-minibar/typesense-minibar.js"></script>
191-
<?php
192-
endif;
193-
}

‎themes/jquery/header.php

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,19 @@
1818
<meta name="viewport" content="width=device-width">
1919

2020
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/i/favicon.ico">
21-
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/lib/typesense-minibar/typesense-minibar.css">
22-
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/base.css?v=15">
21+
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/lib/typesense-minibar/typesense-minibar.css?v=1.3.2">
22+
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/base.css?v=16">
2323
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>?v=8">
2424

2525
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
2626
<script src="<?php echo get_template_directory_uri(); ?>/js/main.js"></script>
2727
<?php
28+
if ( jq_search_get_provider() === 'typesense' ) :
29+
?>
30+
<script defer type="module" src="<?php echo get_template_directory_uri(); ?>/lib/typesense-minibar/typesense-minibar.js?v=1.3.2"></script>
31+
<?php
32+
endif;
33+
2834
if ( get_option( 'thread_comments' ) && comments_open() ) {
2935
wp_enqueue_script( 'comment-reply' );
3036
}

‎themes/jquery/lib/typesense-minibar/typesense-minibar.css

Lines changed: 58 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
1-
/*! https://github.com/jquery/typesense-minibar 1.1.1 */
2-
.tsmb-form {
1+
/*! https://github.com/jquery/typesense-minibar 1.3.2 */
2+
.tsmb-form,
3+
typesense-minibar {
34
--tsmb-size-edge: 1px;
45
--tsmb-size-radius: 3px;
56
--tsmb-size-highlight: 2px;
67
--tsmb-size-base: 1rem;
78
--tsmb-size-sm: 0.8rem;
89
--tsmb-size-half: calc(var(--tsmb-size-sm)/2);
910
--tsmb-size-input: calc(var(--tsmb-size-base) * 1.2);
11+
--tsmb-size-listbox-right: auto;
12+
--tsmb-size-listbox-width: calc(min(30rem, 60vw));
13+
--tsmb-size-listbox-max-height: 70vh;
1014

1115
--tsmb-color-base-background: #fff;
1216
--tsmb-color-base30: #333;
@@ -20,15 +24,19 @@
2024
--tsmb-color-primary30: #390f39;
2125
--tsmb-color-primary50: #9c3493;
2226
--tsmb-color-primary90: #fbdbfb;
27+
}
2328

29+
.tsmb-form,
30+
typesense-minibar form {
2431
position: relative;
2532
width: 20rem;
2633
max-width: 100%;
2734
padding: 0;
2835
color: var(--tsmb-color-base30);
2936
}
3037

31-
.tsmb-form input[type=search] {
38+
.tsmb-form input[type=search],
39+
typesense-minibar input[type=search] {
3240
box-sizing: border-box;
3341
-webkit-appearance: none;
3442
-moz-appearance: none;
@@ -43,29 +51,40 @@
4351
line-height: var(--tsmb-size-input);
4452
}
4553

46-
.tsmb-form input[type=search]::placeholder {
54+
.tsmb-form input[type=search]::placeholder,
55+
typesense-minibar input[type=search]::placeholder {
4756
color: var(--tsmb-color-base50);
4857
opacity: 1;
4958
}
5059

51-
.tsmb-form:focus-within {
60+
.tsmb-form:focus-within,
61+
typesense-minibar form:focus-within {
5262
color: var(--tsmb-color-focus30);
5363
}
54-
.tsmb-form:focus-within input[type=search] {
64+
65+
.tsmb-form:focus-within input[type=search],
66+
typesense-minibar:focus-within input[type=search] {
5567
background: var(--tsmb-color-focus-background);
5668
}
57-
.tsmb-form:focus-within input[type=search]::placeholder {
69+
70+
.tsmb-form:focus-within input[type=search]::placeholder,
71+
typesense-minibar:focus-within input[type=search]::placeholder {
5872
color: var(--tsmb-color-focus50);
5973
}
6074

6175
.tsmb-form input[type=search]::-webkit-search-decoration,
6276
.tsmb-form input[type=search]::-webkit-search-cancel-button,
6377
.tsmb-form input[type=search]::-webkit-search-results-button,
64-
.tsmb-form input[type=search]::-webkit-search-results-decoration {
78+
.tsmb-form input[type=search]::-webkit-search-results-decoration,
79+
typesense-minibar input[type=search]::-webkit-search-decoration,
80+
typesense-minibar input[type=search]::-webkit-search-cancel-button,
81+
typesense-minibar input[type=search]::-webkit-search-results-button,
82+
typesense-minibar input[type=search]::-webkit-search-results-decoration {
6583
display: none;
6684
}
6785

68-
.tsmb-form::before {
86+
.tsmb-form::before,
87+
typesense-minibar form::before {
6988
content: '';
7089
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;
7190
position: absolute;
@@ -100,6 +119,10 @@
100119
display: block !important;
101120
}
102121

122+
.tsmb-form--slash::after {
123+
display: none;
124+
}
125+
103126
.tsmb-form--slash:not(.tsmb-form--open):not(:focus-within)::after {
104127
content: '/';
105128
display: inline-block;
@@ -119,16 +142,20 @@
119142
color: var(--tsmb-color-base90);
120143
}
121144

122-
.tsmb-form [role=listbox] {
145+
.tsmb-form [role=listbox],
146+
typesense-minibar [role=listbox] {
123147
position: absolute;
124148
z-index: 10;
125-
149+
right: var(--tsmb-size-listbox-right);
126150
background: var(--tsmb-color-focus-background);
127151
color: var(--tsmb-color-focus30);
128-
width: 100%;
129-
max-height: 70vh;
152+
margin-top: var(--tsmb-size-half);
153+
min-width: 100%;
154+
width: var(--tsmb-size-listbox-width);
155+
max-height: var(--tsmb-size-listbox-max-height);
130156
overflow: auto;
131157
border: var(--tsmb-size-edge) solid var(--tsmb-color-focus90);
158+
border-radius: var(--tsmb-size-radius);
132159
box-shadow: 0 var(--tsmb-size-sm) 20px rgba(0,0,0,0.12);
133160
}
134161

@@ -137,27 +164,35 @@
137164
border-bottom: var(--tsmb-size-edge) solid var(--tsmb-color-focus90);
138165
}
139166

140-
.tsmb-form [role=option] a {
167+
.tsmb-form [role=option] a,
168+
typesense-minibar [role=option] a {
141169
display: block;
142170
padding: var(--tsmb-size-base);
143171
text-decoration: none;
144172
border-left: var(--tsmb-size-highlight) solid transparent;
145173
}
146-
.tsmb-form:not([data-group=true]) [role=option]:not(:first-child) a {
174+
175+
.tsmb-form:not([data-group=true]) [role=option]:not(:first-child) a,
176+
typesense-minibar:not([data-group=true]) [role=option]:not(:first-child) a {
147177
border-top: var(--tsmb-size-edge) solid var(--tsmb-color-focus90);
148178
}
149-
.tsmb-form[data-group=true] [role=option] a {
179+
180+
.tsmb-form[data-group=true] [role=option] a,
181+
typesense-minibar[data-group=true] [role=option] a {
150182
margin: 0 var(--tsmb-size-base);
151183
padding: var(--tsmb-size-sm);
152184
}
153185

154186
.tsmb-form [role=option] a:hover,
155-
.tsmb-form [role=option][aria-selected=true] a {
187+
.tsmb-form [role=option][aria-selected=true] a,
188+
typesense-minibar [role=option] a:hover,
189+
typesense-minibar [role=option][aria-selected=true] a {
156190
background: var(--tsmb-color-primary90);
157191
border-left-color: var(--tsmb-color-primary50);
158192
}
159193

160-
.tsmb-form [role=option] mark {
194+
.tsmb-form [role=option] mark,
195+
typesense-minibar [role=option] mark {
161196
background: none;
162197
color: inherit;
163198
font-style: normal;
@@ -175,7 +210,8 @@
175210
.tsmb-suggestion_title {
176211
color: var(--tsmb-color-primary30);
177212
}
178-
.tsmb-form[data-group=true] .tsmb-suggestion_title {
213+
.tsmb-form[data-group=true] .tsmb-suggestion_title,
214+
typesense-minibar[data-group=true] .tsmb-suggestion_title {
179215
font-weight: bold;
180216
font-size: var(--tsmb-size-sm);
181217
}
@@ -199,37 +235,17 @@
199235
box-shadow: 0 0 10px rgba(0,0,0,0.12);
200236
text-decoration: none;
201237
}
238+
202239
.tsmb-foot::before {
203240
content: 'Search by';
204241
color: var(--tsmb-color-focus50);
205242
}
243+
206244
.tsmb-foot::after {
207245
content: ' Typesense';
208246
color: #0300b0;
209247
}
210-
211-
@media (max-width: 480px) {
212-
.tsmb-form {
213-
width: 100%;
214-
}
215-
216-
.tsmb-form input[type=search] {
217-
border-radius: 0;
218-
}
219-
}
220-
221-
@media (min-width: 768px) {
222-
.tsmb-form [role=listbox] {
223-
border-radius: var(--tsmb-size-radius);
224-
min-width: 500px;
225-
margin-top: var(--tsmb-size-half);
226-
}
227-
228-
.tsmb-form--slash::after {
229-
display: none;
230-
}
231-
}
232-
/*! https://github.com/jquery/typesense-minibar 1.1.1 */
248+
/*! https://github.com/jquery/typesense-minibar 1.3.2 */
233249
.tsmb-foot::after {
234250
content: "";
235251
display: inline-block;

‎themes/jquery/lib/typesense-minibar/typesense-minibar.js

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
/*! https://github.com/jquery/typesense-minibar 1.1.1 */
2-
globalThis.tsminibar = function tsminibar (form) {
3-
const { origin, collection } = form.dataset;
4-
const group = !!form.dataset.group;
1+
/*! https://github.com/jquery/typesense-minibar 1.3.2 */
2+
globalThis.tsminibar = function tsminibar (form, dataset = form.dataset) {
53
const cache = new Map();
64
const state = { query: '', cursor: -1, open: false, hits: [] };
75
const searchParams = new URLSearchParams({
@@ -14,10 +12,10 @@ globalThis.tsminibar = function tsminibar (form) {
1412
sort_by: 'item_priority:desc',
1513
snippet_threshold: '8',
1614
highlight_affix_num_tokens: '12',
17-
'x-typesense-api-key': form.dataset.key,
18-
...Object.fromEntries(new URLSearchParams(form.dataset.searchParams))
15+
'x-typesense-api-key': dataset.key,
16+
...Object.fromEntries(new URLSearchParams(dataset.searchParams))
1917
});
20-
const noResults = form.dataset.noResults || "No results for '{}'.";
18+
const noResults = dataset.noResults || "No results for '{}'.";
2119

2220
const input = form.querySelector('input[type=search]');
2321
const listbox = document.createElement('div');
@@ -31,7 +29,7 @@ globalThis.tsminibar = function tsminibar (form) {
3129
preconnect = document.createElement('link');
3230
preconnect.rel = 'preconnect';
3331
preconnect.crossOrigin = 'anonymous'; // match fetch cors,credentials:omit
34-
preconnect.href = origin;
32+
preconnect.href = dataset.origin;
3533
document.head.append(preconnect);
3634
}
3735
if (!state.open && state.hits.length) {
@@ -42,7 +40,7 @@ globalThis.tsminibar = function tsminibar (form) {
4240
input.addEventListener('input', async function () {
4341
const query = state.query = input.value;
4442
if (!query) {
45-
state.hits = []; // don't leak old hits on focus
43+
state.hits = [];
4644
state.cursor = -1;
4745
return close();
4846
}
@@ -72,7 +70,7 @@ globalThis.tsminibar = function tsminibar (form) {
7270
}
7371
});
7472
form.addEventListener('submit', function (e) {
75-
e.preventDefault(); // disable fallback
73+
e.preventDefault();
7674
});
7775
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>');
7876
form.querySelector('.tsmb-icon-close').addEventListener('click', function () {
@@ -92,7 +90,7 @@ globalThis.tsminibar = function tsminibar (form) {
9290

9391
function connect () {
9492
document.addEventListener('click', onDocClick);
95-
if (form.dataset.slash !== 'false') {
93+
if (dataset.slash !== 'false') {
9694
document.addEventListener('keydown', onDocSlash);
9795
form.classList.add('tsmb-form--slash');
9896
}
@@ -124,9 +122,10 @@ globalThis.tsminibar = function tsminibar (form) {
124122
}
125123
searchParams.set('q', query);
126124
const resp = await fetch(
127-
`${origin}/collections/${collection}/documents/search?` + searchParams,
125+
`${dataset.origin}/collections/${dataset.collection}/documents/search?` + searchParams,
128126
{ mode: 'cors', credentials: 'omit', method: 'GET' }
129127
);
128+
const group = !!dataset.group;
130129
const data = await resp.json();
131130
hits = data?.grouped_hits?.map(ghit => {
132131
const hit = ghit.hits[0];
@@ -151,19 +150,22 @@ globalThis.tsminibar = function tsminibar (form) {
151150
function render () {
152151
listbox.hidden = !state.open;
153152
form.classList.toggle('tsmb-form--open', state.open);
154-
if (state.open) {
155-
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>' : '');
156-
}
153+
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>' : '');
157154
}
158155

159156
function moveCursor (offset) {
160157
state.cursor += offset;
161-
// -1 refers to input field
162158
if (state.cursor >= state.hits.length) state.cursor = -1;
163159
if (state.cursor < -1) state.cursor = state.hits.length - 1;
164160
render();
165161
}
166162

167163
return { form, connect, disconnect };
168164
};
165+
window.customElements.define('typesense-minibar', class extends HTMLElement {
166+
connectedCallback () {
167+
const form = this.querySelector('form');
168+
if (form && this.dataset.origin) tsminibar(form, this.dataset);
169+
}
170+
});
169171
document.querySelectorAll('.tsmb-form[data-origin]').forEach(form => tsminibar(form));

0 commit comments

Comments
 (0)