[mod] simple theme: move source files to the src directory

searx/static/themes/simple/src/js/head/00_init.js

@@ -0,0 +1,40 @@
+/**
+* searx is free software: you can redistribute it and/or modify
+* it under the terms of the GNU Affero General Public License as published by
+* the Free Software Foundation, either version 3 of the License, or
+* (at your option) any later version.
+*
+* searx is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU Affero General Public License for more details.
+*
+* You should have received a copy of the GNU Affero General Public License
+* along with searx. If not, see < http://www.gnu.org/licenses/ >.
+*
+* (C) 2019 by Alexandre Flament
+*
+*/
+(function(w, d) {
+    'use strict';
+
+    // add data- properties
+    var script = d.currentScript  || (function() {
+        var scripts = d.getElementsByTagName('script');
+        return scripts[scripts.length - 1];
+    })();
+
+    // try to detect touch screen
+    w.searx = {
+        touch: (("ontouchstart" in w) || w.DocumentTouch && document instanceof DocumentTouch) || false,
+        method: script.getAttribute('data-method'),
+        autocompleter: script.getAttribute('data-autocompleter') === 'true',
+        search_on_category_select: script.getAttribute('data-search-on-category-select') === 'true',
+        infinite_scroll: script.getAttribute('data-infinite-scroll') === 'true',
+        static_path: script.getAttribute('data-static-path'),
+        translations: JSON.parse(script.getAttribute('data-translations')),
+    };
+
+    // update the css
+    d.getElementsByTagName("html")[0].className = (w.searx.touch)?"js touch":"js";
+})(window, document);

searx/static/themes/simple/src/js/main/00_searx_toolkit.js

@@ -0,0 +1,164 @@
+/**
+* searx is free software: you can redistribute it and/or modify
+* it under the terms of the GNU Affero General Public License as published by
+* the Free Software Foundation, either version 3 of the License, or
+* (at your option) any later version.
+*
+* searx is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU Affero General Public License for more details.
+*
+* You should have received a copy of the GNU Affero General Public License
+* along with searx. If not, see < http://www.gnu.org/licenses/ >.
+*
+* (C) 2017 by Alexandre Flament, <alex@al-f.net>
+*
+*/
+window.searx = (function(w, d) {
+
+  'use strict';
+
+  // not invented here tookit 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];
+      };
+    })(Element.prototype);
+  }
+
+  function callbackSafe(callback, el, e) {
+    try {
+      callback.call(el, e);
+    } catch (exception) {
+      console.log(exception);
+    }
+  }
+
+  var searx = window.searx || {};
+
+  searx.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) {
+        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);
+    }
+  };
+
+  searx.ready = function(callback) {
+    if (document.readyState != 'loading') {
+      callback.call(w);
+    } else {
+      w.addEventListener('DOMContentLoaded', callback.bind(w));
+    }
+  };
+
+  searx.http = function(method, url, callback) {
+    var req = new XMLHttpRequest(),
+    resolve = function() {},
+    reject = function() {},
+    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() {
+        if (req.status == 200) {
+          resolve(req.response, req.responseType);
+        } else {
+          reject(Error(req.statusText));
+        }
+      };
+
+      // Handle network errors
+      req.onerror = function() {
+        reject(Error("Network Error"));
+      };
+
+      req.onabort = function() {
+        reject(Error("Transaction is aborted"));
+      };
+
+      // Make the request
+      req.send();
+    } catch (ex) {
+      reject(ex);
+    }
+
+    return promise;
+  };
+
+  searx.loadStyle = function(src) {
+    var path = searx.static_path + src,
+    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);
+      d.body.appendChild(s);
+    }
+  };
+
+  searx.loadScript = function(src, callback) {
+    var path = searx.static_path + src,
+    id = "script_" + src.replace('.', '_'),
+    s = d.getElementById(id);
+    if (s === null) {
+      s = d.createElement('script');
+      s.setAttribute('id', id);
+      s.setAttribute('src', path);
+      s.onload = callback;
+      s.onerror = function() {
+        s.setAttribute('error', '1');
+      };
+      d.body.appendChild(s);
+    } else if (!s.hasAttribute('error')) {
+      try {
+        callback.apply(s, []);
+      } catch (exception) {
+        console.log(exception);
+      }
+    } else {
+      console.log("callback not executed : script '" + path + "' not loaded.");
+    }
+  };
+
+  searx.insertBefore = function (newNode, referenceNode) {
+    element.parentNode.insertBefore(newNode, referenceNode);
+  };
+
+  searx.insertAfter = function(newNode, referenceNode) {
+    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
+  };  
+
+  searx.on('.close', 'click', function(e) {
+    var el = e.target || e.srcElement;
+    this.parentNode.classList.add('invisible');
+  });
+  
+  return searx;
+})(window, document);

