Pdp Gallery Product

<section id="gallery" class="relative flex flex-col xl:flex-row gap-2" x-data="initGallery()" x-bind="eventListeners">
    <div x-show="itemCount > 0" class="max-sm:container max-sm:pe-0 relative w-full order-2 xl:order-1 xl:max-w-40" :class="itemCount < 2 ? 'max-xl:hidden' : ''">
        <div x-show="!isStart && showThumbnailArrows" class="absolute top-4 left-1/2 -translate-x-1/2 z-10 hidden xl:block">
            <button type="button" @click="prevItem" :class="{'opacity-0 cursor-default': isStart, 'opacity-100': !isStart}" " :tabindex=" isStart ? '-1' : '0'" 
    
    aria-label=" Voir le slide précédent" class=" btn  btn-dark  btn-subtle btn-border btn-size-md btn-only-icon">
                <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 18 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M1.5 8.51855L9 1.01855M9 1.01855L16.5 8.51855M9 1.01855V19.0186" stroke="currentColor" stroke-width="1.5" fill="none" />

                </svg>

            </button>
        </div>

        <div class="flex gap-2 overflow-hidden w-full h-auto xl:flex-col xl:flex-1 max-h-none xl:max-h-[var(--gallery-main-height)]" x-show="images.length > 0" x-ref="thumbnailContainer" x-bind="galleryBody">
            <template x-for="(image, index) in images" :key="index">
                <button @click="activeItem = index" class="js_thumbs_slide shrink-0 focus:outline-none transition-colors relative overflow-hidden group xl:flex-none aspect-[5/6]" :class="{
                    'opacity-56': activeItem === index
                }" :ref="activeItem === index ? 'activeThumb' : null" x-init="$watch('activeItem', () => scrollToActiveThumb())">
                    <div class="relative w-full h-full">
                        <img width="79" height="89" :src="image.thumb" :alt="image.caption" loading="lazy" class="object-cover xl:w-full h-full">

                        <div class="absolute inset-0 group-hover:ring-4 group-hover:ring-inset group-hover:ring-brand-600" :class="{
                            'ring-4 ring-inset ring-brand-600 pointer-events-none': activeItem === index
                        }"></div>
                    </div>
                </button>
            </template>
        </div>

        <div x-show="!isEnd && showThumbnailArrows" class="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 hidden xl:block">
            <button type="button" @click="nextItem" :class="{'opacity-0 cursor-default': isEnd, 'opacity-100': !isEnd}" :tabindex="isEnd ? '-1' : '0'" aria-label="Voir le slide suivant" class=" btn  btn-dark  btn-subtle btn-border btn-size-md btn-only-icon">
                <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 18 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M16.5 11.5L9 19M9 19L1.5 11.5M9 19L9 1" stroke="currentColor" stroke-width="1.5" fill="none" />

                </svg>

            </button>
        </div>
    </div>

    <div class="w-full order-1 xl:order-2 aspect-[5/6]">
        <div class="relative overflow-hidden bg-white" aria-live="polite" aria-atomic="true" x-bind="galleryBody" x-ref="galleryDialog" :class="{
        'z-50 fixed inset-0 w-screen max-w-[min(1280px,(100%_-_2rem))] max-h-[min(1024px,(100%_-_2rem))] m-auto': fullscreen,
        'relative aspect-[5/6]': !fullscreen
    }" :role="fullscreen ? 'dialog' : false" :aria-modal="fullscreen" @keyup.arrow-right="nextItem" @keyup.arrow-left="prevItem" @resize.debounce.100.window="syncHeight">
            <div class="relative h-full" x-ref="track">
                <div class="flex transition-transform duration-300 ease-out h-full" :style="{ transform: `translateX(-${activeItem * 100}%)` }">
                    <template x-for="(image, index) in images" :key="index">
                        <div class="flex-shrink-0 w-full h-full relative">
                            <div x-show="index === 0" class="absolute z-10 top-4 left-4 bg-black text-white px-3 py-1 rounded-full text-body-sm font-semibold">
                                NEW
                            </div>

                            <template x-if="image.type === 'video' && activeVideo">
                                <iframe class="absolute inset-0 w-full h-full" frameborder="0" x-data="getVideoData(image)" :src="src" :allow="allow"></iframe>
                            </template>

                            <picture>
                                <source :srcset="fullscreen ? image.full : image.img" media="(min-width: 768px)" />
                                <img x-show="!activeVideo || image.type !== 'video'" :src="fullscreen ? image.full : image.img" :alt="image.caption || 'Example Product'" class="w-full h-full object-cover" draggable="false">
                            </picture>

                        </div>
                    </template>
                </div>

                <div class="absolute inset-x-0 bottom-0 flex justify-between items-center p-4 z-10 pointer-events-none" x-show="images.length > 1">
                    <div class="flex items-center h-full pointer-events-auto">
                        <button type="button" @click="prevItem" :class="{'opacity-0 cursor-default': isStart, 'opacity-100': !isStart}" " :tabindex=" isStart ? '-1' : '0'" 
    
    aria-label=" Voir le slide précédent" class=" btn  btn-dark  btn-subtle btn-border btn-size-md btn-only-icon">
                            <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <path d="M10.5 19.5L3 12M3 12L10.5 4.5M3 12H21" stroke="currentColor" stroke-width="1.5" fill="none" />

                            </svg>

                        </button>
                    </div>

                    <div class="flex items-center h-full pointer-events-auto">
                        <button type="button" @click="nextItem" :class="{'opacity-0 cursor-default': isEnd, 'opacity-100': !isEnd}" :tabindex="isEnd ? '-1' : '0'" aria-label="Voir le slide suivant" class=" btn  btn-dark  btn-subtle btn-border btn-size-md btn-only-icon">
                            <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <path d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" stroke="currentColor" stroke-width="1.5" fill="none" />

                            </svg>

                        </button>
                    </div>
                </div>

                <div class="absolute top-2 right-2 flex gap-2">
                </div>
            </div>
        </div>
    </div>

