From fb089ae297b27f51777318e3a28bca8b172a4165 Mon Sep 17 00:00:00 2001
From: Ivan Gabaldon <igabaldon@inetol.net>
Date: Tue, 2 Dec 2025 10:18:00 +0000
Subject: [mod] client/simple: client plugins (#5406)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [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/infinite_scroll.ts | 100 ---------------------------
 1 file changed, 100 deletions(-)
 delete mode 100644 client/simple/src/js/main/infinite_scroll.ts

(limited to 'client/simple/src/js/main/infinite_scroll.ts')

diff --git a/client/simple/src/js/main/infinite_scroll.ts b/client/simple/src/js/main/infinite_scroll.ts
deleted file mode 100644
index b286bce37..000000000
--- a/client/simple/src/js/main/infinite_scroll.ts
+++ /dev/null
@@ -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);
-}
-- 
cgit v1.2.3