searx/static/themes/simple/src/js/main/searx_keyboard.js

@@ -0,0 +1,366 @@
+searx.ready(function() {
+
+  searx.on('.result', 'click', function() {
+    highlightResult(this)(true);
+  });
+
+  searx.on('.result a', 'focus', function(e) {
+    var el = e.target;
+    while (el !== undefined) {
+      if (el.classList.contains('result')) {
+        if (el.getAttribute("data-vim-selected") === null) {
+          highlightResult(el)(true);
+        }
+        break;
+      }
+      el = el.parentNode;
+    }
+  }, true);
+
+  var vimKeys = {
+    27: {
+      key: 'Escape',
+      fun: removeFocus,
+      des: 'remove focus from the focused input',
+      cat: 'Control'
+    },
+    73: {
+      key: 'i',
+      fun: searchInputFocus,
+      des: 'focus on the search input',
+      cat: 'Control'
+    },
+    66: {
+      key: 'b',
+      fun: scrollPage(-window.innerHeight),
+      des: 'scroll one page up',
+      cat: 'Navigation'
+    },
+    70: {
+      key: 'f',
+      fun: scrollPage(window.innerHeight),
+      des: 'scroll one page down',
+      cat: 'Navigation'
+    },
+    85: {
+      key: 'u',
+      fun: scrollPage(-window.innerHeight / 2),
+      des: 'scroll half a page up',
+      cat: 'Navigation'
+    },
+    68: {
+      key: 'd',
+      fun: scrollPage(window.innerHeight / 2),
+      des: 'scroll half a page down',
+      cat: 'Navigation'
+    },
+    71: {
+      key: 'g',
+      fun: scrollPageTo(-document.body.scrollHeight, 'top'),
+      des: 'scroll to the top of the page',
+      cat: 'Navigation'
+    },
+    86: {
+      key: 'v',
+      fun: scrollPageTo(document.body.scrollHeight, 'bottom'),
+      des: 'scroll to the bottom of the page',
+      cat: 'Navigation'
+    },
+    75: {
+      key: 'k',
+      fun: highlightResult('up'),
+      des: 'select previous search result',
+      cat: 'Results'
+    },
+    74: {
+      key: 'j',
+      fun: highlightResult('down'),
+      des: 'select next search result',
+      cat: 'Results'
+    },
+    80: {
+      key: 'p',
+      fun: pageButtonClick(0),
+      des: 'go to previous page',
+      cat: 'Results'
+    },
+    78: {
+      key: 'n',
+      fun: pageButtonClick(1),
+      des: 'go to next page',
+      cat: 'Results'
+    },
+    79: {
+      key: 'o',
+      fun: openResult(false),
+      des: 'open search result',
+      cat: 'Results'
+    },
+    84: {
+      key: 't',
+      fun: openResult(true),
+      des: 'open the result in a new tab',
+      cat: 'Results'
+    },
+    82: {
+      key: 'r',
+      fun: reloadPage,
+      des: 'reload page from the server',
+      cat: 'Control'
+    },
+    72: {
+      key: 'h',
+      fun: toggleHelp,
+      des: 'toggle help window',
+      cat: 'Other'
+    }
+  };
+
+  searx.on(document, "keydown", function(e) {
+    // check for modifiers so we don't break browser's hotkeys
+    if (vimKeys.hasOwnProperty(e.keyCode) && !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) {
+      var tagName = e.target.tagName.toLowerCase();
+      if (e.keyCode === 27) {
+        if (tagName === 'input' || tagName === 'select' || tagName === 'textarea') {
+          vimKeys[e.keyCode].fun();
+        }
+      } else {
+        if (e.target === document.body || tagName === 'a' || tagName === 'button') {
+          e.preventDefault();
+          vimKeys[e.keyCode].fun();
+        }
+      }
+    }
+  });
+
+  function highlightResult(which) {
+    return function(noScroll) {
+      var current = document.querySelector('.result[data-vim-selected]'),
+      effectiveWhich = which;
+      if (current === null) {
+        // no selection : choose the first one
+        current = document.querySelector('.result');
+        if (current === null) {
+          // no first one : there are no results
+          return;
+        }
+        // replace up/down actions by selecting first one
+        if (which === "down" || which === "up") {
+          effectiveWhich = current;
+        }
+      }
+
+      var next, results = document.querySelectorAll('.result');
+
+      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;
+            }
+          }
+          break;
+          case 'down':
+          next = current.nextElementSibling;
+          if (next === null) {
+            next = results[0];
+          }
+          break;
+          case 'up':
+          next = current.previousElementSibling;
+          if (next === null) {
+            next = results[results.length - 1];
+          }
+          break;
+          case 'bottom':
+          next = results[results.length - 1];
+          break;
+          case 'top':
+          /* falls through */
+          default:
+          next = results[0];
+        }
+      }
+
+      if (next) {
+        current.removeAttribute('data-vim-selected');
+        next.setAttribute('data-vim-selected', 'true');
+        var link = next.querySelector('h3 a') || next.querySelector('a');
+        if (link !== null) {
+          link.focus();
+        }
+        if (!noScroll) {
+          scrollPageToSelected();
+        }
+      }
+    };
+  }
+
+  function reloadPage() {
+    document.location.reload(true);
+  }
+
+  function removeFocus() {
+    if (document.activeElement) {
+      document.activeElement.blur();
+    }
+  }
+
+  function pageButtonClick(num) {
+    return function() {
+      var buttons = $('div#pagination button[type="submit"]');
+      if (buttons.length !== 2) {
+        console.log('page navigation with this theme is not supported');
+        return;
+      }
+      if (num >= 0 && num < buttons.length) {
+        buttons[num].click();
+      } else {
+        console.log('pageButtonClick(): invalid argument');
+      }
+    };
+  }
+
+  function scrollPageToSelected() {
+    var sel = document.querySelector('.result[data-vim-selected]');
+    if (sel === null) {
+      return;
+    }
+    var wtop = document.documentElement.scrollTop || document.body.scrollTop,
+    wheight = document.documentElement.clientHeight,
+    etop = sel.offsetTop,
+    ebot = etop + sel.clientHeight,
+    offset = 120;
+    // first element ?
+    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)) {
+      window.scroll(window.scrollX, etop - offset);
+    } else {
+      var wbot = wtop + wheight;
+      if (wbot < (ebot + offset)) {
+        window.scroll(window.scrollX, ebot - wheight + offset);
+      }
+    }
+  }
+
+  function scrollPage(amount) {
+    return function() {
+      window.scrollBy(0, amount);
+      highlightResult('visible')();
+    };
+  }
+
+  function scrollPageTo(position, nav) {
+    return function() {
+      window.scrollTo(0, position);
+      highlightResult(nav)();
+    };
+  }
+
+  function searchInputFocus() {
+    window.scrollTo(0, 0);
+    document.querySelector('#q').focus();
+  }
+
+  function openResult(newTab) {
+    return function() {
+      var link = document.querySelector('.result[data-vim-selected] h3 a');
+      if (link !== null) {
+        var url = link.getAttribute('href');
+        if (newTab) {
+          window.open(url);
+        } else {
+          window.location.href = url;
+        }
+      }
+    };
+  }
+
+  function initHelpContent(divElement) {
+    var categories = {};
+
+    for (var k in vimKeys) {
+      var key = vimKeys[k];
+      categories[key.cat] = categories[key.cat] || [];
+      categories[key.cat].push(key);
+    }
+
+    var sorted = Object.keys(categories).sort(function(a, b) {
+      return 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 searx with Vim-like hotkeys</h3>';			
+		html += '<table>';
+
+    for (var i = 0; i < sorted.length; i++) {
+      var cat = categories[sorted[i]];
+
+      var lastCategory = i === (sorted.length - 1);
+      var first = i % 2 === 0;
+
+      if (first) {
+        html += '<tr>';
+      }
+      html += '<td>';
+
+      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 += '</ul>';
+      html += '</td>'; // col-sm-*
+
+      if (!first || lastCategory) {
+        html += '</tr>'; // row
+      }
+    }
+
+		html += '</table>';
+
+ 	  divElement.innerHTML = html;
+	}
+
+  function toggleHelp() {
+			var helpPanel = document.querySelector('#vim-hotkeys-help');
+			console.log(helpPanel);
+		if (helpPanel === undefined || helpPanel === null) {
+ 		  // first call
+			helpPanel = document.createElement('div');
+   			helpPanel.id = 'vim-hotkeys-help';
+				helpPanel.className='dialog-modal';
+				helpPanel.style='width: 40%';
+			initHelpContent(helpPanel);					
+			var body = document.getElementsByTagName('body')[0];
+			body.appendChild(helpPanel);
+		} else {
+ 		  // togggle hidden
+			helpPanel.classList.toggle('invisible');
+			return;
+		}
+
+  }
+	
+});

