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
|
|
|
|
2023-01-25 22:57:10 +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]");
|
|
|
|
|
2023-01-25 22:57:10 +00:00
|
|
|
// 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
|
|
|
|
|
|
|
/**
|
2023-01-25 22:57:10 +00:00
|
|
|
* Attach `selected` class to the the selected autocomplete result.
|
2022-02-22 04:40:14 +00:00
|
|
|
*/
|
|
|
|
function handleSearchCursorUpDown(down) {
|
2023-01-25 22:57:10 +00:00
|
|
|
const sel = ac_results.querySelector(`.selected`);
|
2022-02-22 04:40:14 +00:00
|
|
|
if (sel) {
|
|
|
|
sel.classList.remove("selected");
|
|
|
|
const toSelect = down
|
2023-01-28 19:16:49 +00:00
|
|
|
? sel.nextSibling
|
|
|
|
: sel.previousSibling;
|
2022-02-22 04:40:14 +00:00
|
|
|
toSelect && toSelect.classList.add("selected");
|
|
|
|
} else {
|
2023-01-25 22:57:10 +00:00
|
|
|
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() {
|
2023-01-28 19:16:49 +00:00
|
|
|
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
|
|
|
/**
|
2023-01-25 22:57:10 +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
|
|
|
/**
|
2022-03-14 02:59:25 +00:00
|
|
|
* Handle user input and perform search.
|
2022-02-22 04:40:14 +00:00
|
|
|
*/
|
2023-01-31 19:31:27 +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");
|
|
|
|
|
2022-03-14 02:59:25 +00:00
|
|
|
if (dataCenter) {
|
2023-01-31 19:31:27 +00:00
|
|
|
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
|
|
|
|
2022-03-14 02:59:25 +00:00
|
|
|
// in case user has updated the input.
|
|
|
|
if (ev.target.value != text) return;
|
|
|
|
|
2023-01-25 22:57:10 +00:00
|
|
|
// update autocomplete results
|
2022-03-14 02:59:25 +00:00
|
|
|
removeAllChildren(sr);
|
2023-01-31 19:31:27 +00:00
|
|
|
for (const { name, kind, doc, docLink } of result) {
|
2023-01-26 01:09:47 +00:00
|
|
|
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;
|
2023-01-31 19:31:27 +00:00
|
|
|
if (!autocomplete) {
|
2023-01-26 01:09:47 +00:00
|
|
|
const doctext = row.appendChild(document.createElement("div"));
|
|
|
|
doctext.innerText = doc
|
|
|
|
doctext.classList.add("result_doc")
|
|
|
|
}
|
2022-03-14 02:59:25 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
// handle error
|
|
|
|
else {
|
|
|
|
removeAllChildren(sr);
|
2022-02-22 04:40:14 +00:00
|
|
|
const d = sr.appendChild(document.createElement("a"));
|
2022-03-14 02:59:25 +00:00
|
|
|
d.innerText = `Cannot fetch data, please check your network connection.\n${err}`;
|
2022-02-22 04:40:14 +00:00
|
|
|
}
|
|
|
|
sr.setAttribute("state", "done");
|
2022-03-14 02:59:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
DeclarationDataCenter.init()
|
|
|
|
.then((dataCenter) => {
|
|
|
|
// Search autocompletion.
|
2023-01-31 19:31:27 +00:00
|
|
|
SEARCH_INPUT.addEventListener("input", ev => handleSearch(dataCenter, null, ev, ac_results, AC_MAX_RESULTS, true));
|
2023-01-25 22:57:10 +00:00
|
|
|
if(SEARCH_PAGE_INPUT) {
|
2023-01-31 19:31:27 +00:00
|
|
|
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")))
|
|
|
|
);
|
2023-01-25 22:57:10 +00:00
|
|
|
SEARCH_PAGE_INPUT.dispatchEvent(new Event("input"))
|
|
|
|
}
|
2022-03-14 02:59:25 +00:00
|
|
|
})
|
|
|
|
.catch(e => {
|
2023-01-31 19:31:27 +00:00
|
|
|
SEARCH_INPUT.addEventListener("input", ev => handleSearch(null, e, ev, ac_results, AC_MAX_RESULTS,true ));
|
2023-01-25 22:57:10 +00:00
|
|
|
if(SEARCH_PAGE_INPUT) {
|
2023-01-31 19:31:27 +00:00
|
|
|
SEARCH_PAGE_INPUT.addEventListener("input", ev => handleSearch(null, e, ev, SEARCH_RESULTS, SEARCH_PAGE_MAX_RESULTS, false));
|
2023-01-25 22:57:10 +00:00
|
|
|
}
|
2022-03-14 02:59:25 +00:00
|
|
|
});
|