[enh] infinite scroll

resolves #649

2 files changed, 34 insertions, 0 deletions

diff --git a/searx/static/plugins/css/infinite_scroll.css b/searx/static/plugins/css/infinite_scroll.css
new file mode 100644
index 000000000..7e0ee20f5
--- /dev/null
+++ b/searx/static/plugins/css/infinite_scroll.css
@@ -0,0 +1,16 @@
+@keyframes rotate-forever {
+    0%   { transform: rotate(0deg) }
+    100% { transform: rotate(360deg) }
+}
+.loading-spinner {
+    animation-duration: 0.75s;
+    animation-iteration-count: infinite;
+    animation-name: rotate-forever;
+    animation-timing-function: linear;
+    height: 30px;
+    width: 30px;
+    border: 8px solid #666;
+    border-right-color: transparent;
+    border-radius: 50% !important;
+    margin: 0 auto;
+}
diff --git a/searx/static/plugins/js/infinite_scroll.js b/searx/static/plugins/js/infinite_scroll.js
new file mode 100644
index 000000000..213f74b15
--- /dev/null
+++ b/searx/static/plugins/js/infinite_scroll.js
@@ -0,0 +1,18 @@
+$(document).ready(function() {
+    var win = $(window);
+    win.scroll(function() {
+        if ($(document).height() - win.height() == win.scrollTop()) {
+            var formData = $('#pagination form:last').serialize();
+            if (formData) {
+                $('#pagination').html('<div class="loading-spinner"></div>');
+                $.post('/', formData, function (data) {
+                    var body = $(data);
+                    $('#pagination').remove();
+                    $('#main_results').append('<hr/>');
+                    $('#main_results').append(body.find('.result'));
+                    $('#main_results').append(body.find('#pagination'));
+                });
+            }
+        }
+    });
+});