document.addEventListener('DOMContentLoaded', function () {
let page = 1;
let maxPage = true;
let isLoading = false;
let currentFilterId = null;
const page_title = ajax_params.page_title;
const page_slug = ajax_params.page_slug;
const filterBtn = document.querySelectorAll('.subnav-content a');
const searchResult = document.querySelector('#search_result');
function loadPosts(reset = false) {
//console.log(reset + ' === ' +maxPage+ ' === ' +isLoading);
if (isLoading || (!maxPage && !reset)) return;
isLoading = true;
//console.log(reset + ' === ' +maxPage+ ' === ' +isLoading);
if (reset) {
page = 1;
maxPage = true;
searchResult.innerHTML = ''; // clear previous results
}
const loadingSpinner = document.createElement('div');
loadingSpinner.classList.add('loading-spinner');
loadingSpinner.innerHTML = `
`;
searchResult.insertAdjacentElement('afterend', loadingSpinner);
const formData = new FormData();
formData.append('action', 'get_data');
formData.append('paged', page);
formData.append('page_title', page_slug);
if (currentFilterId) {
formData.append('filter_id', currentFilterId); // pass the filter ID to backend
}
fetch(ajax_params.ajax_url, {
method: 'POST',
body: formData,
})
.then(response => response.text())
.then(posts => {
loadingSpinner.remove();
if (posts.trim() === '') {
loadingSpinner.remove();
searchResult.insertAdjacentHTML('afterend', `No more ${page_title}
`);
maxPage = false;
// console.log(currentFilterId + " currentFilterId 0");
} else {
loadingSpinner.remove();
searchResult.insertAdjacentHTML('beforeend', posts);
page++;
// console.log(currentFilterId + " currentFilterId 1");
}
isLoading = false;
})
.catch(error => {
console.error('Error:', error);
loadingSpinner.remove();
});
}
// Infinite scroll
window.addEventListener('scroll', function () {
const scrollTop = document.documentElement.scrollTop;
const windowHeight = window.innerHeight;
const docHeight = document.documentElement.scrollHeight;
if (docHeight - (scrollTop + windowHeight) {
button.addEventListener('click', function () {
document.querySelectorAll('.subnav').forEach(btn => btn.classList.remove('active'));
document.querySelectorAll('.not-found').forEach(function(notfound) {
notfound.remove();
});
this.classList.add('active');
});
});
// Attach filter button click handlers ONCE
filterBtn.forEach(function(flbtn) {
flbtn.addEventListener('click', function (e) {
e.preventDefault();
// Remove 'selected' from siblings
const siblings = Array.from(flbtn.parentNode.children).filter(child => child !== flbtn);
siblings.forEach(sibling => sibling.classList.remove('selected'));
// Add 'selected' to clicked
flbtn.classList.add('selected');
// Update filter and load
const id = flbtn.getAttribute('id');
currentFilterId = id;
loadPosts(true);
});
});
document.addEventListener('click', function (e) {
const clickedInsideSubnav = e.target.closest('.subnav');
const clickedSubnavLink = e.target.closest('.subnav-content a');
// If clicked outside any .subnav OR clicked on a subnav link
if (!clickedInsideSubnav || clickedSubnavLink) {
document.querySelectorAll('.subnav.active').forEach(subnav => {
subnav.classList.remove('active');
document.querySelector('.post-filter').classList.remove('show');
});
}
});
});