summaryrefslogtreecommitdiff
path: root/client/simple/src/js/main
diff options
context:
space:
mode:
Diffstat (limited to 'client/simple/src/js/main')
-rw-r--r--client/simple/src/js/main/autocomplete.ts3
-rw-r--r--client/simple/src/js/main/infinite_scroll.ts100
-rw-r--r--client/simple/src/js/main/keyboard.ts3
-rw-r--r--client/simple/src/js/main/mapresult.ts86
-rw-r--r--client/simple/src/js/main/preferences.ts3
-rw-r--r--client/simple/src/js/main/results.ts3
-rw-r--r--client/simple/src/js/main/search.ts124
7 files changed, 57 insertions, 265 deletions
diff --git a/client/simple/src/js/main/autocomplete.ts b/client/simple/src/js/main/autocomplete.ts
index 57788dfd5..7da197ddf 100644
--- a/client/simple/src/js/main/autocomplete.ts
+++ b/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 {
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);
-}
diff --git a/client/simple/src/js/main/keyboard.ts b/client/simple/src/js/main/keyboard.ts
index f165a601a..7a8fa8e28 100644
--- a/client/simple/src/js/main/keyboard.ts
+++ b/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";
diff --git a/client/simple/src/js/main/mapresult.ts b/client/simple/src/js/main/mapresult.ts
deleted file mode 100644
index 32bbec4fc..000000000
--- a/client/simple/src/js/main/mapresult.ts
+++ /dev/null
@@ -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);
- }
- }
-});
diff --git a/client/simple/src/js/main/preferences.ts b/client/simple/src/js/main/preferences.ts
index 620370ee5..eb8974bf2 100644
--- a/client/simple/src/js/main/preferences.ts
+++ b/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;
diff --git a/client/simple/src/js/main/results.ts b/client/simple/src/js/main/results.ts
index 42298f9f8..b59032a2c 100644
--- a/client/simple/src/js/main/results.ts
+++ b/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;
diff --git a/client/simple/src/js/main/search.ts b/client/simple/src/js/main/search.ts
index c7ce9e090..eecc1afb0 100644
--- a/client/simple/src/js/main/search.ts
+++ b/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);
-
-// 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));
- }
-
- const timeRangeElement = document.getElementById("time_range");
- if (timeRangeElement) {
- listen("change", timeRangeElement, () => submitIfQuery(qInput));
- }
+listen("input", searchInput, () => {
+ searchReset.classList.toggle("empty", searchInput.value.length === 0);
+});
- const languageElement = document.getElementById("language");
- if (languageElement) {
- listen("change", languageElement, () => submitIfQuery(qInput));
- }
-}
+listen("click", searchReset, () => {
+ searchReset.classList.add("empty");
+ searchInput.focus();
+});
-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);
+if (document.querySelector("div.search_filters")) {
+ const safesearchElement = document.getElementById("safesearch");
+ if (safesearchElement) {
+ listen("change", safesearchElement, () => searchForm.submit());
+ }
+
+ const timeRangeElement = document.getElementById("time_range");
+ if (timeRangeElement) {
+ listen("change", timeRangeElement, () => searchForm.submit());
+ }
-// override form submit action to update the actually selected categories
-listen("submit", form, (event: Event) => {
+ const languageElement = document.getElementById("language");
+ if (languageElement) {
+ listen("change", languageElement, () => searchForm.submit());
+ }
+}
+
+// override searchForm submit event
+listen("submit", searchForm, (event: Event) => {
event.preventDefault();
- const categoryValuesInput = document.querySelector<HTMLInputElement>("#selected-categories");
- if (categoryValuesInput) {
- const categoryValues = categoryButtons
+ 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_", ""));
-
- categoryValuesInput.value = categoryValues.join(",");
+ .map((button) => button.name.replace("category_", ""))
+ .join(",");
}
- form.submit();
+ searchForm.submit();
});
generated by cgit v1.2.3 (git 2.25.1) at 2026-03-03 20:08:33 +0000