lightbox-gallery/index.js

/* globals GalleryYTPlayer, YT */

import getScrollbarWidth from '@advdominion/get-scrollbar-width';

const getYTPlayer = () => {
    const script = document.createElement('script');
    script.src = 'https://www.youtube.com/player_api';
    script.async = true;
    document.body.append(script);
};

const playVideo = (slide) => {
    const youtube = slide.querySelector('.advdominion-lg__video_youtube');

    if (youtube) {
        if (slide.YTPlayer) {
            slide.YTPlayer.playVideo();
        } else if (window.YT) {
            if (GalleryYTPlayer.state) {
                slide.YTPlayer = new YT.Player(youtube, {
                    videoId: youtube.dataset.id,
                    events: {
                        onReady(event) {
                            event.target.playVideo();
                        },
                    },
                });
            } else {
                GalleryYTPlayer.addListener(() => {
                    playVideo(slide);
                });
            }
        } else {
            getYTPlayer();
            GalleryYTPlayer.addListener(() => {
                playVideo(slide);
            });
        }
    }
};

const pauseVideo = (slide) => {
    const youtube = slide.querySelector('.advdominion-lg__video_youtube');

    if (youtube && slide.YTPlayer) {
        slide.YTPlayer.pauseVideo();
    }
};

const setVideoSize = (gallery) => {
    const items = gallery.querySelectorAll('.advdominion-lg__video-wrapper');
    items[0].style = `
        width: '';
    `;
    let height = (items[0].getBoundingClientRect().width * 9) / 16;
    let width = '';
    if (height > items[0].getBoundingClientRect().height) {
        height = items[0].getBoundingClientRect().height;
        width = `${(height * 16) / 9}px`;
    }
    for (const item of items) {
        item.style = `
            height: ${height}px;
            width: ${width};
        `;
    }
};

const hide = async (duration = 500, easing = 'linear') => {
    const gallery = document.body.querySelector('.advdominion-lg');

    await gallery.animate([{opacity: 1}, {opacity: 0}], {
        duration,
        easing,
    }).finished;

    gallery.remove();

    document.body.style = `
        overflow: '';
        margin-right: '';
    `;
};

const show = async (duration = 500, easing = 'linear') => {
    const gallery = document.body.querySelector('.advdominion-lg');

    document.body.style = `
        overflow: hidden;
        margin-right: ${getScrollbarWidth()}px
    `;

    await gallery.animate([{opacity: 0}, {opacity: 1}], {
        duration,
        easing,
    }).finished;
};

const init = async (items = [], options = {}, index = 0) => {
    const {Swiper, Navigation, Pagination} = await import('swiper');
    Swiper.use([Navigation, Pagination]);

    let isVideoInGallery = false;
    items = items.map((item) => {
        if (/youtube\.com\/watch\?v=/.test(item)) {
            isVideoInGallery = true;
            return `
                <div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
                    <div class="advdominion-lg__video-wrapper">
                        <div
                            class="advdominion-lg__video advdominion-lg__video_youtube"
                            data-id="${/v=([\w-]+)/i.exec(item)[1]}">
                            Загрузка YouTube-плеера...
                        </div>
                    </div>
                </div>
            `;
        }
        return `
            <div class="advdominion-lg__item swiper-slide">
                <img class="advdominion-lg__image" src="${item}" alt="" loading="lazy">
            </div>
        `;
    });

    if (isVideoInGallery && !window.GalleryYTPlayer) {
        window.GalleryYTPlayer = {
            state: false,
            get init() {
                return this.state;
            },
            set init(val) {
                this.state = val;
                this.callback.forEach((i) => {
                    i(val);
                });
            },
            callback: [],
            addListener(callback) {
                this.callback.push(callback);
            },
        };

        window.onYouTubeIframeAPIReady = () => {
            window.GalleryYTPlayer.init = true;
        };
    }

    document.body.insertAdjacentHTML(
        'beforeend',
        `
            <div class="advdominion-lg">
                <button class="advdominion-lg__close" type="button">
                    <svg class="advdominion-lg__close-icon"><use href="${options.icons.close}" /></svg>
                </button>
                <div class="advdominion-lg__container swiper-container">
                    <div class="advdominion-lg__wrapper swiper-wrapper">
                        ${items.join('')}
                    </div>
                    ${options.pagination ? options.pagination : ''}
                    ${options.navigation ? options.navigation : ''}
                </div>
            </div>
        `
    );

    const gallery = document.body.querySelector('.advdominion-lg');

    await show(options?.animation?.show?.duration, options?.animation?.show?.easing);

    const swiper = new Swiper(
        gallery.querySelector('.advdominion-lg__container'),
        Object.assign({init: false, initialSlide: index}, options.swiper)
    );

    swiper.on('init', function () {
        if (this.slides[this.activeIndex].classList.contains('advdominion-lg__item_video')) {
            playVideo(this.slides[this.activeIndex]);
        }

        if (isVideoInGallery) {
            setVideoSize(gallery);
        }
    });

    swiper.on('slideChange', function () {
        if (this.slides[this.previousIndex].classList.contains('advdominion-lg__item_video')) {
            pauseVideo(this.slides[this.previousIndex]);
        }
        if (this.slides[this.activeIndex].classList.contains('advdominion-lg__item_video')) {
            playVideo(this.slides[this.activeIndex]);
        }
    });

    swiper.on('resize', function () {
        if (isVideoInGallery) {
            setVideoSize(gallery);
        }
    });

    swiper.init();

    gallery.querySelector('.advdominion-lg__close').addEventListener('click', () => {
        hide(options?.animation?.hide?.duration, options?.animation?.hide?.easing);
    });

    document.querySelector('body').addEventListener(
        'keydown',
        (e) => {
            if (e.key === 'Escape') {
                hide(options?.animation?.hide?.duration, options?.animation?.hide?.easing);
            }
        },
        {
            once: true,
        }
    );
};

export default (container, options) => {
    const items = [];
    for (const [index, element] of [...container.children].entries()) {
        items.push(element.href);
        element.addEventListener('click', (event) => {
            event.preventDefault();
            init(items, options, index);
        });
    }
};