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

*Safe* changes, no behaviour changes.

- Initial ES5 to ES2015+ conversion.
- Plenty of styling diff changes.

8 files changed, 481 insertions, 474 deletions

diff --git a/client/simple/src/js/head/00_init.js b/client/simple/src/js/head/00_init.js
index a7c61c43e..d6abd6b6f 100644
--- a/client/simple/src/js/head/00_init.js
+++ b/client/simple/src/js/head/00_init.js
@@ -1,20 +1,19 @@
 /* SPDX-License-Identifier: AGPL-3.0-or-later */
-(function (w, d) {
-  'use strict';
-
+((w, d) => {
   // add data- properties
-  var script = d.currentScript  || (function () {
-    var scripts = d.getElementsByTagName('script');
-    return scripts[scripts.length - 1];
-  })();
+  var script =
+    d.currentScript ||
+    (() => {
+      var scripts = d.getElementsByTagName("script");
+      return scripts[scripts.length - 1];
+    })();
 
   w.searxng = {
-    settings: JSON.parse(atob(script.getAttribute('client_settings')))
+    settings: JSON.parse(atob(script.getAttribute("client_settings")))
   };
 
   // update the css
-  var htmlElement = d.getElementsByTagName("html")[0];
-  htmlElement.classList.remove('no-js');
-  htmlElement.classList.add('js');
-
+  const htmlElement = d.getElementsByTagName("html")[0];
+  htmlElement.classList.remove("no-js");
+  htmlElement.classList.add("js");
 })(window, document);
diff --git a/client/simple/src/js/main/00_toolkit.js b/client/simple/src/js/main/00_toolkit.js
index 4e374a019..ca5e1d0e0 100644
--- a/client/simple/src/js/main/00_toolkit.js
+++ b/client/simple/src/js/main/00_toolkit.js
@@ -4,29 +4,28 @@
  * (C) Copyright Contributors to the searx project (2014 - 2021).
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-window.searxng = (function (w, d) {
-
-  'use strict';
-
+window.searxng = ((w, d) => {
   // not invented here toolkit with bugs fixed elsewhere
   // purposes : be just good enough and as small as possible
 
   // from https://plainjs.com/javascript/events/live-binding-event-handlers-14/
   if (w.Element) {
-    (function (ElementPrototype) {
-      ElementPrototype.matches = ElementPrototype.matches ||
-      ElementPrototype.matchesSelector ||
-      ElementPrototype.webkitMatchesSelector ||
-      ElementPrototype.msMatchesSelector ||
-      function (selector) {
-        var node = this, nodes = (node.parentNode || node.document).querySelectorAll(selector), i = -1;
-        while (nodes[++i] && nodes[i] != node);
-        return !!nodes[i];
-      };
+    ((ElementPrototype) => {
+      ElementPrototype.matches =
+        ElementPrototype.matches ||
+        ElementPrototype.matchesSelector ||
+        ElementPrototype.webkitMatchesSelector ||
+        ElementPrototype.msMatchesSelector ||
+        function (selector) {
+          var nodes = (this.parentNode || this.document).querySelectorAll(selector),
+            i = -1;
+          while (nodes[++i] && nodes[i] !== this);
+          return !!nodes[i];
+        };
     })(Element.prototype);
   }
 
-  function callbackSafe (callback, el, e) {
+  function callbackSafe(callback, el, e) {
     try {
       callback.call(el, e);
     } catch (exception) {
@@ -36,39 +35,44 @@ window.searxng = (function (w, d) {
 
   var searxng = window.searxng || {};
 
-  searxng.on = function (obj, eventType, callback, useCapture) {
+  searxng.on = (obj, eventType, callback, useCapture) => {
     useCapture = useCapture || false;
-    if (typeof obj !== 'string') {
+    if (typeof obj !== "string") {
       // obj HTMLElement, HTMLDocument
       obj.addEventListener(eventType, callback, useCapture);
     } else {
       // obj is a selector
-      d.addEventListener(eventType, function (e) {
-        var el = e.target || e.srcElement, found = false;
-        while (el && el.matches && el !== d && !(found = el.matches(obj))) el = el.parentElement;
-        if (found) callbackSafe(callback, el, e);
-      }, useCapture);
+      d.addEventListener(
+        eventType,
+        (e) => {
+          var el = e.target || e.srcElement,
+            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) {
-    if (document.readyState != 'loading') {
+  searxng.ready = (callback) => {
+    if (document.readyState !== "loading") {
       callback.call(w);
     } else {
-      w.addEventListener('DOMContentLoaded', callback.bind(w));
+      w.addEventListener("DOMContentLoaded", callback.bind(w));
     }
   };
 
-  searxng.http = function (method, url, data = null) {
-    return new Promise(function (resolve, reject) {
+  searxng.http = (method, url, data = null) =>
+    new Promise((resolve, reject) => {
       try {
         var req = new XMLHttpRequest();
         req.open(method, url, true);
         req.timeout = 20000;
 
         // On load
-        req.onload = function () {
-          if (req.status == 200) {
+        req.onload = () => {
+          if (req.status === 200) {
             resolve(req.response, req.responseType);
           } else {
             reject(Error(req.statusText));
@@ -76,21 +80,21 @@ window.searxng = (function (w, d) {
         };
 
         // Handle network errors
-        req.onerror = function () {
+        req.onerror = () => {
           reject(Error("Network Error"));
         };
 
-        req.onabort = function () {
+        req.onabort = () => {
           reject(Error("Transaction is aborted"));
         };
 
-        req.ontimeout = function () {
+        req.ontimeout = () => {
           reject(Error("Timeout"));
-        }
+        };
 
         // Make the request
         if (data) {
-          req.send(data)
+          req.send(data);
         } else {
           req.send();
         }
@@ -98,36 +102,35 @@ window.searxng = (function (w, d) {
         reject(ex);
       }
     });
-  };
 
-  searxng.loadStyle = function (src) {
+  searxng.loadStyle = (src) => {
     var path = searxng.settings.theme_static_path + "/" + src,
-      id = "style_" + src.replace('.', '_'),
+      id = "style_" + src.replace(".", "_"),
       s = d.getElementById(id);
     if (s === null) {
-      s = d.createElement('link');
-      s.setAttribute('id', id);
-      s.setAttribute('rel', 'stylesheet');
-      s.setAttribute('type', 'text/css');
-      s.setAttribute('href', path);
+      s = d.createElement("link");
+      s.setAttribute("id", id);
+      s.setAttribute("rel", "stylesheet");
+      s.setAttribute("type", "text/css");
+      s.setAttribute("href", path);
       d.body.appendChild(s);
     }
   };
 
-  searxng.loadScript = function (src, callback) {
+  searxng.loadScript = (src, callback) => {
     var path = searxng.settings.theme_static_path + "/" + src,
-      id = "script_" + src.replace('.', '_'),
+      id = "script_" + src.replace(".", "_"),
       s = d.getElementById(id);
     if (s === null) {
-      s = d.createElement('script');
-      s.setAttribute('id', id);
-      s.setAttribute('src', path);
+      s = d.createElement("script");
+      s.setAttribute("id", id);
+      s.setAttribute("src", path);
       s.onload = callback;
-      s.onerror = function () {
-        s.setAttribute('error', '1');
+      s.onerror = () => {
+        s.setAttribute("error", "1");
       };
       d.body.appendChild(s);
-    } else if (!s.hasAttribute('error')) {
+    } else if (!s.hasAttribute("error")) {
       try {
         callback.apply(s, []);
       } 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);
   };
 
-  searxng.insertAfter = function (newNode, referenceNode) {
+  searxng.insertAfter = (newNode, referenceNode) => {
     referenceNode.parentNode.insertAfter(newNode, referenceNode.nextSibling);
   };
 
-  searxng.on('.close', 'click', function () {
-    this.parentNode.classList.add('invisible');
+  searxng.on(".close", "click", function () {
+    this.parentNode.classList.add("invisible");
   });
 
-  function getEndpoint () {
-    for (var className of d.getElementsByTagName('body')[0].classList.values()) {
-      if (className.endsWith('_endpoint')) {
-        return className.split('_')[0];
+  function getEndpoint() {
+    for (var className of d.getElementsByTagName("body")[0].classList.values()) {
+      if (className.endsWith("_endpoint")) {
+        return className.split("_")[0];
       }
     }
-    return '';
+    return "";
   }
 
   searxng.endpoint = getEndpoint();
diff --git a/client/simple/src/js/main/infinite_scroll.js b/client/simple/src/js/main/infinite_scroll.js
index 07db3305a..b3d308c0c 100644
--- a/client/simple/src/js/main/infinite_scroll.js
+++ b/client/simple/src/js/main/infinite_scroll.js
@@ -2,80 +2,77 @@
 
 /* global searxng */
 
-searxng.ready(function () {
-  'use strict';
+searxng.ready(() => {
+  searxng.infinite_scroll_supported =
+    "IntersectionObserver" in window &&
+    "IntersectionObserverEntry" in window &&
+    "intersectionRatio" in window.IntersectionObserverEntry.prototype;
 
-  searxng.infinite_scroll_supported = (
-    'IntersectionObserver' in window &&
-    'IntersectionObserverEntry' in window &&
-    'intersectionRatio' in window.IntersectionObserverEntry.prototype);
-
-  if (searxng.endpoint !== 'results') {
+  if (searxng.endpoint !== "results") {
     return;
   }
 
   if (!searxng.infinite_scroll_supported) {
-    console.log('IntersectionObserver not supported');
+    console.log("IntersectionObserver not supported");
     return;
   }
 
-  let d = document;
-  var onlyImages = d.getElementById('results').classList.contains('only_template_images');
+  const d = document;
+  var onlyImages = d.getElementById("results").classList.contains("only_template_images");
 
-  function newLoadSpinner () {
-    var loader = d.createElement('div');
-    loader.classList.add('loader');
+  function newLoadSpinner() {
+    var loader = d.createElement("div");
+    loader.classList.add("loader");
     return loader;
   }
 
-  function replaceChildrenWith (element, children) {
-    element.textContent = '';
-    children.forEach(child => element.appendChild(child));
+  function replaceChildrenWith(element, children) {
+    element.textContent = "";
+    children.forEach((child) => element.appendChild(child));
   }
 
-  function loadNextPage (callback) {
-    var form = d.querySelector('#pagination form.next_page');
+  function loadNextPage(callback) {
+    var form = d.querySelector("#pagination form.next_page");
     if (!form) {
-      return
+      return;
     }
-    replaceChildrenWith(d.querySelector('#pagination'), [ newLoadSpinner() ]);
+    replaceChildrenWith(d.querySelector("#pagination"), [newLoadSpinner()]);
     var formData = new FormData(form);
-    searxng.http('POST', d.querySelector('#search').getAttribute('action'), formData).then(
-      function (response) {
-        var nextPageDoc = new DOMParser().parseFromString(response, 'text/html');
-        var articleList = nextPageDoc.querySelectorAll('#urls article');
-        var paginationElement = nextPageDoc.querySelector('#pagination');
-        d.querySelector('#pagination').remove();
+    searxng
+      .http("POST", d.querySelector("#search").getAttribute("action"), formData)
+      .then((response) => {
+        var nextPageDoc = new DOMParser().parseFromString(response, "text/html");
+        var articleList = nextPageDoc.querySelectorAll("#urls article");
+        var paginationElement = nextPageDoc.querySelector("#pagination");
+        d.querySelector("#pagination").remove();
         if (articleList.length > 0 && !onlyImages) {
           // 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 => {
-          d.querySelector('#urls').appendChild(articleElement);
+        articleList.forEach((articleElement) => {
+          d.querySelector("#urls").appendChild(articleElement);
         });
         if (paginationElement) {
-          d.querySelector('#results').appendChild(paginationElement);
+          d.querySelector("#results").appendChild(paginationElement);
           callback();
         }
-      }
-    ).catch(
-      function (err) {
+      })
+      .catch((err) => {
         console.log(err);
-        var e = d.createElement('div');
+        var e = d.createElement("div");
         e.textContent = searxng.settings.translations.error_loading_next_page;
-        e.classList.add('dialog-error');
-        e.setAttribute('role', 'alert');
-        replaceChildrenWith(d.querySelector('#pagination'), [ e ]);
-      }
-    )
+        e.classList.add("dialog-error");
+        e.setAttribute("role", "alert");
+        replaceChildrenWith(d.querySelector("#pagination"), [e]);
+      });
   }
 
   if (searxng.settings.infinite_scroll && searxng.infinite_scroll_supported) {
     const intersectionObserveOptions = {
-      rootMargin: "20rem",
+      rootMargin: "20rem"
     };
-    const observedSelector = 'article.result:last-child';
-    const observer = new IntersectionObserver(entries => {
+    const observedSelector = "article.result:last-child";
+    const observer = new IntersectionObserver((entries) => {
       const paginationEntry = entries[0];
       if (paginationEntry.isIntersecting) {
         observer.unobserve(paginationEntry.target);
@@ -84,5 +81,4 @@ searxng.ready(function () {
     });
     observer.observe(d.querySelector(observedSelector), intersectionObserveOptions);
   }
-
 });
diff --git a/client/simple/src/js/main/keyboard.js b/client/simple/src/js/main/keyboard.js
index e16134579..bc878c561 100644
--- a/client/simple/src/js/main/keyboard.js
+++ b/client/simple/src/js/main/keyboard.js
@@ -1,14 +1,13 @@
 /* SPDX-License-Identifier: AGPL-3.0-or-later */
 /* global searxng */
 
-searxng.ready(function () {
-
-  function isElementInDetail (el) {
+searxng.ready(() => {
+  function isElementInDetail(el) {
     while (el !== undefined) {
-      if (el.classList.contains('detail')) {
+      if (el.classList.contains("detail")) {
         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:
         // el is not inside a <div class="detail"> element
         return false;
@@ -18,9 +17,9 @@ searxng.ready(function () {
     return false;
   }
 
-  function getResultElement (el) {
+  function getResultElement(el) {
     while (el !== undefined) {
-      if (el.classList.contains('result')) {
+      if (el.classList.contains("result")) {
         return el;
       }
       el = el.parentNode;
@@ -28,14 +27,14 @@ searxng.ready(function () {
     return undefined;
   }
 
-  function isImageResult (resultElement) {
-    return resultElement && resultElement.classList.contains('result-images');
+  function isImageResult(resultElement) {
+    return resultElement && resultElement.classList.contains("result-images");
   }
 
-  searxng.on('.result', 'click', function (e) {
+  searxng.on(".result", "click", function (e) {
     if (!isElementInDetail(e.target)) {
       highlightResult(this)(true, true);
-      let resultElement = getResultElement(e.target);
+      const resultElement = getResultElement(e.target);
       if (isImageResult(resultElement)) {
         e.preventDefault();
         searxng.selectImage(resultElement);
@@ -43,166 +42,179 @@ searxng.ready(function () {
     }
   });
 
-  searxng.on('.result a', 'focus', function (e) {
-    if (!isElementInDetail(e.target)) {
-      let resultElement = getResultElement(e.target);
-      if (resultElement && resultElement.getAttribute("data-vim-selected") === null) {
-        highlightResult(resultElement)(true);
-      }
-      if (isImageResult(resultElement)) {
-        searxng.selectImage(resultElement);
+  searxng.on(
+    ".result a",
+    "focus",
+    (e) => {
+      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);
+        }
       }
-    }
-  }, true);
+    },
+    true
+  );
 
   /* common base for layouts */
   var baseKeyBinding = {
-    'Escape': {
-      key: 'ESC',
+    Escape: {
+      key: "ESC",
       fun: removeFocus,
-      des: 'remove focus from the focused input',
-      cat: 'Control'
+      des: "remove focus from the focused input",
+      cat: "Control"
     },
-    'c': {
-      key: 'c',
+    c: {
+      key: "c",
       fun: copyURLToClipboard,
-      des: 'copy url of the selected result to the clipboard',
-      cat: 'Results'
+      des: "copy url of the selected result to the clipboard",
+      cat: "Results"
     },
-    'h': {
-      key: 'h',
+    h: {
+      key: "h",
       fun: toggleHelp,
-      des: 'toggle help window',
-      cat: 'Other'
+      des: "toggle help window",
+      cat: "Other"
     },
-    'i': {
-      key: 'i',
+    i: {
+      key: "i",
       fun: searchInputFocus,
-      des: 'focus on the search input',
-      cat: 'Control'
+      des: "focus on the search input",
+      cat: "Control"
     },
-    'n': {
-      key: 'n',
+    n: {
+      key: "n",
       fun: GoToNextPage(),
-      des: 'go to next page',
-      cat: 'Results'
+      des: "go to next page",
+      cat: "Results"
     },
-    'o': {
-      key: 'o',
+    o: {
+      key: "o",
       fun: openResult(false),
-      des: 'open search result',
-      cat: 'Results'
+      des: "open search result",
+      cat: "Results"
     },
-    'p': {
-      key: 'p',
+    p: {
+      key: "p",
       fun: GoToPreviousPage(),
-      des: 'go to previous page',
-      cat: 'Results'
+      des: "go to previous page",
+      cat: "Results"
     },
-    'r': {
-      key: 'r',
+    r: {
+      key: "r",
       fun: reloadPage,
-      des: 'reload page from the server',
-      cat: 'Control'
+      des: "reload page from the server",
+      cat: "Control"
     },
-    't': {
-      key: 't',
+    t: {
+      key: "t",
       fun: openResult(true),
-      des: 'open the result in a new tab',
-      cat: 'Results'
-    },
+      des: "open the result in a new tab",
+      cat: "Results"
+    }
   };
   var keyBindingLayouts = {
-
-    "default": Object.assign(
-      { /* SearXNG layout */
-        'ArrowLeft': {
-          key: '←',
-          fun: highlightResult('up'),
-          des: 'select previous search result',
-          cat: 'Results'
-        },
-        'ArrowRight': {
-          key: '→',
-          fun: highlightResult('down'),
-          des: 'select next search result',
-          cat: 'Results'
+    default: Object.assign(
+      {
+        /* SearXNG layout */
+        ArrowLeft: {
+          key: "←",
+          fun: highlightResult("up"),
+          des: "select previous search result",
+          cat: "Results"
         },
-      }, baseKeyBinding),
-
-    'vim': Object.assign(
-      { /* Vim-like Key Layout. */
-        'b': {
-          key: 'b',
+        ArrowRight: {
+          key: "→",
+          fun: highlightResult("down"),
+          des: "select next search result",
+          cat: "Results"
+        }
+      },
+      baseKeyBinding
+    ),
+
+    vim: Object.assign(
+      {
+        /* Vim-like Key Layout. */
+        b: {
+          key: "b",
           fun: scrollPage(-window.innerHeight),
-          des: 'scroll one page up',
-          cat: 'Navigation'
+          des: "scroll one page up",
+          cat: "Navigation"
         },
-        'f': {
-          key: 'f',
+        f: {
+          key: "f",
           fun: scrollPage(window.innerHeight),
-          des: 'scroll one page down',
-          cat: 'Navigation'
+          des: "scroll one page down",
+          cat: "Navigation"
         },
-        'u': {
-          key: 'u',
+        u: {
+          key: "u",
           fun: scrollPage(-window.innerHeight / 2),
-          des: 'scroll half a page up',
-          cat: 'Navigation'
+          des: "scroll half a page up",
+          cat: "Navigation"
         },
-        'd': {
-          key: 'd',
+        d: {
+          key: "d",
           fun: scrollPage(window.innerHeight / 2),
-          des: 'scroll half a page down',
-          cat: 'Navigation'
+          des: "scroll half a page down",
+          cat: "Navigation"
         },
-        'g': {
-          key: 'g',
-          fun: scrollPageTo(-document.body.scrollHeight, 'top'),
-          des: 'scroll to the top of the page',
-          cat: 'Navigation'
+        g: {
+          key: "g",
+          fun: scrollPageTo(-document.body.scrollHeight, "top"),
+          des: "scroll to the top of the page",
+          cat: "Navigation"
         },
-        'v': {
-          key: 'v',
-          fun: scrollPageTo(document.body.scrollHeight, 'bottom'),
-          des: 'scroll to the bottom of the page',
-          cat: 'Navigation'
+        v: {
+          key: "v",
+          fun: scrollPageTo(document.body.scrollHeight, "bottom"),
+          des: "scroll to the bottom of the page",
+          cat: "Navigation"
         },
-        'k': {
-          key: 'k',
-          fun: highlightResult('up'),
-          des: 'select previous search result',
-          cat: 'Results'
+        k: {
+          key: "k",
+          fun: highlightResult("up"),
+          des: "select previous search result",
+          cat: "Results"
         },
-        'j': {
-          key: 'j',
-          fun: highlightResult('down'),
-          des: 'select next search result',
-          cat: 'Results'
+        j: {
+          key: "j",
+          fun: highlightResult("down"),
+          des: "select next search result",
+          cat: "Results"
         },
-        'y': {
-          key: 'y',
+        y: {
+          key: "y",
           fun: copyURLToClipboard,
-          des: 'copy url of the selected result to the clipboard',
-          cat: 'Results'
-        },
-      }, baseKeyBinding)
-  }
+          des: "copy url of the selected result to the clipboard",
+          cat: "Results"
+        }
+      },
+      baseKeyBinding
+    )
+  };
 
   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
     if (
-      Object.prototype.hasOwnProperty.call(keyBindings, e.key)
-        && !e.ctrlKey && !e.altKey
-        && !e.shiftKey && !e.metaKey
+      // biome-ignore lint/suspicious/noPrototypeBuiltins: FIXME: support for Chromium 93-87, Firefox 92-78, Safari 15.4-14
+      Object.prototype.hasOwnProperty.call(keyBindings, e.key) &&
+      !e.ctrlKey &&
+      !e.altKey &&
+      !e.shiftKey &&
+      !e.metaKey
     ) {
       var tagName = e.target.tagName.toLowerCase();
-      if (e.key === 'Escape') {
+      if (e.key === "Escape") {
         keyBindings[e.key].fun(e);
       } else {
-        if (e.target === document.body || tagName === 'a' || tagName === 'button') {
+        if (e.target === document.body || tagName === "a" || tagName === "button") {
           e.preventDefault();
           keyBindings[e.key].fun();
         }
@@ -210,13 +222,13 @@ searxng.ready(function () {
     }
   });
 
-  function highlightResult (which) {
-    return function (noScroll, keepFocus) {
-      var current = document.querySelector('.result[data-vim-selected]'),
+  function highlightResult(which) {
+    return (noScroll, keepFocus) => {
+      var current = document.querySelector(".result[data-vim-selected]"),
         effectiveWhich = which;
       if (current === null) {
         // no selection : choose the first one
-        current = document.querySelector('.result');
+        current = document.querySelector(".result");
         if (current === null) {
           // no first one : there are no results
           return;
@@ -227,48 +239,50 @@ searxng.ready(function () {
         }
       }
 
-      var next, results = document.querySelectorAll('.result');
-      results = Array.from(results);  // convert NodeList to Array for further use
+      var next,
+        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;
       } else {
         switch (effectiveWhich) {
-        case 'visible':
-          var top = document.documentElement.scrollTop || document.body.scrollTop;
-          var bot = top + document.documentElement.clientHeight;
-
-          for (var i = 0; i < results.length; i++) {
-            next = results[i];
-            var etop = next.offsetTop;
-            var ebot = etop + next.clientHeight;
-
-            if ((ebot <= bot) && (etop > top)) {
-              break;
+          case "visible": {
+            var top = document.documentElement.scrollTop || document.body.scrollTop;
+            var bot = top + document.documentElement.clientHeight;
+
+            for (var i = 0; i < results.length; i++) {
+              next = results[i];
+              var etop = next.offsetTop;
+              var ebot = etop + next.clientHeight;
+
+              if (ebot <= bot && etop > top) {
+                break;
+              }
             }
+            break;
           }
-          break;
-        case 'down':
-          next = results[results.indexOf(current) + 1] || current;
-          break;
-        case 'up':
-          next = results[results.indexOf(current) - 1] || current;
-          break;
-        case 'bottom':
-          next = results[results.length - 1];
-          break;
-        case 'top':
+          case "down":
+            next = results[results.indexOf(current) + 1] || current;
+            break;
+          case "up":
+            next = results[results.indexOf(current) - 1] || current;
+            break;
+          case "bottom":
+            next = results[results.length - 1];
+            break;
+          case "top":
           /* falls through */
-        default:
-          next = results[0];
+          default:
+            next = results[0];
         }
       }
 
       if (next) {
-        current.removeAttribute('data-vim-selected');
-        next.setAttribute('data-vim-selected', 'true');
+        current.removeAttribute("data-vim-selected");
+        next.setAttribute("data-vim-selected", "true");
         if (!keepFocus) {
-          var link = next.querySelector('h3 a') || next.querySelector('a');
+          var link = next.querySelector("h3 a") || next.querySelector("a");
           if (link !== null) {
             link.focus();
           }
@@ -280,21 +294,21 @@ searxng.ready(function () {
     };
   }
 
-  function reloadPage () {
+  function reloadPage() {
     document.location.reload(true);
   }
 
-  function removeFocus (e) {
+  function removeFocus(e) {
     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();
     } else {
       searxng.closeDetail();
     }
   }
 
-  function pageButtonClick (css_selector) {
-    return function () {
+  function pageButtonClick(css_selector) {
+    return () => {
       var button = document.querySelector(css_selector);
       if (button) {
         button.click();
@@ -302,16 +316,16 @@ searxng.ready(function () {
     };
   }
 
-  function GoToNextPage () {
+  function GoToNextPage() {
     return pageButtonClick('nav#pagination .next_page button[type="submit"]');
   }
 
-  function GoToPreviousPage () {
+  function GoToPreviousPage() {
     return pageButtonClick('nav#pagination .previous_page button[type="submit"]');
   }
 
-  function scrollPageToSelected () {
-    var sel = document.querySelector('.result[data-vim-selected]');
+  function scrollPageToSelected() {
+    var sel = document.querySelector(".result[data-vim-selected]");
     if (sel === null) {
       return;
     }
@@ -321,39 +335,39 @@ searxng.ready(function () {
       ebot = etop + sel.clientHeight,
       offset = 120;
     // first element ?
-    if ((sel.previousElementSibling === null) && (ebot < wheight)) {
+    if (sel.previousElementSibling === null && ebot < wheight) {
       // set to the top of page if the first element
       // is fully included in the viewport
       window.scroll(window.scrollX, 0);
       return;
     }
-    if (wtop > (etop - offset)) {
+    if (wtop > etop - offset) {
       window.scroll(window.scrollX, etop - offset);
     } else {
       var wbot = wtop + wheight;
-      if (wbot < (ebot + offset)) {
+      if (wbot < ebot + offset) {
         window.scroll(window.scrollX, ebot - wheight + offset);
       }
     }
   }
 
-  function scrollPage (amount) {
-    return function () {
+  function scrollPage(amount) {
+    return () => {
       window.scrollBy(0, amount);
-      highlightResult('visible')();
+      highlightResult("visible")();
     };
   }
 
-  function scrollPageTo (position, nav) {
-    return function () {
+  function scrollPageTo(position, nav) {
+    return () => {
       window.scrollTo(0, position);
       highlightResult(nav)();
     };
   }
 
-  function searchInputFocus () {
+  function searchInputFocus() {
     window.scrollTo(0, 0);
-    var q = document.querySelector('#q');
+    var q = document.querySelector("#q");
     q.focus();
     if (q.setSelectionRange) {
       var len = q.value.length;
@@ -361,14 +375,14 @@ searxng.ready(function () {
     }
   }
 
-  function openResult (newTab) {
-    return function () {
-      var link = document.querySelector('.result[data-vim-selected] h3 a');
+  function openResult(newTab) {
+    return () => {
+      var link = document.querySelector(".result[data-vim-selected] h3 a");
       if (link === null) {
-        link = document.querySelector('.result[data-vim-selected] > a');
+        link = document.querySelector(".result[data-vim-selected] > a");
       }
       if (link !== null) {
-        var url = link.getAttribute('href');
+        var url = link.getAttribute("href");
         if (newTab) {
           window.open(url);
         } else {
@@ -378,7 +392,7 @@ searxng.ready(function () {
     };
   }
 
-  function initHelpContent (divElement) {
+  function initHelpContent(divElement) {
     var categories = {};
 
     for (var k in keyBindings) {
@@ -387,75 +401,72 @@ searxng.ready(function () {
       categories[key.cat].push(key);
     }
 
-    var sorted = Object.keys(categories).sort(function (a, b) {
-      return categories[b].length - categories[a].length;
-    });
+    var sorted = Object.keys(categories).sort((a, b) => categories[b].length - categories[a].length);
 
     if (sorted.length === 0) {
       return;
     }
 
     var html = '<a href="#" class="close" aria-label="close" title="close">×</a>';
-    html += '<h3>How to navigate SearXNG with hotkeys</h3>';
-    html += '<table>';
+    html += "<h3>How to navigate SearXNG with hotkeys</h3>";
+    html += "<table>";
 
     for (var i = 0; i < sorted.length; i++) {
       var cat = categories[sorted[i]];
 
-      var lastCategory = i === (sorted.length - 1);
+      var lastCategory = i === sorted.length - 1;
       var first = i % 2 === 0;
 
       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">';
 
       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 += '</td>'; // col-sm-*
+      html += "</ul>";
+      html += "</td>"; // col-sm-*
 
       if (!first || lastCategory) {
-        html += '</tr>'; // row
+        html += "</tr>"; // row
       }
     }
 
-    html += '</table>';
+    html += "</table>";
 
     divElement.innerHTML = html;
   }
 
-  function toggleHelp () {
-    var helpPanel = document.querySelector('#vim-hotkeys-help');
+  function toggleHelp() {
+    var helpPanel = document.querySelector("#vim-hotkeys-help");
     if (helpPanel === undefined || helpPanel === null) {
       // first call
-      helpPanel = document.createElement('div');
-      helpPanel.id = 'vim-hotkeys-help';
-      helpPanel.className = 'dialog-modal';
+      helpPanel = document.createElement("div");
+      helpPanel.id = "vim-hotkeys-help";
+      helpPanel.className = "dialog-modal";
       initHelpContent(helpPanel);
-      var body = document.getElementsByTagName('body')[0];
+      var body = document.getElementsByTagName("body")[0];
       body.appendChild(helpPanel);
     } else {
       // toggle hidden
-      helpPanel.classList.toggle('invisible');
-      return;
+      helpPanel.classList.toggle("invisible");
     }
   }
 
-  function copyURLToClipboard () {
-    var currentUrlElement = document.querySelector('.result[data-vim-selected] h3 a');
+  function copyURLToClipboard() {
+    var currentUrlElement = document.querySelector(".result[data-vim-selected] h3 a");
     if (currentUrlElement === null) return;
 
-    const url = currentUrlElement.getAttribute('href');
+    const url = currentUrlElement.getAttribute("href");
     navigator.clipboard.writeText(url);
   }
 
   searxng.scrollPageToSelected = scrollPageToSelected;
-  searxng.selectNext = highlightResult('down');
-  searxng.selectPrevious = highlightResult('up');
+  searxng.selectNext = highlightResult("down");
+  searxng.selectPrevious = highlightResult("up");
 });
diff --git a/client/simple/src/js/main/mapresult.js b/client/simple/src/js/main/mapresult.js
index 2c3777678..0d212f7c5 100644
--- a/client/simple/src/js/main/mapresult.js
+++ b/client/simple/src/js/main/mapresult.js
@@ -1,10 +1,8 @@
 /* SPDX-License-Identifier: AGPL-3.0-or-later */
 /* global L */
-(function (w, d, searxng) {
-  'use strict';
-
-  searxng.ready(function () {
-    searxng.on('.searxng_init_map', 'click', function (event) {
+((w, d, searxng) => {
+  searxng.ready(() => {
+    searxng.on(".searxng_init_map", "click", function (event) {
       // no more request
       this.classList.remove("searxng_init_map");
 
@@ -16,8 +14,8 @@
       var map_boundingbox = JSON.parse(this.dataset.mapBoundingbox);
       var map_geojson = JSON.parse(this.dataset.mapGeojson);
 
-      searxng.loadStyle('css/leaflet.css');
-      searxng.loadScript('js/leaflet.js', function () {
+      searxng.loadStyle("css/leaflet.css");
+      searxng.loadScript("js/leaflet.js", () => {
         var map_bounds = null;
         if (map_boundingbox) {
           var southWest = L.latLng(map_boundingbox[0], map_boundingbox[2]);
@@ -28,17 +26,22 @@
         // init map
         var map = L.map(leaflet_target);
         // 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 osmMapnik = new L.TileLayer(osmMapnikUrl, {minZoom: 1, maxZoom: 19, attribution: osmMapnikAttrib});
-        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 osmWikimedia = new L.TileLayer(osmWikimediaUrl, {minZoom: 1, maxZoom: 19, attribution: osmWikimediaAttrib});
+        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 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
         if (map_bounds) {
           // TODO hack: https://github.com/Leaflet/Leaflet/issues/2021
           // Still useful ?
-          setTimeout(function () {
+          setTimeout(() => {
             map.fitBounds(map_bounds, {
               maxZoom: 17
             });
@@ -55,7 +58,7 @@
 
         var baseLayers = {
           "OSM Mapnik": osmMapnik,
-          "OSM Wikimedia": osmWikimedia,
+          "OSM Wikimedia": osmWikimedia
         };
 
         L.control.layers(baseLayers).addTo(map);
diff --git a/client/simple/src/js/main/preferences.js b/client/simple/src/js/main/preferences.js
index a0b853d61..2760d589d 100644
--- a/client/simple/src/js/main/preferences.js
+++ b/client/simple/src/js/main/preferences.js
@@ -1,21 +1,20 @@
 /* SPDX-License-Identifier: AGPL-3.0-or-later */
-(function (w, d, searxng) {
-  'use strict';
-
-  if (searxng.endpoint !== 'preferences') {
+((w, d, searxng) => {
+  if (searxng.endpoint !== "preferences") {
     return;
   }
 
-  searxng.ready(function () {
+  searxng.ready(() => {
     let engine_descriptions = null;
-    function load_engine_descriptions () {
+
+    function load_engine_descriptions() {
       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);
           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) {
-              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;
             }
           }
@@ -23,13 +22,13 @@
       }
     }
 
-    for (const el of d.querySelectorAll('[data-engine-name]')) {
-      searxng.on(el, 'mouseenter', load_engine_descriptions);
+    for (const el of d.querySelectorAll("[data-engine-name]")) {
+      searxng.on(el, "mouseenter", load_engine_descriptions);
     }
 
     const enableAllEngines = d.querySelectorAll(".enable-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) => {
       for (const el of engineToggles) {
         // check if element visible, so that only engines of the current category are modified
@@ -37,14 +36,14 @@
       }
     };
     for (const el of enableAllEngines) {
-      searxng.on(el, 'click', () => toggleEngines(true));
+      searxng.on(el, "click", () => toggleEngines(true));
     }
     for (const el of disableAllEngines) {
-      searxng.on(el, 'click', () => toggleEngines(false));
+      searxng.on(el, "click", () => toggleEngines(false));
     }
 
     const copyHashButton = d.querySelector("#copy-hash");
-    searxng.on(copyHashButton, 'click', (e) => {
+    searxng.on(copyHashButton, "click", (e) => {
       e.preventDefault();
       navigator.clipboard.writeText(copyHashButton.dataset.hash);
       copyHashButton.innerText = copyHashButton.dataset.copiedText;
diff --git a/client/simple/src/js/main/results.js b/client/simple/src/js/main/results.js
index bdd76a3a6..67d28cc65 100644
--- a/client/simple/src/js/main/results.js
+++ b/client/simple/src/js/main/results.js
@@ -2,55 +2,54 @@
 
 import "../../../node_modules/swiped-events/src/swiped-events.js";
 
-(function (w, d, searxng) {
-  'use strict';
-
-  if (searxng.endpoint !== 'results') {
+((w, d, searxng) => {
+  if (searxng.endpoint !== "results") {
     return;
   }
 
-  searxng.ready(function () {
-    d.querySelectorAll('#urls img').forEach(
-      img =>
-        img.addEventListener(
-          'error', () => {
-            // console.log("ERROR can't load: " + img.src);
-            img.src = window.searxng.settings.theme_static_path + "/img/img_load_error.svg";
-          },
-          {once: true}
-        ));
-
-    if (d.querySelector('#search_url button#copy_url')) {
-      d.querySelector('#search_url button#copy_url').style.display = "block";
+  searxng.ready(() => {
+    d.querySelectorAll("#urls img").forEach((img) =>
+      img.addEventListener(
+        "error",
+        () => {
+          // console.log("ERROR can't load: " + img.src);
+          img.src = window.searxng.settings.theme_static_path + "/img/img_load_error.svg";
+        },
+        { once: true }
+      )
+    );
+
+    if (d.querySelector("#search_url button#copy_url")) {
+      d.querySelector("#search_url button#copy_url").style.display = "block";
     }
 
-    searxng.on('.btn-collapse', 'click', function () {
-      var btnLabelCollapsed = this.getAttribute('data-btn-text-collapsed');
-      var btnLabelNotCollapsed = this.getAttribute('data-btn-text-not-collapsed');
-      var target = this.getAttribute('data-target');
+    searxng.on(".btn-collapse", "click", function () {
+      var btnLabelCollapsed = this.getAttribute("data-btn-text-collapsed");
+      var btnLabelNotCollapsed = this.getAttribute("data-btn-text-not-collapsed");
+      var target = this.getAttribute("data-target");
       var targetElement = d.querySelector(target);
       var html = this.innerHTML;
-      if (this.classList.contains('collapsed')) {
+      if (this.classList.contains("collapsed")) {
         html = html.replace(btnLabelCollapsed, btnLabelNotCollapsed);
       } else {
         html = html.replace(btnLabelNotCollapsed, btnLabelCollapsed);
       }
       this.innerHTML = html;
-      this.classList.toggle('collapsed');
-      targetElement.classList.toggle('invisible');
+      this.classList.toggle("collapsed");
+      targetElement.classList.toggle("invisible");
     });
 
-    searxng.on('.media-loader', 'click', function () {
-      var target = this.getAttribute('data-target');
-      var iframe_load = d.querySelector(target + ' > iframe');
-      var srctest = iframe_load.getAttribute('src');
+    searxng.on(".media-loader", "click", function () {
+      var target = this.getAttribute("data-target");
+      var iframe_load = d.querySelector(target + " > iframe");
+      var srctest = iframe_load.getAttribute("src");
       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 () {
-      var target = this.parentElement.querySelector('pre');
+    searxng.on("#copy_url", "click", function () {
+      var target = this.parentElement.querySelector("pre");
       navigator.clipboard.writeText(target.innerText);
       this.innerText = this.dataset.copiedText;
     });
@@ -62,8 +61,8 @@ import "../../../node_modules/swiped-events/src/swiped-events.js";
     let imgTimeoutID;
 
     // progress spinner, while an image is loading
-    const imgLoaderSpinner = d.createElement('div');
-    imgLoaderSpinner.classList.add('loader');
+    const imgLoaderSpinner = d.createElement("div");
+    imgLoaderSpinner.classList.add("loader");
 
     // singleton image object, which is used for all loading processes of a
     // detailed image
@@ -89,15 +88,14 @@ import "../../../node_modules/swiped-events/src/swiped-events.js";
     };
 
     searxng.selectImage = (resultElement) => {
-
       // add a class that can be evaluated in the CSS and indicates that the
       // 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
       // to the previous page this allows us to dismiss the image details on
       // pressing the back button on mobile devices
-      window.location.hash = '#image-viewer';
+      window.location.hash = "#image-viewer";
 
       searxng.scrollPageToSelected();
 
@@ -105,21 +103,21 @@ import "../../../node_modules/swiped-events/src/swiped-events.js";
       if (!resultElement) return;
 
       // 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;
 
       // <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
       if (!src) return;
 
       // 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;
 
       // show a progress spinner
-      const detailElement = resultElement.querySelector('.detail');
+      const detailElement = resultElement.querySelector(".detail");
       detailElement.appendChild(imgLoaderSpinner);
 
       // 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
         // cache, it can be used in the origin <img> as src property.
         img.src = src;
-        img.removeAttribute('data-src');
+        img.removeAttribute("data-src");
       });
     };
 
-    searxng.closeDetail = function () {
-      d.getElementById('results').classList.remove('image-detail-open');
+    searxng.closeDetail = () => {
+      d.getElementById("results").classList.remove("image-detail-open");
       // 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.on('.result-detail-close', 'click', e => {
+    searxng.on(".result-detail-close", "click", (e) => {
       e.preventDefault();
       searxng.closeDetail();
     });
-    searxng.on('.result-detail-previous', 'click', e => {
+    searxng.on(".result-detail-previous", "click", (e) => {
       e.preventDefault();
       searxng.selectPrevious(false);
     });
-    searxng.on('.result-detail-next', 'click', e => {
+    searxng.on(".result-detail-next", "click", (e) => {
       e.preventDefault();
       searxng.selectNext(false);
     });
 
     // listen for the back button to be pressed and dismiss the image details when called
-    window.addEventListener('hashchange', () => {
-      if (window.location.hash != '#image-viewer') searxng.closeDetail();
+    window.addEventListener("hashchange", () => {
+      if (window.location.hash !== "#image-viewer") searxng.closeDetail();
     });
 
-    d.querySelectorAll('.swipe-horizontal').forEach(
-      obj => {
-        obj.addEventListener('swiped-left', function () {
-          searxng.selectNext(false);
-        });
-        obj.addEventListener('swiped-right', function () {
-          searxng.selectPrevious(false);
-        });
-      }
-    );
+    d.querySelectorAll(".swipe-horizontal").forEach((obj) => {
+      obj.addEventListener("swiped-left", () => {
+        searxng.selectNext(false);
+      });
+      obj.addEventListener("swiped-right", () => {
+        searxng.selectPrevious(false);
+      });
+    });
 
-    w.addEventListener('scroll', function () {
-      var e = d.getElementById('backToTop'),
-        scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
-        results = d.getElementById('results');
-      if (e !== null) {
-        if (scrollTop >= 100) {
-          results.classList.add('scrolling');
-        } else {
-          results.classList.remove('scrolling');
+    w.addEventListener(
+      "scroll",
+      () => {
+        var e = d.getElementById("backToTop"),
+          scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
+          results = d.getElementById("results");
+        if (e !== null) {
+          if (scrollTop >= 100) {
+            results.classList.add("scrolling");
+          } else {
+            results.classList.remove("scrolling");
+          }
         }
-      }
-    }, true);
-
+      },
+      true
+    );
   });
-
 })(window, document, window.searxng);
diff --git a/client/simple/src/js/main/search.js b/client/simple/src/js/main/search.js
index c252dfdb5..aac2fb2b4 100644
--- a/client/simple/src/js/main/search.js
+++ b/client/simple/src/js/main/search.js
@@ -1,24 +1,23 @@
 /* SPDX-License-Identifier: AGPL-3.0-or-later */
 /* exported AutoComplete */
 
-(function (w, d, searxng) {
-  'use strict';
-
-  var qinput_id = "q", qinput;
+((w, d, searxng) => {
+  var qinput_id = "q",
+    qinput;
 
   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 () {
-    if (qinput.value.length  > 0) {
-      var search = document.getElementById('search');
+  function submitIfQuery() {
+    if (qinput.value.length > 0) {
+      var search = document.getElementById("search");
       setTimeout(search.submit.bind(search), 0);
     }
   }
 
-  function createClearButton (qinput) {
-    var cs = document.getElementById('clear_search');
-    var updateClearButton = function () {
+  function createClearButton(qinput) {
+    var cs = document.getElementById("clear_search");
+    var updateClearButton = () => {
       if (qinput.value.length === 0) {
         cs.classList.add("empty");
       } else {
@@ -28,18 +27,18 @@
 
     // update status, event listener
     updateClearButton();
-    cs.addEventListener('click', function (ev) {
-      qinput.value = '';
+    cs.addEventListener("click", (ev) => {
+      qinput.value = "";
       qinput.focus();
       updateClearButton();
       ev.preventDefault();
     });
-    qinput.addEventListener('input', updateClearButton, false);
+    qinput.addEventListener("input", updateClearButton, false);
   }
 
   const fetchResults = async (query) => {
     let request;
-    if (searxng.settings.method === 'GET') {
+    if (searxng.settings.method === "GET") {
       const reqParams = new URLSearchParams();
       reqParams.append("q", query);
       request = fetch("./autocompleter?" + reqParams.toString());
@@ -47,12 +46,12 @@
       const formData = new FormData();
       formData.append("q", query);
       request = fetch("./autocompleter", {
-        method: 'POST',
-        body: formData,
+        method: "POST",
+        body: formData
       });
     }
 
-    request.then(async function (response) {
+    request.then(async (response) => {
       const results = await response.json();
 
       if (!results) return;
@@ -63,30 +62,30 @@
       autocompleteList.innerHTML = "";
 
       // 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");
-        noItemFoundMessage.classList.add('no-item-found');
+        noItemFoundMessage.classList.add("no-item-found");
         noItemFoundMessage.innerHTML = searxng.settings.translations.no_item_found;
         autocompleteList.appendChild(noItemFoundMessage);
         return;
       }
 
-      for (let result of results[1]) {
+      for (const result of results[1]) {
         const li = document.createElement("li");
         li.innerText = result;
 
-        searxng.on(li, 'mousedown', () => {
+        searxng.on(li, "mousedown", () => {
           qinput.value = result;
           const form = d.querySelector("#search");
           form.submit();
-          autocomplete.classList.remove('open');
+          autocomplete.classList.remove("open");
         });
         autocompleteList.appendChild(li);
       }
     });
   };
 
-  searxng.ready(function () {
+  searxng.ready(() => {
     // focus search input on large screens
     if (!isMobile && !isResultsPage) document.getElementById("q").focus();
 
@@ -100,20 +99,20 @@
 
       // autocompleter
       if (searxng.settings.autocomplete) {
-        searxng.on(qinput, 'input', () => {
+        searxng.on(qinput, "input", () => {
           const query = qinput.value;
           if (query.length < searxng.settings.autocomplete_min) return;
 
           setTimeout(() => {
-            if (query == qinput.value) fetchResults(query);
+            if (query === qinput.value) fetchResults(query);
           }, 300);
         });
 
-        searxng.on(qinput, 'keyup', (e) => {
+        searxng.on(qinput, "keyup", (e) => {
           let currentIndex = -1;
           const listItems = autocompleteList.children;
           for (let i = 0; i < listItems.length; i++) {
-            if (listItems[i].classList.contains('active')) {
+            if (listItems[i].classList.contains("active")) {
               currentIndex = i;
               break;
             }
@@ -121,22 +120,22 @@
 
           let newCurrentIndex = -1;
           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
             // operator doesn't work with negative numbers
             newCurrentIndex = (currentIndex - 1 + listItems.length) % listItems.length;
           } 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;
           } 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];
-            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
     // though)
     if (
-      qinput !== null
-        && searxng.settings.search_on_category_select
+      qinput !== null &&
+      searxng.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
-        && d.querySelector(".search_filters") != null
+      d.querySelector(".search_filters") != null
     ) {
-      searxng.on(d.getElementById('safesearch'), 'change', submitIfQuery);
-      searxng.on(d.getElementById('time_range'), 'change', submitIfQuery);
-      searxng.on(d.getElementById('language'), 'change', submitIfQuery);
+      searxng.on(d.getElementById("safesearch"), "change", submitIfQuery);
+      searxng.on(d.getElementById("time_range"), "change", submitIfQuery);
+      searxng.on(d.getElementById("language"), "change", submitIfQuery);
     }
 
     const categoryButtons = d.querySelectorAll("button.category_button");
-    for (let button of categoryButtons) {
-      searxng.on(button, 'click', (event) => {
+    for (const button of categoryButtons) {
+      searxng.on(button, "click", (event) => {
         if (event.shiftKey) {
           event.preventDefault();
           button.classList.toggle("selected");
@@ -169,7 +168,7 @@
 
         // manually deselect the old selection when a new category is selected
         const selectedCategories = d.querySelectorAll("button.category_button.selected");
-        for (let categoryButton of selectedCategories) {
+        for (const categoryButton of selectedCategories) {
           categoryButton.classList.remove("selected");
         }
         button.classList.add("selected");
@@ -179,12 +178,12 @@
     // override form submit action to update the actually selected categories
     const form = d.querySelector("#search");
     if (form != null) {
-      searxng.on(form, 'submit', (event) => {
+      searxng.on(form, "submit", (event) => {
         event.preventDefault();
         const categoryValuesInput = d.querySelector("#selected-categories");
         if (categoryValuesInput) {
-          let categoryValues = [];
-          for (let categoryButton of categoryButtons) {
+          const categoryValues = [];
+          for (const categoryButton of categoryButtons) {
             if (categoryButton.classList.contains("selected")) {
               categoryValues.push(categoryButton.name.replace("category_", ""));
             }
@@ -195,5 +194,4 @@
       });
     }
   });
-
 })(window, document, window.searxng);