[mod] client/simple: client plugins (#5406)

* [mod] client/simple: client plugins

Defines a new interface for client side *"plugins"* that coexist with server
side plugin system. Each plugin (e.g., `InfiniteScroll`) extends the base
`ts Plugin`. Client side plugins are independent and lazy‑loaded via `router.ts`
when their `load()` conditions are met. On each navigation request, all
applicable plugins are instanced.

Since these are client side plugins, we can only invoke them once DOM is fully
loaded. E.g. `Calculator` will not render a new `answer` block until fully
loaded and executed.

For some plugins, we might want to handle its availability in `settings.yml`
and toggle in UI, like we do for server side plugins. In that case, we extend
`py Plugin` instancing only the information and then checking client side if
[`settings.plugins`](https://github.com/inetol/searxng/blob/1ad832b1dc33f3f388da361ff2459b05dc86a164/client/simple/src/js/toolkit.ts#L134)
array has the plugin id.

* [mod] client/simple: rebuild static

client/simple/src/js/main/autocomplete.ts

@@ -1,6 +1,7 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-import { assertElement, http, listen, settings } from "../core/toolkit.ts";
+import { http, listen, settings } from "../toolkit.ts";
+import { assertElement } from "../util/assertElement.ts";
 
 const fetchResults = async (qInput: HTMLInputElement, query: string): Promise<void> => {
   try {

client/simple/src/js/main/infinite_scroll.ts

@@ -1,100 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-
-import { assertElement, http, settings } from "../core/toolkit.ts";
-
-const newLoadSpinner = (): HTMLDivElement => {
-  return Object.assign(document.createElement("div"), {
-    className: "loader"
-  });
-};
-
-const loadNextPage = async (onlyImages: boolean, callback: () => void): Promise<void> => {
-  const searchForm = document.querySelector<HTMLFormElement>("#search");
-  assertElement(searchForm);
-
-  const form = document.querySelector<HTMLFormElement>("#pagination form.next_page");
-  assertElement(form);
-
-  const action = searchForm.getAttribute("action");
-  if (!action) {
-    throw new Error("Form action not defined");
-  }
-
-  const paginationElement = document.querySelector<HTMLElement>("#pagination");
-  assertElement(paginationElement);
-
-  paginationElement.replaceChildren(newLoadSpinner());
-
-  try {
-    const res = await http("POST", action, { body: new FormData(form) });
-    const nextPage = await res.text();
-    if (!nextPage) return;
-
-    const nextPageDoc = new DOMParser().parseFromString(nextPage, "text/html");
-    const articleList = nextPageDoc.querySelectorAll<HTMLElement>("#urls article");
-    const nextPaginationElement = nextPageDoc.querySelector<HTMLElement>("#pagination");
-
-    document.querySelector("#pagination")?.remove();
-
-    const urlsElement = document.querySelector<HTMLElement>("#urls");
-    if (!urlsElement) {
-      throw new Error("URLs element not found");
-    }
-
-    if (articleList.length > 0 && !onlyImages) {
-      // do not add <hr> element when there are only images
-      urlsElement.appendChild(document.createElement("hr"));
-    }
-
-    urlsElement.append(...Array.from(articleList));
-
-    if (nextPaginationElement) {
-      const results = document.querySelector<HTMLElement>("#results");
-      results?.appendChild(nextPaginationElement);
-      callback();
-    }
-  } catch (error) {
-    console.error("Error loading next page:", error);
-
-    const errorElement = Object.assign(document.createElement("div"), {
-      textContent: settings.translations?.error_loading_next_page ?? "Error loading next page",
-      className: "dialog-error"
-    });
-    errorElement.setAttribute("role", "alert");
-    document.querySelector("#pagination")?.replaceChildren(errorElement);
-  }
-};
-
-const resultsElement: HTMLElement | null = document.getElementById("results");
-if (!resultsElement) {
-  throw new Error("Results element not found");
-}
-
-const onlyImages: boolean = resultsElement.classList.contains("only_template_images");
-const observedSelector = "article.result:last-child";
-
-const intersectionObserveOptions: IntersectionObserverInit = {
-  rootMargin: "320px"
-};
-
-const observer: IntersectionObserver = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
-  const [paginationEntry] = entries;
-
-  if (paginationEntry?.isIntersecting) {
-    observer.unobserve(paginationEntry.target);
-
-    void loadNextPage(onlyImages, () => {
-      const nextObservedElement = document.querySelector<HTMLElement>(observedSelector);
-      if (nextObservedElement) {
-        observer.observe(nextObservedElement);
-      }
-    }).then(() => {
-      // wait until promise is resolved
-    });
-  }
-}, intersectionObserveOptions);
-
-const initialObservedElement: HTMLElement | null = document.querySelector<HTMLElement>(observedSelector);
-if (initialObservedElement) {
-  observer.observe(initialObservedElement);
-}

client/simple/src/js/main/keyboard.ts

@@ -1,6 +1,7 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-import { assertElement, listen, mutable, settings } from "../core/toolkit.ts";
+import { listen, mutable, settings } from "../toolkit.ts";
+import { assertElement } from "../util/assertElement.ts";
 
 export type KeyBindingLayout = "default" | "vim";
 

client/simple/src/js/main/mapresult.ts

@@ -1,86 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-
-import { listen } from "../core/toolkit.ts";
-
-listen("click", ".searxng_init_map", async function (this: HTMLElement, event: Event) {
-  event.preventDefault();
-  this.classList.remove("searxng_init_map");
-
-  const {
-    View,
-    OlMap,
-    TileLayer,
-    VectorLayer,
-    OSM,
-    VectorSource,
-    Style,
-    Stroke,
-    Fill,
-    Circle,
-    fromLonLat,
-    GeoJSON,
-    Feature,
-    Point
-  } = await import("../pkg/ol.ts");
-  void import("ol/ol.css");
-
-  const { leafletTarget: target, mapLon, mapLat, mapGeojson } = this.dataset;
-
-  const lon = Number.parseFloat(mapLon || "0");
-  const lat = Number.parseFloat(mapLat || "0");
-  const view = new View({ maxZoom: 16, enableRotation: false });
-  const map = new OlMap({
-    target: target,
-    layers: [new TileLayer({ source: new OSM({ maxZoom: 16 }) })],
-    view: view
-  });
-
-  try {
-    const markerSource = new VectorSource({
-      features: [
-        new Feature({
-          geometry: new Point(fromLonLat([lon, lat]))
-        })
-      ]
-    });
-
-    const markerLayer = new VectorLayer({
-      source: markerSource,
-      style: new Style({
-        image: new Circle({
-          radius: 6,
-          fill: new Fill({ color: "#3050ff" })
-        })
-      })
-    });
-
-    map.addLayer(markerLayer);
-  } catch (error) {
-    console.error("Failed to create marker layer:", error);
-  }
-
-  if (mapGeojson) {
-    try {
-      const geoSource = new VectorSource({
-        features: new GeoJSON().readFeatures(JSON.parse(mapGeojson), {
-          dataProjection: "EPSG:4326",
-          featureProjection: "EPSG:3857"
-        })
-      });
-
-      const geoLayer = new VectorLayer({
-        source: geoSource,
-        style: new Style({
-          stroke: new Stroke({ color: "#3050ff", width: 2 }),
-          fill: new Fill({ color: "#3050ff33" })
-        })
-      });
-
-      map.addLayer(geoLayer);
-
-      view.fit(geoSource.getExtent(), { padding: [20, 20, 20, 20] });
-    } catch (error) {
-      console.error("Failed to create GeoJSON layer:", error);
-    }
-  }
-});

client/simple/src/js/main/preferences.ts

@@ -1,6 +1,7 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-import { assertElement, http, listen, settings } from "../core/toolkit.ts";
+import { http, listen, settings } from "../toolkit.ts";
+import { assertElement } from "../util/assertElement.ts";
 
 let engineDescriptions: Record<string, [string, string]> | undefined;
 

client/simple/src/js/main/results.ts

@@ -1,7 +1,8 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 import "../../../node_modules/swiped-events/src/swiped-events.js";
-import { assertElement, listen, mutable, settings } from "../core/toolkit.ts";
+import { listen, mutable, settings } from "../toolkit.ts";
+import { assertElement } from "../util/assertElement.ts";
 
 let imgTimeoutID: number;
 

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);
+listen("input", searchInput, () => {
+  searchReset.classList.toggle("empty", searchInput.value.length === 0);
+});
 
-// 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));
-  }
+listen("click", searchReset, () => {
+  searchReset.classList.add("empty");
+  searchInput.focus();
+});
 
