https://campus.w3schools.com/cdn/shop/t/68/assets/product.gallery.js?v=169430556141423714401785919703

1import"vendor.drift-zoom";import Swiper from"vendor.swiper";import Lightbox from"lightbox";import EventHandler from"util.events";const MOBILE_MAX_WIDTH=720,TABLET_MAX_WIDTH=1024,BREAKPOINTS={MOBILE:window.matchMedia(`(max-width: ${MOBILE_MAX_WIDTH}px)`),TABLET:window.matchMedia(`(max-width: ${TABLET_MAX_WIDTH}px)`)};class ProductGallery extends HTMLElement{connectedCallback(){this.hasAttribute("placeholder")||(this.thumbnailEvents=new EventHandler,this.modelEvents=new EventHandler,this.swiper=null,this.thumbnailsSwiper=null,this.initialSlide=parseInt(this.getAttribute("initial-slide"),10)||0,this.thumbnailPosition=this.getAttribute("thumbnail-position"),this.thumbnailLayout=this.getAttribute("thumbnail-layout"),this.imageHoverZoom=this.getAttribute("image-hover-zoom"),this.imageClickToZoom=this.getAttribute("image-click-to-zoom"),this.isCarousel=this.hasAttribute("carousel"),this.isMobile=BREAKPOINTS.MOBILE.matches,this.isTabletOrSmaller=BREAKPOINTS.TABLET.matches,this.mobileHandler=()=>{this.isMobile=BREAKPOINTS.MOBILE.matches,this.#onResize()},this.tabletHandler=()=>{this.isTabletOrSmaller=BREAKPOINTS.TABLET.matches,this.#onResize()},BREAKPOINTS.MOBILE.addEventListener("change",this.mobileHandler),BREAKPOINTS.TABLET.addEventListener("change",this.tabletHandler),this.#onResize())}disconnectedCallback(){BREAKPOINTS.MOBILE.removeEventListener("change",this.mobileHandler),BREAKPOINTS.TABLET.removeEventListener("change",this.tabletHandler),this.#destroyLightbox(),this.#destroyHoverZoom(),this.#destroySwiper(),this.#destroyThumbnails()}showVariantMedia(variant){variant.featured_media&&this.#showMediaAtIndex(variant.featured_media.position-1)}get#thumbnailsOrientation(){return this.isMobile?"horizontal":this.thumbnailPosition==="left"?"vertical":"horizontal"}#showMediaAtIndex(index){this.swiper?.slideTo(index)}#showThumbnailAtIndex(index){if(this.thumbnailsSwiper)return;const thumbnails=this.querySelectorAll("[data-swiper-thumbnail]"),activeClass="swiper-slide-thumb-active",prevActiveThumb=this.querySelector(`.${activeClass}`);prevActiveThumb?.classList.remove(activeClass),prevActiveThumb?.firstElementChild?.blur(),thumbnails[index].classList.add(activeClass)}#onResize(){if(this.#destroyLightbox(),this.#setupLightbox(),!this.isCarousel){const image=this.querySelector(".media__image");image&&(this.#destroyHoverZoom(),this.#setupHoverZoom(image));return}this.isCarousel&&this.#onResizeCarousel()}#onResizeCarousel(){this.#destroyModelListeners(),this.#destroySwiper(),this.#destroyThumbnails(),this.#setupModelListeners(),this.#setupThumbnails(),this.#setupSwiper()}#destroyModelListeners(){this.modelEvents.unregisterAll()}#setupModelListeners(){this.querySelectorAll("model-viewer").forEach(model=>{this.modelEvents.register(model,"shopify_model_viewer_ui_toggle_play",()=>{this.swiper&&this.swiper.detachEvents()}),this.modelEvents.register(model,"shopify_model_viewer_ui_toggle_pause",()=>{this.swiper&&this.swiper.attachEvents()})})}#destroySwiper(){this.swiper&&(this.swiper.destroy(),this.swiper=null)}#setupSwiper(){const options={initialSlide:this.initialSlide,autoHeight:!this.hasAttribute("image-crop"),on:{afterInit:swiper=>this.#handleSlideChange(swiper),slideChange:swiper=>this.#handleSlideChange(swiper)},keyboard:{enabled:!0},updateOnWindowResize:!0,allowTouchMove:this.isMobile,speed:this.isMobile?void 0:0};this.thumbnailsSwiper&&(options.thumbs={swiper:this.thumbnailsSwiper}),this.swiper=new Swiper(this.querySelector("[data-swiper-viewer]"),options)}#destroyThumbnails(){this.#destroyThumbnailsSwiper(),this.#destroyThumbnailsGrid()}#setupThumbnails(){this.isMobile||this.thumbnailLayout==="carousel"||this.thumbnailPosition==="left"?this.#setupThumbnailsSwiper():this.#setupThumbnailsGrid()}#destroyThumbnailsSwiper(){this.thumbnailsSwiper&&(this.thumbnailsSwiper.destroy(),this.thumbnailsSwiper=null)}#setupThumbnailsSwiper(){const options={navigation:{nextEl:this.querySelector("[data-swiper-next]"),prevEl:this.querySelector("[data-swiper-prev]")},mousewheel:{enabled:!0},keyboard:{enabled:!0},slidesPerView:"auto",freeMode:!0,direction:this.#thumbnailsOrientation,watchSlidesProgress:!0,updateOnWindowResize:!0};this.thumbnailsSwiper=new Swiper(this.querySelector("[data-swiper-navigation]"),options)}#destroyThumbnailsGrid(){this.thumbnailEvents.unregisterAll()}#setupThumbnailsGrid(){this.#showThumbnailAtIndex(this.initialSlide),this.querySelectorAll("[data-swiper-thumbnail]").forEach((thumb,thumbIndex)=>{const onThumbnailClick=()=>this.#showMediaAtIndex(thumbIndex),onThumbnailKeyDown=e=>{(e.keyCode===13||e.keyCode===32)&&(e.preventDefault(),this.#showMediaAtIndex(thumbIndex))};this.thumbnailEvents.register(thumb,"click",onThumbnailClick),this.thumbnailEvents.register(thumb,"keydown",onThumbnailKeyDown)})}#handleSlideChange(swiper){const activeMedia=swiper.slides[swiper.activeIndex],previousMedia=swiper.slides[swiper.previousIndex];switch(this.#showThumbnailAtIndex(swiper.activeIndex),activeMedia.dataset.mediaType==="image"&&this.#setupHoverZoom(activeMedia.querySelector(".media__image")),previousMedia?.dataset?.mediaType){case"model":if(!Shopify.ModelViewerUI)return;new Shopify.ModelViewerUI(previousMedia.querySelector("model-viewer")).pause();break;default:break}}#destroyLightbox(){this.lightbox&&(this.lightbox.destroy(),this.lightbox=null)}#setupLightbox(){if(this.imageClickToZoom==="disabled"||this.imageClickToZoom==="mobile"&&!this.isMobile||this.imageClickToZoom==="desktop"&&this.isMobile)return;const triggers=this.querySelectorAll("[data-photoswipe-trigger-for]"),images=this.querySelectorAll("[data-photoswipe-image]"),thumbnails=this.querySelectorAll("[data-photoswipe-thumb]"),onClose=()=>this.drift?.enable(),onOpen=()=>this.drift?.disable();triggers.length<1||images.length<1||(this.lightbox=new Lightbox(triggers,images,thumbnails,{events:{onOpen,onClose}}))}#destroyHoverZoom(){this.drift&&(this.drift.destroy(),this.drift=null)}#setupHoverZoom(image){if(this.imageHoverZoom==="disabled"||this.isTabletOrSmaller)return;const mediaEl=image.closest(".media"),mediaWidth=mediaEl.offsetWidth,mediaHeight=mediaEl.offsetHeight,imageWidth=image.offsetWidth,imageHeight=image.offsetHeight;if(imageWidth<mediaWidth||imageHeight<mediaHeight)return;const options={handleTouch:!1,paneContainer:mediaEl};this.imageHoverZoom==="separate"&&(options.paneContainer=this.querySelector("[data-zoom-container]"),options.inlinePane=!1,options.hoverBoundingBox=!0,options.onShow=()=>{const productMain=document.querySelector(".product-main"),productAlt=document.querySelector(".product-form--alt");productMain?.classList.add("product-gallery--fade"),productAlt?.classList.add("product-gallery--fade")},options.onHide=()=>{const productMain=document.querySelector(".product-main"),productAlt=document.querySelector(".product-form--alt");productMain?.classList.remove("product-gallery--fade"),productAlt?.classList.remove("product-gallery--fade")}),this.drift=new Drift(image,options)}}customElements.define("product-gallery",ProductGallery);
2//# sourceMappingURL=/cdn/shop/t/68/assets/product.gallery.js.map?v=169430556141423714401785919703