Merge pull request #658 from davidar/scroll

[enh] infinite scroll

searx/plugins/__init__.py

@@ -21,6 +21,7 @@ logger = logger.getChild('plugins')
 
 from searx.plugins import (doai_rewrite,
                            https_rewrite,
+                           infinite_scroll,
                            open_results_on_new_tab,
                            self_info,
                            search_on_category_select,
@@ -76,6 +77,7 @@ class PluginStore():
 plugins = PluginStore()
 plugins.register(doai_rewrite)
 plugins.register(https_rewrite)
+plugins.register(infinite_scroll)
 plugins.register(open_results_on_new_tab)
 plugins.register(self_info)
 plugins.register(search_on_category_select)

searx/plugins/infinite_scroll.py

@@ -0,0 +1,8 @@
+from flask_babel import gettext
+
+name = gettext('Infinite scroll')
+description = gettext('Automatically load next page when scrolling to bottom of current page')
+default_on = False
+
+js_dependencies = ('plugins/js/infinite_scroll.js',)
+css_dependencies = ('plugins/css/infinite_scroll.css',)

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;
+}

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'));
+                });
+            }
+        }
+    });
+});