function scrollToQueryId(queryId){
const targetElement=document.getElementById(`uagb-block-queryid-${queryId}`);
if(targetElement){
const rect=targetElement.getBoundingClientRect();
const adminBar=document.querySelector('#wpadminbar');
const adminBarOffSetHeight=adminBar?.offsetHeight||0;
const scrollTop=window?.pageYOffset||document?.documentElement?.scrollTop;
const targetOffset=(rect?.top + scrollTop) - adminBarOffSetHeight;
window.scrollTo({
top: targetOffset,
behavior: 'smooth'
});
}}
function findAncestorWithClass(element, className){
while(element&&! element.classList.contains(className) ){
element=element.parentNode;
}
return element;
}
document.addEventListener('DOMContentLoaded', function (){
function debounce(func, wait){
let timeout;
return function executedFunction(...args){
const context=this;
const later=()=> {
timeout=null;
func.apply(context, args);
};
clearTimeout(timeout);
timeout=setTimeout(later, wait);
};};
function storeActiveFilter(loopBuilder, filterData, filterType){
if(loopBuilder&&filterData){
loopBuilder.setAttribute(`data-active-filter-${filterType}`, filterData);
}}
function getActiveFilter(loopBuilder, filterType){
return loopBuilder?.getAttribute(`data-active-filter-${filterType}`)||null;
}
async function updateContent(event, paged=null, buttonFilter=null, loopParentContainer){
try {
const loopBuilder=loopParentContainer;
const formData=new FormData();
const search=loopBuilder?.querySelector('.uagb-loop-search' )?.value||'';
const sorting=loopBuilder?.querySelector('.uagb-loop-sort' )?.value||'';
const categorySelect=loopBuilder?.querySelector('.uagb-loop-category');
if(categorySelect?.value){
formData.append('category', categorySelect.value);
storeActiveFilter(loopBuilder, categorySelect.value, 'select');
}else{
const storedSelectFilter=getActiveFilter(loopBuilder, 'select');
if(storedSelectFilter){
formData.append('category', storedSelectFilter);
}}
const checkBoxValues=loopBuilder?.querySelectorAll('.uagb-cat-checkbox');
const checkedValues=[];
checkBoxValues?.forEach(checkBox=> {
if(checkBox.checked&&checkBox.getAttribute('data-uagb-block-query-id')===event.target.dataset.uagbBlockQueryId){
checkedValues.push(checkBox.value);
}});
let activeButtonData=getActiveFilter(loopBuilder, 'button');
if(! activeButtonData&&buttonFilter?.type){
activeButtonData=buttonFilter.type;
storeActiveFilter(loopBuilder, activeButtonData, 'button');
}
formData.delete('buttonFilter');
formData.delete('checkbox');
formData.delete('category');
loopBuilder.removeAttribute('data-active-filter-checkbox');
loopBuilder.removeAttribute('data-active-filter-select');
loopBuilder.removeAttribute('data-active-filter-button');
if(event.target.classList.contains('uagb-cat-checkbox') ){
if(categorySelect) categorySelect.value='';
formData.append('checkbox', checkedValues);
storeActiveFilter(loopBuilder, JSON.stringify(checkedValues), 'checkbox');
}else if(event.target.classList.contains('uagb-loop-category') ){
checkBoxValues?.forEach(checkBox=> {
if(checkBox.getAttribute('data-uagb-block-query-id')===event.target.dataset.uagbBlockQueryId){
checkBox.checked=false;
}});
formData.append('category', categorySelect.value);
storeActiveFilter(loopBuilder, categorySelect.value, 'select');
}else if(buttonFilter?.type){
if(categorySelect) categorySelect.value='';
checkBoxValues?.forEach(checkBox=> {
if(checkBox.getAttribute('data-uagb-block-query-id')===event.target.dataset.uagbBlockQueryId){
checkBox.checked=false;
}});
formData.append('buttonFilter', buttonFilter.type);
storeActiveFilter(loopBuilder, buttonFilter.type, 'button');
}
if(search){
formData.append('search', search);
}
if(sorting){
formData.append('sorting', sorting);
}
if(paged){
formData.append('paged', paged);
}
let queryId=null;
if(buttonFilter?.type==='all'){
const el=document.querySelector('[data-query-id]');
if(el){
queryId=el.getAttribute('data-query-id');
}else{
queryId=0;
}}else{
queryId=event.target?.dataset?.uagbBlockQueryId ||
event.target?.parentElement?.dataset?.uagbBlockQueryId ||
event?.dataset?.uagbBlockQueryId ||
event.target.closest('a' )?.getAttribute('data-uagb-block-query-id')||0;
}
scrollToQueryId(queryId);
formData.append('queryId', queryId);
formData.append('block_id', loopBuilder?.getAttribute('data-block_id') );
formData.append('action', 'uagb_update_loop_builder_content');
formData.append('postId', uagb_loop_builder.post_id);
formData.append('postType', uagb_loop_builder.post_type);
formData.append('security', uagb_loop_builder.nonce);
const formDataObj={};
formData.forEach(( value, key)=> {
formDataObj[key]=value;
});
const output=await getUpdatedLoopWrapperContent(formData);
if(output?.content?.wrapper){
const loopElement=loopBuilder?.querySelector('#uagb-block-queryid-' + queryId);
if(loopElement){
loopElement.innerHTML=output.content.wrapper;
}}
if(output?.content?.pagination){
const paginationElements=loopBuilder?.querySelectorAll('#uagb-block-pagination-queryid-' + queryId);
paginationElements?.forEach(element=> {
element.innerHTML=output.content.pagination;
});
}} catch(error){
throw error;
}}
function handleInput(event){
const loopParentContainer=this.closest('.wp-block-uagb-loop-builder');
const searchInputs=loopParentContainer.querySelectorAll('.uagb-loop-search');
searchInputs.forEach(searchInput=> {
if(searchInput.getAttribute('data-uagb-block-query-id')===event.target.dataset.uagbBlockQueryId){
searchInput.value=event.target.value;
}});
updateContent(event, null, null, loopParentContainer);
}
function handleCheckBoxVal(event){
const loopParentContainer=this.closest('.wp-block-uagb-loop-builder');
const checkBoxValues=loopParentContainer.querySelectorAll('.uagb-cat-checkbox');
const checkedValues=[];
checkBoxValues.forEach(checkBoxVal=> {
const isChecked=checkBoxVal.checked;
if(isChecked&&checkBoxVal.getAttribute('data-uagb-block-query-id')===event.target.dataset.uagbBlockQueryId){
checkedValues.push(checkBoxVal.value);
}});
updateContent(event, null, null, loopParentContainer);
}
function handleSelect(event){
const loopParentContainer=this.closest('.wp-block-uagb-loop-builder');
const sortSelects=loopParentContainer.querySelectorAll('.uagb-loop-sort');
sortSelects.forEach(sortSelect=> {
if(sortSelect.getAttribute('data-uagb-block-query-id')===event.target.dataset.uagbBlockQueryId){
sortSelect.value=event.target.value;
}});
updateContent(event, null, null, loopParentContainer);
}
function handleCatSelect(event){
const loopParentContainer=this.closest('.wp-block-uagb-loop-builder');
const categorySelects=loopParentContainer.querySelectorAll('.uagb-loop-category');
categorySelects.forEach(categorySelect=> {
if(categorySelect.getAttribute('data-uagb-block-query-id')===event.target.dataset.uagbBlockQueryId){
categorySelect.value=event.target.value;
}});
if(!event.target.value||event.target.value===''||event.target.value==='all'){
loopParentContainer.removeAttribute('data-active-filter-select');
}
updateContent(event, null, null, loopParentContainer);
}
function resetValues(container, selector, queryId, resetCallback){
const elements=container.querySelectorAll(selector);
elements.forEach(element=> {
const elementQueryId=element.dataset.uagbBlockQueryId;
if(elementQueryId===queryId){
resetCallback(element);
}});
}
function handleReset(event){
const loopParentContainer=this.closest('.wp-block-uagb-loop-builder');
let queryId=event.target.parentElement.dataset.uagbBlockQueryId;
if(event.target.tagName.toLowerCase()==='a'){
queryId=event.target.dataset.uagbBlockQueryId;
}else if(event.target.tagName.toLowerCase()==='svg'||event.target.tagName.toLowerCase()==='path'){
queryId=event.target.closest('a' )?.getAttribute('data-uagb-block-query-id');
}
const loopBuilder=findAncestorWithClass(event.target.parentNode, 'wp-block-uagb-loop-builder');
resetValues(loopBuilder, '.uagb-loop-search', queryId, element=> {
element.value='';
});
resetValues(loopBuilder, '.uagb-loop-sort', queryId, element=> {
element.value='';
});
resetValues(loopBuilder, '.uagb-loop-category', queryId, element=> {
element.value='';
});
resetValues(loopBuilder, '.uagb-cat-checkbox', queryId, element=> {
element.checked=false;
});
if(loopBuilder){
loopBuilder.removeAttribute('data-active-filter-select');
loopBuilder.removeAttribute('data-active-filter-checkbox');
loopBuilder.removeAttribute('data-active-filter-button');
}
updateContent(event, null, null, loopParentContainer);
}
const resetButtons=document.querySelectorAll('.uagb-loop-reset');
const searchInputs=document.querySelectorAll('.uagb-loop-search');
searchInputs.forEach(searchInput=> {
const debouncedHandleInput=debounce(handleInput, 250);
searchInput.addEventListener('input', debouncedHandleInput);
});
const sortSelects=document.querySelectorAll('.uagb-loop-sort');
sortSelects.forEach(sortSelect=> {
const debouncedHandleInput=debounce(handleSelect, 250);
sortSelect.addEventListener('change', debouncedHandleInput);
});
const categorySelects=document.querySelectorAll('.uagb-loop-category');
categorySelects.forEach(categorySelect=> {
const debouncedHandleInput=debounce(handleCatSelect, 250);
categorySelect.addEventListener('change', debouncedHandleInput);
});
const checkBoxValues=document.querySelectorAll('.uagb-cat-checkbox');
checkBoxValues.forEach(checkBoxVal=> {
const debouncedHandleInput=debounce(handleCheckBoxVal, 250);
checkBoxVal.addEventListener('click', debouncedHandleInput);
});
resetButtons.forEach(resetButton=> {
const debouncedHandleReset=debounce(handleReset, 250);
resetButton.addEventListener('click', debouncedHandleReset);
});
const oldPaginations=document.querySelectorAll('.wp-block-uagb-loop-builder > :not(.uagb-loop-pagination).wp-block-uagb-buttons');
oldPaginations?.forEach(function(container){
const parentContainer=document.createElement('div');
parentContainer.classList.add('uagb-loop-pagination');
const queryIdPAginationLink=container.querySelector('a').getAttribute('data-uagb-block-query-id');
parentContainer.id='uagb-block-pagination-queryid-'+queryIdPAginationLink;
parentContainer.innerHTML=container.outerHTML;
container.parentNode.insertBefore(parentContainer, container.nextSibling);
container.parentNode.removeChild(container);
});
const paginationContainer=document.querySelectorAll('.uagb-loop-pagination');
paginationContainer.forEach(pagination=> {
pagination.addEventListener('click', function(event){
event.preventDefault();
const loopParentContainer=this.closest('.wp-block-uagb-loop-builder');
const paged=event.target.dataset.uagbBlockQueryPaged ||
event.target.parentElement.dataset.uagbBlockQueryPaged ||
event?.target?.closest('a' )?.getAttribute('data-uagb-block-query-paged');
const activeButtonData=getActiveFilter(loopParentContainer, 'button');
const activeSelectData=getActiveFilter(loopParentContainer, 'select');
const activeCheckboxData=getActiveFilter(loopParentContainer, 'checkbox');
const formData=new FormData();
if(paged){
formData.append('paged', paged);
}
if(activeButtonData){
formData.append('buttonFilter', activeButtonData);
}else if(activeSelectData){
formData.append('category', activeSelectData);
}else if(activeCheckboxData){
formData.append('checkbox', activeCheckboxData);
}
formData.append('queryId', event.target.dataset.uagbBlockQueryId ||
event.target.parentElement.dataset.uagbBlockQueryId ||
event?.target?.closest('a' )?.getAttribute('data-uagb-block-query-id')||0);
formData.append('block_id', loopParentContainer?.getAttribute('data-block_id') );
formData.append('action', 'uagb_update_loop_builder_content');
formData.append('postId', uagb_loop_builder.post_id);
formData.append('postType', uagb_loop_builder.post_type);
formData.append('security', uagb_loop_builder.nonce);
const search=loopParentContainer?.querySelector('.uagb-loop-search' )?.value||'';
const sorting=loopParentContainer?.querySelector('.uagb-loop-sort' )?.value||'';
if(search){
formData.append('search', search);
}
if(sorting){
formData.append('sorting', sorting);
}
getUpdatedLoopWrapperContent(formData)
.then(output=> {
if(output?.content?.wrapper){
const loopElement=loopParentContainer?.querySelector('#uagb-block-queryid-' + formData.get('queryId') );
if(loopElement){
loopElement.innerHTML=output.content.wrapper;
}}
if(output?.content?.pagination){
const paginationElements=loopParentContainer?.querySelectorAll('#uagb-block-pagination-queryid-' + formData.get('queryId') );
paginationElements?.forEach(element=> {
element.innerHTML=output.content.pagination;
});
}})
.catch(error=> {
throw error;
});
});
});
const categoryButtonFilterContainer=document.querySelectorAll('.uagb-loop-category-inner a');
categoryButtonFilterContainer.forEach(( buttons)=> {
buttons.addEventListener('click', function(event){
event.preventDefault();
const loopParentContainer=this.closest('.wp-block-uagb-loop-builder');
let buttonData=null;
if(event.target.tagName.toLowerCase()==='a'){
buttonData=event.target.children[0].dataset.type;
}else if(event.target.tagName.toLowerCase()==='div'&&event.target.parentElement.tagName.toLowerCase()==='a'){
buttonData=event.target.dataset.type;
}
checkBoxValues?.forEach(checkBox=> {
checkBox.checked=false;
});
if(buttonData==='all'||buttonData===undefined){
loopParentContainer.removeAttribute('data-active-filter-button');
updateContent(event, null, { type: 'all' }, loopParentContainer);
}else if(buttonData){
storeActiveFilter(loopParentContainer, buttonData, 'button');
updateContent(event, null, { type: buttonData }, loopParentContainer);
}});
});
});
function getUpdatedLoopWrapperContent(data){
data.append('action', 'uagb_update_loop_builder_content');
data.append('postId', uagb_loop_builder?.post_id);
data.append('postType', uagb_loop_builder?.what_post_type);
data.append('security', uagb_loop_builder?.nonce)
return fetch(uagb_loop_builder?.ajax_url, {
method: 'POST',
credentials: 'same-origin',
body: data,
})
.then(response=> {
if(! response.ok){
throw new Error('Network response was not ok');
}
return response.json();
})
.then(output=> {
if(output.success){
return output.data;
}
throw new Error(output.data.message);
})
.catch(error=> {
throw error;
});
};