Fakel-Gym/template-parts/la-components/blocks/simple-gallery/simple-gallery.js

document.addEventListener('DOMContentLoaded', function () {
    setTimeout(() => {
        document.querySelectorAll('.simple-gallery-block').forEach(function (block) {
            const blockId = block.getAttribute('data-gallery-id');
            initSimpleGallery(blockId);
        });
    }, 100);
});

function initSimpleGallery(blockId) {
    const container = document.getElementById(blockId);
    if (!container) return;

    let mainSwiper;
    let thumbnailSwiper;
    let lightbox;

    const isSingleImage = container.querySelector('.single-image');
    const hasMultipleImages = container.querySelector('.gallery-swiper');

    function initLightbox() {
        // Ждем загрузки GLightbox
        const checkGLightbox = () => {
            if (typeof GLightbox !== 'undefined') {
                const selector = `#${blockId} .glightbox`;

                if (lightbox) {
                    lightbox.destroy();
                }

                lightbox = GLightbox({
                    selector: selector,
                    preload: false,
                    touchNavigation: true,
                    loop: true
                });
            } else {
                // Пробуем еще раз через 100мс
                setTimeout(checkGLightbox, 100);
            }
        };

        checkGLightbox();
    }

    function updateThumbnails(activeIndex) {
        const thumbnails = container.querySelectorAll('.thumbnail');
        thumbnails.forEach((thumb, index) => {
            if (index === activeIndex) {
                thumb.classList.remove('opacity-50', 'hover:opacity-80');
                thumb.classList.add('opacity-100', 'active');
            } else {
                thumb.classList.remove('opacity-100', 'active');
                thumb.classList.add('opacity-50', 'hover:opacity-80');
            }
        });
    }

    function centerThumbnail(activeIndex) {
        if (thumbnailSwiper) {
            thumbnailSwiper.slideTo(activeIndex);
        }
    }

    // Если одно изображение
    if (isSingleImage) {
        initLightbox();

        window.addEventListener('beforeunload', () => {
            if (lightbox) lightbox.destroy();
        });
        return;
    }

    // Если несколько изображений
    if (hasMultipleImages) {
        const slides = hasMultipleImages.querySelectorAll('.swiper-slide');
        const isSingleSlide = slides.length <= 1;

        // Инициализируем свайпер для миниатюр
        thumbnailSwiper = new Swiper(`#${blockId} .thumbnail-swiper`, {
            slidesPerView: 'auto',
            spaceBetween: 6,
            freeMode: true,
            grabCursor: true,
            watchSlidesProgress: true,
        });

        // Инициализируем основной свайпер
        mainSwiper = new Swiper(`#${blockId} .gallery-swiper`, {
            loop: true,
            slidesPerView: 'auto',
            spaceBetween: 0,
            grabCursor: true,
            watchSlidesProgress: true,
            lazy: {
                loadPrevNext: true,
                loadOnTransitionStart: true,
            },
            pagination: {
                el: `#${blockId} .simple-gallery-swiper-pagination`,
                type: 'bullets',
                clickable: true,
                bulletClass: 'swiper-pagination-bullet',
            },
            on: {
                slideChange: function () {
                    updateThumbnails(this.realIndex);
                    centerThumbnail(this.realIndex);
                }
            }
        });

        // Скрываем элементы навигации при одном слайде
        if (isSingleSlide) {
            const pagination = container.querySelector('.simple-gallery-swiper-pagination');
            const thumbnailContainer = container.querySelector('.thumbnail-swiper').parentElement;

            if (pagination) pagination.style.display = 'none';
            if (thumbnailContainer) thumbnailContainer.style.display = 'none';

            if (mainSwiper.autoplay) {
                mainSwiper.autoplay.stop();
            }
        }

        // Инициализируем лайтбокс
        initLightbox();

        // Обработчик кликов по миниатюрам
        container.addEventListener('click', (e) => {
            const thumbnail = e.target.closest('.thumbnail');
            if (!thumbnail) return;

            const index = parseInt(thumbnail.getAttribute('data-index'));

            if (mainSwiper) {
                mainSwiper.slideToLoop(index);
            }

            updateThumbnails(index);
            centerThumbnail(index);
        });

        // Очистка ресурсов при выгрузке страницы
        window.addEventListener('beforeunload', () => {
            if (mainSwiper) mainSwiper.destroy();
            if (thumbnailSwiper) thumbnailSwiper.destroy();
            if (lightbox) lightbox.destroy();
        });
    }
}