</section>

<script>
    function initGallery() {
        return {
            activeItem: 0,
            activeVideo: false,
            itemIsVideo: false,
            itemCount: 0,
            fullscreen: false,
            isSlider: true,
            loop: false,
            isStart: true,
            isEnd: false,
            showMagnifier: true,
            showMagnifierButton: false,
            showThumbnailArrows: true,
            images: [],
            init() {
                this.images = [{
                    "thumb": "https://naos.dam-broadcast.com/cdn-cgi/image/width=160,height=192,fit=crop/medias/domain11863/media100412/123660-vfjeta2bf0.jpg",
                    "img": "https://naos.dam-broadcast.com/cdn-cgi/image/width=1280,height=1536,fit=crop/medias/domain11863/media100412/123660-vfjeta2bf0.jpg",
                    "full": "https://naos.dam-broadcast.com/cdn-cgi/image/width=1280,height=1536,fit=crop/medias/domain11863/media100412/123660-vfjeta2bf0.jpg",
                    "caption": "Product Image 1",
                    "isMain": true,
                    "type": "image"
                }, {
                    "thumb": "https://naos.dam-broadcast.com/cdn-cgi/image/width=160,height=192,fit=crop/pm_11863_170_170896-8y6yfqhab9-whr.jpg",
                    "img": "https://naos.dam-broadcast.com/cdn-cgi/image/width=1280,height=1536,fit=crop/pm_11863_170_170896-8y6yfqhab9-whr.jpg",
                    "full": "https://naos.dam-broadcast.com/cdn-cgi/image/width=1280,height=1536,fit=crop/pm_11863_170_170896-8y6yfqhab9-whr.jpg",
                    "caption": "Product Image 2",
                    "type": "image"
                }, {
                    "thumb": "https://naos.dam-broadcast.com/cdn-cgi/image/width=160,height=192,fit=crop/pm_11863_170_170902-xfskbhyvfk-whr.jpg",
                    "img": "https://naos.dam-broadcast.com/cdn-cgi/image/width=1280,height=1536,fit=crop/pm_11863_170_170902-xfskbhyvfk-whr.jpg",
                    "full": "https://naos.dam-broadcast.com/cdn-cgi/image/width=1280,height=1536,fit=crop/pm_11863_170_170902-xfskbhyvfk-whr.jpg",
                    "caption": "Product Image 3",
                    "type": "image"
                }, {
                    "thumb": "https://naos.dam-broadcast.com/cdn-cgi/image/width=160,height=192,fit=crop/pm_11863_170_170911-8qrywi7jhs-whr.jpg",
                    "img": "https://naos.dam-broadcast.com/cdn-cgi/image/width=1280,height=1536,fit=crop/pm_11863_170_170911-8qrywi7jhs-whr.jpg",
                    "full": "https://naos.dam-broadcast.com/cdn-cgi/image/width=1280,height=1536,fit=crop/pm_11863_170_170911-8qrywi7jhs-whr.jpg",
                    "caption": "Product Image 4",
                    "type": "image"
                }, {
                    "thumb": "https://naos.dam-broadcast.com/cdn-cgi/image/width=160,height=192,fit=crop/pm_11863_170_170905-wfespq6p4o-whr.jpg",
                    "img": "https://naos.dam-broadcast.com/cdn-cgi/image/width=1280,height=1536,fit=crop/pm_11863_170_170905-wfespq6p4o-whr.jpg",
                    "full": "https://naos.dam-broadcast.com/cdn-cgi/image/width=1280,height=1536,fit=crop/pm_11863_170_170905-wfespq6p4o-whr.jpg",
                    "caption": "Product Image 5",
                    "type": "image"
                }, {
                    "thumb": "https://naos.dam-broadcast.com/cdn-cgi/image/width=160,height=192,fit=crop/pm_11863_170_170917-vu19eil2ph-whr.jpg",
                    "img": "https://naos.dam-broadcast.com/cdn-cgi/image/width=1280,height=1536,fit=crop/pm_11863_170_170917-vu19eil2ph-whr.jpg",
                    "full": "https://naos.dam-broadcast.com/cdn-cgi/image/width=1280,height=1536,fit=crop/pm_11863_170_170917-vu19eil2ph-whr.jpg",
                    "caption": "Product Image 3",
                    "type": "image"
                }, {
                    "thumb": "https://naos.dam-broadcast.com/cdn-cgi/image/width=160,height=192,fit=crop/pm_11863_170_170890-o9smqupcyh-whr.jpg",
                    "img": "https://naos.dam-broadcast.com/cdn-cgi/image/width=1280,height=1536,fit=crop/pm_11863_170_170890-o9smqupcyh-whr.jpg",
                    "full": "https://naos.dam-broadcast.com/cdn-cgi/image/width=1280,height=1536,fit=crop/pm_11863_170_170890-o9smqupcyh-whr.jpg",
                    "caption": "Product Image 4",
                    "type": "image"
                }];
                this.itemCount = this.images.length;
                this.initActive();
                this.$nextTick(() => {
                    this.syncHeight();
                })
                this.$watch('activeItem', (item) => {
                    this.itemIsVideo = this.images[item].type === 'video';
                    this.activeVideo = this.itemIsVideo && false;
                    this.isStart = this.activeItem === 0;
                    this.isEnd = this.activeItem === (this.itemCount - 1);
                });
                this.$watch('fullscreen', (open) => {
                    document.body.style.overflow = open ? "hidden" : "";
                });
            },
            initActive() {
                let active = this.images.findIndex(function(image) {
                    return image.isMain === true
                });
                if (active === -1) {
                    active = 0;
                }
                this.setActive(active);
            },
            toggleFullscreen() {
                this.fullscreen = !this.fullscreen;
            },
            toggleMagnifier() {
                this.showMagnifier = !this.showMagnifier;
            },
            nextItem() {
                if (this.isEnd && !this.loop) return;
                this.activeItem = this.isEnd ? 0 : this.activeItem + 1;
            },
            prevItem() {
                if (this.isStart && !this.loop) return;
                this.activeItem = this.isStart ? this.itemCount - 1 : this.activeItem - 1;
            },
            resetGallery() {
                this.images = this.initialImages;
                this.itemCount = this.images.length;
                this.initActive();
                this.calcIsSlider();
                this.$nextTick(() => {
                    this.scrollTo(this.active);
                });
            },
            setActive(index) {
                if (index < 0) return;
                if (index === this.itemCount) return;
                this.active = index;
                this.activeVideoType = false;
                if (window.youtubePlayer) {
                    window.youtubePlayer.stopVideo();
                }
                if (this.vimeoPlayer) {
                    this.vimeoPlayer.contentWindow.postMessage(JSON.stringify({
                        "method": "pause"
                    }), "*");
                }
                if (this.images[index].type === 'video' && this.autoplayVideo) {
                    this.activateVideo();
                }
            },
            activateVideo() {
                const videoData = this.getVideoData();
                if (!videoData) {
                    return
                }
                this.activeVideoType = videoData.type;
                if (videoData.type === "youtube") {
                    if (!window.youtubePlayer) {
                        this.initYoutubeAPI(videoData);
                    } else {
                        window.youtubePlayer.loadVideoById(videoData.id);
                    }
                } else if (videoData.type === "vimeo") {
                    this.initVimeoVideo(videoData);
                }
            },
            getVideoData() {
                const videoUrl = this.images[this.active] && this.images[this.active].videoUrl;
                if (!videoUrl) {
                    return
                }
                let id,
                    type,
                    youtubeRegex,
                    vimeoRegex,
                    useYoutubeNoCookie = false;
                if (videoUrl.match(/youtube\.com|youtu\.be|youtube-nocookie.com/)) {
                    id = videoUrl.replace(/^\/(embed\/|v\/)?/, '').replace(/\/.*/, '');
                    type = 'youtube';
                    youtubeRegex = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/;
                    id = videoUrl.match(youtubeRegex)[1];
                    if (videoUrl.match(/youtube-nocookie.com/)) {
                        useYoutubeNoCookie = true;
                    }
                } else if (videoUrl.match(/vimeo\.com/)) {
                    type = 'vimeo';
                    vimeoRegex = new RegExp(['https?:\\/\\/(?:www\\.|player\\.)?vimeo.com\\/(?:channels\\/(?:\\w+\\/)',
                        '?|groups\\/([^\\/]*)\\/videos\\/|album\\/(\\d+)\\/video\\/|video\\/|)(\\d+)(?:$|\\/|\\?)'
                    ].join(''));
                    id = videoUrl.match(vimeoRegex)[3];
                }
                return id ? {
                    id: id,
                    type: type,
                    useYoutubeNoCookie: useYoutubeNoCookie
                } : false;
            },
            initYoutubeAPI(videoData) {
                if (document.getElementById('loadYoutubeAPI')) {
                    return;
                }
                const params = {
                    "autoplay": true
                };
                const loadYoutubeAPI = document.createElement('script');
                loadYoutubeAPI.src = 'https://www.youtube.com/iframe_api';
                loadYoutubeAPI.id = 'loadYoutubeAPI';
                const firstScriptTag = document.getElementsByTagName('script')[0];
                firstScriptTag.parentNode.insertBefore(loadYoutubeAPI, firstScriptTag);
                const host = (videoData.useYoutubeNoCookie) ?
                    'https://www.youtube-nocookie.com' :
                    'https://www.youtube.com';
                if (!this.relatedVideos) {
                    params.rel = 0;
                }
                const fireYoutubeAPI = document.createElement('script');
                fireYoutubeAPI.innerHTML = `function onYouTubeIframeAPIReady() {
                    window.youtubePlayer = new YT.Player('youtube-player', {
                        host: '${host}',
                        videoId: '${videoData.id}',
                        playerVars: ${JSON.stringify(params)},
                    });
                }`;
                firstScriptTag.parentNode.insertBefore(fireYoutubeAPI, firstScriptTag);
            },
            initVimeoVideo(videoData) {
                let additionalParams = '&autoplay=1';
                let src = '';
                const timestamp = new Date().getTime();
                const vimeoContainer = document.getElementById("vimeo-player");
                const videoId = videoData.id;
                if (!vimeoContainer || !videoId) return;
                if (this.loopVideo) {
                    additionalParams += '&loop=1';
                }
                src = 'https://player.vimeo.com/video/' +
                    videoId + '?api=1&player_id=vimeo' +
                    videoId +
                    timestamp +
                    additionalParams;
                vimeoContainer.innerHTML =
                    `<iframe id="${'vimeo' + videoId + timestamp}"
                        src="${src}"
                        width="640" height="360"
                        webkitallowfullscreen
                        mozallowfullscreen
                        allowfullscreen
                        referrerPolicy="origin"
                        allow="autoplay"
                        class="object-center w-full h-full object-fit"
                     ></iframe>`;
                this.vimeoPlayer = vimeoContainer.childNodes[0];
            },
            closeFullScreen(setFocusTo = this.$refs.galleryFullscreenBtn) {
                this.fullscreen = false;
                hyva.releaseFocus(this.$root);
                this.$nextTick(() => {
                    this.calcPageSize();
                    setFocusTo && setFocusTo.focus()
                });
            },
            touchStartX: null,
            touchStartY: null,
            galleryBody: {
                ['@touchstart.passive'](event) {
                    if (event.touches.length > 1) return;
                    this.touchStartX = event.touches[0].clientX;
                    this.touchStartY = event.touches[0].clientY;
                },
                ['@touchend.passive'](event) {
                    if (!this.touchStartX || !this.touchStartY) return;
                    const touchEndX = event.changedTouches[0].clientX;
                    const touchEndY = event.changedTouches[0].clientY;
                    const diffX = this.touchStartX - touchEndX;
                    const diffY = this.touchStartY - touchEndY;
                    if (Math.abs(diffX) > Math.abs(diffY)) {
                        if (Math.abs(diffX) > 50) {
                            if (diffX > 0) {
                                this.nextItem();
                            } else {
                                this.prevItem();
                            }
                        }
                    }
                    this.touchStartX = null;
                    this.touchStartY = null;
                }
            },
            eventListeners: {
                ['@keydown.window.escape']() {
                    if (!this.fullscreen) return;
                    this.closeFullScreen()
                },
                ['@reset-gallery.window'](event) {
                    this.resetGallery();
                },
                ['@keyup.arrow-right.window']() {
                    if (!this.fullscreen) return;
                    this.nextItem();
                },
                ['@keyup.arrow-left.window']() {
                    if (!this.fullscreen) return;
                    this.prevItem();
                },
            },
            scrollToActiveThumb() {
                this.$nextTick(() => {
                    const container = this.$refs.thumbnailContainer;
                    const activeThumb = container.querySelector(`button:nth-child(${this.activeItem + 1})`);
                    if (activeThumb && container) {
                        const isVertical = window.innerWidth >= 1024 && true;
                        if (isVertical) {
                            const containerHeight = container.offsetHeight;
                            const thumbHeight = activeThumb.offsetHeight;
                            const thumbTop = activeThumb.offsetTop;
                            container.scrollTo({
                                top: (thumbTop + thumbHeight) - ((containerHeight - thumbHeight) / 2),
                                behavior: 'smooth'
                            });
                        } else {
                            const containerWidth = container.offsetWidth;
                            const thumbWidth = activeThumb.offsetWidth;
                            const thumbLeft = activeThumb.offsetLeft;
                            container.scrollTo({
                                left: (thumbLeft + thumbWidth) - ((containerWidth - thumbWidth) / 2),
                                behavior: 'smooth'
                            });
                        }
                    }
                });
            },
            syncHeight() {
                const galleryHeight = this.$refs.galleryDialog.offsetHeight;
                const thumbnailContainerHeight = this.$refs.thumbnailContainer.scrollHeight;
                if (galleryHeight > 0) {
                    document.documentElement.style.setProperty('--gallery-main-height', `${galleryHeight}px`);
                }
                this.showThumbnailArrows = thumbnailContainerHeight >= galleryHeight;
            }
        }
    }
</script>