summaryrefslogtreecommitdiff
path: root/client/simple/src/js/main/search.js
diff options
context:
space:
mode:
authorIvan Gabaldon <igabaldon@inetol.net>2025-07-06 12:27:28 +0200
committerMarkus Heiser <markus.heiser@darmarIT.de>2025-08-18 16:38:32 +0200
commit0b913053a76e83a43846e19097963f98c8519a1d (patch)
treed11f7d76db1053559ca91f8ad66b0afd6c6d4336 /client/simple/src/js/main/search.js
parent4fb6105d699e19321f6799d7fff05313fd4cd4b9 (diff)
[mod] theme/simple: migrate codebase to TypeScript
TypeScript is a superset of JavaScript, converting the entire theme to TypeScript allows us to receive much more feedback on possible issues made in package updates or our own typos, furthermore, it allows to transpile properly to lower specs. This PR couldn't be done in smaller commits, a lot of work needed to make everything *work properly*: - A browser baseline has been set that requires minimum **Chromium 93, Firefox 92 and Safari 15** (proper visuals/operation on older browser versions is not guaranteed) - LightningCSS now handles minification and prefix creation for CSS. - All hardcoded polyfills and support for previous browser baseline versions have been removed. - Convert codebase to TypeScript. - Convert IIFE to ESM, handling globals with IIFE is cumbersome, ESM is the standard for virtually any use of JS nowadays. - Vite now builds the theme without the need for `vite-plugin-static-copy`. - `searxng.ready` now accepts an array of conditions for the callback to be executed. - Replace `leaflet` with `ol` as there were some issues with proper Vite bundling. - Merged `head` with `main` script, as head was too small now. - Add `assertElement` to properly check the existence of critical DOM elements. - `searxng.on` renamed to `searxng.listen` with some handling improvements.
Diffstat (limited to 'client/simple/src/js/main/search.js')
-rw-r--r--client/simple/src/js/main/search.js197
1 files changed, 0 insertions, 197 deletions
diff --git a/client/simple/src/js/main/search.js b/client/simple/src/js/main/search.js
deleted file mode 100644
index 5d1e18bde..000000000
--- a/client/simple/src/js/main/search.js
+++ /dev/null
@@ -1,197 +0,0 @@
-/* SPDX-License-Identifier: AGPL-3.0-or-later */
-/* exported AutoComplete */
-
-((_w, d, searxng) => {
- const qinput_id = "q";
- let qinput;
-
- const isMobile = window.matchMedia("only screen and (max-width: 50em)").matches;
- const isResultsPage = document.querySelector("main").id === "main_results";
-
- function submitIfQuery() {
- if (qinput.value.length > 0) {
- const search = document.getElementById("search");
- setTimeout(search.submit.bind(search), 0);
- }
- }
-
- function createClearButton(qinput) {
- const cs = document.getElementById("clear_search");
- const updateClearButton = () => {
- if (qinput.value.length === 0) {
- cs.classList.add("empty");
- } else {
- cs.classList.remove("empty");
- }
- };
-
- // update status, event listener
- updateClearButton();
- cs.addEventListener("click", (ev) => {
- qinput.value = "";
- qinput.focus();
- updateClearButton();
- ev.preventDefault();
- });
- qinput.addEventListener("input", updateClearButton, false);
- }
-
- const fetchResults = async (query) => {
- let request;
- if (searxng.settings.method === "GET") {
- const reqParams = new URLSearchParams();
- reqParams.append("q", query);
- request = fetch(`./autocompleter?${reqParams.toString()}`);
- } else {
- const formData = new FormData();
- formData.append("q", query);
- request = fetch("./autocompleter", {
- method: "POST",
- body: formData
- });
- }
-
- request.then(async (response) => {
- const results = await response.json();
-
- if (!results) return;
-
- const autocomplete = d.querySelector(".autocomplete");
- const autocompleteList = d.querySelector(".autocomplete ul");
- autocomplete.classList.add("open");
- autocompleteList.innerHTML = "";
-
- // show an error message that no result was found
- if (!results[1] || results[1].length === 0) {
- const noItemFoundMessage = document.createElement("li");
- noItemFoundMessage.classList.add("no-item-found");
- noItemFoundMessage.innerHTML = searxng.settings.translations.no_item_found;
- autocompleteList.appendChild(noItemFoundMessage);
- return;
- }
-
- for (const result of results[1]) {
- const li = document.createElement("li");
- li.innerText = result;
-
- searxng.on(li, "mousedown", () => {
- qinput.value = result;
- const form = d.querySelector("#search");
- form.submit();
- autocomplete.classList.remove("open");
- });
- autocompleteList.appendChild(li);
- }
- });
- };
-
- searxng.ready(() => {
- // focus search input on large screens
- if (!isMobile && !isResultsPage) document.getElementById("q").focus();
-
- qinput = d.getElementById(qinput_id);
- const autocomplete = d.querySelector(".autocomplete");
- const autocompleteList = d.querySelector(".autocomplete ul");
-
- if (qinput !== null) {
- // clear button
- createClearButton(qinput);
-
- // autocompleter
- if (searxng.settings.autocomplete) {
- searxng.on(qinput, "input", () => {
- const query = qinput.value;
- if (query.length < searxng.settings.autocomplete_min) return;
-
- setTimeout(() => {
- if (query === qinput.value) fetchResults(query);
- }, 300);
- });
-
- searxng.on(qinput, "keyup", (e) => {
- let currentIndex = -1;
- const listItems = autocompleteList.children;
- for (let i = 0; i < listItems.length; i++) {
- if (listItems[i].classList.contains("active")) {
- currentIndex = i;
- break;
- }
- }
-
- let newCurrentIndex = -1;
- if (e.key === "ArrowUp") {
- if (currentIndex >= 0) listItems[currentIndex].classList.remove("active");
- // we need to add listItems.length to the index calculation here because the JavaScript modulos
- // operator doesn't work with negative numbers
- newCurrentIndex = (currentIndex - 1 + listItems.length) % listItems.length;
- } else if (e.key === "ArrowDown") {
- if (currentIndex >= 0) listItems[currentIndex].classList.remove("active");
- newCurrentIndex = (currentIndex + 1) % listItems.length;
- } else if (e.key === "Tab" || e.key === "Enter") {
- autocomplete.classList.remove("open");
- }
-
- if (newCurrentIndex !== -1) {
- const selectedItem = listItems[newCurrentIndex];
- selectedItem.classList.add("active");
-
- if (!selectedItem.classList.contains("no-item-found")) qinput.value = selectedItem.innerText;
- }
- });
- }
- }
-
- // Additionally to searching when selecting a new category, we also
- // automatically start a new search request when the user changes a search
- // filter (safesearch, time range or language) (this requires JavaScript
- // though)
- if (
- qinput !== null &&
- searxng.settings.search_on_category_select &&
- // If .search_filters is undefined (invisible) we are on the homepage and
- // hence don't have to set any listeners
- d.querySelector(".search_filters") != null
- ) {
- searxng.on(d.getElementById("safesearch"), "change", submitIfQuery);
- searxng.on(d.getElementById("time_range"), "change", submitIfQuery);
- searxng.on(d.getElementById("language"), "change", submitIfQuery);
- }
-
- const categoryButtons = d.querySelectorAll("button.category_button");
- for (const button of categoryButtons) {
- searxng.on(button, "click", (event) => {
- if (event.shiftKey) {
- event.preventDefault();
- button.classList.toggle("selected");
- return;
- }
-
- // manually deselect the old selection when a new category is selected
- const selectedCategories = d.querySelectorAll("button.category_button.selected");
- for (const categoryButton of selectedCategories) {
- categoryButton.classList.remove("selected");
- }
- button.classList.add("selected");
- });
- }
-
- // override form submit action to update the actually selected categories
- const form = d.querySelector("#search");
- if (form != null) {
- searxng.on(form, "submit", (event) => {
- event.preventDefault();
- const categoryValuesInput = d.querySelector("#selected-categories");
- if (categoryValuesInput) {
- const categoryValues = [];
- for (const categoryButton of categoryButtons) {
- if (categoryButton.classList.contains("selected")) {
- categoryValues.push(categoryButton.name.replace("category_", ""));
- }
- }
- categoryValuesInput.value = categoryValues.join(",");
- }
- form.submit();
- });
- }
- });
-})(window, document, window.searxng);