https://www.beginningboutique.com/cdn/shop/t/36/assets/media-gallery-bb.js?v=115287873431589966051775602531

1customElements.get("media-gallery-bb")||customElements.define("media-gallery-bb",class extends HTMLElement{constructor(){super(),this.thumbnails=null,this.main=null,this.initialSplide=this.initialSplide.bind(this),this.splideInitialized=!1,this.pdpMainHeight=500,this.videoWrapper=document.querySelector("#main-carousel .video-wrapper"),this.video=document.querySelector("#main-carousel .splide-video"),this.playButton=document.querySelector("#main-carousel .splide__slide .play-icon"),this.zoomListenersAbort=null,this.clearProductImageZoom=this.clearProductImageZoom.bind(this),this.setImageZoomOrigin=this.setImageZoomOrigin.bind(this),this.wasDesktopViewport=typeof window<"u"?window.innerWidth>=1280:!1}connectedCallback(){window.addEventListener("DOMContentLoaded",()=>{this.initialSplide(),this.setInitialThumbHeight()}),window.addEventListener("resize",()=>{this.setInitialThumbHeight()}),this.videoWrapper&&this.videoWrapper.addEventListener("click",()=>this.playPauseVideo()),window.innerWidth>750&&this.video!==null&&this.video.click()}initialSplide(){this.splideInitialized&&(this.thumbnails.destroy(),this.main.destroy(),this.splideInitialized=!1);const thumbnailSettings={gap:10,width:"100%",height:this.pdpMainHeight,isNavigation:!0,pagination:!1,arrows:!0,lazyLoad:!1,rewind:!0,rewindSpeed:2e3},mainSettings={type:"loop",arrows:!0,perMove:1,focus:0,lazyLoad:!1};window.innerWidth>=1280?(mainSettings.perPage=2,mainSettings.height=this.pdpMainHeight,thumbnailSettings.direction="ttb",mainSettings.width="100%"):window.innerWidth>=750&&window.innerWidth<1280?(mainSettings.perPage=2,mainSettings.arrows=!0,mainSettings.height="100%",thumbnailSettings.direction="ltr",thumbnailSettings.perPage=5):(mainSettings.perPage=1,mainSettings.arrows=!1,mainSettings.height="100%",thumbnailSettings.direction="ltr",thumbnailSettings.perPage=4),this.thumbnails=new Splide("#thumbnail-carousel",thumbnailSettings).mount(),this.main=new Splide("#main-carousel",mainSettings).mount(),this.main&&this.thumbnails&&(this.main.sync(this.thumbnails),this.splideInitialized=!0,this.main.on("moved",this.clearProductImageZoom)),this.enableZoomOnImages()}setInitialThumbHeight(){const mainCarousel=document.querySelector(".pdp-main-carousel");if(mainCarousel){const newHeight=mainCarousel.offsetHeight||500;newHeight!==this.pdpMainHeight&&(this.pdpMainHeight=newHeight,this.initialSplide())}}setImageZoomOriginAt(clientX,clientY,element,image){const rect=element.getBoundingClientRect(),offsetX=clientX-rect.left,offsetY=clientY-rect.top,xPercent=Math.min(Math.max(offsetX/element.offsetWidth*100,0),100),yPercent=Math.min(Math.max(offsetY/element.offsetHeight*100,0),100);image.style.transformOrigin=`${xPercent}% ${yPercent}%`}setImageZoomOrigin(event,element,image){this.setImageZoomOriginAt(event.clientX,event.clientY,element,image)}clampZoomPan(element,scaleNum,panX,panY){const w=element.offsetWidth,h=element.offsetHeight,maxX=w*(scaleNum-1)/2,maxY=h*(scaleNum-1)/2;return{x:Math.min(maxX,Math.max(-maxX,panX)),y:Math.min(maxY,Math.max(-maxY,panY))}}mobileFocalPanFromTap(clientX,clientY,element,scaleNum){const rect=element.getBoundingClientRect(),cx=clientX-rect.left,cy=clientY-rect.top,focalX=cx-element.offsetWidth/2,focalY=cy-element.offsetHeight/2;return{x:-(scaleNum-1)*focalX,y:-(scaleNum-1)*focalY}}applyMobileImageZoom(image,element,scaleNum,pan){image.style.transformOrigin="50% 50%",image.style.transform=`translate(${pan.x}px, ${pan.y}px) scale(${scaleNum})`}resetZoomElementState(el){el.classList.remove("product__zoomed-image","pdp-zoom--panning"),el.bbZoomPan={x:0,y:0};const img=el.querySelector(".pdp-image-desktop");img&&(img.style.transform="",img.style.transformOrigin="",img.classList.remove("pdp-zoom--instant"))}clearProductImageZoom(){document.querySelectorAll(".pdp-image-zoom").forEach(el=>this.resetZoomElementState(el))}enableZoomOnImages(){this.zoomListenersAbort&&this.zoomListenersAbort.abort(),this.zoomListenersAbort=new AbortController;const{signal}=this.zoomListenersAbort,isTabletHoverZoom=()=>window.innerWidth>750&&window.innerWidth<1280,isDesktopClickZoom=()=>window.innerWidth>=1280,isMobileDoubleTapZoom=()=>window.innerWidth<=750;document.querySelectorAll(".pdp-image-zoom").forEach(element=>{const image=element.querySelector(".pdp-image-desktop"),scaleAttr=element.getAttribute("data-scale")||"2.6",scaleNum=Math.max(1.01,parseFloat(scaleAttr,10)||2.6);if(!image)return;element.bbZoomPan=element.bbZoomPan||{x:0,y:0};let lastTouchEnd=0,lastTouchX=0,lastTouchY=0,touchPanSession=null;element.addEventListener("touchstart",e=>{if(!isMobileDoubleTapZoom())return;if(!element.classList.contains("product__zoomed-image")){touchPanSession=null;return}if(e.touches.length!==1)return;const t=e.touches[0];touchPanSession={startX:t.clientX,startY:t.clientY,startPanX:element.bbZoomPan.x,startPanY:element.bbZoomPan.y,moved:!1}},{signal,passive:!0}),element.addEventListener("touchmove",e=>{if(!isMobileDoubleTapZoom()||!element.classList.contains("product__zoomed-image")||!touchPanSession||e.touches.length!==1)return;const t=e.touches[0],dx=t.clientX-touchPanSession.startX,dy=t.clientY-touchPanSession.startY;if(!touchPanSession.moved&&Math.hypot(dx,dy)<8)return;touchPanSession.moved||(touchPanSession.moved=!0,element.classList.add("pdp-zoom--panning"),lastTouchEnd=0),e.preventDefault();const raw={x:touchPanSession.startPanX+dx,y:touchPanSession.startPanY+dy},pan=this.clampZoomPan(element,scaleNum,raw.x,raw.y);

1element.bbZoomPan=pan,this.applyMobileImageZoom(image,element,scaleNum,pan)},{signal,passive:!1}),element.addEventListener("touchend",e=>{if(touchPanSession?.moved){touchPanSession=null,element.classList.remove("pdp-zoom--panning"),lastTouchEnd=0;return}if(touchPanSession=null,!isMobileDoubleTapZoom()||e.changedTouches.length!==1)return;const touch=e.changedTouches[0],now=Date.now(),interval=now-lastTouchEnd,sameSpot=Math.abs(touch.clientX-lastTouchX)<45&&Math.abs(touch.clientY-lastTouchY)<45;if(lastTouchEnd>0&&interval>0&&interval<320&&sameSpot){if(e.preventDefault(),lastTouchEnd=0,element.classList.contains("product__zoomed-image"))this.resetZoomElementState(element);else{this.clearProductImageZoom();let pan=this.mobileFocalPanFromTap(touch.clientX,touch.clientY,element,scaleNum);pan=this.clampZoomPan(element,scaleNum,pan.x,pan.y),element.bbZoomPan=pan,element.classList.add("product__zoomed-image"),this.applyMobileImageZoom(image,element,scaleNum,pan)}return}lastTouchEnd=now,lastTouchX=touch.clientX,lastTouchY=touch.clientY},{signal,passive:!1}),element.addEventListener("touchcancel",()=>{touchPanSession?.moved&&(element.classList.remove("pdp-zoom--panning"),lastTouchEnd=0),touchPanSession=null},{signal}),element.addEventListener("mouseover",()=>{isTabletHoverZoom()&&(image.style.transform=`scale(${scaleAttr})`)},{signal}),element.addEventListener("mouseout",()=>{isTabletHoverZoom()&&(image.style.transform="scale(1)")},{signal}),element.addEventListener("mousemove",event=>{isTabletHoverZoom()?this.setImageZoomOrigin(event,element,image):isDesktopClickZoom()&&element.classList.contains("product__zoomed-image")&&(image.classList.add("pdp-zoom--instant"),this.setImageZoomOrigin(event,element,image))},{signal}),element.addEventListener("click",event=>{if(isDesktopClickZoom()){if(event.preventDefault(),event.stopPropagation(),element.classList.contains("product__zoomed-image")){this.resetZoomElementState(element);return}this.clearProductImageZoom(),image.classList.remove("pdp-zoom--instant"),element.classList.add("product__zoomed-image"),this.setImageZoomOrigin(event,element,image),image.style.transform=`scale(${scaleAttr})`}},{signal})}),document.addEventListener("keydown",e=>{e.key==="Escape"&&this.clearProductImageZoom()},{signal}),window.addEventListener("resize",()=>{const isDesktop=window.innerWidth>=1280;isDesktop?!this.wasDesktopViewport&&isDesktop&&this.clearProductImageZoom():this.clearProductImageZoom(),this.wasDesktopViewport=isDesktop},{signal})}playPauseVideo(){this.video.paused?(this.playButton.classList.add("splide-hide-icon"),this.video.play()):(this.playButton.classList.remove("splide-hide-icon"),this.video.pause())}});
2//# sourceMappingURL=/cdn/shop/t/36/assets/media-gallery-bb.js.map?v=115287873431589966051775602531