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

improved dynamic scrolling + fixed bug for dynamic scrolling not working when not enough results

Browse source
This commit is contained in:
partisan 2024-08-30 17:22:07 +02:00
parent a5221039f4
commit 488c55dd92
3 changed files with 100 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

58
templates/text.html
View file

@ -96,66 +96,12 @@
{{ end }}
</form>
</div>
<div id="template-data" data-page="{{ .Page }}" data-query="{{ .Query }}" data-type="text"></div>
<script defer src="/static/js/dynamicscrolling.js"></script>
<script defer src="/static/js/autocomplete.js"></script>
<script>
// Check if JavaScript is enabled and modify the DOM accordingly
document.getElementById('content').classList.remove('js-enabled');
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
if (document.getElementById('prev-next')) {
document.getElementById('prev-next').style.display = 'none';
let page = {{ .Page }};
const query = "{{ .Query }}";
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=text&p=${newPage}`)
.then(response => 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.";
if (newResults.includes(noResultsMessage)) {
document.getElementById('results').innerHTML += "<div class='no-more-results'>Looks like this is the end of results.</div>";
hasMoreResults = false;
} else {
document.getElementById('results').innerHTML += newResults;
page = newPage;
}
loading = false;
})
.catch(error => {
clearTimeout(loadingTimeout);
loadingIndicator.style.display = 'none';
console.error('Error loading results:', error);
loading = false;
});
}
window.addEventListener('scroll', () => {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
loadResults(page + 1);
}
});
}
});
</script>
</body>
</html>