Still need to add support to the opensearch xml template, but otherwise the main page functionality is working as expected Adds new route '/autocomplete' that accepts a string query for both GET and POST requests, and returns an array of suggestions Adds GET and POST tests for autocomplete search as well
100 lines
3.3 KiB
JavaScript
100 lines
3.3 KiB
JavaScript
const handleUserInput = searchBar => {
|
|
let xhrRequest = new XMLHttpRequest();
|
|
xhrRequest.open("POST", "/autocomplete");
|
|
xhrRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
|
xhrRequest.onload = function() {
|
|
if (xhrRequest.readyState === 4 && xhrRequest.status !== 200) {
|
|
alert("Error fetching autocomplete results");
|
|
return;
|
|
}
|
|
|
|
// Fill autocomplete with fetched results
|
|
let autocompleteResults = JSON.parse(xhrRequest.responseText);
|
|
autocomplete(searchBar, autocompleteResults["results"]);
|
|
};
|
|
|
|
xhrRequest.send('q=' + searchBar.value);
|
|
};
|
|
|
|
const setupSearchLayout = () => {
|
|
// Setup search field
|
|
const searchBar = document.getElementById("search-bar");
|
|
const searchBtn = document.getElementById("search-submit");
|
|
|
|
// Automatically focus on search field
|
|
searchBar.focus();
|
|
searchBar.select();
|
|
|
|
searchBar.addEventListener("keyup", function(event) {
|
|
if (event.keyCode === 13) {
|
|
event.preventDefault();
|
|
searchBtn.click();
|
|
} else {
|
|
handleUserInput(searchBar);
|
|
}
|
|
});
|
|
};
|
|
|
|
const fillConfigValues = () => {
|
|
// Establish all config value elements
|
|
const near = document.getElementById("config-near");
|
|
const noJS = document.getElementById("config-nojs");
|
|
const dark = document.getElementById("config-dark");
|
|
const safe = document.getElementById("config-safe");
|
|
const url = document.getElementById("config-url");
|
|
const newTab = document.getElementById("config-new-tab");
|
|
const getOnly = document.getElementById("config-get-only");
|
|
|
|
// Request existing config info
|
|
let xhrGET = new XMLHttpRequest();
|
|
xhrGET.open("GET", "/config");
|
|
xhrGET.onload = function() {
|
|
if (xhrGET.readyState === 4 && xhrGET.status !== 200) {
|
|
alert("Error loading Whoogle config");
|
|
return;
|
|
}
|
|
|
|
// Allow for updating/saving config values
|
|
let configSettings = JSON.parse(xhrGET.responseText);
|
|
|
|
near.value = configSettings["near"] ? configSettings["near"] : "";
|
|
noJS.checked = !!configSettings["nojs"];
|
|
dark.checked = !!configSettings["dark"];
|
|
safe.checked = !!configSettings["safe"];
|
|
getOnly.checked = !!configSettings["get_only"];
|
|
newTab.checked = !!configSettings["new_tab"];
|
|
|
|
// Addresses the issue of incorrect URL being used behind reverse proxy
|
|
url.value = configSettings["url"] ? configSettings["url"] : "";
|
|
};
|
|
|
|
xhrGET.send();
|
|
};
|
|
|
|
const setupConfigLayout = () => {
|
|
// Setup whoogle config
|
|
const collapsible = document.getElementById("config-collapsible");
|
|
collapsible.addEventListener("click", function() {
|
|
this.classList.toggle("active");
|
|
let content = this.nextElementSibling;
|
|
if (content.style.maxHeight) {
|
|
content.style.maxHeight = null;
|
|
} else {
|
|
content.style.maxHeight = content.scrollHeight + "px";
|
|
}
|
|
|
|
content.classList.toggle("open");
|
|
});
|
|
|
|
fillConfigValues();
|
|
};
|
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
setTimeout(function() {
|
|
document.getElementById("main").style.display = "block";
|
|
}, 100);
|
|
|
|
setupSearchLayout();
|
|
setupConfigLayout();
|
|
});
|