https://www.lunetteriegenerale.com/cdn/shop/t/140/assets/media-gal…?v=114169201197782575711785521794

1import{SwiperConfigurator}from"./swiper-configurator.js";import{Component}from"@theme/component";import{ThemeEvents}from"@theme/events";import"./utilities.js";class PubSubGallery{constructor(){this.events={}}subscribe(event,callback){return this.events[event]||(this.events[event]=new Set),this.events[event].add(callback),()=>this.events[event].delete(callback)}publish(event,data){if(!this.events[event])return;const callbacks=Array.from(this.events[event]);for(const callback of callbacks)callback(data)}hasEvent(event){return!!(this.events[event]&&this.events[event].size>0)}}const pubSubGallery=new PubSubGallery;class MediaGalleryAlternative extends Component{requiredRefs=["alternativeSwiper","alternativeSwiperButton"];connectedCallback(){super.connectedCallback();const closestSection=this.closest(".shopify-section");closestSection&&closestSection.addEventListener(ThemeEvents.variantSelected,this.updateSlider),this.medialightbox=closestSection?.querySelector("media-lightbox"),this.mediaSwiper=this.refs.alternativeSwiper,this.mediaSwiperButtons=this.refs.alternativeSwiperButton,this.zoom=this.dataset.isZoom==="true"||!1,this.handleChangeVariant=this.changeVariant.bind(this),this.observeClassAdded(this.mediaSwiper,()=>{this.attachEvents(this.mediaSwiper.swiper)}),this.mediaSwiperButtons.forEach(button=>button.addEventListener("click",this.handleChangeVariant))}disconnectedCallback(){super.disconnectedCallback();const closestSection=this.closest(".shopify-section, dialog");closestSection&&closestSection.removeEventListener(ThemeEvents.variantSelected,this.updateSlider),this.mediaSwiperButtons.forEach(button=>button.removeEventListener("click",this.handleChangeVariant))}updateSlider=()=>{const{alternativeSwiper}=this.refs;alternativeSwiper.swiper&&typeof alternativeSwiper.swiper.destroy=="function"&&(alternativeSwiper.swiper.destroy(),this.mediaSwiperButtons[1]?.removeAttribute("data-change-next")),alternativeSwiper instanceof HTMLElement&&(this.mediaSwiperButtons[1]?.removeAttribute("data-change-next"),new SwiperConfigurator(alternativeSwiper),this.attachEvents(alternativeSwiper.swiper),pubSubGallery.hasEvent("changeSlide")||pubSubGallery.subscribe("changeSlide",currentPosition=>{setTimeout(()=>{if(alternativeSwiper&&alternativeSwiper.swiper){const{slides}=alternativeSwiper.swiper,index=[...slides].findIndex(slide=>slide.getAttribute("data-position")===currentPosition);alternativeSwiper.swiper.slideTo(Math.max(index,0),300)}},1e3)}))};getRelevantIds(){return{next:this.dataset.nextVariant,prev:this.dataset.prevVariant,current:this.dataset.currentVariant}}triggerVariantImageChange(currentId){const variantPickerImage=document.querySelector(`.variant-image-picker input[data-variant-id='${currentId}

1']`),changeEvent=new Event("change",{bubbles:!0,cancelable:!0});variantPickerImage&&variantPickerImage.dispatchEvent(changeEvent)}changeVariant(event){const{alternativeSwiper}=this.refs;if(!alternativeSwiper.swiper){console.error("Swiper is not initialized");return}const{isBeginning,isEnd}=alternativeSwiper.swiper,button=event.target.closest("button"),{name}=button,ids=this.getRelevantIds(),currentId=ids[name]||ids.current;button.hasAttribute(`data-change-${name}`)&&this.triggerVariantImageChange(currentId),this.mediaSwiperButtons[0]?.toggleAttribute("data-change-prev",isBeginning),this.mediaSwiperButtons[1]?.toggleAttribute("data-change-next",isEnd)}observeClassAdded(element,onClassAdded){let called=!1;const runOnce=()=>{called||(called=!0,observer.disconnect(),onClassAdded(element))},observer=new MutationObserver(mutations=>{for(const mutation of mutations)mutation.type==="attributes"&&mutation.attributeName==="class"&&element.classList.contains("swiper-initialized")&&runOnce()});observer.observe(element,{attributes:!0,attributeFilter:["class"]}),element.classList.contains("swiper-initialized")&&runOnce()}attachEvents(swiper){if(!swiper){console.error("Swiper not found");return}this.zoom===!0&&swiper.on("click",event=>{const{clickedSlide}=event;this.medialightbox&&typeof this.medialightbox.toggleMode=="function"&&(this.medialightbox.toggleMode(),this.medialightbox.sliderTo(clickedSlide))}),swiper.on("slideResetTransitionStart",event=>{const ids=this.getRelevantIds(),{swipeDirection,navigation:{nextEl,prevEl}}=event,isButtonDisabled=el=>el?.classList.contains("swiper-button-disabled"),handleSwipeEnd=(direction,buttonEl,fallbackId)=>{if(swipeDirection===direction&&isButtonDisabled(buttonEl)){const currentId=ids[direction]||ids[fallbackId];this.triggerVariantImageChange(currentId)}};handleSwipeEnd("next",nextEl,"current"),handleSwipeEnd("prev",prevEl,"current")})}}customElements.get("media-gallery-alternative")||customElements.define("media-gallery-alternative",MediaGalleryAlternative);class Medialightbox extends Component{#SLIDER_TYPES=["thumb","main"];#hasInsertedImages=!1;connectedCallback(){super.connectedCallback(),this.hidePanelTimer=null,this.lightboxPanel=this.querySelector(".lightbox-panel"),this.currentCounter=this.querySelector("#current-counter"),this.actionButtons=this.querySelectorAll(".lightbox-action button"),this.templates={main:this.querySelector("template#main-images"),thumb:this.querySelector("template#thumb-images")},this.containers={main:this.querySelector(".lightbox-main__swiper"),thumb:this.querySelector(".lightbox-thumb__swiper")},this.configs={main:this.parseConfig(this.dataset.mainSlider),thumb:this.parseConfig(this.dataset.thumbSlider)},this.sliders={main:null,thumb:null},this.handleActionPanel=this.panelAction.bind(this),this.handleUpdateSlider=this.updateSlider.bind(this),this.handleMoving=this.onMoving.bind(this);const closestSection=this.closest(".shopify-section");closestSection&&closestSection.addEventListener(ThemeEvents.variantSelected,this.handleUpdateSlider),this.actionButtons.forEach(button=>button.addEventListener("click",this.handleActionPanel)),this.isApiFullScreen()||this.getButton("screen")?.classList.add("lightbox-action__button--hidden")}disconnectedCallback(){super.disconnectedCallback();const closestSection=this.closest(".shopify-section, dialog");closestSection&&closestSection.removeEventListener(ThemeEvents.variantSelected,this.handleUpdateSlider),this.actionButtons.forEach(button=>button.removeEventListener("click",this.handleActionPanel)),this.toggleWindowEvent(!1)}onMoving(){this.classList.add("media-lightbox--visible-elements"),this.hidePanelTimer&&clearTimeout(this.hidePanelTimer),this.hidePanelTimer=setTimeout(()=>{this.classList.remove("media-lightbox--visible-elements")},3e3)}updateSlider(event){this.#hasInsertedImages=!1;const destroySlider=type=>{const currentSlider=this.sliders[type],currentContainer=this.containers[type].querySelector("swiper-wrapper");currentContainer&&(currentContainer.innerHTML=""),currentSlider&&typeof currentSlider.destroy=="function"&&currentSlider.destroy()};destroySlider("thumb"),destroySlider("main"),this.toggleWindowEvent(!1)}toggleMode(){this.insertContentIfNeeded();const isActive=this.classList.contains("media-lightbox--active");this.classList.toggle("media-lightbox--active",!isActive),this.toggleWindowEvent(!isActive)}insertContentIfNeeded(){this.#hasInsertedImages||(this.renderImages(),this.initializeSliders(),this.#hasInsertedImages=!0)}initializeSliders(){if(typeof Swiper!="function"){console.error("Swiper is not loaded.");return}const initSlider=type=>{const container=this.containers[type],config=this.configs[type];return container?config?new Swiper(container,config):(console.warn(`Config for "${type}" not found.`),null):(console.warn(`Container for "${type}" not found.`),null)},thumbsSwiper=initSlider("thumb");if(!thumbsSwiper)return;const mainSwiper=initSlider("main");mainSwiper&&(this.sliders.thumb=thumbsSwiper,this.sliders.main=mainSwiper,mainSwiper.thumbs.swiper=thumbsSwiper,mainSwiper.thumbs.init(),mainSwiper.thumbs.update(),this.attachEvents(mainSwiper))}getTemplateImages(template){return template?.content.cloneNode(!0).children||[]}renderImages(){for(const type of this.#SLIDER_TYPES){const template=this.templates[type],container=this.containers[type]?.querySelector(".swiper-wrapper");template&&container&&[...this.getTemplateImages(template)].forEac

1h(image=>container.appendChild(image))}console.log("Images were inserted")}parseConfig(configString){try{return JSON.parse(configString)||{}}catch{return console.warn("Failed to parse slider config:",configString),{}}}toggleWindowEvent(shouldAdd){if(this.isTouchDevice()){this.classList.add("media-lightbox--visible-elements");return}shouldAdd?window.addEventListener("mousemove",this.handleMoving,{passive:!0}):window.removeEventListener("mousemove",this.handleMoving)}attachEvents(slider){if(!slider){console.error("slider is undefined or null");return}slider.on("slideChange",event=>{const{realIndex}=event;this.currentCounter&&(this.currentCounter.textContent=realIndex?Number(realIndex)+1:1)}),slider.on("click",event=>{event.zoom.toggle()}),slider.on("zoomChange",event=>{const{clickedSlide,activeIndex,realIndex,slides}=event,activeSlide=slides[realIndex]||clickedSlide,zoomButton=this.getButton("zoom");if(!zoomButton||!activeSlide){console.error("ZoomButton or ActiveSlide is missing");return}setTimeout(()=>{const isZoomed=activeSlide.classList.contains("swiper-slide-zoomed");zoomButton.classList.toggle("lightbox-action__button--active",isZoomed)},100)})}handleZoom(){if(!this.sliders.main){console.error("Main slider is not initialized");return}this.sliders.main.zoom.toggle(this.sliders.main,3)}handleScreen(){const documentElement=document.documentElement,doc=document,isFullscreen=!!(doc.fullscreenElement||doc.webkitFullscreenElement||doc.msFullscreenElement),requestFullscreen=this.isApiFullScreen(),exitFullscreen=doc.exitFullscreen||doc.webkitExitFullscreen||doc.msExitFullscreen;if(!requestFullscreen||!exitFullscreen){console.error("Fullscreen API is not supported in this browser.");return}try{isFullscreen?exitFullscreen.call(doc):requestFullscreen.call(documentElement)}catch(err){console.error("Fullscreen toggle error:",err)}}handleClose(){const{main}=this.sliders,closeModal=()=>{this.classList.remove("media-lightbox--active"),this.toggleWindowEvent(!1)};if(!main){console.error("Main swiper is null"),closeModal();return}const{slides,realIndex}=main,closedSlide=slides?.[realIndex];if(!closedSlide){closeModal();return}const{dataset:{variant,currentPosition}}=closedSlide,shouldChangeSlide=variant!==this.getAttribute("data-current-id");if(variant&&shouldChangeSlide===!0){const variantPickerInput=document.querySelector(`.variant-image-picker input[data-variant-id='${variant}']`);variantPickerInput&&variantPickerInput.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0})),pubSubGallery.publish("changeSlide",currentPosition)}else if(shouldChangeSlide===!1){const mediaSlider=document.querySelector("media-gallery-alternative .swiper");if(mediaSlider&&mediaSlider.swiper){const{slides:slides2}=mediaSlider.swiper,index=[...slides2].findIndex(slide=>slide.getAttribute("data-position")===currentPosition);mediaSlider.swiper.slideTo(Math.max(index,0),0)}}closeModal()}panelAction(event){const{name}=event.target,button=event.target.closest("button"),action={zoom:()=>this.handleZoom(),screen:()=>this.handleScreen(),close:()=>this.handleClose()},toggleMode=button2=>{if(!button2||!(button2 instanceof HTMLButtonElement)){console.error("Button is undefined or not an HTMLButtonElement");return}const isActive=button2.classList.contains("lightbox-action__button--active");button2.classList.toggle("lightbox-action__button--active",!isActive)};if(!action[name]){console.error("Action is undefined or null");return}action[name](),name!=="zoom"&&toggleMode(button)}sliderTo(clickedSlide){if(!clickedSlide){console.error("ClickedSlide is undefined or null");return}if(!this.sliders.main){console.error("Main slider is not initialized");return}const position=Number(clickedSlide.dataset?.position);if(isNaN(position)){console.error("Position is not a valid number");return}this.sliders.main.slideTo(Math.max(position-1,0),0)}getButton(type){return[...this.actionButtons].find(({name})=>name===type)}isTouchDevice(){return!window.matchMedia("(hover: hover)").matches}isApiFullScreen(){try{return document.documentElement.requestFullscreen||document.documentElement.webkitRequestFullscreen||document.documentdocumentElement.msRequestFullscreen}catch(error){return console.error(error),!1}}}customElements.get("media-lightbox")||customElements.define("media-lightbox",Medialightbox);
2//# sourceMappingURL=/cdn/shop/t/140/assets/media-gallery-alternative.js.map?v=114169201197782575711785521794