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);
};};
async function updateContent(event, paged=null, buttonFilter=null, current=null, loopParentContainer){
try{
const loopBuilder=loopParentContainer;
const search=loopBuilder?.querySelector('.uagb-loop-search' )?.value;
const sorting=loopBuilder?.querySelector('.uagb-loop-sort' )?.value;
const category=current?.value;
const categoryButtonFilterContainer=loopBuilder?.querySelector('.uagb-loop-category-inner');
const formData=new FormData();
if(search){
formData.append('search', search);
}
if(sorting){
formData.append('sorting', sorting);
}
if(category){
formData.append('category', category);
}
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);
}});
if(checkedValues){
formData.append('checkbox', checkedValues);
}
if(paged){
formData.append('paged', paged);
}
if(buttonFilter){
formData.append('buttonFilter', JSON.stringify(buttonFilter.type) );
}
const queryId=event.target?.dataset?.uagbBlockQueryId||event.target?.parentElement?.dataset?.uagbBlockQueryId||categoryButtonFilterContainer?.dataset?.uagbBlockQueryId||event?.dataset?.uagbBlockQueryId||event.target.closest('a' )?.getAttribute('data-uagb-block-query-id');
scrollToQueryId(queryId);
formData.append('queryId', queryId);
formData.append('block_id', loopBuilder?.getAttribute('data-block_id') );
const output=await getUpdatedLoopWrapperContent(formData);
const loopElement=loopBuilder?.querySelector('#uagb-block-queryid-' + queryId);
if(loopElement&&output?.content?.wrapper){
loopElement.innerHTML=output.content.wrapper;
}
const loopPaginationContainers=loopBuilder?.querySelectorAll('#uagb-block-pagination-queryid-'+queryId);
if(loopPaginationContainers&&output?.content?.pagination){
loopPaginationContainers.innerHTML=output?.content?.pagination;
}
loopPaginationContainers?.forEach(loopPaginationContainer=> {
loopPaginationContainer.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, 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, 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, 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;
}});
updateContent(event, null, null, this, 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;
});
updateContent(event, null, 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');
if(event.target.tagName.toLowerCase()==='a'){
updateContent(event, event.target.dataset.uagbBlockQueryPaged, null, null, loopParentContainer);
}
if(( event.target.tagName.toLowerCase()==='div'&&event.target.parentElement.tagName.toLowerCase()==='a') ){
updateContent(event, event.target.parentElement.dataset.uagbBlockQueryPaged, null, null, loopParentContainer);
}
if(event.target.tagName.toLowerCase()==='svg'&&event.target.tagName.toLowerCase()==='path'){
updateContent(event.target.parentElement.parentElement, event?.target?.closest('a' )?.getAttribute('data-uagb-block-query-paged'), null, null, loopParentContainer);
}});
});
const categoryButtonFilterContainer=document.querySelectorAll('.uagb-loop-category-inner ');
categoryButtonFilterContainer.forEach(buttons=> {
buttons.addEventListener('click', function(event){
event.preventDefault();
const loopParentContainer=this.closest('.wp-block-uagb-loop-builder');
if(event.target.tagName.toLowerCase()==='a'){
updateContent(event, null, event.target.children[0].dataset, null, loopParentContainer);
}
if(( event.target.tagName.toLowerCase()==='div'&&event.target.parentElement.tagName.toLowerCase()==='a') ){
updateContent(event, null, event.target.dataset, null, 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;
});
};