ba-block-cli/src/blocks/gallery/gallery.js

Auto-create blocks for WordPress ACF

/**
 * Show gallery image
 * @param {DOMContent} gallery 
 * @param {integer} index
 */
 function showGalleryImage(gallery, index) {
    // Load the image gallery modal
    var modal = gallery.querySelector('.gallery-modal'),
        items = JSON.parse(gallery.getAttribute('data-gallery'));

    if (modal && items && items.length) {
        console.log({items, index});
        var img = modal.querySelector('.gallery-image'),
            description = modal.querySelector('.description'),
            prev = modal.querySelector('.prev'),
            next = modal.querySelector('.next');

console.log({img, description, prev, next});

        // Get the image data
        var data = items[index];
        if (!data || !img) {
            console.error('Image data not found for index:', index);
            return;
        }

        // Set attributes
        img.setAttribute('src', data.url);
        img.setAttribute('srcset', data.url);
        img.setAttribute('alt', data.alt);
        img.setAttribute('width', data.width);
        img.setAttribute('height', data.height);
        description.textContent = data.description;

        // Set prev navigation
        if (prev) {
            const prevIndex = (index - 1 + items.length) % items.length;
            prev.classList.remove('inactive');
            prev.setAttribute('data-index', prevIndex);
        }

        // Set next navigation
        if (next) {
            const nextIndex = (index + 1) % items.length;
            next.classList.remove('inactive');
            next.setAttribute('data-index', nextIndex);
        }

        // Show the modal 
        modal.setAttribute('data-no', data.no);
        modal.classList.add('show');
        document.querySelector('body').style.overflow = 'hidden';

    }
}

/** 
 * Add button
 * @param DOMElement gallery
 * @param int current
 * @param integer max
 */
function addRemoveBtn(gallery, current, max) {
    var more = gallery.querySelector('.js-more');
    if (more) {
        if (current > max) {
            more.classList.remove('d-none');
        } else {
            more.classList.add('d-none');
        }
    }

    return more;
}

/**
 * Add images
 * @param DOMContent gallery
 * @param array items
 * @param integer from
 * @param integer to
 */
function addImages(gallery, items, from, to) {
    var container = gallery.querySelector('.js-gallery'),
        cols = gallery.getAttribute('data-cols') || 'col-6 col-md-4 col-lg-3';

    for (let index = from; index < to; index++) {
        if (items.length > index) {
            const image = items[index];
            if (image) {
                var img = document.createElement('div');
                    img.setAttribute('class', cols);
                    img.innerHTML = `
                        <div class="js-gallery-image ${image.selector}" data-index='${index}'>
                            <img width="${image.width}" height="${image.height}" src="${image.smallUrl}" class="image" alt="${image.alt}" loading="lazy">
                        </div>
                    `;
                container.appendChild(img);
            }
        }
    }
}

/**
 * On DOM content loaded event
 */
document.addEventListener('DOMContentLoaded', function() {

    // Get galleries
    var galleries = document.querySelectorAll('.gallery-section.block');
    if (galleries && galleries.length) {
        galleries.forEach(function (gallery) {
            var items = JSON.parse(gallery.getAttribute('data-gallery'))
            count = parseInt(gallery.getAttribute('data-count')),
            modal = gallery.querySelector('.gallery-modal');

            // Add button
            var more = addRemoveBtn(gallery, items.length, count);
    
            // Add images
            addImages(gallery, items, 0, count);
    
            // On more click event
            if (more) {
                more.addEventListener('click', function() {
                    var container = gallery.querySelector('.js-gallery'),
                        imgs = container.querySelectorAll('.image'),
                        from = imgs.length,
                        to = items.length;
                    
                    // Add images
                    if (from < items.length) {
                        to = (from + count - 1) > items.length ? items.length : from + count
                        addImages(gallery, items, from, to);
                    }
        
                    // Remove the more button
                    addRemoveBtn(gallery, parseInt(items.length), to);
                });
            }

            // On gallery image click event listener
            gallery.addEventListener('click', function(evt) {
                if (evt.target.classList.contains('image')) {
                    var parent = evt.target.parentNode;
                    if (parent) {
                        var index = parseInt(parent.getAttribute('data-index'));
                        showGalleryImage(gallery, index);
                    }
                }

                // On clode button click event listener
                if (evt.target.classList.contains('gallery-modal-close') || evt.target.classList.contains('gm-close')) {
                    document.querySelector('body').style.overflow = 'auto';

                    // Load the image gallery modal
                    var modal = gallery.querySelector('.gallery-modal');
                    if (modal) {
                        modal.classList.remove('show');
                    }
                }
            });

            // On controlls button click event listener
            if (modal) {
                var controlls = modal.querySelectorAll('.js-control');
                if (controlls && controlls.length) {
                    controlls.forEach(function(controll) {
                        controll.addEventListener('click', function(evt) {
                            evt.preventDefault();
                            var index = parseInt(this.getAttribute('data-index'));
                            showGalleryImage(gallery, index);
                        });
                    });
                }
            }

            // On key presses event listener
            if (modal) {
                document.onkeydown = function checkKey(evt) {
                    evt = evt || window.event;
        
                    var action = false;
                    if (evt.keyCode == '37') {
                        // left arrow
                        action =  modal.querySelector('.js-control.prev')
                    } else if (evt.keyCode == '39') {
                        // right arrow
                        action =  modal.querySelector('.js-control.next')
                    }

                    if (action) {
                        var index = parseInt(action.getAttribute('data-index'));
                        showGalleryImage(gallery, index);
                        action = false;
                    }

                }
            }

        });
    }
});