searx/static/themes/simple/src/js/main/searx_mapresult.js

@@ -0,0 +1,89 @@
+/**
+* searx is free software: you can redistribute it and/or modify
+* it under the terms of the GNU Affero General Public License as published by
+* the Free Software Foundation, either version 3 of the License, or
+* (at your option) any later version.
+*
+* searx is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU Affero General Public License for more details.
+*
+* You should have received a copy of the GNU Affero General Public License
+* along with searx. If not, see < http://www.gnu.org/licenses/ >.
+*
+* (C) 2014 by Thomas Pointhuber, <thomas.pointhuber@gmx.at>
+* (C) 2017 by Alexandre Flament, <alex@al-f.net>
+*/
+(function (w, d, searx) {
+  'use strict';
+
+  searx.ready(function () {
+    searx.on('.searx_init_map', 'click', function(event) {
+      // no more request
+      this.classList.remove("searx_init_map");
+
+      //
+      var leaflet_target = this.dataset.leafletTarget;
+      var map_lon = parseFloat(this.dataset.mapLon);
+      var map_lat = parseFloat(this.dataset.mapLat);
+      var map_zoom = parseFloat(this.dataset.mapZoom);
+      var map_boundingbox = JSON.parse(this.dataset.mapBoundingbox);
+      var map_geojson = JSON.parse(this.dataset.mapGeojson);
+
+      searx.loadStyle('leaflet/leaflet.css');
+      searx.loadScript('leaflet/leaflet.js', function() {
+        var map_bounds = null;
+        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);
+        }
+
+        // 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 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 beta | Maps data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
+        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 () {
+            map.fitBounds(map_bounds, {
+              maxZoom:17
+            });
+          }, 0);
+        } else if (map_lon && map_lat) {
+          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.addLayer(osmMapnik);
+
+        var baseLayers = {
+          "OSM Mapnik": osmMapnik/*,
+          "OSM Wikimedia": osmWikimedia*/
+        };
+
+        L.control.layers(baseLayers).addTo(map);
+
+        if(map_geojson) {
+          L.geoJson(map_geojson).addTo(map);
+        } /*else if(map_bounds) {
+          L.rectangle(map_bounds, {color: "#ff7800", weight: 3, fill:false}).addTo(map);
+        }*/
+      });
+
+      // this event occour only once per element
+      event.preventDefault();
+    });
+  });
+})(window, document, window.searx);

