https://www.sallys-shop.de/cdn/shop/t/60/assets/media-gallery.js?v=161710628456793861231777298879

1import{Component}from"@theme/component";import{ThemeEvents}from"@theme/events";export class MediaGallery extends Component{connectedCallback(){super.connectedCallback();const{signal}=this.#controller,target=this.closest(".shopify-section, dialog");this.handleCarouselChange(),target?.addEventListener(ThemeEvents.variantUpdate,this.#handleVariantUpdate,{signal}),target?.addEventListener(ThemeEvents.modelInteraction,this.#handleModelInteraction,{signal}),this.addEventListener("media:switch-optimistic",this.#switchMediaOptimistic,{signal}),this.#setupZoomReveal(),this.#scheduleDeferredLoad()}#controller=new AbortController;#zoomDialogModule=null;#zoomRevealObserver=null;#deferredLoadTimer=null;static DEFERRED_BATCH_SIZE=20;updatedCallback(){super.updatedCallback?.(),this.handleCarouselChange(),this.#setupZoomReveal(),this.#scheduleDeferredLoad()}disconnectedCallback(){super.disconnectedCallback(),this.#controller.abort(),this.#zoomRevealObserver?.disconnect(),this.#zoomRevealObserver=null,this.#deferredLoadTimer&&(clearTimeout(this.#deferredLoadTimer),this.#deferredLoadTimer=null)}#handleVariantUpdate=event=>{const source_html=event.detail.data.html,source_variant=event.detail.resource,fromCache=event.detail.data.fromCache,isBackgroundSync=event.detail.data.isBackgroundSync,newProduct=event.detail.data.newProduct;if(!this.hasAttribute("data-hide-variants")&&!newProduct&&(fromCache||isBackgroundSync)||!source_html)return;const newMediaGallery=source_html.querySelector("media-gallery");newMediaGallery&&(!newProduct&&!source_variant?.featured_media||this.replaceWith(newMediaGallery))};#switchMediaOptimistic=event=>{if(this.hasAttribute("data-hide-variants"))return;const variant=event.detail.variant;if(!variant?.featured_media?.id){console.warn("\u26A0\uFE0F No featured media in variant");return}const mediaId=variant.featured_media.id,carousel=this.carousel;if(carousel?.swiperInstance&&!carousel.swiperInstance.destroyed){let swiperSlides=Array.from(carousel.swiperInstance.slides||[]),targetIndex=swiperSlides.findIndex(slide=>(slide instanceof HTMLElement?slide:null)?.dataset?.mediaId===String(mediaId));if(targetIndex===-1&&this.querySelector("[data-deferred-slides]")&&(this.#forceLoadAllDeferred(),swiperSlides=Array.from(carousel.swiperInstance.slides||[]),targetIndex=swiperSlides.findIndex(slide=>(slide instanceof HTMLElement?slide:null)?.dataset?.mediaId===String(mediaId))),targetIndex!==-1&&targetIndex!==carousel.swiperInstance.activeIndex)carousel.swiperInstance.slideTo(targetIndex,0,!1),this.#updateCarouselThumbnailsActive(mediaId);else if(targetIndex===-1){console.warn("\u26A0\uFE0F Target slide not found in Swiper slides");const fallbackIndex=Array.from(this.querySelectorAll(".media-gallery__carousel-wrapper .swiper-slide[data-media-id]")).findIndex(slide=>slide.dataset.mediaId===mediaId);fallbackIndex!==-1&&(carousel.swiperInstance.update(),carousel.swiperInstance.slideTo(fallbackIndex,0,!1))}}else{const mainWrapper=this.querySelector(".media-gallery__carousel-wrapper");if(!mainWrapper){console.warn("\u26A0\uFE0F Main wrapper not found");return}let targetMedia=mainWrapper.querySelector(`[data-media-id="${mediaId}"]`);if(!targetMedia&&this.querySelector("[data-deferred-slides]")&&(this.#forceLoadAllDeferred(),targetMedia=mainWrapper.querySelector(`[data-media-id="${mediaId}"]`)),!targetMedia){console.warn("\u26A0\uFE0F Target media not found");return}let wasReordered=!1;targetMedia!==mainWrapper.firstElementChild&&(mainWrapper.insertBefore(targetMedia,mainWrapper.firstElementChild),wasReordered=!0);const gridThumbs=this.querySelector(".media-gallery__grid-thumbnails");if(gridThumbs){const targetThumb=gridThumbs.querySelector(`[data-media-id="${mediaId}"]`);targetThumb&&targetThumb!==gridThumbs.firstElementChild&&gridThumbs.insertBefore(targetThumb,gridThumbs.firstElementChild),this.#updateGridThumbnailsActive(mediaId)}if(wasReordered){const rect=targetMedia.getBoundingClientRect();rect.top>=0&&rect.bottom<=window.innerHeight||targetMedia.scrollIntoView({behavior:"instant",block:"start"})}}};#updateCarouselThumbnailsActive=mediaId=>{const carouselThumbs=this.querySelector(".media-gallery__carousel-thumbnails");

1if(!carouselThumbs)return;const thumbItems=carouselThumbs.querySelectorAll("[data-media-id]");let foundActive=!1;for(const thumb of thumbItems){const thumbMediaId=thumb.dataset.mediaId;String(thumbMediaId)===String(mediaId)?(thumb.classList.add("is-active"),foundActive=!0):thumb.classList.remove("is-active")}foundActive||console.warn("\u26A0\uFE0F No matching carousel thumbnail found for mediaId:",mediaId)};#updateGridThumbnailsActive=mediaId=>{const gridThumbs=this.querySelector(".media-gallery__grid-thumbnails");if(!gridThumbs)return;const thumbItems=gridThumbs.querySelectorAll("[data-media-id]");let foundActive=!1;for(const thumb of thumbItems){const thumbMediaId=thumb.dataset.mediaId;String(thumbMediaId)===String(mediaId)?(thumb.classList.add("is-active"),thumb.setAttribute("aria-current","true"),foundActive=!0):(thumb.classList.remove("is-active"),thumb.removeAttribute("aria-current"))}foundActive||console.warn("\u26A0\uFE0F No matching grid thumbnail found for mediaId:",mediaId)};#handleModelInteraction=event=>{const{isInteracting}=event.detail;this.toggleCarouselDrag(!isInteracting)};#realIndexChangeHandler=swiper=>{const{slides,activeIndex}=swiper,slide=slides[activeIndex];if(!slide)return;const mediaType=slide.dataset.mediaType,mediaId=slide.dataset.mediaId,modelViewer=slide.querySelector("model-viewer"),modelViewerButton=slide.querySelector(".shopify-model-viewer-ui__button"),shopifyXrButton=this.querySelector("button[data-shopify-xr]");mediaType==="model"?(slide.dataset?.playing==="true"?this.toggleCarouselDrag(!1):this.toggleCarouselDrag(!0),modelViewer?.classList.contains("shopify-model-viewer-ui__disabled")?modelViewerButton?.removeAttribute("hidden"):modelViewerButton?.setAttribute("hidden",""),shopifyXrButton&&(shopifyXrButton.dataset.shopifyModel3dId=mediaId,shopifyXrButton.classList.remove("hidden"))):(this.toggleCarouselDrag(!0),shopifyXrButton?.classList.add("hidden"))};handleCarouselChange=()=>{this.carousel?.swiperInstance&&(this.carousel.swiperInstance.off("realIndexChange",this.#realIndexChangeHandler),this.carousel.swiperInstance.on("realIndexChange",this.#realIndexChangeHandler))};toggleCarouselDrag=state=>{this.carousel?.swiperInstance&&(this.carousel.swiperInstance.allowTouchMove=state)};handleGridThumbClick=event=>{const source=event.target.closest("[data-media-id]");if(!source)return;const mediaId=source.dataset.mediaId,container=this.querySelector(".media-gallery__grid-thumbnails"),thumbs=container?Array.from(container.querySelectorAll(".media-gallery__item[data-media-id]")):[];for(const el of thumbs)el.classList.remove("is-active"),el.removeAttribute("aria-current");const activeThumb=container?.querySelector(`.media-gallery__item[data-media-id="${mediaId}"]`);activeThumb?.classList.add("is-active"),activeThumb?.setAttribute("aria-current","true"),container&&activeThumb&&requestAnimationFrame(()=>{const rowGap=parseFloat(getComputedStyle(container).rowGap||"0")||0,step=Math.ceil(activeThumb.offsetHeight+rowGap),viewportTop=container.scrollTop,viewportBottom=viewportTop+container.clientHeight,itemTop=activeThumb.offsetTop,itemBottom=itemTop+activeThumb.offsetHeight,idx=thumbs.indexOf(activeThumb),next=thumbs[Math.min(idx+1,thumbs.length-1)],prev=thumbs[Math.max(idx-1,0)],nearBottom=viewportBottom-itemBottom<=step,nearTop=itemTop-viewportTop<=step;nearBottom&&next&&next.scrollIntoView({block:"nearest",behavior:"smooth"}),nearTop&&prev&&prev.scrollIntoView({block:"nearest",behavior:"smooth"})}),this.querySelector(`.media-gallery__carousel-wrapper [data-media-id="${mediaId}"]`)?.scrollIntoView({behavior:"smooth",block:"start"})};preloadZoomDialog=()=>{this.#zoomDialogModule||(this.#zoomDialogModule=import("@theme/zoom-dialog"))};openZoomDialog=async event=>{const trigger=event.target instanceof HTMLButtonElement?event.target:event.target.closest("button");if(!trigger)return;const clickedId=trigger?.getAttribute("data-media-id")??null;this.#setZoomButtonLoading(trigger,!0);try{const mediaNodes=Array.from(this.querySelectorAll('.media-gallery__carousel-wrapper .media-gallery__item[data-media-type="image"]')),items=mediaNodes.map(media=>({src:media.dataset.mediaSrc,width:media.dataset.mediaWidth,height:media.dataset.mediaHeight,element:media})),startIndex=Math.max(0,mediaNodes.findIndex(media=>

1media?.dataset.mediaId===clickedId)),zoomDialogModule=this.#zoomDialogModule||import("@theme/zoom-dialog");this.#zoomDialogModule=zoomDialogModule;const{openPswp}=await zoomDialogModule;openPswp(items,startIndex,{trigger,onChange:pswpIndex=>{const swiper=this.carousel?.swiperInstance;swiper&&swiper.slideTo(pswpIndex,0,!1)}})}catch(error){console.error("Failed to open zoom dialog:",error)}finally{this.#setZoomButtonLoading(trigger,!1)}};#setZoomButtonLoading(button,isLoading){const spinner=button.querySelector('[ref="zoomDialogSpinner"]');spinner&&(isLoading?(button.classList.add("btn--loading"),spinner.classList.remove("hidden")):(button.classList.remove("btn--loading"),spinner.classList.add("hidden")))}#scheduleDeferredLoad(){this.#deferredLoadTimer&&(clearTimeout(this.#deferredLoadTimer),this.#deferredLoadTimer=null),this.querySelector("[data-deferred-slides]")&&(this.#deferredLoadTimer=setTimeout(()=>{this.#deferredLoadTimer=null,this.#loadDeferredSlides()},1500))}#loadDeferredSlides(){const slideTemplate=this.querySelector("[data-deferred-slides]"),thumbTemplate=this.querySelector("[data-deferred-thumbnails]");if(!slideTemplate&&!thumbTemplate)return;const mainWrapper=this.querySelector(".media-gallery__carousel-wrapper"),thumbWrapper=this.querySelector(".carousel__thumbnails-swiper > .swiper-wrapper"),batchSize=MediaGallery.DEFERRED_BATCH_SIZE,loadBatch=()=>{let hasMore=!1;if(slideTemplate?.parentNode&&mainWrapper){const slides=slideTemplate.content.children,count=Math.min(batchSize,slides.length);for(let i=0;i<count;i++)mainWrapper.appendChild(slides[0]);slides.length===0?slideTemplate.remove():hasMore=!0}if(thumbTemplate?.parentNode&&thumbWrapper){const thumbs=thumbTemplate.content.children,count=Math.min(batchSize,thumbs.length);for(let i=0;i<count;i++)thumbWrapper.appendChild(thumbs[0]);thumbs.length===0?thumbTemplate.remove():hasMore=!0}if(hasMore)requestAnimationFrame(loadBatch);else{const carousel=this.carousel;carousel?.swiperInstance&&!carousel.swiperInstance.destroyed&&carousel.swiperInstance.update(),carousel?.thumbnailSwiper&&!carousel.thumbnailSwiper.destroyed&&carousel.thumbnailSwiper.update(),this.#setupZoomReveal()}};requestAnimationFrame(loadBatch)}#forceLoadAllDeferred(){const slideTemplate=this.querySelector("[data-deferred-slides]"),thumbTemplate=this.querySelector("[data-deferred-thumbnails]");if(!slideTemplate&&!thumbTemplate)return;if(this.#deferredLoadTimer&&(clearTimeout(this.#deferredLoadTimer),this.#deferredLoadTimer=null),slideTemplate){const mainWrapper=this.querySelector(".media-gallery__carousel-wrapper");if(mainWrapper)for(;slideTemplate.content.firstChild;)mainWrapper.appendChild(slideTemplate.content.firstChild);slideTemplate.remove()}if(thumbTemplate){const thumbWrapper=this.querySelector(".carousel__thumbnails-swiper > .swiper-wrapper");if(thumbWrapper)for(;thumbTemplate.content.firstChild;)thumbWrapper.appendChild(thumbTemplate.content.firstChild);thumbTemplate.remove()}const carousel=this.carousel;carousel?.swiperInstance&&!carousel.swiperInstance.destroyed&&carousel.swiperInstance.update(),carousel?.thumbnailSwiper&&!carousel.thumbnailSwiper.destroyed&&carousel.thumbnailSwiper.update(),this.#setupZoomReveal()}#setupZoomReveal(){this.#zoomRevealObserver?.disconnect();const items=this.querySelectorAll(".media-zoom-reveal:not(.is-revealed)");items.length&&(this.#zoomRevealObserver=new IntersectionObserver(entries=>{for(const entry of entries)entry.isIntersecting&&(this.#revealItem(entry.target),this.#zoomRevealObserver?.unobserve(entry.target))},{threshold:.1,rootMargin:"50px"}),items.forEach(item=>this.#zoomRevealObserver.observe(item)))}#revealItem(element){const img=element.querySelector("img");if(!img||img.complete){element.classList.add("is-revealed");return}const reveal=()=>element.classList.add("is-revealed");img.addEventListener("load",reveal,{once:!0}),img.addEventListener("error",reveal,{once:!0}),setTimeout(()=>{element.classList.contains("is-revealed")||element.classList.add("is-revealed")},5e3)}get carousel(){return this.refs.carousel}}customElements.get("media-gallery")||customElements.define("media-gallery",MediaGallery);
2//# sourceMappingURL=/cdn/shop/t/60/assets/media-gallery.js.map?v=161710628456793861231777298879