console.log("block: masonry gallery");
(function ($, window){
const MSNRY_IMAGE_LOAD=6
function initializeBlock(){
const blocks=document.querySelectorAll('.wpb-masonry-gallery')
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() }, 10)
if(! window.acf){
const button=block.querySelector('button[data-action="load-masonry-images"]')
if(button){
button.addEventListener('click', ()=> load_masonry_images(block, msnry))
}}
if(window.acf){
const button=block.querySelector('button[data-action="trigger-reflow"]')
if(button){
button.addEventListener('click',
()=>
{
console.log("manual reflow")
msnry.layout()
}
)
}}
}
)
}
function get_hidden_images(block){
return block.querySelectorAll('.masonry-grid-item.hidden')
}
function load_masonry_images(block, msnry){
console.log("load masonry images", msnry)
const hidden_images=get_hidden_images(block)
hidden_images.forEach((element, index)=>
{
if(index < MSNRY_IMAGE_LOAD){
element.classList.remove('hidden')
const image=element.querySelector('img')
image.src=image.dataset.src
image.srcset=image.dataset.srcset
console.log(`Index: ${index}, Element: `, image)
msnry.appended(element);
}}
)
msnry.layout()
if(get_hidden_images(block).length===0){
const button=block.querySelector('button[data-action="load-masonry-images"]')
button.remove()
}}
function init(){
console.log("ready masonry")
if(window.acf){
window.acf.addAction('render_block_preview', initializeBlock)
}else{
initializeBlock()
init_lightbox_settings()
}}
$(document).ready(init);
})(jQuery, window);