w0bm/f0bm
4
0
Fork 1
Code Pull Requests Activity

feat: Remove infinite scrolling from tags page and increase tags per page to 500.

Browse Source
This commit is contained in:
x
2026-01-24 19:52:41 +01:00
parent 89483df993
commit 9d4f47698c
2 changed files with 1 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/inc/routes/toptags.mjs
View File

@@ -1,7 +1,7 @@
import db from "../../inc/sql.mjs"; import db from "../../inc/sql.mjs";
import cfg from "../../inc/config.mjs"; import cfg from "../../inc/config.mjs";
const TAGS_PER_PAGE = 50; const TAGS_PER_PAGE = 500;
export default (router, tpl) => { export default (router, tpl) => {
// API endpoint for lazy loading tags // API endpoint for lazy loading tags

76
views/tags.html
View File

@@ -29,82 +29,6 @@
@endeach @endeach
@endif @endif
</div> </div>
<div id="tags-loader" style="text-align: center; padding: 20px; display: none;">
<span style="color: #888;">Loading more tags...</span>
</div>
<div id="tags-end" style="text-align: center; padding: 20px; display: none;">
<span style="color: #666;">No more tags</span>
</div> </div>
</div> </div>
</div>
<script>
(function () {
let page = 1;
let loading = false;
let hasMore = true;
const container = document.getElementById('tags-container');
const loader = document.getElementById('tags-loader');
const endMsg = document.getElementById('tags-end');
const escapeHtml = (str) => {
const div = document.createElement('div');
div.textContent = str;
return div.innerHTML;
};
const loadMore = async () => {
if (loading || !hasMore) return;
loading = true;
loader.style.display = 'block';
page++;
try {
const res = await fetch(`/api/tags?page=${page}`);
const data = await res.json();
if (!data.tags || data.tags.length === 0) {
hasMore = false;
loader.style.display = 'none';
endMsg.style.display = 'block';
return;
}
hasMore = data.hasMore;
data.tags.forEach(tag => {
const escapedTag = escapeHtml(tag.tag);
const html = `
<a href="/tag/${encodeURIComponent(tag.tag)}" class="tag-card">
<div class="tag-card-image">
<img src="/tag_image/${encodeURIComponent(tag.tag)}" loading="lazy" alt="${escapedTag}">
</div>
<div class="tag-card-content">
<span class="tag-name">#${escapedTag}</span>
<span class="tag-count">${tag.total_items} posts</span>
</div>
</a>
`;
container.insertAdjacentHTML('beforeend', html);
});
if (!hasMore) {
endMsg.style.display = 'block';
}
} catch (e) {
console.error('Failed to load tags:', e);
} finally {
loading = false;
loader.style.display = 'none';
}
};
// Infinite scroll
window.addEventListener('scroll', () => {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) {
loadMore();
}
});
})();
</script>
@include(snippets/footer) @include(snippets/footer)