mirror of https://github.com/searxng/searxng
[mod] infinite_scroll as preference
* oscar theme: code from searx/plugins/infinite_scroll.py * simple theme: new implementation Co-authored-by: Markus Heiser <markus.heiser@darmarIT.de>pull/916/head
parent
36aee70c24
commit
56e34947a6
@ -1,9 +0,0 @@
|
||||
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
|
||||
preference_section = 'ui'
|
||||
|
||||
js_dependencies = ('plugins/js/infinite_scroll.js',)
|
||||
css_dependencies = ('plugins/css/infinite_scroll.css',)
|
@ -1,40 +0,0 @@
|
||||
function hasScrollbar() {
|
||||
var root = document.compatMode=='BackCompat'? document.body : document.documentElement;
|
||||
return root.scrollHeight>root.clientHeight;
|
||||
}
|
||||
|
||||
function loadNextPage() {
|
||||
var formData = $('#pagination form:last').serialize();
|
||||
if (formData) {
|
||||
$('#pagination').html('<div class="loading-spinner"></div>');
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: $('#search_form').prop('action'),
|
||||
data: formData,
|
||||
dataType: 'html',
|
||||
success: function(data) {
|
||||
var body = $(data);
|
||||
$('#pagination').remove();
|
||||
$('#main_results').append('<hr/>');
|
||||
$('#main_results').append(body.find('.result'));
|
||||
$('#main_results').append(body.find('#pagination'));
|
||||
if(!hasScrollbar()) {
|
||||
loadNextPage();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
var win = $(window);
|
||||
if(!hasScrollbar()) {
|
||||
loadNextPage();
|
||||
}
|
||||
win.scroll(function() {
|
||||
$("#pagination button").css("visibility", "hidden");
|
||||
if ($(document).height() - win.height() - win.scrollTop() < 150) {
|
||||
loadNextPage();
|
||||
}
|
||||
});
|
||||
});
|
@ -0,0 +1,50 @@
|
||||
/**
|
||||
* @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
|
||||
*/
|
||||
|
||||
$(document).ready(function() {
|
||||
function hasScrollbar() {
|
||||
var root = document.compatMode=='BackCompat'? document.body : document.documentElement;
|
||||
return root.scrollHeight>root.clientHeight;
|
||||
}
|
||||
|
||||
function loadNextPage() {
|
||||
var formData = $('#pagination form:last').serialize();
|
||||
if (formData) {
|
||||
$('#pagination').html('<div class="loading-spinner"></div>');
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: $('#search_form').prop('action'),
|
||||
data: formData,
|
||||
dataType: 'html',
|
||||
success: function(data) {
|
||||
var body = $(data);
|
||||
$('#pagination').remove();
|
||||
$('#main_results').append('<hr/>');
|
||||
$('#main_results').append(body.find('.result'));
|
||||
$('#main_results').append(body.find('#pagination'));
|
||||
if(!hasScrollbar()) {
|
||||
loadNextPage();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (searxng.infinite_scroll) {
|
||||
var win = $(window);
|
||||
$("html").addClass('infinite_scroll');
|
||||
if(!hasScrollbar()) {
|
||||
loadNextPage();
|
||||
}
|
||||
win.on('scroll', function() {
|
||||
if ($(document).height() - win.height() - win.scrollTop() < 150) {
|
||||
loadNextPage();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
@ -0,0 +1,88 @@
|
||||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
/* global searxng */
|
||||
|
||||
searxng.ready(function () {
|
||||
'use strict';
|
||||
|
||||
searxng.infinite_scroll_supported = (
|
||||
'IntersectionObserver' in window &&
|
||||
'IntersectionObserverEntry' in window &&
|
||||
'intersectionRatio' in window.IntersectionObserverEntry.prototype);
|
||||
|
||||
if (searxng.endpoint !== 'results') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!searxng.infinite_scroll_supported) {
|
||||
console.log('IntersectionObserver not supported');
|
||||
return;
|
||||
}
|
||||
|
||||
let d = document;
|
||||
var onlyImages = d.getElementById('results').classList.contains('only_template_images');
|
||||
|
||||
function newLoadSpinner () {
|
||||
var loader = d.createElement('div');
|
||||
loader.classList.add('loader');
|
||||
return loader;
|
||||
}
|
||||
|
||||
function replaceChildrenWith (element, children) {
|
||||
element.textContent = '';
|
||||
children.forEach(child => element.appendChild(child));
|
||||
}
|
||||
|
||||
function loadNextPage (callback) {
|
||||
var form = d.querySelector('#pagination form.next_page');
|
||||
if (!form) {
|
||||
return
|
||||
}
|
||||
replaceChildrenWith(d.querySelector('#pagination'), [ newLoadSpinner() ]);
|
||||
var formData = new FormData(form);
|
||||
searxng.http('POST', d.querySelector('#search').getAttribute('action'), formData).then(
|
||||
function (response) {
|
||||
var nextPageDoc = new DOMParser().parseFromString(response, 'text/html');
|
||||
var articleList = nextPageDoc.querySelectorAll('#urls article');
|
||||
var paginationElement = nextPageDoc.querySelector('#pagination');
|
||||
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);
|
||||
});
|
||||
if (paginationElement) {
|
||||
d.querySelector('#results').appendChild(paginationElement);
|
||||
callback();
|
||||
}
|
||||
}
|
||||
).catch(
|
||||
function (err) {
|
||||
console.log(err);
|
||||
var e = d.createElement('div');
|
||||
e.textContent = searxng.translations.error_loading_next_page;
|
||||
e.classList.add('dialog-error');
|
||||
e.setAttribute('role', 'alert');
|
||||
replaceChildrenWith(d.querySelector('#pagination'), [ e ]);
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
if (searxng.infinite_scroll && searxng.infinite_scroll_supported) {
|
||||
const intersectionObserveOptions = {
|
||||
rootMargin: "20rem",
|
||||
};
|
||||
const observedSelector = 'article.result:last-child';
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
const paginationEntry = entries[0];
|
||||
if (paginationEntry.isIntersecting) {
|
||||
observer.unobserve(paginationEntry.target);
|
||||
loadNextPage(() => observer.observe(d.querySelector(observedSelector), intersectionObserveOptions));
|
||||
}
|
||||
});
|
||||
observer.observe(d.querySelector(observedSelector), intersectionObserveOptions);
|
||||
}
|
||||
|
||||
});
|
Loading…
Reference in New Issue