searx/static/themes/simple/src/js/main/searx_results.js

@@ -0,0 +1,63 @@
+/**
+* searx is free software: you can redistribute it and/or modify
+* it under the terms of the GNU Affero General Public License as published by
+* the Free Software Foundation, either version 3 of the License, or
+* (at your option) any later version.
+*
+* searx is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU Affero General Public License for more details.
+*
+* You should have received a copy of the GNU Affero General Public License
+* along with searx. If not, see < http://www.gnu.org/licenses/ >.
+*
+* (C) 2017 by Alexandre Flament, <alex@al-f.net>
+*/
+(function(w, d, searx) {
+  'use strict';
+
+  searx.ready(function() {
+    searx.image_thumbnail_layout = new searx.ImageLayout('#urls', '#urls .result-images', 'img.image_thumbnail', 10, 200);
+    searx.image_thumbnail_layout.watch();
+
+    searx.on('.btn-collapse', 'click', function(event) {
+      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')) {
+        html = html.replace(btnLabelCollapsed, btnLabelNotCollapsed);
+      } else {
+        html = html.replace(btnLabelNotCollapsed, btnLabelCollapsed);
+      }
+      this.innerHTML = html;
+      this.classList.toggle('collapsed');
+      targetElement.classList.toggle('invisible');
+    });
+
+    searx.on('.media-loader', 'click', function(event) {
+      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'));
+      }
+    });
+
+    w.addEventListener('scroll', function() {
+      var e = d.getElementById('backToTop'),
+      scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+      if (e !== null) {
+        if (scrollTop >= 200) {
+          e.style.opacity = 1;
+        } else {
+          e.style.opacity = 0;
+        }
+      }
+    });
+
+  });
+
+})(window, document, window.searx);

