Merge pull request #538 from return42/eslint

SearXNG JavaScript Style Guide
2021-12-14 08:07:22 +01:00 · 2021-12-14 08:07:22 +01:00 · 4f22615259
parent 5c7167cd5a f287787c44
commit 4f22615259
15 changed files with 236 additions and 207 deletions
--- a/.dir-locals.el
+++ b/.dir-locals.el
@ -91,7 +91,7 @@

 (json-mode
  . ((eval . (progn
-               (setq-local js-indent-level 2)
+               (setq-local js-indent-level 4)
               (flycheck-checker . json-python-json)))))

 (js-mode
--- a/2
+++ b/2
@ -89,7 +89,7 @@ MANAGE += py.build py.clean
 MANAGE += pyenv pyenv.install pyenv.uninstall
 MANAGE += pypi.upload pypi.upload.test
 MANAGE += test.yamllint test.pylint test.pep8 test.unit test.coverage test.robot test.clean
-MANAGE += themes.all themes.oscar themes.simple pygments.less
+MANAGE += themes.all themes.oscar themes.simple themes.simple.test pygments.less
 MANAGE += static.build.commit static.build.drop static.build.restore
 MANAGE += nvm.install nvm.clean nvm.status nvm.nodejs

--- a/11
+++ b/11
@ -714,6 +714,17 @@ themes.simple() {
    dump_return $?
 }

+themes.simple.test() {
+    build_msg TEST "theme: simple"
+    if ! nvm.min_node "${NODE_MINIMUM_VERSION}"; then
+        info_msg "install Node.js by NVM"
+        nvm.nodejs
+    fi
+    npm --prefix searx/static/themes/simple install
+    npm --prefix searx/static/themes/simple run test
+    dump_return $?
+}
+
 PYLINT_FILES=()
 while IFS= read -r line; do
   PYLINT_FILES+=("$line")
--- a/searx/static/themes/common/js/image_layout.js
+++ b/searx/static/themes/common/js/image_layout.js
@ -22,7 +22,7 @@


 (function (w, d) {
-  function ImageLayout(container_selector, results_selector, img_selector, verticalMargin, horizontalMargin, maxHeight) {
+  function ImageLayout (container_selector, results_selector, img_selector, verticalMargin, horizontalMargin, maxHeight) {
    this.container_selector = container_selector;
    this.results_selector = results_selector;
    this.img_selector = img_selector;
@ -57,7 +57,7 @@
      }
    }

-    return (width - images.length * this.verticalMargin) / r; //have to round down because Firefox will automatically roundup value with number of decimals > 3
+    return (width - images.length * this.verticalMargin) / r; // have to round down because Firefox will automatically roundup value with number of decimals > 3
  };

  ImageLayout.prototype._setSize = function (images, height) {
@ -147,12 +147,12 @@
    var results_nodes = d.querySelectorAll(this.results_selector);
    var results_length = results_nodes.length;

-    function img_load_error(event) {
+    function img_load_error (event) {
      // console.log("ERROR can't load: " + event.originalTarget.src);
      event.originalTarget.src = w.searxng.static_path + w.searxng.theme.img_load_error;
    }

-    function throttleAlign() {
+    function throttleAlign () {
      if (obj.isAlignDone) {
        obj.isAlignDone = false;
        setTimeout(function () {
--- a/searx/static/themes/simple/.eslintrc.json
+++ b/searx/static/themes/simple/.eslintrc.json
@ -9,5 +9,21 @@
        "ecmaVersion": 12
    },
    "rules": {
+        "indent": ["error", 2],
+        "keyword-spacing": ["error", { "before": true, "after": true }],
+        "no-trailing-spaces": 2,
+        "space-before-function-paren": ["error", "always"],
+        "space-infix-ops": "error",
+        "comma-spacing": ["error", { "before": false, "after": true }],
+        "brace-style": ["error", "1tbs", { "allowSingleLine": true }],
+        "curly": ["error", "multi-line"],
+        "block-spacing": ["error", "always"],
+        "comma-spacing": ["error", { "before": false, "after": true }],
+        "dot-location": ["error", "property"],
+        "key-spacing": ["error", { "beforeColon": false, "afterColon": true }],
+        "spaced-comment": ["error", "always", {
+            "line": { "markers": ["*package", "!", "/", ",", "="] },
+            "block": { "balanced": true, "markers": ["*package", "!", ",", ":", "::", "flow-include"], "exceptions": ["*"] }
+        }]
    }
 }
--- a/searx/static/themes/simple/gruntfile.js
+++ b/searx/static/themes/simple/gruntfile.js
@ -1,6 +1,6 @@
-/*jshint esversion: 6 */
+/* SPDX-License-Identifier: AGPL-3.0-or-later */

-module.exports = function(grunt) {
+module.exports = function (grunt) {

  const eachAsync = require('each-async');

@ -27,9 +27,11 @@ module.exports = function(grunt) {
    eslint: {
      options: {
        overrideConfigFile: '.eslintrc.json',
-        failOnError: false
+        failOnError: true,
+        fix: grunt.option('fix')
      },
      target: [
+        'gruntfile.js',
        'svg4web.svgo.js',
        'src/js/main/*.js',
        'src/js/head/*.js',
@ -111,7 +113,7 @@ module.exports = function(grunt) {
            new (require('less-plugin-clean-css'))()
          ],
          sourceMap: 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'; },
          outputSourceFiles: true,
        },
        files: {
@ -176,10 +178,10 @@ module.exports = function(grunt) {
    },
  });

-  grunt.registerMultiTask('svg2jinja', 'Create Jinja2 macro', function() {
+  grunt.registerMultiTask('svg2jinja', 'Create Jinja2 macro', function () {
    const ejs = require('ejs'), svgo = require('svgo');
    const icons = {}
-    for(const iconName in this.data.src) {
+    for (const iconName in this.data.src) {
      const svgFileName = this.data.src[iconName];
      try {
        const svgContent = grunt.file.read(svgFileName, { encoding: 'utf8' })
@ -266,13 +268,12 @@ module.exports = function(grunt) {
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-image');
-  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-stylelint');
  grunt.loadNpmTasks('grunt-eslint');

-  grunt.registerTask('test', ['jshint']);
+  grunt.registerTask('test', ['eslint']);

  grunt.registerTask('default', [
    'eslint',
--- a/searx/static/themes/simple/package.json
+++ b/searx/static/themes/simple/package.json
@ -4,7 +4,6 @@
    "grunt": "~1.4.1",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-cssmin": "^4.0.0",
-    "grunt-contrib-jshint": "~3.1.1",
    "grunt-contrib-less": "~3.0.0",
    "grunt-contrib-uglify": "~5.0.1",
    "grunt-xmlmin": "~0.1.8",
@ -29,7 +28,9 @@
  "scripts": {
    "all": "npm install && grunt",
    "build": "grunt",
+    "test": "grunt test",
    "eslint": "grunt eslint",
+    "eslint-fix": "grunt eslint --fix",
    "watch": "grunt watch",
    "webfont": "grunt webfont",
    "clean": "rm -Rf node_modules package-lock.json ion.less",
--- a/searx/static/themes/simple/src/js/head/00_init.js
+++ b/searx/static/themes/simple/src/js/head/00_init.js
@ -5,11 +5,11 @@
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */
 /* global DocumentTouch:readonly */
-(function(w, d) {
+(function (w, d) {
  'use strict';

  // add data- properties
-    var script = d.currentScript  || (function() {
+  var script = d.currentScript  || (function () {
    var scripts = d.getElementsByTagName('script');
    return scripts[scripts.length - 1];
  })();
@ -24,7 +24,7 @@
    hotkeys: script.getAttribute('data-hotkeys') === 'true',
    static_path: script.getAttribute('data-static-path'),
    translations: JSON.parse(script.getAttribute('data-translations')),
-        theme : {
+    theme: {
      // image that is displayed if load of <img src='...'> failed
      img_load_error: 'img/img_load_error.svg'
    }
--- a/searx/static/themes/simple/src/js/main/00_toolkit.js
+++ b/searx/static/themes/simple/src/js/main/00_toolkit.js
@ -4,7 +4,7 @@
 * (C) Copyright Contributors to the searx project (2014 - 2021).
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */
-window.searxng = (function(w, d) {
+window.searxng = (function (w, d) {

  'use strict';

@ -13,12 +13,12 @@ window.searxng = (function(w, d) {

  // from https://plainjs.com/javascript/events/live-binding-event-handlers-14/
  if (w.Element) {
-    (function(ElementPrototype) {
+    (function (ElementPrototype) {
      ElementPrototype.matches = ElementPrototype.matches ||
      ElementPrototype.matchesSelector ||
      ElementPrototype.webkitMatchesSelector ||
      ElementPrototype.msMatchesSelector ||
-      function(selector) {
+      function (selector) {
        var node = this, nodes = (node.parentNode || node.document).querySelectorAll(selector), i = -1;
        while (nodes[++i] && nodes[i] != node);
        return !!nodes[i];
@ -26,7 +26,7 @@ window.searxng = (function(w, d) {
    })(Element.prototype);
  }

-  function callbackSafe(callback, el, e) {
+  function callbackSafe (callback, el, e) {
    try {
      callback.call(el, e);
    } catch (exception) {
@ -36,14 +36,14 @@ window.searxng = (function(w, d) {

  var searxng = window.searxng || {};

-  searxng.on = function(obj, eventType, callback, useCapture) {
+  searxng.on = function (obj, eventType, callback, useCapture) {
    useCapture = useCapture || false;
    if (typeof obj !== 'string') {
      // obj HTMLElement, HTMLDocument
      obj.addEventListener(eventType, callback, useCapture);
    } else {
      // obj is a selector
-      d.addEventListener(eventType, function(e) {
+      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);
@ -51,7 +51,7 @@ window.searxng = (function(w, d) {
    }
  };

-  searxng.ready = function(callback) {
+  searxng.ready = function (callback) {
    if (document.readyState != 'loading') {
      callback.call(w);
    } else {
@ -59,20 +59,20 @@ window.searxng = (function(w, d) {
    }
  };

-  searxng.http = function(method, url) {
+  searxng.http = function (method, url) {
    var req = new XMLHttpRequest(),
-    resolve = function() {},
-    reject = function() {},
+      resolve = function () {},
+      reject = function () {},
      promise = {
-      then: function(callback) { resolve = callback; return promise; },
-      catch: function(callback) { reject = callback; return promise; }
+        then: function (callback) { resolve = callback; return promise; },
+        catch: function (callback) { reject = callback; return promise; }
      };

    try {
      req.open(method, url, true);

      // On load
-      req.onload = function() {
+      req.onload = function () {
        if (req.status == 200) {
          resolve(req.response, req.responseType);
        } else {
@ -81,11 +81,11 @@ window.searxng = (function(w, d) {
      };

      // Handle network errors
-      req.onerror = function() {
+      req.onerror = function () {
        reject(Error("Network Error"));
      };

-      req.onabort = function() {
+      req.onabort = function () {
        reject(Error("Transaction is aborted"));
      };

@ -98,7 +98,7 @@ window.searxng = (function(w, d) {
    return promise;
  };

-  searxng.loadStyle = function(src) {
+  searxng.loadStyle = function (src) {
    var path = searxng.static_path + src,
      id = "style_" + src.replace('.', '_'),
      s = d.getElementById(id);
@ -112,7 +112,7 @@ window.searxng = (function(w, d) {
    }
  };

-  searxng.loadScript = function(src, callback) {
+  searxng.loadScript = function (src, callback) {
    var path = searxng.static_path + src,
      id = "script_" + src.replace('.', '_'),
      s = d.getElementById(id);
@ -121,7 +121,7 @@ window.searxng = (function(w, d) {
      s.setAttribute('id', id);
      s.setAttribute('src', path);
      s.onload = callback;
-      s.onerror = function() {
+      s.onerror = function () {
        s.setAttribute('error', '1');
      };
      d.body.appendChild(s);
@ -140,11 +140,11 @@ window.searxng = (function(w, d) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode);
  };

-  searxng.insertAfter = function(newNode, referenceNode) {
+  searxng.insertAfter = function (newNode, referenceNode) {
    referenceNode.parentNode.insertAfter(newNode, referenceNode.nextSibling);
  };

-  searxng.on('.close', 'click', function() {
+  searxng.on('.close', 'click', function () {
    this.parentNode.classList.add('invisible');
  });

--- a/searx/static/themes/simple/src/js/main/keyboard.js
+++ b/searx/static/themes/simple/src/js/main/keyboard.js
@ -1,9 +1,9 @@
 /* SPDX-License-Identifier: AGPL-3.0-or-later */
-/*global searxng*/
+/* global searxng */

-searxng.ready(function() {
+searxng.ready(function () {

-  function isElementInDetail(el) {
+  function isElementInDetail (el) {
    while (el !== undefined) {
      if (el.classList.contains('detail')) {
        return true;
@ -18,7 +18,7 @@ searxng.ready(function() {
    return false;
  }

-  function getResultElement(el) {
+  function getResultElement (el) {
    while (el !== undefined) {
      if (el.classList.contains('result')) {
        return el;
@ -28,11 +28,11 @@ searxng.ready(function() {
    return undefined;
  }

-  function isImageResult(resultElement) {
+  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);
      let resultElement = getResultElement(e.target);
@ -43,7 +43,7 @@ searxng.ready(function() {
    }
  });

-  searxng.on('.result a', 'focus', function(e) {
+  searxng.on('.result a', 'focus', function (e) {
    if (!isElementInDetail(e.target)) {
      let resultElement = getResultElement(e.target);
      if (resultElement && resultElement.getAttribute("data-vim-selected") === null) {
@ -155,7 +155,7 @@ searxng.ready(function() {
  };

  if (searxng.hotkeys) {
-    searxng.on(document, "keydown", function(e) {
+    searxng.on(document, "keydown", function (e) {
      // check for modifiers so we don't break browser's hotkeys
      if (Object.prototype.hasOwnProperty.call(vimKeys, e.keyCode) && !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) {
        var tagName = e.target.tagName.toLowerCase();
@ -171,8 +171,8 @@ searxng.ready(function() {
    });
  }

-  function highlightResult(which) {
-    return function(noScroll) {
+  function highlightResult (which) {
+    return function (noScroll) {
      var current = document.querySelector('.result[data-vim-selected]'),
        effectiveWhich = which;
      if (current === null) {
@ -244,11 +244,11 @@ 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')) {
      document.activeElement.blur();
@ -257,8 +257,8 @@ searxng.ready(function() {
    }
  }

-  function pageButtonClick(css_selector) {
-    return function() {
+  function pageButtonClick (css_selector) {
+    return function () {
      var button = document.querySelector(css_selector);
      if (button) {
        button.click();
@ -266,15 +266,15 @@ 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() {
+  function scrollPageToSelected () {
    var sel = document.querySelector('.result[data-vim-selected]');
    if (sel === null) {
      return;
@ -301,27 +301,27 @@ searxng.ready(function() {
    }
  }

-  function scrollPage(amount) {
-    return function() {
+  function scrollPage (amount) {
+    return function () {
      window.scrollBy(0, amount);
      highlightResult('visible')();
    };
  }

-  function scrollPageTo(position, nav) {
-    return function() {
+  function scrollPageTo (position, nav) {
+    return function () {
      window.scrollTo(0, position);
      highlightResult(nav)();
    };
  }

-  function searchInputFocus() {
+  function searchInputFocus () {
    window.scrollTo(0, 0);
    document.querySelector('#q').focus();
  }

-  function openResult(newTab) {
-    return function() {
+  function openResult (newTab) {
+    return function () {
      var link = document.querySelector('.result[data-vim-selected] h3 a');
      if (link === null) {
        link = document.querySelector('.result[data-vim-selected] > a');
@ -337,7 +337,7 @@ searxng.ready(function() {
    };
  }

-  function initHelpContent(divElement) {
+  function initHelpContent (divElement) {
    var categories = {};

    for (var k in vimKeys) {
@ -346,7 +346,7 @@ searxng.ready(function() {
      categories[key.cat].push(key);
    }

-    var sorted = Object.keys(categories).sort(function(a, b) {
+    var sorted = Object.keys(categories).sort(function (a, b) {
      return categories[b].length - categories[a].length;
    });

@ -389,13 +389,13 @@ searxng.ready(function() {
    divElement.innerHTML = html;
  }

-  function toggleHelp() {
+  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.className = 'dialog-modal';
      initHelpContent(helpPanel);
      initHelpContent(helpPanel);
      initHelpContent(helpPanel);
--- a/searx/static/themes/simple/src/js/main/mapresult.js
+++ b/searx/static/themes/simple/src/js/main/mapresult.js
@ -4,7 +4,7 @@
  'use strict';

  searxng.ready(function () {
-    searxng.on('.searxng_init_map', 'click', function(event) {
+    searxng.on('.searxng_init_map', 'click', function (event) {
      // no more request
      this.classList.remove("searxng_init_map");

@ -17,9 +17,9 @@
      var map_geojson = JSON.parse(this.dataset.mapGeojson);

      searxng.loadStyle('css/leaflet.css');
-      searxng.loadScript('js/leaflet.js', function() {
+      searxng.loadScript('js/leaflet.js', function () {
        var map_bounds = null;
-        if(map_boundingbox) {
+        if (map_boundingbox) {
          var southWest = L.latLng(map_boundingbox[0], map_boundingbox[2]);
          var northEast = L.latLng(map_boundingbox[1], map_boundingbox[3]);
          map_bounds = L.latLngBounds(southWest, northEast);
@ -28,26 +28,26 @@
        // 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 osmMapnikAttrib='Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
+        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 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) {
+        if (map_bounds) {
          // TODO hack: https://github.com/Leaflet/Leaflet/issues/2021
          // Still useful ?
          setTimeout(function () {
            map.fitBounds(map_bounds, {
-              maxZoom:17
+              maxZoom: 17
            });
          }, 0);
        } else if (map_lon && map_lat) {
-          if(map_zoom) {
-            map.setView(new L.latLng(map_lat, map_lon),map_zoom);
+          if (map_zoom) {
+            map.setView(new L.latLng(map_lat, map_lon), map_zoom);
          } else {
-            map.setView(new L.latLng(map_lat, map_lon),8);
+            map.setView(new L.latLng(map_lat, map_lon), 8);
          }
        }

@ -60,11 +60,11 @@

        L.control.layers(baseLayers).addTo(map);

-        if(map_geojson) {
+        if (map_geojson) {
          L.geoJson(map_geojson).addTo(map);
-        } /*else if(map_bounds) {
+        } /* else if(map_bounds) {
          L.rectangle(map_bounds, {color: "#ff7800", weight: 3, fill:false}).addTo(map);
-        }*/
+        } */
      });

      // this event occour only once per element
--- a/searx/static/themes/simple/src/js/main/preferences.js
+++ b/searx/static/themes/simple/src/js/main/preferences.js
@ -2,15 +2,15 @@
 (function (w, d, searxng) {
  'use strict';

-    searxng.ready(function() {
+  searxng.ready(function () {
    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(function (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');
-                        for(const element of elements) {
+            for (const element of elements) {
              let source = ' (<i>' + searxng.translations['Source'] + ':&nbsp;' + description[1] + '</i>)';
              element.innerHTML = description[0] + source;
            }
@ -20,7 +20,7 @@
    }

    if (d.querySelector('body[class="preferences_endpoint"]')) {
-            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);
      }
    }
--- a/searx/static/themes/simple/src/js/main/results.js
+++ b/searx/static/themes/simple/src/js/main/results.js
@ -1,12 +1,12 @@
 /* SPDX-License-Identifier: AGPL-3.0-or-later */
-(function(w, d, searxng) {
+(function (w, d, searxng) {
  'use strict';

-  searxng.ready(function() {
+  searxng.ready(function () {
    searxng.image_thumbnail_layout = new searxng.ImageLayout('#urls', '#urls .result-images', 'img.image_thumbnail', 14, 6, 200);
    searxng.image_thumbnail_layout.watch();

-    searxng.on('.btn-collapse', 'click', function() {
+    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');
@ -22,7 +22,7 @@
      targetElement.classList.toggle('invisible');
    });

-    searxng.on('.media-loader', 'click', function() {
+    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');
@ -31,8 +31,8 @@
      }
    });

-    searxng.selectImage = function(resultElement) {
-      /*eslint no-unused-vars: 0*/
+    searxng.selectImage = function (resultElement) {
+      /* eslint no-unused-vars: 0 */
      if (resultElement) {
        // load full size image in background
        const imgElement = resultElement.querySelector('.result-images-source img');
@ -65,7 +65,7 @@
      searxng.scrollPageToSelected();
    }

-    searxng.closeDetail = function(e) {
+    searxng.closeDetail = function (e) {
      d.getElementById('results').classList.remove('image-detail-open');
      searxng.image_thumbnail_layout.align();
      searxng.scrollPageToSelected();
@ -77,7 +77,7 @@
    searxng.on('.result-detail-previous', 'click', e => searxng.selectPrevious(false));
    searxng.on('.result-detail-next', 'click', e => searxng.selectNext(false));

-    w.addEventListener('scroll', function() {
+    w.addEventListener('scroll', function () {
      var e = d.getElementById('backToTop'),
        scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
        results = d.getElementById('results');
--- a/searx/static/themes/simple/src/js/main/search.js
+++ b/searx/static/themes/simple/src/js/main/search.js
@ -1,27 +1,27 @@
 /* SPDX-License-Identifier: AGPL-3.0-or-later */
 /* global AutoComplete */
-(function(w, d, searxng) {
+(function (w, d, searxng) {
  'use strict';

  var firstFocus = true, qinput_id = "q", qinput;

-  function placeCursorAtEnd(element) {
+  function placeCursorAtEnd (element) {
    if (element.setSelectionRange) {
      var len = element.value.length;
      element.setSelectionRange(len, len);
    }
  }

-  function submitIfQuery() {
+  function submitIfQuery () {
    if (qinput.value.length  > 0) {
      var search = document.getElementById('search');
      setTimeout(search.submit.bind(search), 0);
    }
  }

-  function createClearButton(qinput) {
+  function createClearButton (qinput) {
    var cs = document.getElementById('clear_search');
-    var updateClearButton = function() {
+    var updateClearButton = function () {
      if (qinput.value.length === 0) {
        cs.classList.add("empty");
      } else {
@ -31,18 +31,18 @@

    // update status, event listener
    updateClearButton();
-    cs.addEventListener('click', function() {
-      qinput.value='';
+    cs.addEventListener('click', function () {
+      qinput.value = '';
      qinput.focus();
      updateClearButton();
    });
    qinput.addEventListener('keyup', updateClearButton, false);
  }

-  searxng.ready(function() {
+  searxng.ready(function () {
    qinput = d.getElementById(qinput_id);

-    function placeCursorAtEndOnce() {
+    function placeCursorAtEndOnce () {
      if (firstFocus) {
        placeCursorAtEnd(qinput);
        firstFocus = false;
@ -67,7 +67,7 @@
          },
          MinChars: 4,
          Delay: 300,
-          _Position:function() {
+          _Position: function () {
            this.DOMResults.setAttribute("class", "autocomplete");
            this.DOMResults.style.top = (this.Input.offsetTop + this.Input.offsetHeight) + "px";
            this.DOMResults.style.left = this.Input.offsetLeft + "px";
@ -76,7 +76,7 @@
        }, "#" + qinput_id);

        // hack, see : https://github.com/autocompletejs/autocomplete.js/issues/37
-        w.addEventListener('resize', function() {
+        w.addEventListener('resize', function () {
          var event = new CustomEvent("position");
          qinput.dispatchEvent(event);
        });
@ -88,11 +88,11 @@

    // vanilla js version of search_on_category_select.js
    if (qinput !== null && d.querySelector('.help') != null && searxng.search_on_category_select) {
-      d.querySelector('.help').className='invisible';
+      d.querySelector('.help').className = 'invisible';

-      searxng.on('#categories input', 'change', function() {
+      searxng.on('#categories input', 'change', function () {
        var i, categories = d.querySelectorAll('#categories input[type="checkbox"]');
-        for(i=0; i<categories.length; i++) {
+        for (i = 0; i < categories.length; i++) {
          if (categories[i] !== this && categories[i].checked) {
            categories[i].click();
          }