mirror of https://github.com/searxng/searxng
Merge pull request #916 from dalf/pref_infinite_scroll2
Convert the infinite_scroll plugin as a preference (second version)pull/917/head
commit
8230603f48
@ -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();
|
||||
}
|
||||
});
|
||||
});
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -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();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -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