1 files changed, 49 insertions, 75 deletions

diff --git a/client/simple/src/js/main/search.ts b/client/simple/src/js/main/search.ts
index c7ce9e090..eecc1afb0 100644
--- a/client/simple/src/js/main/search.ts
+++ b/client/simple/src/js/main/search.ts
@@ -1,88 +1,49 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-import { assertElement, listen, settings } from "../core/toolkit.ts";
+import { listen } from "../toolkit.ts";
+import { getElement } from "../util/getElement.ts";
 
-const submitIfQuery = (qInput: HTMLInputElement): void => {
-  if (qInput.value.length > 0) {
-    const search = document.getElementById("search") as HTMLFormElement | null;
-    search?.submit();
-  }
-};
-
-const updateClearButton = (qInput: HTMLInputElement, cs: HTMLElement): void => {
-  cs.classList.toggle("empty", qInput.value.length === 0);
-};
-
-const createClearButton = (qInput: HTMLInputElement): void => {
-  const cs = document.getElementById("clear_search");
-  assertElement(cs);
-
-  updateClearButton(qInput, cs);
-
-  listen("click", cs, (event: MouseEvent) => {
-    event.preventDefault();
-    qInput.value = "";
-    qInput.focus();
-    updateClearButton(qInput, cs);
-  });
-
-  listen("input", qInput, () => updateClearButton(qInput, cs), { passive: true });
-};
-
-const qInput = document.getElementById("q") as HTMLInputElement | null;
-assertElement(qInput);
+const searchForm: HTMLFormElement = getElement<HTMLFormElement>("search");
+const searchInput: HTMLInputElement = getElement<HTMLInputElement>("q");
+const searchReset: HTMLButtonElement = getElement<HTMLButtonElement>("clear_search");
 
 const isMobile: boolean = window.matchMedia("(max-width: 50em)").matches;
 const isResultsPage: boolean = document.querySelector("main")?.id === "main_results";
 
+const categoryButtons: HTMLButtonElement[] = Array.from(
+  document.querySelectorAll<HTMLButtonElement>("#categories_container button.category")
+);
+
+if (searchInput.value.length === 0) {
+  searchReset.classList.add("empty");
+}
+
 // focus search input on large screens
 if (!(isMobile || isResultsPage)) {
-  qInput.focus();
+  searchInput.focus();
 }
 
 // On mobile, move cursor to the end of the input on focus
 if (isMobile) {
-  listen("focus", qInput, () => {
+  listen("focus", searchInput, () => {
     // Defer cursor move until the next frame to prevent a visual jump
     requestAnimationFrame(() => {
-      const end = qInput.value.length;
-      qInput.setSelectionRange(end, end);
-      qInput.scrollLeft = qInput.scrollWidth;
+      const end = searchInput.value.length;
+      searchInput.setSelectionRange(end, end);
+      searchInput.scrollLeft = searchInput.scrollWidth;
     });
   });
 }
 
-createClearButton(qInput);
-
-// 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 (
-  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
-  document.querySelector(".search_filters")
-) {
-  const safesearchElement = document.getElementById("safesearch");
-  if (safesearchElement) {
-    listen("change", safesearchElement, () => submitIfQuery(qInput));
-  }
-
-  const timeRangeElement = document.getElementById("time_range");
-  if (timeRangeElement) {
-    listen("change", timeRangeElement, () => submitIfQuery(qInput));
-  }
+listen("input", searchInput, () => {
+  searchReset.classList.toggle("empty", searchInput.value.length === 0);
+});
 
-  const languageElement = document.getElementById("language");
-  if (languageElement) {
-    listen("change", languageElement, () => submitIfQuery(qInput));
-  }
-}
+listen("click", searchReset, () => {
+  searchReset.classList.add("empty");
+  searchInput.focus();
+});
 
-const categoryButtons: HTMLButtonElement[] = [
-  ...document.querySelectorAll<HTMLButtonElement>("button.category_button")
-];
 for (const button of categoryButtons) {
   listen("click", button, (event: MouseEvent) => {
     if (event.shiftKey) {
@@ -98,21 +59,34 @@ for (const button of categoryButtons) {
   });
 }
 
-const form: HTMLFormElement | null = document.querySelector<HTMLFormElement>("#search");
-assertElement(form);
+if (document.querySelector("div.search_filters")) {
+  const safesearchElement = document.getElementById("safesearch");
+  if (safesearchElement) {
+    listen("change", safesearchElement, () => searchForm.submit());
+  }
+
+  const timeRangeElement = document.getElementById("time_range");
+  if (timeRangeElement) {
+    listen("change", timeRangeElement, () => searchForm.submit());
+  }
 
-// override form submit action to update the actually selected categories
-listen("submit", form, (event: Event) => {
+  const languageElement = document.getElementById("language");
+  if (languageElement) {
+    listen("change", languageElement, () => searchForm.submit());
+  }
+}
+
+// override searchForm submit event
+listen("submit", searchForm, (event: Event) => {
   event.preventDefault();
 
-  const categoryValuesInput = document.querySelector<HTMLInputElement>("#selected-categories");
-  if (categoryValuesInput) {
-    const categoryValues = categoryButtons
+  if (categoryButtons.length > 0) {
+    const searchCategories = getElement<HTMLInputElement>("selected-categories");
+    searchCategories.value = categoryButtons
       .filter((button) => button.classList.contains("selected"))
-      .map((button) => button.name.replace("category_", ""));
-
-    categoryValuesInput.value = categoryValues.join(",");
+      .map((button) => button.name.replace("category_", ""))
+      .join(",");
   }
 
-  form.submit();
+  searchForm.submit();
 });