Icycoide/searxng
1
0
Fork 1
mirror of https://github.com/searxng/searxng.git synced 2025-07-14 08:49:19 +02:00
Code Issues Projects Releases Packages Wiki Activity

[mod] theme/simple: fmt/lint minor pass

Browse source 
*Safe* changes, no behaviour changes.

- Initial ES5 to ES2015+ conversion.
- Plenty of styling diff changes.
This commit is contained in:
Ivan Gabaldon 2025-06-28 10:19:15 +02:00 • committed by Markus Heiser
parent a947d5b3cf
commit 95172213f6
13 changed files with 620 additions and 650 deletions
Download patch file Download diff file Expand all files Collapse all files

23
client/simple/src/js/head/00_init.js
View file

@ -1,20 +1,19 @@
/* SPDX-License-Identifier: AGPL-3.0-or-later */ /* SPDX-License-Identifier: AGPL-3.0-or-later */
(function (w, d) { ((w, d) => {
'use strict';
// add data- properties // add data- properties
var script = d.currentScript || (function () { var script =
var scripts = d.getElementsByTagName('script'); d.currentScript ||
return scripts[scripts.length - 1]; (() => {
})(); var scripts = d.getElementsByTagName("script");
return scripts[scripts.length - 1];
})();
w.searxng = { w.searxng = {
settings: JSON.parse(atob(script.getAttribute('client_settings'))) settings: JSON.parse(atob(script.getAttribute("client_settings")))
}; };
// update the css // update the css
var htmlElement = d.getElementsByTagName("html")[0]; const htmlElement = d.getElementsByTagName("html")[0];
htmlElement.classList.remove('no-js'); htmlElement.classList.remove("no-js");
htmlElement.classList.add('js'); htmlElement.classList.add("js");
})(window, document); })(window, document);

121
client/simple/src/js/main/00_toolkit.js
View file

