bookshelf-doc/static/search.js

119 lines
2.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
2022-02-22 04:40:14 +00:00
const SEARCH_FORM = document.querySelector("#search_form");
const SEARCH_INPUT = SEARCH_FORM.querySelector("input[name=q]");
// Create an `div#search_results` to hold all search results.
let sr = document.createElement("div");
sr.id = "search_results";
SEARCH_FORM.appendChild(sr);
/**
* Attach `selected` class to the the selected search result.
*/
function handleSearchCursorUpDown(down) {
const sel = sr.querySelector(`.selected`);
if (sel) {
sel.classList.remove("selected");
const toSelect = down
? sel.nextSibling || sr.firstChild
: sel.previousSibling || sr.lastChild;
toSelect && toSelect.classList.add("selected");
} else {
const toSelect = down ? sr.firstChild : sr.lastChild;
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 = sr.querySelector(`.selected`) || sr.firstChild;
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 search results with up/down arrow keys, and choose with enter.
*/
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) {
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) {
const result = dataCenter.search(text, false);
2022-02-22 04:40:14 +00:00
// in case user has updated the input.
if (ev.target.value != text) return;
// update search results
removeAllChildren(sr);
for (const { name, docLink } of result) {
const d = sr.appendChild(document.createElement("a"));
d.innerText = name;
d.title = name;
d.href = 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");
}
DeclarationDataCenter.init()
.then((dataCenter) => {
// Search autocompletion.
SEARCH_INPUT.addEventListener("input", ev => handleSearch(dataCenter, null, ev));
})
.catch(e => {
SEARCH_INPUT.addEventListener("input", ev => handleSearch(null, e, ev));
});