[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
2026-05-14 06:55:47 +02:00 · 2025-12-02 10:18:00 +00:00
parent ab8224c939
commit fb089ae297
92 changed files with 962 additions and 881 deletions
@@ -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
+  }
+}