@ -4,29 +4,28 @@
* (C) Copyright Contributors to the searx project (2014 - 2021). * (C) Copyright Contributors to the searx project (2014 - 2021).
* SPDX-License-Identifier: AGPL-3.0-or-later * SPDX-License-Identifier: AGPL-3.0-or-later
*/ */
window.searxng = (function (w, d) { window.searxng = ((w, d) => {
'use strict';
// not invented here toolkit with bugs fixed elsewhere // not invented here toolkit with bugs fixed elsewhere
// purposes : be just good enough and as small as possible // purposes : be just good enough and as small as possible
// from https://plainjs.com/javascript/events/live-binding-event-handlers-14/ // from https://plainjs.com/javascript/events/live-binding-event-handlers-14/
if (w.Element) { if (w.Element) {
(function (ElementPrototype) { ((ElementPrototype) => {
ElementPrototype.matches = ElementPrototype.matches || ElementPrototype.matches =
ElementPrototype.matchesSelector || ElementPrototype.matches ||
ElementPrototype.webkitMatchesSelector || ElementPrototype.matchesSelector ||
ElementPrototype.msMatchesSelector || ElementPrototype.webkitMatchesSelector ||
function (selector) { ElementPrototype.msMatchesSelector ||
var node = this, nodes = (node.parentNode || node.document).querySelectorAll(selector), i = -1; function (selector) {
while (nodes[++i] && nodes[i] != node); var nodes = (this.parentNode || this.document).querySelectorAll(selector),
return !!nodes[i]; i = -1;
}; while (nodes[++i] && nodes[i] !== this);
return !!nodes[i];
};
})(Element.prototype); })(Element.prototype);
} }
function callbackSafe (callback, el, e) { function callbackSafe(callback, el, e) {
try { try {
callback.call(el, e); callback.call(el, e);
} catch (exception) { } catch (exception) {
@ -36,39 +35,44 @@ window.searxng = (function (w, d) {
var searxng = window.searxng || {}; var searxng = window.searxng || {};
searxng.on = function (obj, eventType, callback, useCapture) { searxng.on = (obj, eventType, callback, useCapture) => {
useCapture = useCapture || false; useCapture = useCapture || false;
if (typeof obj !== 'string') { if (typeof obj !== "string") {
// obj HTMLElement, HTMLDocument // obj HTMLElement, HTMLDocument
obj.addEventListener(eventType, callback, useCapture); obj.addEventListener(eventType, callback, useCapture);
} else { } else {
// obj is a selector // obj is a selector
d.addEventListener(eventType, function (e) { d.addEventListener(
var el = e.target || e.srcElement, found = false; eventType,
while (el && el.matches && el !== d && !(found = el.matches(obj))) el = el.parentElement; (e) => {
if (found) callbackSafe(callback, el, e); var el = e.target || e.srcElement,
}, useCapture); found = false;
while (el?.matches && el !== d && !(found = el.matches(obj))) el = el.parentElement;
if (found) callbackSafe(callback, el, e);
},
useCapture
);
} }
}; };
searxng.ready = function (callback) { searxng.ready = (callback) => {
if (document.readyState != 'loading') { if (document.readyState !== "loading") {
callback.call(w); callback.call(w);
} else { } else {
w.addEventListener('DOMContentLoaded', callback.bind(w)); w.addEventListener("DOMContentLoaded", callback.bind(w));
} }
}; };
searxng.http = function (method, url, data = null) { searxng.http = (method, url, data = null) =>
return new Promise(function (resolve, reject) { new Promise((resolve, reject) => {
try { try {
var req = new XMLHttpRequest(); var req = new XMLHttpRequest();
req.open(method, url, true); req.open(method, url, true);
req.timeout = 20000; req.timeout = 20000;
// On load // On load
req.onload = function () { req.onload = () => {
if (req.status == 200) { if (req.status === 200) {
resolve(req.response, req.responseType); resolve(req.response, req.responseType);
} else { } else {
reject(Error(req.statusText)); reject(Error(req.statusText));
@ -76,21 +80,21 @@ window.searxng = (function (w, d) {
}; };
// Handle network errors // Handle network errors
req.onerror = function () { req.onerror = () => {
reject(Error("Network Error")); reject(Error("Network Error"));
}; };
req.onabort = function () { req.onabort = () => {
reject(Error("Transaction is aborted")); reject(Error("Transaction is aborted"));
}; };
req.ontimeout = function () { req.ontimeout = () => {
reject(Error("Timeout")); reject(Error("Timeout"));
} };
// Make the request // Make the request
if (data) { if (data) {
req.send(data) req.send(data);
} else { } else {
req.send(); req.send();
} }
@ -98,36 +102,35 @@ window.searxng = (function (w, d) {
reject(ex); reject(ex);
} }
}); });
};
searxng.loadStyle = function (src) { searxng.loadStyle = (src) => {
var path = searxng.settings.theme_static_path + "/" + src, var path = searxng.settings.theme_static_path + "/" + src,
id = "style_" + src.replace('.', '_'), id = "style_" + src.replace(".", "_"),
s = d.getElementById(id); s = d.getElementById(id);
if (s === null) { if (s === null) {
s = d.createElement('link'); s = d.createElement("link");
s.setAttribute('id', id); s.setAttribute("id", id);
s.setAttribute('rel', 'stylesheet'); s.setAttribute("rel", "stylesheet");
s.setAttribute('type', 'text/css'); s.setAttribute("type", "text/css");
s.setAttribute('href', path); s.setAttribute("href", path);
d.body.appendChild(s); d.body.appendChild(s);
} }
}; };
searxng.loadScript = function (src, callback) { searxng.loadScript = (src, callback) => {
var path = searxng.settings.theme_static_path + "/" + src, var path = searxng.settings.theme_static_path + "/" + src,
id = "script_" + src.replace('.', '_'), id = "script_" + src.replace(".", "_"),
s = d.getElementById(id); s = d.getElementById(id);
if (s === null) { if (s === null) {
s = d.createElement('script'); s = d.createElement("script");
s.setAttribute('id', id); s.setAttribute("id", id);
s.setAttribute('src', path); s.setAttribute("src", path);
s.onload = callback; s.onload = callback;
s.onerror = function () { s.onerror = () => {
s.setAttribute('error', '1'); s.setAttribute("error", "1");
}; };
d.body.appendChild(s); d.body.appendChild(s);
} else if (!s.hasAttribute('error')) { } else if (!s.hasAttribute("error")) {
try { try {
callback.apply(s, []); callback.apply(s, []);
} catch (exception) { } catch (exception) {
@ -138,25 +141,25 @@ window.searxng = (function (w, d) {
} }
}; };
searxng.insertBefore = function (newNode, referenceNode) { searxng.insertBefore = (newNode, referenceNode) => {
referenceNode.parentNode.insertBefore(newNode, referenceNode); referenceNode.parentNode.insertBefore(newNode, referenceNode);
}; };
searxng.insertAfter = function (newNode, referenceNode) { searxng.insertAfter = (newNode, referenceNode) => {
referenceNode.parentNode.insertAfter(newNode, referenceNode.nextSibling); referenceNode.parentNode.insertAfter(newNode, referenceNode.nextSibling);
}; };
searxng.on('.close', 'click', function () { searxng.on(".close", "click", function () {
this.parentNode.classList.add('invisible'); this.parentNode.classList.add("invisible");
}); });
function getEndpoint () { function getEndpoint() {
for (var className of d.getElementsByTagName('body')[0].classList.values()) { for (var className of d.getElementsByTagName("body")[0].classList.values()) {
if (className.endsWith('_endpoint')) { if (className.endsWith("_endpoint")) {
return className.split('_')[0]; return className.split("_")[0];
} }
} }
return ''; return "";
} }
searxng.endpoint = getEndpoint(); searxng.endpoint = getEndpoint();

84
client/simple/src/js/main/infinite_scroll.js
View file

@ -2,80 +2,77 @@
/* global searxng */ /* global searxng */
searxng.ready(function () { searxng.ready(() => {
'use strict'; searxng.infinite_scroll_supported =
"IntersectionObserver" in window &&
"IntersectionObserverEntry" in window &&
"intersectionRatio" in window.IntersectionObserverEntry.prototype;
searxng.infinite_scroll_supported = ( if (searxng.endpoint !== "results") {
'IntersectionObserver' in window &&
'IntersectionObserverEntry' in window &&
'intersectionRatio' in window.IntersectionObserverEntry.prototype);
if (searxng.endpoint !== 'results') {
return; return;
} }
if (!searxng.infinite_scroll_supported) { if (!searxng.infinite_scroll_supported) {
console.log('IntersectionObserver not supported'); console.log("IntersectionObserver not supported");
return; return;
} }
let d = document; const d = document;
var onlyImages = d.getElementById('results').classList.contains('only_template_images'); var onlyImages = d.getElementById("results").classList.contains("only_template_images");
function newLoadSpinner () { function newLoadSpinner() {
var loader = d.createElement('div'); var loader = d.createElement("div");
loader.classList.add('loader'); loader.classList.add("loader");
return loader; return loader;
} }
function replaceChildrenWith (element, children) { function replaceChildrenWith(element, children) {
element.textContent = ''; element.textContent = "";
children.forEach(child => element.appendChild(child)); children.forEach((child) => element.appendChild(child));
} }
function loadNextPage (callback) { function loadNextPage(callback) {
var form = d.querySelector('#pagination form.next_page'); var form = d.querySelector("#pagination form.next_page");
if (!form) { if (!form) {
return return;
} }
replaceChildrenWith(d.querySelector('#pagination'), [ newLoadSpinner() ]); replaceChildrenWith(d.querySelector("#pagination"), [newLoadSpinner()]);
var formData = new FormData(form); var formData = new FormData(form);
searxng.http('POST', d.querySelector('#search').getAttribute('action'), formData).then( searxng
function (response) { .http("POST", d.querySelector("#search").getAttribute("action"), formData)
var nextPageDoc = new DOMParser().parseFromString(response, 'text/html'); .then((response) => {
var articleList = nextPageDoc.querySelectorAll('#urls article'); var nextPageDoc = new DOMParser().parseFromString(response, "text/html");
var paginationElement = nextPageDoc.querySelector('#pagination'); var articleList = nextPageDoc.querySelectorAll("#urls article");
d.querySelector('#pagination').remove(); var paginationElement = nextPageDoc.querySelector("#pagination");
d.querySelector("#pagination").remove();
if (articleList.length > 0 && !onlyImages) { if (articleList.length > 0 && !onlyImages) {
// do not add <hr> element when there are only images // do not add <hr> element when there are only images
d.querySelector('#urls').appendChild(d.createElement('hr')); d.querySelector("#urls").appendChild(d.createElement("hr"));
} }
articleList.forEach(articleElement => { articleList.forEach((articleElement) => {
d.querySelector('#urls').appendChild(articleElement); d.querySelector("#urls").appendChild(articleElement);
}); });
if (paginationElement) { if (paginationElement) {
d.querySelector('#results').appendChild(paginationElement); d.querySelector("#results").appendChild(paginationElement);
callback(); callback();
} }
} })
).catch( .catch((err) => {
function (err) {
console.log(err); console.log(err);
var e = d.createElement('div'); var e = d.createElement("div");
e.textContent = searxng.settings.translations.error_loading_next_page; e.textContent = searxng.settings.translations.error_loading_next_page;
e.classList.add('dialog-error'); e.classList.add("dialog-error");
e.setAttribute('role', 'alert'); e.setAttribute("role", "alert");
replaceChildrenWith(d.querySelector('#pagination'), [ e ]); replaceChildrenWith(d.querySelector("#pagination"), [e]);
} });
)
} }
if (searxng.settings.infinite_scroll && searxng.infinite_scroll_supported) { if (searxng.settings.infinite_scroll && searxng.infinite_scroll_supported) {
const intersectionObserveOptions = { const intersectionObserveOptions = {
rootMargin: "20rem", rootMargin: "20rem"
}; };
const observedSelector = 'article.result:last-child'; const observedSelector = "article.result:last-child";
const observer = new IntersectionObserver(entries => { const observer = new IntersectionObserver((entries) => {
const paginationEntry = entries[0]; const paginationEntry = entries[0];
if (paginationEntry.isIntersecting) { if (paginationEntry.isIntersecting) {
observer.unobserve(paginationEntry.target); observer.unobserve(paginationEntry.target);
@ -84,5 +81,4 @@ searxng.ready(function () {
}); });
observer.observe(d.querySelector(observedSelector), intersectionObserveOptions); observer.observe(d.querySelector(observedSelector), intersectionObserveOptions);
} }
}); });

427
client/simple/src/js/main/keyboard.js
View file

@ -1,14 +1,13 @@
/* SPDX-License-Identifier: AGPL-3.0-or-later */ /* SPDX-License-Identifier: AGPL-3.0-or-later */
/* global searxng */ /* global searxng */
searxng.ready(function () { searxng.ready(() => {
function isElementInDetail(el) {
function isElementInDetail (el) {
while (el !== undefined) { while (el !== undefined) {
if (el.classList.contains('detail')) { if (el.classList.contains("detail")) {
return true; return true;
} }
if (el.classList.contains('result')) { if (el.classList.contains("result")) {
// we found a result, no need to go to the root of the document: // we found a result, no need to go to the root of the document:
// el is not inside a <div class="detail"> element // el is not inside a <div class="detail"> element
return false; return false;
@ -18,9 +17,9 @@ searxng.ready(function () {
return false; return false;
} }
function getResultElement (el) { function getResultElement(el) {
while (el !== undefined) { while (el !== undefined) {
if (el.classList.contains('result')) { if (el.classList.contains("result")) {
return el; return el;
} }
el = el.parentNode; el = el.parentNode;
@ -28,14 +27,14 @@ searxng.ready(function () {
return undefined; return undefined;
} }
function isImageResult (resultElement) { function isImageResult(resultElement) {
return resultElement && resultElement.classList.contains('result-images'); return resultElement && resultElement.classList.contains("result-images");
} }
searxng.on('.result', 'click', function (e) { searxng.on(".result", "click", function (e) {
if (!isElementInDetail(e.target)) { if (!isElementInDetail(e.target)) {
highlightResult(this)(true, true); highlightResult(this)(true, true);
let resultElement = getResultElement(e.target); const resultElement = getResultElement(e.target);
if (isImageResult(resultElement)) { if (isImageResult(resultElement)) {
e.preventDefault(); e.preventDefault();
searxng.selectImage(resultElement); searxng.selectImage(resultElement);
@ -43,166 +42,179 @@ searxng.ready(function () {
} }
}); });
searxng.on('.result a', 'focus', function (e) { searxng.on(
if (!isElementInDetail(e.target)) { ".result a",
let resultElement = getResultElement(e.target); "focus",
if (resultElement && resultElement.getAttribute("data-vim-selected") === null) { (e) => {
highlightResult(resultElement)(true); if (!isElementInDetail(e.target)) {
const resultElement = getResultElement(e.target);
if (resultElement && resultElement.getAttribute("data-vim-selected") === null) {
highlightResult(resultElement)(true);
}
if (isImageResult(resultElement)) {
searxng.selectImage(resultElement);
}
} }
if (isImageResult(resultElement)) { },
searxng.selectImage(resultElement); true
} );
}
}, true);
/* common base for layouts */ /* common base for layouts */
var baseKeyBinding = { var baseKeyBinding = {
'Escape': { Escape: {
key: 'ESC', key: "ESC",
fun: removeFocus, fun: removeFocus,
des: 'remove focus from the focused input', des: "remove focus from the focused input",
cat: 'Control' cat: "Control"
}, },
'c': { c: {
key: 'c', key: "c",
fun: copyURLToClipboard, fun: copyURLToClipboard,
des: 'copy url of the selected result to the clipboard', des: "copy url of the selected result to the clipboard",
cat: 'Results' cat: "Results"
}, },
'h': { h: {
key: 'h', key: "h",
fun: toggleHelp, fun: toggleHelp,
des: 'toggle help window', des: "toggle help window",
cat: 'Other' cat: "Other"
}, },
'i': { i: {
key: 'i', key: "i",
fun: searchInputFocus, fun: searchInputFocus,
des: 'focus on the search input', des: "focus on the search input",
cat: 'Control' cat: "Control"
}, },
'n': { n: {
key: 'n', key: "n",
fun: GoToNextPage(), fun: GoToNextPage(),
des: 'go to next page', des: "go to next page",
cat: 'Results' cat: "Results"
}, },
'o': { o: {
key: 'o', key: "o",
fun: openResult(false), fun: openResult(false),
des: 'open search result', des: "open search result",
cat: 'Results' cat: "Results"
}, },
'p': { p: {
key: 'p', key: "p",
fun: GoToPreviousPage(), fun: GoToPreviousPage(),
des: 'go to previous page', des: "go to previous page",
cat: 'Results' cat: "Results"
}, },
'r': { r: {
key: 'r', key: "r",
fun: reloadPage, fun: reloadPage,
des: 'reload page from the server', des: "reload page from the server",
cat: 'Control' cat: "Control"
}, },
't': { t: {
key: 't', key: "t",
fun: openResult(true), fun: openResult(true),
des: 'open the result in a new tab', des: "open the result in a new tab",
cat: 'Results' cat: "Results"
}, }
}; };
var keyBindingLayouts = { var keyBindingLayouts = {
default: Object.assign(
"default": Object.assign( {
{ /* SearXNG layout */ /* SearXNG layout */
'ArrowLeft': { ArrowLeft: {
key: '←', key: "←",
fun: highlightResult('up'), fun: highlightResult("up"),
des: 'select previous search result', des: "select previous search result",
cat: 'Results' cat: "Results"
}, },
'ArrowRight': { ArrowRight: {
key: '→', key: "→",
fun: highlightResult('down'), fun: highlightResult("down"),
des: 'select next search result', des: "select next search result",
cat: 'Results' cat: "Results"
}, }
}, baseKeyBinding), },
baseKeyBinding
),
'vim': Object.assign( vim: Object.assign(
{ /* Vim-like Key Layout. */ {
'b': { /* Vim-like Key Layout. */
key: 'b', b: {
key: "b",
fun: scrollPage(-window.innerHeight), fun: scrollPage(-window.innerHeight),
des: 'scroll one page up', des: "scroll one page up",
cat: 'Navigation' cat: "Navigation"
}, },
'f': { f: {
key: 'f', key: "f",
fun: scrollPage(window.innerHeight), fun: scrollPage(window.innerHeight),
des: 'scroll one page down', des: "scroll one page down",
cat: 'Navigation' cat: "Navigation"
}, },
'u': { u: {
key: 'u', key: "u",
fun: scrollPage(-window.innerHeight / 2), fun: scrollPage(-window.innerHeight / 2),
des: 'scroll half a page up', des: "scroll half a page up",
cat: 'Navigation' cat: "Navigation"
}, },
'd': { d: {
key: 'd', key: "d",
fun: scrollPage(window.innerHeight / 2), fun: scrollPage(window.innerHeight / 2),
des: 'scroll half a page down', des: "scroll half a page down",
cat: 'Navigation' cat: "Navigation"
}, },
'g': { g: {
key: 'g', key: "g",
fun: scrollPageTo(-document.body.scrollHeight, 'top'), fun: scrollPageTo(-document.body.scrollHeight, "top"),
des: 'scroll to the top of the page', des: "scroll to the top of the page",
cat: 'Navigation' cat: "Navigation"
}, },
'v': { v: {
key: 'v', key: "v",
fun: scrollPageTo(document.body.scrollHeight, 'bottom'), fun: scrollPageTo(document.body.scrollHeight, "bottom"),
des: 'scroll to the bottom of the page', des: "scroll to the bottom of the page",
cat: 'Navigation' cat: "Navigation"
}, },
'k': { k: {
key: 'k', key: "k",
fun: highlightResult('up'), fun: highlightResult("up"),
des: 'select previous search result', des: "select previous search result",
cat: 'Results' cat: "Results"
}, },
'j': { j: {
key: 'j', key: "j",
fun: highlightResult('down'), fun: highlightResult("down"),
des: 'select next search result', des: "select next search result",
cat: 'Results' cat: "Results"
}, },
'y': { y: {
key: 'y', key: "y",
fun: copyURLToClipboard, fun: copyURLToClipboard,
des: 'copy url of the selected result to the clipboard', des: "copy url of the selected result to the clipboard",
cat: 'Results' cat: "Results"
}, }
}, baseKeyBinding) },
} baseKeyBinding
)
};
var keyBindings = keyBindingLayouts[searxng.settings.hotkeys] || keyBindingLayouts.default; var keyBindings = keyBindingLayouts[searxng.settings.hotkeys] || keyBindingLayouts.default;
searxng.on(document, "keydown", function (e) { searxng.on(document, "keydown", (e) => {
// check for modifiers so we don't break browser's hotkeys // check for modifiers so we don't break browser's hotkeys
if ( if (
Object.prototype.hasOwnProperty.call(keyBindings, e.key) // biome-ignore lint/suspicious/noPrototypeBuiltins: FIXME: support for Chromium 93-87, Firefox 92-78, Safari 15.4-14
&& !e.ctrlKey && !e.altKey Object.prototype.hasOwnProperty.call(keyBindings, e.key) &&
&& !e.shiftKey && !e.metaKey !e.ctrlKey &&
!e.altKey &&
!e.shiftKey &&
!e.metaKey
) { ) {
var tagName = e.target.tagName.toLowerCase(); var tagName = e.target.tagName.toLowerCase();
if (e.key === 'Escape') { if (e.key === "Escape") {
keyBindings[e.key].fun(e); keyBindings[e.key].fun(e);
} else { } else {
if (e.target === document.body || tagName === 'a' || tagName === 'button') { if (e.target === document.body || tagName === "a" || tagName === "button") {
e.preventDefault(); e.preventDefault();
keyBindings[e.key].fun(); keyBindings[e.key].fun();
} }
@ -210,13 +222,13 @@ searxng.ready(function () {
} }
}); });
function highlightResult (which) { function highlightResult(which) {
return function (noScroll, keepFocus) { return (noScroll, keepFocus) => {
var current = document.querySelector('.result[data-vim-selected]'), var current = document.querySelector(".result[data-vim-selected]"),
effectiveWhich = which; effectiveWhich = which;
if (current === null) { if (current === null) {
// no selection : choose the first one // no selection : choose the first one
current = document.querySelector('.result'); current = document.querySelector(".result");
if (current === null) { if (current === null) {
// no first one : there are no results // no first one : there are no results
return; return;
@ -227,48 +239,50 @@ searxng.ready(function () {
} }
} }
var next, results = document.querySelectorAll('.result'); var next,
results = Array.from(results); // convert NodeList to Array for further use results = document.querySelectorAll(".result");
results = Array.from(results); // convert NodeList to Array for further use
if (typeof effectiveWhich !== 'string') { if (typeof effectiveWhich !== "string") {
next = effectiveWhich; next = effectiveWhich;
} else { } else {
switch (effectiveWhich) { switch (effectiveWhich) {
case 'visible': case "visible": {
var top = document.documentElement.scrollTop || document.body.scrollTop; var top = document.documentElement.scrollTop || document.body.scrollTop;
var bot = top + document.documentElement.clientHeight; var bot = top + document.documentElement.clientHeight;
for (var i = 0; i < results.length; i++) { for (var i = 0; i < results.length; i++) {
next = results[i]; next = results[i];
var etop = next.offsetTop; var etop = next.offsetTop;
var ebot = etop + next.clientHeight; var ebot = etop + next.clientHeight;
if ((ebot <= bot) && (etop > top)) { if (ebot <= bot && etop > top) {
break; break;
}
} }
break;
} }
break; case "down":
case 'down': next = results[results.indexOf(current) + 1] || current;
next = results[results.indexOf(current) + 1] || current; break;
break; case "up":
case 'up': next = results[results.indexOf(current) - 1] || current;
next = results[results.indexOf(current) - 1] || current; break;
break; case "bottom":
case 'bottom': next = results[results.length - 1];
next = results[results.length - 1]; break;
break; case "top":
case 'top':
/* falls through */ /* falls through */
default: default:
next = results[0]; next = results[0];
} }
} }
if (next) { if (next) {
current.removeAttribute('data-vim-selected'); current.removeAttribute("data-vim-selected");
next.setAttribute('data-vim-selected', 'true'); next.setAttribute("data-vim-selected", "true");
if (!keepFocus) { if (!keepFocus) {
var link = next.querySelector('h3 a') || next.querySelector('a'); var link = next.querySelector("h3 a") || next.querySelector("a");
if (link !== null) { if (link !== null) {
link.focus(); link.focus();
} }
@ -280,21 +294,21 @@ searxng.ready(function () {
}; };
} }
function reloadPage () { function reloadPage() {
document.location.reload(true); document.location.reload(true);
} }
function removeFocus (e) { function removeFocus(e) {
const tagName = e.target.tagName.toLowerCase(); const tagName = e.target.tagName.toLowerCase();
if (document.activeElement && (tagName === 'input' || tagName === 'select' || tagName === 'textarea')) { if (document.activeElement && (tagName === "input" || tagName === "select" || tagName === "textarea")) {
document.activeElement.blur(); document.activeElement.blur();
} else { } else {
searxng.closeDetail(); searxng.closeDetail();
} }
} }
function pageButtonClick (css_selector) { function pageButtonClick(css_selector) {
return function () { return () => {
var button = document.querySelector(css_selector); var button = document.querySelector(css_selector);
if (button) { if (button) {
button.click(); button.click();
@ -302,16 +316,16 @@ searxng.ready(function () {
}; };
} }
function GoToNextPage () { function GoToNextPage() {
return pageButtonClick('nav#pagination .next_page button[type="submit"]'); return pageButtonClick('nav#pagination .next_page button[type="submit"]');
} }
function GoToPreviousPage () { function GoToPreviousPage() {
return pageButtonClick('nav#pagination .previous_page button[type="submit"]'); return pageButtonClick('nav#pagination .previous_page button[type="submit"]');
} }
function scrollPageToSelected () { function scrollPageToSelected() {
var sel = document.querySelector('.result[data-vim-selected]'); var sel = document.querySelector(".result[data-vim-selected]");
if (sel === null) { if (sel === null) {
return; return;
} }
@ -321,39 +335,39 @@ searxng.ready(function () {
ebot = etop + sel.clientHeight, ebot = etop + sel.clientHeight,
offset = 120; offset = 120;
// first element ? // first element ?
if ((sel.previousElementSibling === null) && (ebot < wheight)) { if (sel.previousElementSibling === null && ebot < wheight) {
// set to the top of page if the first element // set to the top of page if the first element
// is fully included in the viewport // is fully included in the viewport
window.scroll(window.scrollX, 0); window.scroll(window.scrollX, 0);
return; return;
} }
if (wtop > (etop - offset)) { if (wtop > etop - offset) {
window.scroll(window.scrollX, etop - offset); window.scroll(window.scrollX, etop - offset);
} else { } else {
var wbot = wtop + wheight; var wbot = wtop + wheight;
if (wbot < (ebot + offset)) { if (wbot < ebot + offset) {
window.scroll(window.scrollX, ebot - wheight + offset); window.scroll(window.scrollX, ebot - wheight + offset);
} }
} }
} }
function scrollPage (amount) { function scrollPage(amount) {
return function () { return () => {
window.scrollBy(0, amount); window.scrollBy(0, amount);
highlightResult('visible')(); highlightResult("visible")();
}; };
} }
function scrollPageTo (position, nav) { function scrollPageTo(position, nav) {
return function () { return () => {
window.scrollTo(0, position); window.scrollTo(0, position);
highlightResult(nav)(); highlightResult(nav)();
}; };
} }
function searchInputFocus () { function searchInputFocus() {
window.scrollTo(0, 0); window.scrollTo(0, 0);
var q = document.querySelector('#q'); var q = document.querySelector("#q");
q.focus(); q.focus();
if (q.setSelectionRange) { if (q.setSelectionRange) {
var len = q.value.length; var len = q.value.length;
@ -361,14 +375,14 @@ searxng.ready(function () {
} }
} }
function openResult (newTab) { function openResult(newTab) {
return function () { return () => {
var link = document.querySelector('.result[data-vim-selected] h3 a'); var link = document.querySelector(".result[data-vim-selected] h3 a");
if (link === null) { if (link === null) {
link = document.querySelector('.result[data-vim-selected] > a'); link = document.querySelector(".result[data-vim-selected] > a");
} }
if (link !== null) { if (link !== null) {
var url = link.getAttribute('href'); var url = link.getAttribute("href");
if (newTab) { if (newTab) {
window.open(url); window.open(url);
} else { } else {
@ -378,7 +392,7 @@ searxng.ready(function () {
}; };
} }
function initHelpContent (divElement) { function initHelpContent(divElement) {
var categories = {}; var categories = {};
for (var k in keyBindings) { for (var k in keyBindings) {
@ -387,75 +401,72 @@ searxng.ready(function () {
categories[key.cat].push(key); categories[key.cat].push(key);
} }
var sorted = Object.keys(categories).sort(function (a, b) { var sorted = Object.keys(categories).sort((a, b) => categories[b].length - categories[a].length);
return categories[b].length - categories[a].length;
});
if (sorted.length === 0) { if (sorted.length === 0) {
return; return;
} }
var html = '<a href="#" class="close" aria-label="close" title="close">×</a>'; var html = '<a href="#" class="close" aria-label="close" title="close">×</a>';
html += '<h3>How to navigate SearXNG with hotkeys</h3>'; html += "<h3>How to navigate SearXNG with hotkeys</h3>";
html += '<table>'; html += "<table>";
for (var i = 0; i < sorted.length; i++) { for (var i = 0; i < sorted.length; i++) {
var cat = categories[sorted[i]]; var cat = categories[sorted[i]];
var lastCategory = i === (sorted.length - 1); var lastCategory = i === sorted.length - 1;
var first = i % 2 === 0; var first = i % 2 === 0;
if (first) { if (first) {
html += '<tr>'; html += "<tr>";
} }
html += '<td>'; html += "<td>";
html += '<h4>' + cat[0].cat + '</h4>'; html += "<h4>" + cat[0].cat + "</h4>";
html += '<ul class="list-unstyled">'; html += '<ul class="list-unstyled">';
for (var cj in cat) { for (var cj in cat) {
html += '<li><kbd>' + cat[cj].key + '</kbd> ' + cat[cj].des + '</li>'; html += "<li><kbd>" + cat[cj].key + "</kbd> " + cat[cj].des + "</li>";
} }
html += '</ul>'; html += "</ul>";
html += '</td>'; // col-sm-* html += "</td>"; // col-sm-*
if (!first || lastCategory) { if (!first || lastCategory) {
html += '</tr>'; // row html += "</tr>"; // row
} }
} }
html += '</table>'; html += "</table>";
divElement.innerHTML = html; divElement.innerHTML = html;
} }
function toggleHelp () { function toggleHelp() {
var helpPanel = document.querySelector('#vim-hotkeys-help'); var helpPanel = document.querySelector("#vim-hotkeys-help");
if (helpPanel === undefined || helpPanel === null) { if (helpPanel === undefined || helpPanel === null) {
// first call // first call
helpPanel = document.createElement('div'); helpPanel = document.createElement("div");
helpPanel.id = 'vim-hotkeys-help'; helpPanel.id = "vim-hotkeys-help";
helpPanel.className = 'dialog-modal'; helpPanel.className = "dialog-modal";
initHelpContent(helpPanel); initHelpContent(helpPanel);
var body = document.getElementsByTagName('body')[0]; var body = document.getElementsByTagName("body")[0];
body.appendChild(helpPanel); body.appendChild(helpPanel);
} else { } else {
// toggle hidden // toggle hidden
helpPanel.classList.toggle('invisible'); helpPanel.classList.toggle("invisible");
return;
} }
} }
function copyURLToClipboard () { function copyURLToClipboard() {
var currentUrlElement = document.querySelector('.result[data-vim-selected] h3 a'); var currentUrlElement = document.querySelector(".result[data-vim-selected] h3 a");
if (currentUrlElement === null) return; if (currentUrlElement === null) return;
const url = currentUrlElement.getAttribute('href'); const url = currentUrlElement.getAttribute("href");
navigator.clipboard.writeText(url); navigator.clipboard.writeText(url);
} }
searxng.scrollPageToSelected = scrollPageToSelected; searxng.scrollPageToSelected = scrollPageToSelected;
searxng.selectNext = highlightResult('down'); searxng.selectNext = highlightResult("down");
searxng.selectPrevious = highlightResult('up'); searxng.selectPrevious = highlightResult("up");
}); });

31
client/simple/src/js/main/mapresult.js
View file

@ -1,10 +1,8 @@
/* SPDX-License-Identifier: AGPL-3.0-or-later */ /* SPDX-License-Identifier: AGPL-3.0-or-later */
/* global L */ /* global L */
(function (w, d, searxng) { ((w, d, searxng) => {
'use strict'; searxng.ready(() => {
searxng.on(".searxng_init_map", "click", function (event) {
searxng.ready(function () {
searxng.on('.searxng_init_map', 'click', function (event) {
// no more request // no more request
this.classList.remove("searxng_init_map"); this.classList.remove("searxng_init_map");
@ -16,8 +14,8 @@
var map_boundingbox = JSON.parse(this.dataset.mapBoundingbox); var map_boundingbox = JSON.parse(this.dataset.mapBoundingbox);
var map_geojson = JSON.parse(this.dataset.mapGeojson); var map_geojson = JSON.parse(this.dataset.mapGeojson);
searxng.loadStyle('css/leaflet.css'); searxng.loadStyle("css/leaflet.css");
searxng.loadScript('js/leaflet.js', function () { searxng.loadScript("js/leaflet.js", () => {
var map_bounds = null; var map_bounds = null;
if (map_boundingbox) { if (map_boundingbox) {
var southWest = L.latLng(map_boundingbox[0], map_boundingbox[2]); var southWest = L.latLng(map_boundingbox[0], map_boundingbox[2]);
@ -28,17 +26,22 @@
// init map // init map
var map = L.map(leaflet_target); var map = L.map(leaflet_target);
// create the tile layer with correct attribution // create the tile layer with correct attribution
var osmMapnikUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; var osmMapnikUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
var osmMapnikAttrib = 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'; var osmMapnikAttrib = 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
var osmMapnik = new L.TileLayer(osmMapnikUrl, {minZoom: 1, maxZoom: 19, attribution: osmMapnikAttrib}); var osmMapnik = new L.TileLayer(osmMapnikUrl, { minZoom: 1, maxZoom: 19, attribution: osmMapnikAttrib });
var osmWikimediaUrl = 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png'; var osmWikimediaUrl = "https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png";
var osmWikimediaAttrib = 'Wikimedia maps | Maps data © <a href="https://openstreetmap.org">OpenStreetMap contributors</a>'; var osmWikimediaAttrib =
var osmWikimedia = new L.TileLayer(osmWikimediaUrl, {minZoom: 1, maxZoom: 19, attribution: osmWikimediaAttrib}); 'Wikimedia maps | Maps data © <a href="https://openstreetmap.org">OpenStreetMap contributors</a>';
var osmWikimedia = new L.TileLayer(osmWikimediaUrl, {
minZoom: 1,
maxZoom: 19,
attribution: osmWikimediaAttrib
});
// init map view // init map view
if (map_bounds) { if (map_bounds) {
// TODO hack: https://github.com/Leaflet/Leaflet/issues/2021 // TODO hack: https://github.com/Leaflet/Leaflet/issues/2021
// Still useful ? // Still useful ?
setTimeout(function () { setTimeout(() => {
map.fitBounds(map_bounds, { map.fitBounds(map_bounds, {
maxZoom: 17 maxZoom: 17
}); });
@ -55,7 +58,7 @@
var baseLayers = { var baseLayers = {
"OSM Mapnik": osmMapnik, "OSM Mapnik": osmMapnik,
"OSM Wikimedia": osmWikimedia, "OSM Wikimedia": osmWikimedia
}; };
L.control.layers(baseLayers).addTo(map); L.control.layers(baseLayers).addTo(map);

29
client/simple/src/js/main/preferences.js
View file

@ -1,21 +1,20 @@
/* SPDX-License-Identifier: AGPL-3.0-or-later */ /* SPDX-License-Identifier: AGPL-3.0-or-later */
(function (w, d, searxng) { ((w, d, searxng) => {
'use strict'; if (searxng.endpoint !== "preferences") {
if (searxng.endpoint !== 'preferences') {
return; return;
} }
searxng.ready(function () { searxng.ready(() => {
let engine_descriptions = null; let engine_descriptions = null;
function load_engine_descriptions () {
function load_engine_descriptions() {
if (engine_descriptions == null) { if (engine_descriptions == null) {
searxng.http("GET", "engine_descriptions.json").then(function (content) { searxng.http("GET", "engine_descriptions.json").then((content) => {
engine_descriptions = JSON.parse(content); engine_descriptions = JSON.parse(content);
for (const [engine_name, description] of Object.entries(engine_descriptions)) { for (const [engine_name, description] of Object.entries(engine_descriptions)) {
let elements = d.querySelectorAll('[data-engine-name="' + engine_name + '"] .engine-description'); const elements = d.querySelectorAll('[data-engine-name="' + engine_name + '"] .engine-description');
for (const element of elements) { for (const element of elements) {
let source = ' (<i>' + searxng.settings.translations.Source + ':&nbsp;' + description[1] + '</i>)'; const source = " (<i>" + searxng.settings.translations.Source + ":&nbsp;" + description[1] + "</i>)";
element.innerHTML = description[0] + source; element.innerHTML = description[0] + source;
} }
} }
@ -23,13 +22,13 @@
} }
} }
for (const el of d.querySelectorAll('[data-engine-name]')) { for (const el of d.querySelectorAll("[data-engine-name]")) {
searxng.on(el, 'mouseenter', load_engine_descriptions); searxng.on(el, "mouseenter", load_engine_descriptions);
} }
const enableAllEngines = d.querySelectorAll(".enable-all-engines"); const enableAllEngines = d.querySelectorAll(".enable-all-engines");
const disableAllEngines = d.querySelectorAll(".disable-all-engines"); const disableAllEngines = d.querySelectorAll(".disable-all-engines");
const engineToggles = d.querySelectorAll('tbody input[type=checkbox][class~=checkbox-onoff]'); const engineToggles = d.querySelectorAll("tbody input[type=checkbox][class~=checkbox-onoff]");
const toggleEngines = (enable) => { const toggleEngines = (enable) => {
for (const el of engineToggles) { for (const el of engineToggles) {
// check if element visible, so that only engines of the current category are modified // check if element visible, so that only engines of the current category are modified
@ -37,14 +36,14 @@
} }
}; };
for (const el of enableAllEngines) { for (const el of enableAllEngines) {
searxng.on(el, 'click', () => toggleEngines(true)); searxng.on(el, "click", () => toggleEngines(true));
} }
for (const el of disableAllEngines) { for (const el of disableAllEngines) {
searxng.on(el, 'click', () => toggleEngines(false)); searxng.on(el, "click", () => toggleEngines(false));
} }
const copyHashButton = d.querySelector("#copy-hash"); const copyHashButton = d.querySelector("#copy-hash");
searxng.on(copyHashButton, 'click', (e) => { searxng.on(copyHashButton, "click", (e) => {
e.preventDefault(); e.preventDefault();
navigator.clipboard.writeText(copyHashButton.dataset.hash); navigator.clipboard.writeText(copyHashButton.dataset.hash);
copyHashButton.innerText = copyHashButton.dataset.copiedText; copyHashButton.innerText = copyHashButton.dataset.copiedText;

140
client/simple/src/js/main/results.js
View file

@ -2,55 +2,54 @@
import "../../../node_modules/swiped-events/src/swiped-events.js"; import "../../../node_modules/swiped-events/src/swiped-events.js";
(function (w, d, searxng) { ((w, d, searxng) => {
'use strict'; if (searxng.endpoint !== "results") {
if (searxng.endpoint !== 'results') {
return; return;
} }
searxng.ready(function () { searxng.ready(() => {
d.querySelectorAll('#urls img').forEach( d.querySelectorAll("#urls img").forEach((img) =>
img => img.addEventListener(
img.addEventListener( "error",
'error', () => { () => {
// console.log("ERROR can't load: " + img.src); // console.log("ERROR can't load: " + img.src);
img.src = window.searxng.settings.theme_static_path + "/img/img_load_error.svg"; img.src = window.searxng.settings.theme_static_path + "/img/img_load_error.svg";
}, },
{once: true} { once: true }
)); )
);
if (d.querySelector('#search_url button#copy_url')) { if (d.querySelector("#search_url button#copy_url")) {
d.querySelector('#search_url button#copy_url').style.display = "block"; d.querySelector("#search_url button#copy_url").style.display = "block";
} }
searxng.on('.btn-collapse', 'click', function () { searxng.on(".btn-collapse", "click", function () {
var btnLabelCollapsed = this.getAttribute('data-btn-text-collapsed'); var btnLabelCollapsed = this.getAttribute("data-btn-text-collapsed");
var btnLabelNotCollapsed = this.getAttribute('data-btn-text-not-collapsed'); var btnLabelNotCollapsed = this.getAttribute("data-btn-text-not-collapsed");
var target = this.getAttribute('data-target'); var target = this.getAttribute("data-target");
var targetElement = d.querySelector(target); var targetElement = d.querySelector(target);
var html = this.innerHTML; var html = this.innerHTML;
if (this.classList.contains('collapsed')) { if (this.classList.contains("collapsed")) {
html = html.replace(btnLabelCollapsed, btnLabelNotCollapsed); html = html.replace(btnLabelCollapsed, btnLabelNotCollapsed);
} else { } else {
html = html.replace(btnLabelNotCollapsed, btnLabelCollapsed); html = html.replace(btnLabelNotCollapsed, btnLabelCollapsed);
} }
this.innerHTML = html; this.innerHTML = html;
this.classList.toggle('collapsed'); this.classList.toggle("collapsed");
targetElement.classList.toggle('invisible'); targetElement.classList.toggle("invisible");
}); });
searxng.on('.media-loader', 'click', function () { searxng.on(".media-loader", "click", function () {
var target = this.getAttribute('data-target'); var target = this.getAttribute("data-target");
var iframe_load = d.querySelector(target + ' > iframe'); var iframe_load = d.querySelector(target + " > iframe");
var srctest = iframe_load.getAttribute('src'); var srctest = iframe_load.getAttribute("src");
if (srctest === null || srctest === undefined || srctest === false) { if (srctest === null || srctest === undefined || srctest === false) {
iframe_load.setAttribute('src', iframe_load.getAttribute('data-src')); iframe_load.setAttribute("src", iframe_load.getAttribute("data-src"));
} }
}); });
searxng.on('#copy_url', 'click', function () { searxng.on("#copy_url", "click", function () {
var target = this.parentElement.querySelector('pre'); var target = this.parentElement.querySelector("pre");
navigator.clipboard.writeText(target.innerText); navigator.clipboard.writeText(target.innerText);
this.innerText = this.dataset.copiedText; this.innerText = this.dataset.copiedText;
}); });
@ -62,8 +61,8 @@ import "../../../node_modules/swiped-events/src/swiped-events.js";
let imgTimeoutID; let imgTimeoutID;
// progress spinner, while an image is loading // progress spinner, while an image is loading
const imgLoaderSpinner = d.createElement('div'); const imgLoaderSpinner = d.createElement("div");
imgLoaderSpinner.classList.add('loader'); imgLoaderSpinner.classList.add("loader");
// singleton image object, which is used for all loading processes of a // singleton image object, which is used for all loading processes of a
// detailed image // detailed image
@ -89,15 +88,14 @@ import "../../../node_modules/swiped-events/src/swiped-events.js";
}; };
searxng.selectImage = (resultElement) => { searxng.selectImage = (resultElement) => {
// add a class that can be evaluated in the CSS and indicates that the // add a class that can be evaluated in the CSS and indicates that the
// detail view is open // detail view is open
d.getElementById('results').classList.add('image-detail-open'); d.getElementById("results").classList.add("image-detail-open");
// add a hash to the browser history so that pressing back doesn't return // add a hash to the browser history so that pressing back doesn't return
// to the previous page this allows us to dismiss the image details on // to the previous page this allows us to dismiss the image details on
// pressing the back button on mobile devices // pressing the back button on mobile devices
window.location.hash = '#image-viewer'; window.location.hash = "#image-viewer";
searxng.scrollPageToSelected(); searxng.scrollPageToSelected();
@ -105,21 +103,21 @@ import "../../../node_modules/swiped-events/src/swiped-events.js";
if (!resultElement) return; if (!resultElement) return;
// find <img> object in the element, if there is none, stop here. // find <img> object in the element, if there is none, stop here.
const img = resultElement.querySelector('.result-images-source img'); const img = resultElement.querySelector(".result-images-source img");
if (!img) return; if (!img) return;
// <img src="" data-src="http://example.org/image.jpg"> // <img src="" data-src="http://example.org/image.jpg">
const src = img.getAttribute('data-src'); const src = img.getAttribute("data-src");
// already loaded high-res image or no high-res image available // already loaded high-res image or no high-res image available
if (!src) return; if (!src) return;
// use the image thumbnail until the image is fully loaded // use the image thumbnail until the image is fully loaded
const thumbnail = resultElement.querySelector('.image_thumbnail'); const thumbnail = resultElement.querySelector(".image_thumbnail");
img.src = thumbnail.src; img.src = thumbnail.src;
// show a progress spinner // show a progress spinner
const detailElement = resultElement.querySelector('.detail'); const detailElement = resultElement.querySelector(".detail");
detailElement.appendChild(imgLoaderSpinner); detailElement.appendChild(imgLoaderSpinner);
// load full size image in background // load full size image in background
@ -127,58 +125,58 @@ import "../../../node_modules/swiped-events/src/swiped-events.js";
// after the singelton loadImage has loaded the detail image into the // after the singelton loadImage has loaded the detail image into the
// cache, it can be used in the origin <img> as src property. // cache, it can be used in the origin <img> as src property.
img.src = src; img.src = src;
img.removeAttribute('data-src'); img.removeAttribute("data-src");
}); });
}; };
searxng.closeDetail = function () { searxng.closeDetail = () => {
d.getElementById('results').classList.remove('image-detail-open'); d.getElementById("results").classList.remove("image-detail-open");
// remove #image-viewer hash from url by navigating back // remove #image-viewer hash from url by navigating back
if (window.location.hash == '#image-viewer') window.history.back(); if (window.location.hash === "#image-viewer") window.history.back();
searxng.scrollPageToSelected(); searxng.scrollPageToSelected();
}; };
searxng.on('.result-detail-close', 'click', e => { searxng.on(".result-detail-close", "click", (e) => {
e.preventDefault(); e.preventDefault();
searxng.closeDetail(); searxng.closeDetail();
}); });
searxng.on('.result-detail-previous', 'click', e => { searxng.on(".result-detail-previous", "click", (e) => {
e.preventDefault(); e.preventDefault();
searxng.selectPrevious(false); searxng.selectPrevious(false);
}); });
searxng.on('.result-detail-next', 'click', e => { searxng.on(".result-detail-next", "click", (e) => {
e.preventDefault(); e.preventDefault();
searxng.selectNext(false); searxng.selectNext(false);
}); });
// listen for the back button to be pressed and dismiss the image details when called // listen for the back button to be pressed and dismiss the image details when called
window.addEventListener('hashchange', () => { window.addEventListener("hashchange", () => {
if (window.location.hash != '#image-viewer') searxng.closeDetail(); if (window.location.hash !== "#image-viewer") searxng.closeDetail();
}); });
d.querySelectorAll('.swipe-horizontal').forEach( d.querySelectorAll(".swipe-horizontal").forEach((obj) => {
obj => { obj.addEventListener("swiped-left", () => {
obj.addEventListener('swiped-left', function () { searxng.selectNext(false);
searxng.selectNext(false); });
}); obj.addEventListener("swiped-right", () => {
obj.addEventListener('swiped-right', function () { searxng.selectPrevious(false);
searxng.selectPrevious(false); });
}); });
}
);
w.addEventListener('scroll', function () { w.addEventListener(
var e = d.getElementById('backToTop'), "scroll",
scrollTop = document.documentElement.scrollTop || document.body.scrollTop, () => {
results = d.getElementById('results'); var e = d.getElementById("backToTop"),
if (e !== null) { scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
if (scrollTop >= 100) { results = d.getElementById("results");
results.classList.add('scrolling'); if (e !== null) {
} else { if (scrollTop >= 100) {
results.classList.remove('scrolling'); results.classList.add("scrolling");
} else {
results.classList.remove("scrolling");
}
} }
} },
}, true); true
);
}); });
})(window, document, window.searxng); })(window, document, window.searxng);

92
client/simple/src/js/main/search.js
View file

@ -1,24 +1,23 @@
/* SPDX-License-Identifier: AGPL-3.0-or-later */ /* SPDX-License-Identifier: AGPL-3.0-or-later */
/* exported AutoComplete */ /* exported AutoComplete */
(function (w, d, searxng) { ((w, d, searxng) => {
'use strict'; var qinput_id = "q",
qinput;
var qinput_id = "q", qinput;
const isMobile = window.matchMedia("only screen and (max-width: 50em)").matches; const isMobile = window.matchMedia("only screen and (max-width: 50em)").matches;
const isResultsPage = document.querySelector("main").id == "main_results"; const isResultsPage = document.querySelector("main").id === "main_results";
function submitIfQuery () { function submitIfQuery() {
if (qinput.value.length > 0) { if (qinput.value.length > 0) {
var search = document.getElementById('search'); var search = document.getElementById("search");
setTimeout(search.submit.bind(search), 0); setTimeout(search.submit.bind(search), 0);
} }
} }
function createClearButton (qinput) { function createClearButton(qinput) {
var cs = document.getElementById('clear_search'); var cs = document.getElementById("clear_search");
var updateClearButton = function () { var updateClearButton = () => {
if (qinput.value.length === 0) { if (qinput.value.length === 0) {
cs.classList.add("empty"); cs.classList.add("empty");
} else { } else {
@ -28,18 +27,18 @@
// update status, event listener // update status, event listener
updateClearButton(); updateClearButton();
cs.addEventListener('click', function (ev) { cs.addEventListener("click", (ev) => {
qinput.value = ''; qinput.value = "";
qinput.focus(); qinput.focus();
updateClearButton(); updateClearButton();
ev.preventDefault(); ev.preventDefault();
}); });
qinput.addEventListener('input', updateClearButton, false); qinput.addEventListener("input", updateClearButton, false);
} }
const fetchResults = async (query) => { const fetchResults = async (query) => {
let request; let request;
if (searxng.settings.method === 'GET') { if (searxng.settings.method === "GET") {
const reqParams = new URLSearchParams(); const reqParams = new URLSearchParams();
reqParams.append("q", query); reqParams.append("q", query);
request = fetch("./autocompleter?" + reqParams.toString()); request = fetch("./autocompleter?" + reqParams.toString());
@ -47,12 +46,12 @@
const formData = new FormData(); const formData = new FormData();
formData.append("q", query); formData.append("q", query);
request = fetch("./autocompleter", { request = fetch("./autocompleter", {
method: 'POST', method: "POST",
body: formData, body: formData
}); });
} }
request.then(async function (response) { request.then(async (response) => {
const results = await response.json(); const results = await response.json();
if (!results) return; if (!results) return;
@ -63,30 +62,30 @@
autocompleteList.innerHTML = ""; autocompleteList.innerHTML = "";
// show an error message that no result was found // show an error message that no result was found
if (!results[1] || results[1].length == 0) { if (!results[1] || results[1].length === 0) {
const noItemFoundMessage = document.createElement("li"); const noItemFoundMessage = document.createElement("li");
noItemFoundMessage.classList.add('no-item-found'); noItemFoundMessage.classList.add("no-item-found");
noItemFoundMessage.innerHTML = searxng.settings.translations.no_item_found; noItemFoundMessage.innerHTML = searxng.settings.translations.no_item_found;
autocompleteList.appendChild(noItemFoundMessage); autocompleteList.appendChild(noItemFoundMessage);
return; return;
} }
for (let result of results[1]) { for (const result of results[1]) {
const li = document.createElement("li"); const li = document.createElement("li");
li.innerText = result; li.innerText = result;
searxng.on(li, 'mousedown', () => { searxng.on(li, "mousedown", () => {
qinput.value = result; qinput.value = result;
const form = d.querySelector("#search"); const form = d.querySelector("#search");
form.submit(); form.submit();
autocomplete.classList.remove('open'); autocomplete.classList.remove("open");
}); });
autocompleteList.appendChild(li); autocompleteList.appendChild(li);
} }
}); });
}; };
searxng.ready(function () { searxng.ready(() => {
// focus search input on large screens // focus search input on large screens
if (!isMobile && !isResultsPage) document.getElementById("q").focus(); if (!isMobile && !isResultsPage) document.getElementById("q").focus();
@ -100,20 +99,20 @@
// autocompleter // autocompleter
if (searxng.settings.autocomplete) { if (searxng.settings.autocomplete) {
searxng.on(qinput, 'input', () => { searxng.on(qinput, "input", () => {
const query = qinput.value; const query = qinput.value;
if (query.length < searxng.settings.autocomplete_min) return; if (query.length < searxng.settings.autocomplete_min) return;
setTimeout(() => { setTimeout(() => {
if (query == qinput.value) fetchResults(query); if (query === qinput.value) fetchResults(query);
}, 300); }, 300);
}); });
searxng.on(qinput, 'keyup', (e) => { searxng.on(qinput, "keyup", (e) => {
let currentIndex = -1; let currentIndex = -1;
const listItems = autocompleteList.children; const listItems = autocompleteList.children;
for (let i = 0; i < listItems.length; i++) { for (let i = 0; i < listItems.length; i++) {
if (listItems[i].classList.contains('active')) { if (listItems[i].classList.contains("active")) {
currentIndex = i; currentIndex = i;
break; break;
} }
@ -121,22 +120,22 @@
let newCurrentIndex = -1; let newCurrentIndex = -1;
if (e.key === "ArrowUp") { if (e.key === "ArrowUp") {
if (currentIndex >= 0) listItems[currentIndex].classList.remove('active'); if (currentIndex >= 0) listItems[currentIndex].classList.remove("active");
// we need to add listItems.length to the index calculation here because the JavaScript modulos // we need to add listItems.length to the index calculation here because the JavaScript modulos
// operator doesn't work with negative numbers // operator doesn't work with negative numbers
newCurrentIndex = (currentIndex - 1 + listItems.length) % listItems.length; newCurrentIndex = (currentIndex - 1 + listItems.length) % listItems.length;
} else if (e.key === "ArrowDown") { } else if (e.key === "ArrowDown") {
if (currentIndex >= 0) listItems[currentIndex].classList.remove('active'); if (currentIndex >= 0) listItems[currentIndex].classList.remove("active");
newCurrentIndex = (currentIndex + 1) % listItems.length; newCurrentIndex = (currentIndex + 1) % listItems.length;
} else if (e.key === "Tab" || e.key === "Enter") { } else if (e.key === "Tab" || e.key === "Enter") {
autocomplete.classList.remove('open'); autocomplete.classList.remove("open");
} }
if (newCurrentIndex != -1) { if (newCurrentIndex !== -1) {
const selectedItem = listItems[newCurrentIndex]; const selectedItem = listItems[newCurrentIndex];
selectedItem.classList.add('active'); selectedItem.classList.add("active");
if (!selectedItem.classList.contains('no-item-found')) qinput.value = selectedItem.innerText; if (!selectedItem.classList.contains("no-item-found")) qinput.value = selectedItem.innerText;
} }
}); });
} }
@ -147,20 +146,20 @@
// filter (safesearch, time range or language) (this requires JavaScript // filter (safesearch, time range or language) (this requires JavaScript
// though) // though)
if ( if (
qinput !== null qinput !== null &&
&& searxng.settings.search_on_category_select searxng.settings.search_on_category_select &&
// If .search_filters is undefined (invisible) we are on the homepage and // If .search_filters is undefined (invisible) we are on the homepage and
// hence don't have to set any listeners // hence don't have to set any listeners
&& d.querySelector(".search_filters") != null d.querySelector(".search_filters") != null
) { ) {
searxng.on(d.getElementById('safesearch'), 'change', submitIfQuery); searxng.on(d.getElementById("safesearch"), "change", submitIfQuery);
searxng.on(d.getElementById('time_range'), 'change', submitIfQuery); searxng.on(d.getElementById("time_range"), "change", submitIfQuery);
searxng.on(d.getElementById('language'), 'change', submitIfQuery); searxng.on(d.getElementById("language"), "change", submitIfQuery);
} }
const categoryButtons = d.querySelectorAll("button.category_button"); const categoryButtons = d.querySelectorAll("button.category_button");
for (let button of categoryButtons) { for (const button of categoryButtons) {
searxng.on(button, 'click', (event) => { searxng.on(button, "click", (event) => {
if (event.shiftKey) { if (event.shiftKey) {
event.preventDefault(); event.preventDefault();
button.classList.toggle("selected"); button.classList.toggle("selected");
@ -169,7 +168,7 @@
// manually deselect the old selection when a new category is selected // manually deselect the old selection when a new category is selected
const selectedCategories = d.querySelectorAll("button.category_button.selected"); const selectedCategories = d.querySelectorAll("button.category_button.selected");
for (let categoryButton of selectedCategories) { for (const categoryButton of selectedCategories) {
categoryButton.classList.remove("selected"); categoryButton.classList.remove("selected");
} }
button.classList.add("selected"); button.classList.add("selected");
@ -179,12 +178,12 @@
// override form submit action to update the actually selected categories // override form submit action to update the actually selected categories
const form = d.querySelector("#search"); const form = d.querySelector("#search");
if (form != null) { if (form != null) {
searxng.on(form, 'submit', (event) => { searxng.on(form, "submit", (event) => {
event.preventDefault(); event.preventDefault();
const categoryValuesInput = d.querySelector("#selected-categories"); const categoryValuesInput = d.querySelector("#selected-categories");
if (categoryValuesInput) { if (categoryValuesInput) {
let categoryValues = []; const categoryValues = [];
for (let categoryButton of categoryButtons) { for (const categoryButton of categoryButtons) {
if (categoryButton.classList.contains("selected")) { if (categoryButton.classList.contains("selected")) {
categoryValues.push(categoryButton.name.replace("category_", "")); categoryValues.push(categoryButton.name.replace("category_", ""));
} }
@ -195,5 +194,4 @@
}); });
} }
}); });
})(window, document, window.searxng); })(window, document, window.searxng);

71
client/simple/theme_icons.js
View file

@ -2,8 +2,8 @@
* Generate icons.html for the jinja templates of the simple theme. * Generate icons.html for the jinja templates of the simple theme.
*/ */
import { argv } from "node:process";
import { dirname, resolve } from "node:path"; import { dirname, resolve } from "node:path";
import { argv } from "node:process";
import { jinja_svg_sets } from "./tools/jinja_svg_catalog.js"; import { jinja_svg_sets } from "./tools/jinja_svg_catalog.js";
const HERE = dirname(argv[1]) + "/"; const HERE = dirname(argv[1]) + "/";
@ -11,62 +11,65 @@ const dest = resolve(HERE, "../../searx/templates/simple/icons.html");
/** @type import("./tools/jinja_svg_catalog.js").JinjaMacro[] */ /** @type import("./tools/jinja_svg_catalog.js").JinjaMacro[] */
const searxng_jinja_macros = [ const searxng_jinja_macros = [
{ name: "icon", class: "sxng-icon-set" }, { name: "icon", class: "sxng-icon-set" },
{ name: "icon_small", class: "sxng-icon-set-small" }, { name: "icon_small", class: "sxng-icon-set-small" },
{ name: "icon_big", class: "sxng-icon-set-big" }, { name: "icon_big", class: "sxng-icon-set-big" }
]; ];
const sxng_icon_opts = {
const sxng_icon_opts ={
multipass: true, multipass: true,
plugins: [ plugins: [
{ name: "removeTitle" }, { name: "removeTitle" },
{ name: "removeXMLNS" }, { name: "removeXMLNS" },
{ name: "addAttributesToSVGElement", {
name: "addAttributesToSVGElement",
params: { params: {
attributes: [ attributes: [
{ {
"aria-hidden": "true", "aria-hidden": "true"
}]}}] }
]
}
}
]
}; };
/** @type import("./tools/jinja_svg_catalog.js").IconSet */ /** @type import("./tools/jinja_svg_catalog.js").IconSet */
const simple_icons = [ const simple_icons = [
{ {
base: resolve(HERE, "node_modules/ionicons/dist/svg"), base: resolve(HERE, "node_modules/ionicons/dist/svg"),
set: { set: {
"alert": "alert-outline.svg", alert: "alert-outline.svg",
"appstore": "apps-outline.svg", appstore: "apps-outline.svg",
"book": "book-outline.svg", book: "book-outline.svg",
"close": "close-outline.svg", close: "close-outline.svg",
"download": "download-outline.svg", download: "download-outline.svg",
"ellipsis-vertical": "ellipsis-vertical-outline.svg", "ellipsis-vertical": "ellipsis-vertical-outline.svg",
"file-tray-full": "file-tray-full-outline.svg", "file-tray-full": "file-tray-full-outline.svg",
"film": "film-outline.svg", film: "film-outline.svg",
"globe": "globe-outline.svg", globe: "globe-outline.svg",
"heart": "heart-outline.svg", heart: "heart-outline.svg",
"image": "image-outline.svg", image: "image-outline.svg",
"layers": "layers-outline.svg", layers: "layers-outline.svg",
"leecher": "arrow-down.svg", leecher: "arrow-down.svg",
"location": "location-outline.svg", location: "location-outline.svg",
"magnet": "magnet-outline.svg", magnet: "magnet-outline.svg",
"musical-notes": "musical-notes-outline.svg", "musical-notes": "musical-notes-outline.svg",
"navigate-down": "chevron-down-outline.svg", "navigate-down": "chevron-down-outline.svg",
"navigate-left": "chevron-back-outline.svg", "navigate-left": "chevron-back-outline.svg",
"navigate-right": "chevron-forward-outline.svg", "navigate-right": "chevron-forward-outline.svg",
"navigate-up": "chevron-up-outline.svg", "navigate-up": "chevron-up-outline.svg",
"people": "people-outline.svg", people: "people-outline.svg",
"play": "play-outline.svg", play: "play-outline.svg",
"radio": "radio-outline.svg", radio: "radio-outline.svg",
"save": "save-outline.svg", save: "save-outline.svg",
"school": "school-outline.svg", school: "school-outline.svg",
"search": "search-outline.svg", search: "search-outline.svg",
"seeder": "swap-vertical.svg", seeder: "swap-vertical.svg",
"settings": "settings-outline.svg", settings: "settings-outline.svg",
"tv": "tv-outline.svg", tv: "tv-outline.svg"
}, },
svgo_opts: sxng_icon_opts, svgo_opts: sxng_icon_opts
}, },
// some of the ionicons are not suitable for a dark theme, we fixed the svg // some of the ionicons are not suitable for a dark theme, we fixed the svg
// manually in src/svg/ionicons // manually in src/svg/ionicons
@ -75,9 +78,9 @@ const simple_icons = [
base: resolve(HERE, "src/svg/ionicons"), base: resolve(HERE, "src/svg/ionicons"),
set: { set: {
"information-circle": "information-circle-outline.svg", "information-circle": "information-circle-outline.svg",
"newspaper": "newspaper-outline.svg", newspaper: "newspaper-outline.svg"
}, },
svgo_opts: sxng_icon_opts, svgo_opts: sxng_icon_opts
} }
]; ];

70
client/simple/tools/img.js
View file

@ -9,40 +9,35 @@ import { optimize as svgo } from "svgo";
* @property {string} dest - Name of the destination file. * @property {string} dest - Name of the destination file.
*/ */
/** /**
* Convert a list of SVG files to PNG. * Convert a list of SVG files to PNG.
* *
* @param {Src2Dest[]} items - Array of SVG files (src: SVG, dest:PNG) to convert. * @param {Src2Dest[]} items - Array of SVG files (src: SVG, dest:PNG) to convert.
*/ */
async function svg2png (items) { async function svg2png(items) {
items.forEach( items.forEach(async (item) => {
async (item) => { try {
try { fs.mkdir(path.dirname(item.dest), { recursive: true }, (err) => {
fs.mkdir(path.dirname(item.dest), { recursive: true }, (err) => { if (err) throw err;
if (err) });
throw err;
});
const info = await sharp(item.src).png({ const info = await sharp(item.src)
.png({
force: true, force: true,
compressionLevel: 9, compressionLevel: 9,
palette: true, palette: true
}).toFile(item.dest); })
.toFile(item.dest);
console.log( console.log(`[svg2png] created ${item.dest} -- bytes: ${info.size}, w:${info.width}px, h:${info.height}px`);
`[svg2png] created ${item.dest} -- bytes: ${info.size}, w:${info.width}px, h:${info.height}px` } catch (err) {
); console.error(`ERROR: ${item.dest} -- ${err}`);
} catch (err) { throw err;
console.error(`ERROR: ${item.dest} -- ${err}`);
throw(err);
}
} }
); });
} }
/** /**
* Optimize SVG images for WEB. * Optimize SVG images for WEB.
* *
@ -51,28 +46,21 @@ async function svg2png (items) {
*/ */
async function svg2svg(svgo_opts, items) { async function svg2svg(svgo_opts, items) {
items.forEach( items.forEach(async (item) => {
async (item) => { try {
try { fs.mkdir(path.dirname(item.dest), { recursive: true }, (err) => {
fs.mkdir(path.dirname(item.dest), { recursive: true }, (err) => { if (err) throw err;
if (err) });
throw err;
});
const raw = fs.readFileSync(item.src, "utf8"); const raw = fs.readFileSync(item.src, "utf8");
const opt = svgo(raw, svgo_opts); const opt = svgo(raw, svgo_opts);
fs.writeFileSync(item.dest, opt.data); fs.writeFileSync(item.dest, opt.data);
console.log( console.log(`[svg2svg] optimized: ${item.dest} -- src: ${item.src}`);
`[svg2svg] optimized: ${item.dest} -- src: ${item.src}` } catch (err) {
); console.error(`ERROR: optimize src: ${item.src} -- ${err}`);
throw err;
} catch (err) {
console.error(`ERROR: optimize src: ${item.src} -- ${err}`);
throw(err);
}
} }
); });
} }
export { svg2png, svg2svg }; export { svg2png, svg2svg };

67
client/simple/tools/jinja_svg_catalog.js
View file

@ -1,8 +1,8 @@
import { Edge } from "edge.js";
import fs from "fs"; import fs from "fs";
import { resolve, dirname } from "path"; import { dirname, resolve } from "path";
import { Edge } from 'edge.js';
import { optimize as svgo } from "svgo"; import { optimize as svgo } from "svgo";
import { fileURLToPath } from 'url'; import { fileURLToPath } from "url";
const __dirname = dirname(fileURLToPath(import.meta.url)); const __dirname = dirname(fileURLToPath(import.meta.url));
const __jinja_class_placeholder__ = "__jinja_class_placeholder__"; const __jinja_class_placeholder__ = "__jinja_class_placeholder__";
@ -30,7 +30,6 @@ const __jinja_class_placeholder__ = "__jinja_class_placeholder__";
* @property {string} class - SVG's class name (value of XML class attribute) * @property {string} class - SVG's class name (value of XML class attribute)
*/ */
// -- functions // -- functions
/** /**
@ -43,34 +42,30 @@ const __jinja_class_placeholder__ = "__jinja_class_placeholder__";
*/ */
function jinja_svg_catalog(dest, macros, items) { function jinja_svg_catalog(dest, macros, items) {
const svg_catalog = {}; const svg_catalog = {};
const edge_template = resolve(__dirname, "jinja_svg_catalog.html.edge"); const edge_template = resolve(__dirname, "jinja_svg_catalog.html.edge");
items.forEach( items.forEach((item) => {
(item) => { /** @type {import("svgo").Config} */
// JSON.stringify & JSON.parse are used to create a deep copy of the
/** @type {import("svgo").Config} */ // item.svgo_opts object
// JSON.stringify & JSON.parse are used to create a deep copy of the const svgo_opts = JSON.parse(JSON.stringify(item.svgo_opts));
// item.svgo_opts object svgo_opts.plugins.push({
const svgo_opts = JSON.parse(JSON.stringify(item.svgo_opts)); name: "addClassesToSVGElement",
svgo_opts.plugins.push({ params: {
name: "addClassesToSVGElement", classNames: [__jinja_class_placeholder__]
params: {
classNames: [__jinja_class_placeholder__]
}}
);
try {
const raw = fs.readFileSync(item.src, "utf8");
const opt = svgo(raw, svgo_opts);
svg_catalog[item.name] = opt.data;
} catch (err) {
console.error(`ERROR: jinja_svg_catalog processing ${item.name} src: ${item.src} -- ${err}`);
throw(err);
} }
});
try {
const raw = fs.readFileSync(item.src, "utf8");
const opt = svgo(raw, svgo_opts);
svg_catalog[item.name] = opt.data;
} catch (err) {
console.error(`ERROR: jinja_svg_catalog processing ${item.name} src: ${item.src} -- ${err}`);
throw err;
} }
); });
fs.mkdir(dirname(dest), { recursive: true }, (err) => { fs.mkdir(dirname(dest), { recursive: true }, (err) => {
if (err) throw err; if (err) throw err;
@ -82,20 +77,16 @@ function jinja_svg_catalog(dest, macros, items) {
edge_template: edge_template, edge_template: edge_template,
__jinja_class_placeholder__: __jinja_class_placeholder__, __jinja_class_placeholder__: __jinja_class_placeholder__,
// see https://github.com/edge-js/edge/issues/162 // see https://github.com/edge-js/edge/issues/162
open_curly_brace : "{{", open_curly_brace: "{{",
close_curly_brace : "}}" close_curly_brace: "}}"
}; };
const jinjatmpl = Edge.create().renderRawSync( const jinjatmpl = Edge.create().renderRawSync(fs.readFileSync(edge_template, "utf-8"), ctx);
fs.readFileSync(edge_template, "utf-8"),
ctx
);
fs.writeFileSync(dest, jinjatmpl); fs.writeFileSync(dest, jinjatmpl);
console.log(`[jinja_svg_catalog] created: ${dest}`); console.log(`[jinja_svg_catalog] created: ${dest}`);
} }
/** /**
* Calls jinja_svg_catalog for a collection of icon sets where each set has its * Calls jinja_svg_catalog for a collection of icon sets where each set has its
* own parameters. * own parameters.
@ -109,7 +100,6 @@ function jinja_svg_sets(dest, macros, sets) {
const items = []; const items = [];
const all = []; const all = [];
for (const obj of sets) { for (const obj of sets) {
for (const [name, file] of Object.entries(obj.set)) { for (const [name, file] of Object.entries(obj.set)) {
if (all.includes(name)) { if (all.includes(name)) {
throw new Error(`ERROR: ${name} has already been defined`); throw new Error(`ERROR: ${name} has already been defined`);
@ -117,7 +107,7 @@ function jinja_svg_sets(dest, macros, sets) {
items.push({ items.push({
name: name, name: name,
src: resolve(obj.base, file), src: resolve(obj.base, file),
svgo_opts: obj.svgo_opts, svgo_opts: obj.svgo_opts
}); });
} }
jinja_svg_catalog(dest, macros, items); jinja_svg_catalog(dest, macros, items);
@ -126,7 +116,4 @@ function jinja_svg_sets(dest, macros, sets) {
// -- exports // -- exports
export { export { jinja_svg_sets, jinja_svg_catalog };
jinja_svg_sets,
jinja_svg_catalog,
};

19
client/simple/tools/plg.js
View file

@ -8,8 +8,7 @@
* needed. * needed.
*/ */
import { svg2png } from "./img.js"; import { svg2png, svg2svg } from "./img.js";
import { svg2svg } from "./img.js";
/** /**
* Vite plugin to convert a list of SVG files to PNG. * Vite plugin to convert a list of SVG files to PNG.
@ -18,9 +17,11 @@ import { svg2svg } from "./img.js";
*/ */
function plg_svg2png(items) { function plg_svg2png(items) {
return { return {
name: 'searxng-simple-svg2png', name: "searxng-simple-svg2png",
apply: 'build', // or 'serve' apply: "build", // or 'serve'
async writeBundle() { svg2png(items); }, async writeBundle() {
svg2png(items);
}
}; };
} }
@ -32,9 +33,11 @@ function plg_svg2png(items) {
*/ */
function plg_svg2svg(svgo_opts, items) { function plg_svg2svg(svgo_opts, items) {
return { return {
name: 'searxng-simple-svg2png', name: "searxng-simple-svg2png",
apply: 'build', // or 'serve' apply: "build", // or 'serve'
async writeBundle() { svg2svg(items, svgo_opts); }, async writeBundle() {
svg2svg(items, svgo_opts);
}
}; };
} }

96
client/simple/vite.config.js
View file

@ -5,14 +5,11 @@
import { resolve } from "node:path"; import { resolve } from "node:path";
import { defineConfig } from "vite"; import { defineConfig } from "vite";
import { viteStaticCopy } from "vite-plugin-static-copy"; import { viteStaticCopy } from "vite-plugin-static-copy";
import { plg_svg2png } from "./tools/plg.js"; import { plg_svg2png, plg_svg2svg } from "./tools/plg.js";
import { plg_svg2svg } from "./tools/plg.js";
const ROOT = "../.."; // root of the git reposetory
const ROOT = "../.."; // root of the git reposetory
const PATH = { const PATH = {
dist: resolve(ROOT, "searx/static/themes/simple"), dist: resolve(ROOT, "searx/static/themes/simple"),
// dist: resolve(ROOT, "client/simple/dist"), // dist: resolve(ROOT, "client/simple/dist"),
@ -21,27 +18,18 @@ const PATH = {
brand: "src/brand", brand: "src/brand",
static: resolve(ROOT, "client/simple/static"), static: resolve(ROOT, "client/simple/static"),
leaflet: resolve(ROOT, "client/simple/node_modules/leaflet/dist"), leaflet: resolve(ROOT, "client/simple/node_modules/leaflet/dist"),
templates: resolve(ROOT, "searx/templates/simple"), templates: resolve(ROOT, "searx/templates/simple")
}; };
const svg2svg_opts = { const svg2svg_opts = {
plugins: [ plugins: [{ name: "preset-default" }, "sortAttrs", "convertStyleToAttrs"]
{ name: "preset-default" },
"sortAttrs",
"convertStyleToAttrs",
]
}; };
const svg2svg_favicon_opts = { const svg2svg_favicon_opts = {
plugins: [ plugins: [{ name: "preset-default" }, "sortAttrs"]
{ name: "preset-default" },
"sortAttrs",
]
}; };
export default defineConfig({ export default defineConfig({
root: PATH.src, root: PATH.src,
mode: "production", mode: "production",
// mode: "development", // mode: "development",
@ -62,21 +50,25 @@ export default defineConfig({
// FIXME: missing CCS sourcemaps!! // FIXME: missing CCS sourcemaps!!
sourceMap: { sourceMap: {
outputSourceFiles: true, outputSourceFiles: true,
sourceMapURL: (name) => { const s = name.split('/'); return s[s.length - 1] + '.map'; }, sourceMapURL: (name) => {
}, const s = name.split("/");
return s[s.length - 1] + ".map";
}
}
// env: 'development', // env: 'development',
// relativeUrls: true, // relativeUrls: true,
// javascriptEnabled: true, // javascriptEnabled: true,
}, }
}, }
}, // end: css }, // end: css
esbuild : { esbuild: {
// FIXME: missing CCS sourcemaps!! // FIXME: missing CCS sourcemaps!!
sourcemap: true sourcemap: true
}, },
build: { build: {
target: "es2016",
manifest: "manifest.json", manifest: "manifest.json",
emptyOutDir: true, emptyOutDir: true,
assetsDir: "", assetsDir: "",
@ -92,7 +84,6 @@ export default defineConfig({
rollupOptions: { rollupOptions: {
input: { input: {
// build CSS files // build CSS files
"css/searxng.min.css": PATH.src + "/less/style-ltr.less", "css/searxng.min.css": PATH.src + "/less/style-ltr.less",
"css/searxng-rtl.min.css": PATH.src + "/less/style-rtl.less", "css/searxng-rtl.min.css": PATH.src + "/less/style-rtl.less",
@ -100,25 +91,22 @@ export default defineConfig({
// build JS files // build JS files
"js/searxng.head.min": PATH.src + "/js/searxng.head.js", "js/searxng.head.min": PATH.src + "/js/searxng.head.js",
"js/searxng.min": PATH.src + "/js/searxng.js", "js/searxng.min": PATH.src + "/js/searxng.js"
}, },
// file naming conventions / pathnames are relative to outDir (PATH.dist) // file naming conventions / pathnames are relative to outDir (PATH.dist)
output: { output: {
entryFileNames: "[name].js", entryFileNames: "[name].js",
chunkFileNames: "[name].js", chunkFileNames: "[name].js",
assetFileNames: "[name].[ext]", assetFileNames: "[name].[ext]"
// Vite does not support "rollupOptions.output.sourcemap". // Vite does not support "rollupOptions.output.sourcemap".
// Please use "build.sourcemap" instead. // Please use "build.sourcemap" instead.
// sourcemap: true, // sourcemap: true,
}, }
}
}, }, // end: build
}, // end: build
plugins: [ plugins: [
// Leaflet // Leaflet
viteStaticCopy({ viteStaticCopy({
@ -126,7 +114,7 @@ export default defineConfig({
{ src: PATH.leaflet + "/leaflet.{js,js.map}", dest: PATH.dist + "/js" }, { src: PATH.leaflet + "/leaflet.{js,js.map}", dest: PATH.dist + "/js" },
{ src: PATH.leaflet + "/images/*.png", dest: PATH.dist + "/css/images/" }, { src: PATH.leaflet + "/images/*.png", dest: PATH.dist + "/css/images/" },
{ src: PATH.leaflet + "/*.{css,css.map}", dest: PATH.dist + "/css" }, { src: PATH.leaflet + "/*.{css,css.map}", dest: PATH.dist + "/css" },
{ src: PATH.static + "/**/*", dest: PATH.dist }, { src: PATH.static + "/**/*", dest: PATH.dist }
] ]
}), }),
@ -136,43 +124,37 @@ export default defineConfig({
[ [
{ src: PATH.src + "/svg/empty_favicon.svg", dest: PATH.dist + "/img/empty_favicon.svg" }, { src: PATH.src + "/svg/empty_favicon.svg", dest: PATH.dist + "/img/empty_favicon.svg" },
{ src: PATH.src + "/svg/select-dark.svg", dest: PATH.dist + "/img/select-dark.svg" }, { src: PATH.src + "/svg/select-dark.svg", dest: PATH.dist + "/img/select-dark.svg" },
{ src: PATH.src + "/svg/select-light.svg", dest: PATH.dist + "/img/select-light.svg" }, { src: PATH.src + "/svg/select-light.svg", dest: PATH.dist + "/img/select-light.svg" }
], ],
svg2svg_opts, svg2svg_opts
), ),
// SearXNG brand (static) // SearXNG brand (static)
plg_svg2png( plg_svg2png([
[ { src: PATH.brand + "/searxng-wordmark.svg", dest: PATH.dist + "/img/favicon.png" },
{ src: PATH.brand + "/searxng-wordmark.svg", dest: PATH.dist + "/img/favicon.png" }, { src: PATH.brand + "/searxng.svg", dest: PATH.dist + "/img/searxng.png" }
{ src: PATH.brand + "/searxng.svg", dest: PATH.dist + "/img/searxng.png" }, ]),
],
),
// -- svg // -- svg
plg_svg2svg( plg_svg2svg(
[ [
{ src: PATH.brand + "/searxng.svg", dest: PATH.dist + "/img/searxng.svg" }, { src: PATH.brand + "/searxng.svg", dest: PATH.dist + "/img/searxng.svg" },
{ src: PATH.brand + "/img_load_error.svg", dest: PATH.dist + "/img/img_load_error.svg" }, { src: PATH.brand + "/img_load_error.svg", dest: PATH.dist + "/img/img_load_error.svg" }
],
svg2svg_opts,
),
// -- favicon
plg_svg2svg(
[ { src: PATH.brand + "/searxng-wordmark.svg", dest: PATH.dist + "/img/favicon.svg" } ],
svg2svg_favicon_opts,
),
// -- simple templates
plg_svg2svg(
[
{ src: PATH.brand + "/searxng-wordmark.svg", dest: PATH.templates + "/searxng-wordmark.min.svg" },
], ],
svg2svg_opts svg2svg_opts
), ),
] // end: plugins // -- favicon
plg_svg2svg(
[{ src: PATH.brand + "/searxng-wordmark.svg", dest: PATH.dist + "/img/favicon.svg" }],
svg2svg_favicon_opts
),
// -- simple templates
plg_svg2svg(
[{ src: PATH.brand + "/searxng-wordmark.svg", dest: PATH.templates + "/searxng-wordmark.min.svg" }],
svg2svg_opts
)
] // end: plugins
}); });