searx/static/themes/simple/src/js/main/searx_search.js

@@ -0,0 +1,121 @@
+/**
+* searx is free software: you can redistribute it and/or modify
+* it under the terms of the GNU Affero General Public License as published by
+* the Free Software Foundation, either version 3 of the License, or
+* (at your option) any later version.
+*
+* searx is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU Affero General Public License for more details.
+*
+* You should have received a copy of the GNU Affero General Public License
+* along with searx. If not, see < http://www.gnu.org/licenses/ >.
+*
+* (C) 2017 by Alexandre Flament, <alex@al-f.net>
+*/
+(function(w, d, searx) {
+  'use strict';
+
+  var firstFocus = true, qinput_id = "q", qinput;
+
+  function placeCursorAtEnd(element) {
+    if (element.setSelectionRange) {
+      var len = element.value.length;
+      element.setSelectionRange(len, len);
+    }
+  }
+
+  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() {
+      if (qinput.value.length === 0) {
+	cs.classList.add("empty");
+      } else {
+	cs.classList.remove("empty");
+      }
+    };
+
+    // update status, event listener
+    updateClearButton();
+    cs.addEventListener('click', function() {
+      qinput.value='';
+      qinput.focus();
+      updateClearButton();
+    });
+    qinput.addEventListener('keyup', updateClearButton, false);
+  }
+
+  searx.ready(function() {
+    qinput = d.getElementById(qinput_id);
+
+    function placeCursorAtEndOnce(e) {
+      if (firstFocus) {
+        placeCursorAtEnd(qinput);
+        firstFocus = false;
+      } else {
+        // e.preventDefault();
+      }
+    }
+
+    if (qinput !== null) {
+      // clear button
+      createClearButton(qinput);
+      
+      // autocompleter
+      if (searx.autocompleter) {
+        searx.autocomplete = AutoComplete.call(w, {
+          Url: "./autocompleter",
+          EmptyMessage: searx.translations.no_item_found,
+          HttpMethod: searx.method,
+          HttpHeaders: {
+            "Content-type": "application/x-www-form-urlencoded",
+            "X-Requested-With": "XMLHttpRequest"
+          },
+          MinChars: 4,
+          Delay: 300,
+        }, "#" + qinput_id);
+
+        // hack, see : https://github.com/autocompletejs/autocomplete.js/issues/37
+        w.addEventListener('resize', function() {
+          var event = new CustomEvent("position");
+          qinput.dispatchEvent(event);
+        });
+      }
+
+      qinput.addEventListener('focus', placeCursorAtEndOnce, false);
+      qinput.focus();
+    }
+
+    // vanilla js version of search_on_category_select.js
+    if (qinput !== null && searx.search_on_category_select) {
+      d.querySelector('.help').className='invisible';
+
+      searx.on('#categories input', 'change', function(e) {
+        var i, categories = d.querySelectorAll('#categories input[type="checkbox"]');
+        for(i=0; i<categories.length; i++) {
+          if (categories[i] !== this && categories[i].checked) {
+            categories[i].click();
+          }
+        }
+        if (! this.checked) {
+          this.click();
+        }
+        submitIfQuery();
+        return false;
+      });
+
+      searx.on(d.getElementById('time_range'), 'change', submitIfQuery);
+      searx.on(d.getElementById('language'), 'change', submitIfQuery);
+    }
+
+  });
+
+})(window, document, window.searx);