From 18fca7dce210883fee5a59a0ec72a476ba3a2db2 Mon Sep 17 00:00:00 2001 From: partisan Date: Fri, 30 Aug 2024 17:22:07 +0200 Subject: [PATCH] improved dynamic scrolling + fixed bug for dynamic scrolling not working when not enough results --- static/js/dynamicscrolling.js | 96 +++++++++++++++++++++++++++++++++++ templates/images.html | 62 +--------------------- templates/text.html | 58 +-------------------- 3 files changed, 100 insertions(+), 116 deletions(-) create mode 100644 static/js/dynamicscrolling.js diff --git a/static/js/dynamicscrolling.js b/static/js/dynamicscrolling.js new file mode 100644 index 0000000..a3975eb --- /dev/null +++ b/static/js/dynamicscrolling.js @@ -0,0 +1,96 @@ +document.addEventListener("DOMContentLoaded", function() { + const templateData = document.getElementById('template-data'); + let page = parseInt(templateData.getAttribute('data-page')) || 1; + const query = templateData.getAttribute('data-query') || ''; + let searchType = templateData.getAttribute('data-type') || 'text'; // Default to 'text' if not provided + let loading = false; + let hasMoreResults = true; + const loadingIndicator = document.getElementById('message-bottom-left'); + let loadingTimeout; + + function loadResults(newPage) { + if (loading || !hasMoreResults) return; + loading = true; + + // Show loading indicator if taking more than 100ms + loadingTimeout = setTimeout(() => { + loadingIndicator.style.display = 'flex'; + }, 100); + + fetch(`/search?q=${encodeURIComponent(query)}&t=${encodeURIComponent(searchType)}&p=${newPage}`) + .then(response => { + if (!response.ok) { + throw new Error('Network response was not ok'); + } + return response.text(); + }) + .then(data => { + clearTimeout(loadingTimeout); + loadingIndicator.style.display = 'none'; + const parser = new DOMParser(); + const doc = parser.parseFromString(data, 'text/html'); + const newResults = 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"; + + if (newResults.includes(noResultsMessage) || newResults.includes(endOfResultsMessage) || newResults.includes(serverError)) { + document.getElementById('results').innerHTML += newResults; + hasMoreResults = false; + } else { + document.getElementById('results').innerHTML += newResults; + page = newPage; + // Automatically load more results if content height is less than window height + checkIfMoreResultsNeeded(); + } + loading = false; + }) + .catch(error => { + clearTimeout(loadingTimeout); + loadingIndicator.style.display = 'none'; + console.error('Error loading results:', error); + hasMoreResults = false; + loading = false; + }); + } + + function checkIfMoreResultsNeeded() { + if (document.body.scrollHeight <= window.innerHeight && hasMoreResults) { + loadResults(page + 1); + } + } + + window.addEventListener('scroll', () => { + if (window.innerHeight + window.scrollY >= document.body.offsetHeight) { + loadResults(page + 1); + } + }); + + // Ensure the correct search button has the active class at load + const buttons = document.querySelectorAll('.search-container-results-btn button'); + if (buttons.length === 0) { + console.error("No search buttons found"); + } else { + buttons.forEach(btn => { + btn.addEventListener('click', function() { + const activeElement = document.querySelector('.search-container-results-btn .search-active'); + if (activeElement) { + activeElement.classList.remove('search-active'); + } + this.classList.add('search-active'); + // Update search type when button is clicked + searchType = this.getAttribute('value'); + }); + }); + + // Ensure one button is active on page load + const initialActiveElement = document.querySelector('.search-container-results-btn .search-active'); + if (!initialActiveElement) { + buttons[0].classList.add('search-active'); + searchType = buttons[0].getAttribute('value'); // Set default search type + } + } + + // Check if more results are needed right after the initial content is loaded + checkIfMoreResultsNeeded(); +}); diff --git a/templates/images.html b/templates/images.html index 93b5e0a..ccf08ae 100755 --- a/templates/images.html +++ b/templates/images.html @@ -108,70 +108,12 @@
Searching for new results...
+
+ - diff --git a/templates/text.html b/templates/text.html index 809afeb..21fdcd8 100755 --- a/templates/text.html +++ b/templates/text.html @@ -96,66 +96,12 @@ {{ end }} +
+ -