console.log("block: project loop");
(function ($, window){
function initializeBlock(){
const blocks=document.querySelectorAll('.wpb-project-loop')
blocks.forEach(block=>
{
const container=block.querySelector('.masonry-grid-container')
console.log("masonry container", container)
if(container&&Masonry.data(container) ){
Masonry.data(container).destroy()
}
container.classList.remove('no-masonry')
container.classList.add('masonry')
const msnry=new Masonry(
container,
{
itemSelector: '.masonry-grid-item:not(.hidden)',
gutter: '.gutter-sizer',
percentPosition: true,
}
)
msnry.on('layoutComplete', ()=> console.log('masonry layout done') )
setTimeout(()=> { msnry.layout() }, 1000)
const all_items=Array.from(block.querySelectorAll('.masonry-grid-item') )
const filter_buttons=block.querySelectorAll('.category-pills .pill')
console.log(filter_buttons)
for(const button of Array.from(filter_buttons) ){
button.addEventListener('click', (e)=> {
console.log('pill click', e.target)
disable_all_filter_pills(block)
e.target.classList.add('active')
filter_projects(block, e.target.dataset.term, msnry, all_items)
})
}}
)
}
function init(){
console.log("ready masonry")
if(window.acf){
window.acf.addAction('render_block_preview',
(domElement, block)=>
{
if(block.name==='pixit/project-loop'){
initializeBlock()
}}
)
}else{
initializeBlock()
}}
$(document).ready(init);
function disable_all_filter_pills(block){
const filter_buttons=block.querySelectorAll('.category-pills .pill')
for(const button of Array.from(filter_buttons) ){
button.classList.remove('active')
}}
function filter_projects(block, category, msnry, all_items){
const container=block.querySelector('.masonry-grid-container')
for(const item of all_items){
const categories=JSON.parse(item.dataset.categories)
const matches_category = ! category||categories.includes(category)
const is_in_dom=block.contains(item)
if(matches_category&&! is_in_dom){
container.appendChild(item)
msnry.appended(item)
}
if(! matches_category&&is_in_dom){
msnry.remove(item)
}}
msnry.layout()
}})(jQuery, window);