[mod] infinite_scroll as preference

* oscar theme: code from searx/plugins/infinite_scroll.py
* simple theme: new implementation

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

@@ -59,43 +59,40 @@ window.searxng = (function (w, d) {
     }
   };
 
-  searxng.http = function (method, url) {
-    var req = new XMLHttpRequest(),
-      resolve = function () {},
-      reject = function () {},
-      promise = {
-        then: function (callback) { resolve = callback; return promise; },
-        catch: function (callback) { reject = callback; return promise; }
-      };
+  searxng.http = function (method, url, data = null) {
+    return new Promise(function (resolve, reject) {
+      try {
+        var req = new XMLHttpRequest();
+        req.open(method, url, true);
 
-    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));
+          }
+        };
 
-      // On load
-      req.onload = function () {
-        if (req.status == 200) {
-          resolve(req.response, req.responseType);
+        // Handle network errors
+        req.onerror = function () {
+          reject(Error("Network Error"));
+        };
+
+        req.onabort = function () {
+          reject(Error("Transaction is aborted"));
+        };
+
+        // Make the request
+        if (data) {
+          req.send(data)
         } else {
-          reject(Error(req.statusText));
+          req.send();
         }
-      };
-
-      // 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;
+      } catch (ex) {
+        reject(ex);
+      }
+    });
   };
 
   searxng.loadStyle = function (src) {

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

@@ -0,0 +1,76 @@
+/**
+ * @license
+ * (C) Copyright Contributors to the SearXNG project.
+ * (C) Copyright Contributors to the searx project (2014 - 2021).
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+/* global searxng */
+
+searxng.ready(function () {
+  'use strict';
+
+  let w = window;
+  let d = document;
+  var root = d.compatMode == 'BackCompat' ? d.body : d.documentElement;
+
+  function hasScrollbar () {
+    return root.scrollHeight > root.clientHeight;
+  }
+
+  function loadNextPage () {
+    var form = d.querySelector('#pagination form.next_page');
+    if (!form) {
+      return
+    }
+    var formData = new FormData(form);
+    d.querySelector('#pagination').innerHTML = '<div class="loader"></div>';
+    searxng.http('POST', d.querySelector('#search').getAttribute('action'), formData).then(
+      function (response) {
+        var scrollYBeforeInsert = w.scrollY;
+        var nextPageDoc = new DOMParser().parseFromString(response, 'text/html');
+        var articleList = nextPageDoc.querySelectorAll('#urls article');
+        var paginationElement = nextPageDoc.querySelector('#pagination');
+        var onlyImages = d.getElementById('results').classList.contains('only_template_images');
+        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'));
+        }
+        articleList.forEach(articleElement => {
+          d.querySelector('#urls').appendChild(articleElement);
+        });
+        searxng.image_thumbnail_layout.align();
+        w.scrollTo(w.scrollX, scrollYBeforeInsert);
+        if (paginationElement) {
+          d.querySelector('#results').appendChild(paginationElement);
+          if (!hasScrollbar()) {
+            loadNextPage();
+          }
+        }
+      }
+    ).catch(
+      function (err) {
+        console.log(err);
+        d.querySelector('#pagination').innerHTML = '<div class="dialog-error" role="alert"><div><p>' +
+          searxng.translations.error_loading_next_page +
+          '</p></div></div>';
+      }
+    )
+  }
+
+  function onScroll () {
+    let clientRect = root.getBoundingClientRect();
+    if (root.scrollHeight - root.scrollTop - clientRect.height  < 150) {
+      loadNextPage();
+    }
+  }
+
+  if (searxng.infinite_scroll) {
+    d.getElementsByTagName('html')[0].classList.add('infinite_scroll')
+    if (!hasScrollbar()) {
+      loadNextPage();
+    }
+    d.addEventListener('scroll', onScroll, { passive: true });
+  }
+
+});