bookshelf-doc/static/search.js

165 lines
4.9 KiB
JavaScript
Raw Normal View History

2022-02-22 04:40:14 +00:00
/**
* This module is used to handle user's interaction with the search form.
*/
2022-02-20 17:12:49 +00:00
2022-02-22 04:40:14 +00:00
import { DeclarationDataCenter } from "./declaration-data.js";
2022-02-13 13:25:37 +00:00
// Search form and input in the upper right toolbar
2022-02-22 04:40:14 +00:00
const SEARCH_FORM = document.querySelector("#search_form");
const SEARCH_INPUT = SEARCH_FORM.querySelector("input[name=q]");
// Search form on the /search.html_page. These may be null.
const SEARCH_PAGE_INPUT = document.querySelector("#search_page_query")
const SEARCH_RESULTS = document.querySelector("#search_results")
// Max results to show for autocomplete or /search.html page.
const AC_MAX_RESULTS = 30
const SEARCH_PAGE_MAX_RESULTS = undefined
// Create an `div#autocomplete_results` to hold all autocomplete results.
let ac_results = document.createElement("div");
ac_results.id = "autocomplete_results";
SEARCH_FORM.appendChild(ac_results);
2022-02-22 04:40:14 +00:00
/**
* Attach `selected` class to the the selected autocomplete result.
2022-02-22 04:40:14 +00:00
*/
function handleSearchCursorUpDown(down) {
const sel = ac_results.querySelector(`.selected`);
2022-02-22 04:40:14 +00:00
if (sel) {
sel.classList.remove("selected");
const toSelect = down
? sel.nextSibling
: sel.previousSibling;
2022-02-22 04:40:14 +00:00
toSelect && toSelect.classList.add("selected");
} else {
const toSelect = down ? ac_results.firstChild : ac_results.lastChild;
2022-02-22 04:40:14 +00:00
toSelect && toSelect.classList.add("selected");
}
2022-02-13 13:25:37 +00:00
}
2022-02-22 04:40:14 +00:00
/**
* Perform search (when enter is pressed).
*/
function handleSearchEnter() {
const sel = ac_results.querySelector(`.selected .result_link a`) || document.querySelector(`#search_button`);
2022-02-22 04:40:14 +00:00
sel.click();
}
2022-02-13 13:25:37 +00:00
2022-02-22 04:40:14 +00:00
/**
* Allow user to navigate autocomplete results with up/down arrow keys, and choose with enter.
2022-02-22 04:40:14 +00:00
*/
SEARCH_INPUT.addEventListener("keydown", (ev) => {
switch (ev.key) {
case "Down":
case "ArrowDown":
ev.preventDefault();
handleSearchCursorUpDown(true);
break;
case "Up":
case "ArrowUp":
ev.preventDefault();
handleSearchCursorUpDown(false);
break;
case "Enter":
ev.preventDefault();
handleSearchEnter();
break;
}
});
2022-02-13 13:25:37 +00:00
2022-02-22 04:40:14 +00:00
/**
* Remove all children of a DOM node.
*/
function removeAllChildren(node) {
while (node.firstChild) {
node.removeChild(node.lastChild);
}
2022-02-20 17:12:49 +00:00
}
2022-02-22 04:40:14 +00:00
/**
* Handle user input and perform search.
2022-02-22 04:40:14 +00:00
*/
function handleSearch(dataCenter, err, ev, sr, maxResults, autocomplete) {
2022-02-22 04:40:14 +00:00
const text = ev.target.value;
2022-02-20 17:12:49 +00:00
2022-02-22 04:40:14 +00:00
// If no input clear all.
if (!text) {
sr.removeAttribute("state");
removeAllChildren(sr);
return;
2022-02-20 17:12:49 +00:00
}
2022-02-22 04:40:14 +00:00
// searching
sr.setAttribute("state", "loading");
if (dataCenter) {
var allowedKinds;
if (!autocomplete) {
allowedKinds = new Set();
document.querySelectorAll(".kind_checkbox").forEach((checkbox) =>
{
if (checkbox.checked) {
allowedKinds.add(checkbox.value);
}
}
);
}
const result = dataCenter.search(text, false, allowedKinds, maxResults);
2022-02-22 04:40:14 +00:00
// in case user has updated the input.
if (ev.target.value != text) return;
// update autocomplete results
removeAllChildren(sr);
2023-09-10 10:39:37 +00:00
for (const { name, kind, docLink } of result) {
const row = sr.appendChild(document.createElement("div"));
row.classList.add("search_result")
const linkdiv = row.appendChild(document.createElement("div"))
linkdiv.classList.add("result_link")
const link = linkdiv.appendChild(document.createElement("a"));
link.innerText = name;
link.title = name;
link.href = SITE_ROOT + docLink;
}
}
// handle error
else {
removeAllChildren(sr);
2022-02-22 04:40:14 +00:00
const d = sr.appendChild(document.createElement("a"));
d.innerText = `Cannot fetch data, please check your network connection.\n${err}`;
2022-02-22 04:40:14 +00:00
}
sr.setAttribute("state", "done");
}
2023-09-09 22:39:39 +00:00
// https://www.joshwcomeau.com/snippets/javascript/debounce/
const debounce = (callback, wait) => {
let timeoutId = null;
return (...args) => {
window.clearTimeout(timeoutId);
timeoutId = window.setTimeout(() => {
callback.apply(null, args);
}, wait);
};
}
DeclarationDataCenter.init()
.then((dataCenter) => {
// Search autocompletion.
2023-09-10 10:53:48 +00:00
SEARCH_INPUT.addEventListener("input", debounce(ev => handleSearch(dataCenter, null, ev, ac_results, AC_MAX_RESULTS, true), 300));
if(SEARCH_PAGE_INPUT) {
SEARCH_PAGE_INPUT.addEventListener("input", ev => handleSearch(dataCenter, null, ev, SEARCH_RESULTS, SEARCH_PAGE_MAX_RESULTS, false))
document.querySelectorAll(".kind_checkbox").forEach((checkbox) =>
checkbox.addEventListener("input", ev => SEARCH_PAGE_INPUT.dispatchEvent(new Event("input")))
);
SEARCH_PAGE_INPUT.dispatchEvent(new Event("input"))
};
SEARCH_INPUT.dispatchEvent(new Event("input"))
})
.catch(e => {
2023-09-10 10:53:48 +00:00
SEARCH_INPUT.addEventListener("input", debounce(ev => handleSearch(null, e, ev, ac_results, AC_MAX_RESULTS, true), 300));
if(SEARCH_PAGE_INPUT) {
SEARCH_PAGE_INPUT.addEventListener("input", ev => handleSearch(null, e, ev, SEARCH_RESULTS, SEARCH_PAGE_MAX_RESULTS, false));
}
});