diff --git a/public/s/js/f0ck.js b/public/s/js/f0ck.js index 8a71e07..7bbfdee 100644 --- a/public/s/js/f0ck.js +++ b/public/s/js/f0ck.js @@ -798,6 +798,53 @@ window.requestAnimFrame = (function () { return path.replace(/\/$/, '') || '/'; }; + // Track currently visible page for URL updates + infiniteState.visiblePage = infiniteState.currentPage; + + // Helper to find the active page marker + const updateUrlAndPagination = () => { + const markers = [...document.querySelectorAll('[data-page-start]')]; + if (!markers.length) return; + + const triggerPoint = window.innerHeight / 3; + let activeMarker = markers[0]; + + // Find the last marker that has passed the trigger point (is visible or above) + for (const marker of markers) { + const rect = marker.getBoundingClientRect(); + if (rect.top < triggerPoint) { + activeMarker = marker; + } else { + break; + } + } + + const newPage = parseInt(activeMarker.dataset.pageStart); + if (newPage !== infiniteState.visiblePage) { + // Update URL + infiniteState.visiblePage = newPage; + history.replaceState({}, '', buildUrl(newPage)); + + // Update Pagination + const paginationHtml = activeMarker.dataset.paginationHtml; + if (paginationHtml) { + document.querySelectorAll('.pagination-wrapper').forEach(el => el.innerHTML = paginationHtml); + } + } + }; + + // Initialize marker for the first page + const initFirstPageMarker = () => { + const firstItem = postsContainer.querySelector('a'); + const pag = document.querySelector('.pagination-wrapper'); + if (firstItem && pag && !firstItem.dataset.pageStart) { + firstItem.dataset.pageStart = infiniteState.currentPage; + firstItem.dataset.paginationHtml = pag.innerHTML; + } + }; + initFirstPageMarker(); + + // Fetch and append more items const loadMoreItems = async () => { if (infiniteState.loading || !infiniteState.hasMore) return; @@ -823,24 +870,27 @@ window.requestAnimFrame = (function () { const data = await response.json(); if (data.success && data.html) { - // Append new thumbnails const currentPosts = document.querySelector("div.posts"); - if (currentPosts) currentPosts.insertAdjacentHTML('beforeend', data.html); + if (currentPosts) { + // Create elements from HTML string + const temp = document.createElement('div'); + temp.innerHTML = data.html; + const newItems = [...temp.children]; - // Update state + if (newItems.length > 0) { + // Mark the first item of the new page + newItems[0].dataset.pageStart = data.currentPage; + newItems[0].dataset.paginationHtml = data.pagination; + + // Append all new items + newItems.forEach(item => currentPosts.appendChild(item)); + } + } + + // Update state (last loaded page) infiniteState.currentPage = data.currentPage; infiniteState.hasMore = data.hasMore; - // Update URL - history.replaceState({}, '', buildUrl(infiniteState.currentPage)); - - // Update pagination display if exists - const paginationLinks = document.querySelectorAll('.pagination .pagination-int-item, .pagination .btn'); - paginationLinks.forEach(el => { - if (el.textContent.trim() == infiniteState.currentPage) { - el.classList.add('disabled'); - } - }); } else { infiniteState.hasMore = false; } @@ -862,8 +912,11 @@ window.requestAnimFrame = (function () { const currentContainer = document.querySelector("div.posts"); // Only run if .posts exists (index/grid view) if (!currentContainer) return; + if (currentContainer.classList.contains('no-infinite-scroll')) return; // Double check if (!document.querySelector('#main')) return; + updateUrlAndPagination(); + const scrollPosition = window.innerHeight + window.scrollY; const pageHeight = document.querySelector('#main').offsetHeight; const distanceFromBottom = pageHeight - scrollPosition;