`;
recentGrid.parentElement.appendChild(loader);
}
function hideLoader() {
const loader = document.getElementById('scroll-loader');
if (loader) loader.remove();
}
// ── APPEND POSTS (adds cards without clearing grid) ──────────
function appendPosts(start, end) {
const posts = window.currentPosts;
posts.slice(start, end).forEach(post => {
const filteredTags = post.tags
.filter(t => t !== "Featured")
.slice(0, 3)
.map(t => `
${t}`)
.join('');
const card = document.createElement('div');
card.className = 'next-six-item';
card.setAttribute('data-url', post.url);
card.innerHTML = `
${post.image ? `
` : ''}
${filteredTags}
${post.title}
${post.preview}
`;
recentGrid.appendChild(card);
});
}
// ── STOP INFINITE SCROLL ──────────────────────────────────────
function stopInfiniteScroll() {
if (observer) {
observer.disconnect();
observer = null;
}
const sentinel = document.getElementById('scroll-sentinel');
if (sentinel) sentinel.remove();
hideLoader();
}
// ── START INFINITE SCROLL ─────────────────────────────────────
function startInfiniteScroll() {
const sentinel = document.createElement('div');
sentinel.id = 'scroll-sentinel';
recentGrid.parentElement.appendChild(sentinel);
observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
const posts = window.currentPosts;
if (window.visibleCount >= posts.length) {
observer.disconnect();
sentinel.remove();
return;
}
// Pause observer while loading
observer.unobserve(sentinel);
showLoader();
setTimeout(function() {
const start = window.visibleCount;
window.visibleCount += 6;
appendPosts(start, window.visibleCount);
hideLoader();
if (window.visibleCount >= posts.length) {
observer.disconnect();
sentinel.remove();
} else {
observer.observe(sentinel);
}
}, 1000);
}
});
}, { rootMargin: '200px' });
observer.observe(sentinel);
}
// ── RENDER POSTS (resets grid and shows first 6) ─────────────
window.renderPosts = function(posts) {
stopInfiniteScroll();
const sortedPosts = [...posts].sort((a, b) => b.publishTimestamp - a.publishTimestamp);
window.currentPosts = sortedPosts;
window.visibleCount = 6;
recentGrid.innerHTML = '';
appendPosts(0, 6);
document.querySelector('.see-more-wrap').style.display = sortedPosts.length > 6 ? 'flex' : 'none';
};
// ── SEE MORE (hides btn, starts infinite scroll) ─────────────
document.querySelector('.see-more-btn').addEventListener('click', function () {
document.querySelector('.see-more-wrap').style.display = 'none';
startInfiniteScroll();
});
// ── CARD CLICK ────────────────────────────────────────────────
document.addEventListener('click', function(e) {
const card = e.target.closest('.next-six-item');
const isTagClick = e.target.closest('.post-tag-link');
const isAuthorClick = e.target.closest('.author-link');
if (card && !isTagClick && !isAuthorClick) {
const postUrl = card.getAttribute('data-url');
if (postUrl) window.location.href = postUrl;
}
});
// ── FILTER / TAG CLICKS ───────────────────────────────────────
document.addEventListener('click', function(e) {
const filter = document.querySelector('.filter');
// Tag link inside a post card
const tagLink = e.target.closest('.post-tag-link');
if (tagLink) {
e.preventDefault();
const tagName = tagLink.dataset.tag;
filter.querySelectorAll('p').forEach(p => p.classList.remove('active'));
filter.querySelectorAll('.dynamic-tag').forEach(p => p.remove());
let existingPill = filter.querySelector(`p[data-tag-name="${tagName}"]`);
if (!existingPill) {
const dynamicTag = document.createElement('p');
dynamicTag.className = 'dynamic-tag';
dynamicTag.dataset.tagName = tagName;
dynamicTag.innerHTML = `${tagName}
`;
filter.appendChild(dynamicTag);
dynamicTag.classList.add('active');
} else {
existingPill.classList.add('active');
}
document.querySelector('.recent-heading').textContent = tagName;
renderPosts(window.allPostsFull.filter(p => p.tags.includes(tagName)));
return;
}
// Close button on dynamic tag
const closeBtn = e.target.closest('.filter p .close');
if (closeBtn) {
e.stopPropagation();
const tagPill = closeBtn.closest('p');
if (tagPill.classList.contains('dynamic-tag')) tagPill.remove();
filter.querySelectorAll('p').forEach(p => p.classList.remove('active'));
filter.querySelector('.filter-all-tag').classList.add('active');
document.querySelector('.recent-heading').textContent = 'Recent Articles';
renderPosts(allPosts);
return;
}
// Filter pill click
const pill = e.target.closest('.filter p');
if (pill) {
filter.querySelectorAll('p').forEach(p => p.classList.remove('active'));
pill.classList.add('active');
const tagName = pill.dataset.tagName;
document.querySelector('.recent-heading').textContent = tagName === 'All' ? 'Recent Articles' : tagName;
renderPosts(tagName === 'All' ? allPosts : allPosts.filter(post => post.tags.includes(tagName)));
return;
}
});
// ── INIT ──────────────────────────────────────────────────────
if (allTag) allTag.classList.add('active');
renderPosts(allPosts);
})();