52 lines
1.4 KiB
JavaScript
52 lines
1.4 KiB
JavaScript
(() => {
|
|
const toggle = document.querySelector('[data-blog-search-toggle]');
|
|
const panel = document.querySelector('[data-blog-search-panel]');
|
|
const root = document.querySelector('[data-blog-search-root]');
|
|
|
|
if (!toggle || !panel || !root) {
|
|
return;
|
|
}
|
|
|
|
let initialized = false;
|
|
|
|
function initSearch() {
|
|
if (initialized || typeof PagefindUI === 'undefined') {
|
|
return;
|
|
}
|
|
initialized = true;
|
|
var placeholder = root.getAttribute('data-search-placeholder') || 'Search...';
|
|
new PagefindUI({
|
|
element: root,
|
|
showSubResults: true,
|
|
showImages: false,
|
|
translations: { placeholder: placeholder }
|
|
});
|
|
var input = root.querySelector('input');
|
|
if (input) {
|
|
input.focus();
|
|
}
|
|
}
|
|
|
|
toggle.addEventListener('click', function() {
|
|
var isHidden = panel.hasAttribute('hidden');
|
|
if (isHidden) {
|
|
panel.removeAttribute('hidden');
|
|
initSearch();
|
|
} else {
|
|
panel.setAttribute('hidden', '');
|
|
}
|
|
});
|
|
|
|
document.addEventListener('click', function(e) {
|
|
if (!panel.hasAttribute('hidden') && !panel.contains(e.target) && !toggle.contains(e.target)) {
|
|
panel.setAttribute('hidden', '');
|
|
}
|
|
});
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape' && !panel.hasAttribute('hidden')) {
|
|
panel.setAttribute('hidden', '');
|
|
toggle.focus();
|
|
}
|
|
});
|
|
})(); |