-  const timeRangeElement = document.getElementById("time_range");
-  if (timeRangeElement) {
-    listen("change", timeRangeElement, () => submitIfQuery(qInput));
-  }
-
-  const languageElement = document.getElementById("language");
-  if (languageElement) {
-    listen("change", languageElement, () => submitIfQuery(qInput));
-  }
-}
-
-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);
-
-// override form submit action to update the actually selected categories
-listen("submit", form, (event: Event) => {
-  event.preventDefault();
-
-  const categoryValuesInput = document.querySelector<HTMLInputElement>("#selected-categories");
-  if (categoryValuesInput) {
-    const categoryValues = categoryButtons
-      .filter((button) => button.classList.contains("selected"))
-      .map((button) => button.name.replace("category_", ""));
-
-    categoryValuesInput.value = categoryValues.join(",");
+if (document.querySelector("div.search_filters")) {
+  const safesearchElement = document.getElementById("safesearch");
+  if (safesearchElement) {
+    listen("change", safesearchElement, () => searchForm.submit());
   }
 
-  form.submit();
+  const timeRangeElement = document.getElementById("time_range");
+  if (timeRangeElement) {
+    listen("change", timeRangeElement, () => searchForm.submit());
+  }
+
+  const languageElement = document.getElementById("language");
+  if (languageElement) {
+    listen("change", languageElement, () => searchForm.submit());
+  }
+}
+
+// override searchForm submit event
+listen("submit", searchForm, (event: Event) => {
+  event.preventDefault();
+
+  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_", ""))
+      .join(",");
+  }
+
+  searchForm.submit();
 });