[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`](1ad832b1dc/client/simple/src/js/toolkit.ts (L134))
array has the plugin id.

* [mod] client/simple: rebuild static

client/simple/src/js/plugin/Calculator.ts

@@ -0,0 +1,93 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import {
+  absDependencies,
+  addDependencies,
+  create,
+  divideDependencies,
+  eDependencies,
+  evaluateDependencies,
+  expDependencies,
+  factorialDependencies,
+  gcdDependencies,
+  lcmDependencies,
+  log1pDependencies,
+  log2Dependencies,
+  log10Dependencies,
+  logDependencies,
+  modDependencies,
+  multiplyDependencies,
+  nthRootDependencies,
+  piDependencies,
+  powDependencies,
+  roundDependencies,
+  signDependencies,
+  sqrtDependencies,
+  subtractDependencies
+} from "mathjs/number";
+import { Plugin } from "../Plugin.ts";
+import { appendAnswerElement } from "../util/appendAnswerElement.ts";
+import { getElement } from "../util/getElement.ts";
+
+/**
+ * Parses and solves mathematical expressions. Can do basic arithmetic and
+ * evaluate some functions.
+ *
+ * @example
+ * "(3 + 5) / 2" = "4"
+ * "e ^ 2 + pi" = "10.530648752520442"
+ * "gcd(48, 18) + lcm(4, 5)" = "26"
+ *
+ * @remarks
+ * Depends on `mathjs` library.
+ */
+export default class Calculator extends Plugin {
+  public constructor() {
+    super("calculator");
+  }
+
+  /**
+   * @remarks
+   * Compare bundle size after adding or removing features.
+   */
+  private static readonly math = create({
+    ...absDependencies,
+    ...addDependencies,
+    ...divideDependencies,
+    ...eDependencies,
+    ...evaluateDependencies,
+    ...expDependencies,
+    ...factorialDependencies,
+    ...gcdDependencies,
+    ...lcmDependencies,
+    ...log10Dependencies,
+    ...log1pDependencies,
+    ...log2Dependencies,
+    ...logDependencies,
+    ...modDependencies,
+    ...multiplyDependencies,
+    ...nthRootDependencies,
+    ...piDependencies,
+    ...powDependencies,
+    ...roundDependencies,
+    ...signDependencies,
+    ...sqrtDependencies,
+    ...subtractDependencies
+  });
+
+  protected async run(): Promise<string | undefined> {
+    const searchInput = getElement<HTMLInputElement>("q");
+    const node = Calculator.math.parse(searchInput.value);
+
+    try {
+      return `${node.toString()} = ${node.evaluate()}`;
+    } catch {
+      // not a compatible math expression
+      return;
+    }
+  }
+
+  protected async post(result: string): Promise<void> {
+    appendAnswerElement(result);
+  }
+}

client/simple/src/js/plugin/InfiniteScroll.ts

@@ -0,0 +1,110 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { Plugin } from "../Plugin.ts";
+import { http, settings } from "../toolkit.ts";
+import { assertElement } from "../util/assertElement.ts";
+import { getElement } from "../util/getElement.ts";
+
+/**
+ * Automatically loads the next page when scrolling to bottom of the current page.
+ */
+export default class InfiniteScroll extends Plugin {
+  public constructor() {
+    super("infiniteScroll");
+  }
+
+  protected async run(): Promise<void> {
+    const resultsElement = getElement<HTMLElement>("results");
+
+    const onlyImages: boolean = resultsElement.classList.contains("only_template_images");
+    const observedSelector = "article.result:last-child";
+
+    const spinnerElement = document.createElement("div");
+    spinnerElement.className = "loader";
+
+    const loadNextPage = async (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(spinnerElement);
+
+      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(...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 intersectionObserveOptions: IntersectionObserverInit = {
+      rootMargin: "320px"
+    };
+
+    const observer: IntersectionObserver = new IntersectionObserver(async (entries: IntersectionObserverEntry[]) => {
+      const [paginationEntry] = entries;
+
+      if (paginationEntry?.isIntersecting) {
+        observer.unobserve(paginationEntry.target);
+
+        await loadNextPage(() => {
+          const nextObservedElement = document.querySelector<HTMLElement>(observedSelector);
+          if (nextObservedElement) {
+            observer.observe(nextObservedElement);
+          }
+        });
+      }
+    }, intersectionObserveOptions);
+
+    const initialObservedElement: HTMLElement | null = document.querySelector<HTMLElement>(observedSelector);
+    if (initialObservedElement) {
+      observer.observe(initialObservedElement);
+    }
+  }
+
+  protected async post(): Promise<void> {
+    // noop
+  }
+}

client/simple/src/js/plugin/MapView.ts

@@ -0,0 +1,90 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import "ol/ol.css?inline";
+import { Feature, Map as OlMap, View } from "ol";
+import { GeoJSON } from "ol/format";
+import { Point } from "ol/geom";
+import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
+import { fromLonLat } from "ol/proj";
+import { OSM, Vector as VectorSource } from "ol/source";
+import { Circle, Fill, Stroke, Style } from "ol/style";
+import { Plugin } from "../Plugin.ts";
+
+/**
+ * MapView
+ */
+export default class MapView extends Plugin {
+  private readonly map: HTMLElement;
+
+  public constructor(map: HTMLElement) {
+    super("mapView");
+
+    this.map = map;
+  }
+
+  protected async run(): Promise<void> {
+    const { leafletTarget: target, mapLon, mapLat, mapGeojson } = this.map.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);
+      }
+    }
+  }
+
+  protected async post(): Promise<void> {
+    // noop
+  }
+}