Spitfire/Search
Spitfire/Search
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Fixed inconsistent handling of "No results found" and "End of results" messages
Some checks failed
Run Integration Tests / test (push) Failing after 36s
Details

Browse source
This commit is contained in:
partisan 2025-06-16 10:11:05 +02:00
parent 47f197cf15
commit 70abf0a2bd
13 changed files with 775 additions and 573 deletions
Download patch file Download diff file Expand all files Collapse all files

57
static/js/dynamicscrolling.js
View file

@ -1,7 +1,7 @@
/*
This script is responsible for fetching new results on the same page when the user scrolls to the bottom of the page.
*/
document.addEventListener("DOMContentLoaded", function() {
document.addEventListener("DOMContentLoaded", function () {
const templateData = document.getElementById('template-data');
let page = parseInt(templateData.getAttribute('data-page')) || 1;
const query = templateData.getAttribute('data-query') || '';
@ -14,56 +14,45 @@ document.addEventListener("DOMContentLoaded", function() {
function showLoadingMessage() {
loadingIndicator.classList.add('visible');
}
function hideLoadingMessage() {
loadingIndicator.classList.remove('visible');
}
function loadResults(newPage) {
if (loading || !hasMoreResults) return;
loading = true;
if (loading || !hasMoreResults || hasEndOrNoResultsMessage()) return;
// Show loading indicator if taking more than 150ms
loadingTimeout = setTimeout(() => {
showLoadingMessage()
}, 150);
loading = true;
loadingTimeout = setTimeout(() => showLoadingMessage(), 150);
fetch(`/search?q=${encodeURIComponent(query)}&t=${encodeURIComponent(searchType)}&p=${newPage}`)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
if (!response.ok) throw new Error('Network response was not ok');
return response.text();
})
.then(data => {
clearTimeout(loadingTimeout);
hideLoadingMessage()
hideLoadingMessage();
const parser = new DOMParser();
const doc = parser.parseFromString(data, 'text/html');
const newResultsHTML = doc.getElementById('results').innerHTML;
const noResultsMessage = `No results found for '${query}'. Try different keywords.`;
const endOfResultsMessage = "Looks like this is the end of results.";
const serverError = "Internal Server Error";
const newResults = doc.querySelectorAll('#results > *');
const resultsContainer = document.getElementById('results');
const tempDiv = document.createElement('div');
tempDiv.innerHTML = newResultsHTML;
while (tempDiv.firstChild) {
resultsContainer.appendChild(tempDiv.firstChild);
if (newResults.length === 0) {
hasMoreResults = false;
loading = false;
return;
}
if (newResultsHTML.includes(noResultsMessage) || newResultsHTML.includes(endOfResultsMessage) || newResultsHTML.includes(serverError)) {
hasMoreResults = false;
} else {
page = newPage;
// Automatically load more results if content height is less than window height
checkIfMoreResultsNeeded();
}
newResults.forEach(el => resultsContainer.appendChild(el));
page = newPage;
checkIfMoreResultsNeeded();
loading = false;
})
.catch(error => {
clearTimeout(loadingTimeout);
hideLoadingMessage()
hideLoadingMessage();
console.error('Error loading results:', error);
hasMoreResults = false;
loading = false;
@ -71,11 +60,17 @@ document.addEventListener("DOMContentLoaded", function() {
}
function checkIfMoreResultsNeeded() {
if (document.body.scrollHeight <= window.innerHeight && hasMoreResults) {
if (!hasMoreResults || hasEndOrNoResultsMessage()) return;
if (document.body.scrollHeight <= window.innerHeight) {
loadResults(page + 1);
}
}
function hasEndOrNoResultsMessage() {
return !!document.querySelector('.no-results-found');
}
window.addEventListener('scroll', () => {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
loadResults(page + 1);
@ -88,7 +83,7 @@ document.addEventListener("DOMContentLoaded", function() {
console.error("No search buttons found");
} else {
buttons.forEach(btn => {
btn.addEventListener('click', function() {
btn.addEventListener('click', function () {
const activeElement = document.querySelector('.search-container-results-btn .search-active');
if (activeElement) {
activeElement.classList.remove('search-active');