Only load searchindex when needed

This commit is contained in:
Guillaume Gomez 2025-02-20 23:33:51 +01:00
parent 1b046e5a90
commit 1fb91d67f6
2 changed files with 36 additions and 20 deletions

View file

@ -262,6 +262,17 @@ window.search = window.search || {};
doc_urls = config.doc_urls; doc_urls = config.doc_urls;
searchindex = elasticlunr.Index.load(config.index); searchindex = elasticlunr.Index.load(config.index);
searchbar.removeAttribute("disabled");
searchbar.focus();
const searchterm = searchbar.value.trim();
if (searchterm !== "") {
searchbar.classList.add("active");
doSearch(searchterm);
}
}
function initSearchInteractions(config) {
// Set up events // Set up events
searchicon.addEventListener('click', () => { searchicon.addEventListener('click', () => {
searchIconClickHandler(); searchIconClickHandler();
@ -288,6 +299,8 @@ window.search = window.search || {};
config.hasFocus = hasFocus; config.hasFocus = hasFocus;
} }
initSearchInteractions(window.search);
function unfocusSearchbar() { function unfocusSearchbar() {
// hacky, but just focusing a div only works once // hacky, but just focusing a div only works once
const tmp = document.createElement('input'); const tmp = document.createElement('input');
@ -401,8 +414,23 @@ window.search = window.search || {};
} }
} }
function loadScript(url, id) {
if (document.getElementById(id)) {
return;
}
const script = document.createElement('script');
script.src = url;
script.id = id;
script.onload = () => init(window.search);
script.onerror = error => {
console.error(`Failed to load \`${url}\`: ${error}`);
};
document.head.append(script);
}
function showSearch(yes) { function showSearch(yes) {
if (yes) { if (yes) {
loadScript(path_to_root + '{{ resource "searchindex.js" }}', 'search-index');
search_wrap.classList.remove('hidden'); search_wrap.classList.remove('hidden');
searchicon.setAttribute('aria-expanded', 'true'); searchicon.setAttribute('aria-expanded', 'true');
} else { } else {
@ -483,15 +511,14 @@ window.search = window.search || {};
function doSearch(searchterm) { function doSearch(searchterm) {
// Don't search the same twice // Don't search the same twice
if (current_searchterm === searchterm) { if (current_searchterm == searchterm) {
return;
}
if (searchindex == null) {
return; return;
} else {
current_searchterm = searchterm;
} }
if (searchindex === null) { current_searchterm = searchterm;
return;
}
// Do the actual search // Do the actual search
const results = searchindex.search(searchterm, search_options); const results = searchindex.search(searchterm, search_options);
@ -513,17 +540,6 @@ window.search = window.search || {};
showResults(true); showResults(true);
} }
function loadScript(url, id) { // Exported functions
const script = document.createElement('script'); search.hasFocus = hasFocus;
script.src = url;
script.id = id;
script.onload = () => init(window.search);
script.onerror = error => {
console.error(`Failed to load \`${url}\`: ${error}`);
};
document.head.append(script);
}
loadScript(path_to_root + '{{ resource "searchindex.js" }}', 'search-index');
})(window.search); })(window.search);

View file

@ -186,7 +186,7 @@
{{#if search_enabled}} {{#if search_enabled}}
<div id="search-wrapper" class="hidden"> <div id="search-wrapper" class="hidden">
<form id="searchbar-outer" class="searchbar-outer"> <form id="searchbar-outer" class="searchbar-outer">
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header"> <input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header" disabled>
</form> </form>
<div id="searchresults-outer" class="searchresults-outer hidden"> <div id="searchresults-outer" class="searchresults-outer hidden">
<div id="searchresults-header" class="searchresults-header"></div> <div id="searchresults-header" class="searchresults-header"></div>