jQuery(function($){
const holder=$('.wd-blog-holder').first();
if(!holder.length) return;
const filter=$('.znd-filter').first();
if(!filter.length) return;
const select=$('.znd-filter-select');
const defaults={
posts: holder.html(),
paged: holder.data('paged')||1,
footer: holder.siblings('.wd-loop-footer').first(),
footerDetached: false,
loadMoreLabel: 'Load more posts',
loadMoreLoading: 'Loading...',
allCat: 'all',
parentCat: parseInt(filter.data('current-cat'), 10)||0
};
if(select.length){
select.val(defaults.allCat);
}
const pageLoader=$('<div class="znd-page-loader" aria-hidden="true"></div>');
holder.prepend(pageLoader);
if(defaults.footer.length){
const label=defaults.footer.find('.load-more-label').text();
const loading=defaults.footer.find('.load-more-loading').text();
if(label) defaults.loadMoreLabel=label;
if(loading) defaults.loadMoreLoading=loading;
}
const defaultHasMore=defaults.footer.find('.wd-blog-load-more').length > 0;
let isLoading=false;
function detachDefaultFooter(){
if(defaults.footer.length&&!defaults.footerDetached){
defaults.footer.detach();
defaults.footerDetached=true;
}}
function removeFilterFooter(){
holder.siblings('.wd-loop-footer.znd-filter-footer').remove();
}
function toggleHolder(state){
holder.css('opacity', state ? '0.5':'1');
}
function toggleGlobalLoader(state){
pageLoader.toggleClass('znd-active', !!state);
}
function renderFilterFooter(cat, nextPage, hasMore){
removeFilterFooter();
if(!hasMore) return;
const footer=$('<div/>', {
'class': 'wd-loop-footer blog-footer znd-filter-footer'
});
const btn=$('<a/>', {
'href': '#',
'class': 'btn wd-load-more load-on-click znd-filter-load-more',
'data-cat': cat,
'data-next-page': nextPage
}).append($('<span/>', {
'class': 'load-more-label',
text: defaults.loadMoreLabel
})
);
const loader=$('<div/>', {
'class': 'btn wd-load-more wd-load-more-loader'
}).append($('<span/>', {
'class': 'load-more-loading',
text: defaults.loadMoreLoading
})
);
footer.append(btn).append(loader);
holder.after(footer);
}
function restoreDefaultState(){
holder.html(defaults.posts);
holder.prepend(pageLoader);
holder.data('paged', defaults.paged);
holder.data('znd-cat', defaults.allCat);
select.val(defaults.allCat);
$('.znd-filter button').removeClass('active');
$('.znd-filter button[data-cat="' + defaults.allCat + '"]').addClass('active');
removeFilterFooter();
detachDefaultFooter();
renderFilterFooter(defaults.allCat, (defaults.paged||1) + 1, defaultHasMore);
}
function requestPosts(cat, page, append, triggerBtn){
if(isLoading) return;
isLoading=true;
toggleGlobalLoader(true);
if(triggerBtn){
triggerBtn.addClass('loading');
}else{
toggleHolder(true);
}
$.ajax({
url: zndFilter.ajaxurl,
type: 'POST',
dataType: 'json',
data: {
action: 'znd_filter_posts',
cat: cat,
parent_cat: defaults.parentCat,
page: page
}}).done(function(response){
if(!response||!response.success||!response.data) return;
const data=response.data;
const html=data.items||'';
if(append){
holder.append(html);
}else{
pageLoader.detach();
holder.html(html);
holder.prepend(pageLoader);
}
holder.data('paged', data.page||1);
holder.data('znd-cat', cat);
renderFilterFooter(cat, (data.page||1) + 1, !!data.has_more);
}).always(function(){
isLoading=false;
toggleGlobalLoader(false);
if(triggerBtn){
triggerBtn.removeClass('loading');
}else{
toggleHolder(false);
}});
}
$(document).on('click', '.znd-filter button', function(e){
e.preventDefault();
const btn=$(this);
const cat=btn.data('cat');
$('.znd-filter button').removeClass('active');
btn.addClass('active');
select.val(cat);
if(cat===defaults.allCat){
restoreDefaultState();
return;
}
detachDefaultFooter();
removeFilterFooter();
requestPosts(cat, 1, false, null);
});
select.on('change', function(){
const value=$(this).val();
if(!value) return;
const relatedBtn=$('.znd-filter button[data-cat="' + value + '"]');
if(relatedBtn.length){
relatedBtn.trigger('click');
}else{
if(value===defaults.allCat){
restoreDefaultState();
}else{
detachDefaultFooter();
removeFilterFooter();
requestPosts(value, 1, false, null);
}}
});
$(document).on('click', '.znd-filter-load-more', function(e){
e.preventDefault();
const btn=$(this);
if(btn.hasClass('loading')) return;
const nextPage=parseInt(btn.data('next-page'), 10)||2;
const cat=btn.data('cat');
requestPosts(cat, nextPage, true, btn);
});
detachDefaultFooter();
renderFilterFooter(defaults.allCat, (defaults.paged||1) + 1, defaultHasMore);
});