diff options
| author | Ivan Gabaldon <igabaldon@inetol.net> | 2025-12-02 10:18:00 +0000 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-12-02 10:18:00 +0000 |
| commit | fb089ae297b27f51777318e3a28bca8b172a4165 (patch) | |
| tree | 293e17a6ba3a7ae17c31bc6746794b97c012c6af /client/simple/src/js/main/infinite_scroll.ts | |
| parent | ab8224c9394236d2cbcf6ec7d9bf0d7c602ca6ac (diff) | |
[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
Diffstat (limited to 'client/simple/src/js/main/infinite_scroll.ts')
| -rw-r--r-- | client/simple/src/js/main/infinite_scroll.ts | 100 |
1 files changed, 0 insertions, 100 deletions
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); -} |