https://poppyplaytime.com/cdn/shop/t/53/assets/media-gallery.js?v=68073353792841103841789470864

1customElements.get("media-gallery")||customElements.define("media-gallery",class extends HTMLElement{constructor(){super(),this.elements={liveRegion:this.querySelector('[id^="GalleryStatus"]'),viewer:this.querySelector('[id^="GalleryViewer"]'),thumbnails:this.querySelector('[id^="GalleryThumbnails"]')},this.mql=window.matchMedia("(min-width: 750px)"),this.mql.addEventListener("change",this.syncViewerControls.bind(this)),this.elements.viewer&&(this.elements.viewer.addEventListener("slideChanged",debounce(this.onSlideChanged.bind(this),500)),this.bindViewerButtons(),this.bindGalleryDots()),this.elements.thumbnails&&(this.elements.thumbnails.querySelectorAll("[data-target]").forEach(mediaToSwitch=>{const button=mediaToSwitch.querySelector("button");button&&button.addEventListener("click",this.setActiveMedia.bind(this,mediaToSwitch.dataset.target,!1))}),this.bindThumbnailDragScroll(),this.bindThumbnailHeightSync()),this.dataset.desktopLayout?.includes("thumbnail")&&this.mql.matches&&this.removeListSemantic(),this.syncViewerControls()}connectedCallback(){this.closest("quick-add-modal")&&(this.bindViewerDrag(),this.syncViewerControls())}get isInsideQuickAdd(){return!!this.closest("quick-add-modal")}bindThumbnailHeightSync(){if(!(!this.elements.thumbnails||!this.elements.viewer)&&(this.syncThumbnailHeight=this.syncThumbnailHeight.bind(this),this.mql.addEventListener("change",this.syncThumbnailHeight),requestAnimationFrame(()=>this.syncThumbnailHeight()),window.addEventListener("resize",this.syncThumbnailHeight),this.elements.viewer.querySelectorAll("img").forEach(img=>{img.complete||img.addEventListener("load",this.syncThumbnailHeight,{once:!0})}

1),typeof ResizeObserver<"u")){this.thumbnailHeightObserver=new ResizeObserver(()=>this.syncThumbnailHeight()),this.thumbnailHeightObserver.observe(this.elements.viewer);const media=this.elements.viewer.querySelector(".product-media-container, .product__media-item.is-active");media&&this.thumbnailHeightObserver.observe(media)}}syncThumbnailHeight(){const slider=this.elements.thumbnails,list=slider?.querySelector(".thumbnail-list");if(!slider||!list)return;if(!this.mql.matches){slider.style.height="",slider.style.maxHeight="",slider.style.minHeight="",list.style.height="",list.style.maxHeight="",list.style.removeProperty("--thumbnail-item-height");return}const VISIBLE_THUMBS=5.3,targetHeight=(this.elements.viewer.querySelector(".product__media-item.is-active .product-media-container")||this.elements.viewer.querySelector(".product__media-item.is-active .product__modal-opener")||this.elements.viewer.querySelector(".product__media-item.is-active")||this.elements.viewer.querySelector(".product-media-container"))?.getBoundingClientRect().height;if(!targetHeight||targetHeight<1)return;const gap=parseFloat(getComputedStyle(list).rowGap||getComputedStyle(list).gap)||16,gapCount=Math.floor(VISIBLE_THUMBS),itemHeight=Math.max(1,(targetHeight-gapCount*gap)/VISIBLE_THUMBS),heightPx=`${Math.round(targetHeight)}px`;slider.style.height=heightPx,slider.style.maxHeight=heightPx,slider.style.minHeight=heightPx,list.style.height=heightPx,list.style.maxHeight=heightPx,list.style.setProperty("--thumbnail-item-height",`${itemHeight}px`)}bindThumbnailDragScroll(){const list=this.elements.thumbnails?.querySelector(".thumbnail-list");if(!list||list.dataset.dragScrollBound==="true")return;list.dataset.dragScrollBound="true";const DRAG_THRESHOLD=4;let isPointerDown=!1,isDragging=!1,suppressClick=!1,startY=0,startScrollTop=0,activePointerId=null;const endDrag=event=>{if(isPointerDown&&!(activePointerId!=null&&event?.pointerId!=null&&event.pointerId!==activePointerId)){if(isDragging&&activePointerId!=null&&list.hasPointerCapture?.(activePointerId))try{list.releasePointerCapture(activePointerId)}catch{}isDragging&&(suppressClick=!0,setTimeout(()=>{suppressClick=!1},50)),isPointerDown=!1,isDragging=!1,activePointerId=null,list.classList.remove("is-dragging")}};list.addEventListener("pointerdown",event=>{event.pointerType==="mouse"&&event.button!==0||this.mql.matches&&(list.scrollHeight<=list.clientHeight||(isPointerDown=!0,isDragging=!1,activePointerId=event.pointerId,startY=event.clientY,startScrollTop=list.scrollTop))}),list.addEventListener("pointermove",event=>{if(!isPointerDown||activePointerId!==event.pointerId)return;const deltaY=event.clientY-startY;if(!(!isDragging&&Math.abs(deltaY)<DRAG_THRESHOLD)){if(!isDragging){isDragging=!0,list.classList.add("is-dragging");try{list.setPointerCapture(event.pointerId)}catch{}}event.preventDefault(),list.scrollTop=startScrollTop-deltaY}}),list.addEventListener("pointerup",endDrag),list.addEventListener("pointercancel",endDrag),list.addEventListener("lostpointercapture",endDrag),list.addEventListener("click",event=>{suppressClick&&(event.preventDefault(),event.stopPropagation(),suppressClick=!1)},!0)}get mediaItems(){return this.elements.viewer?Array.from(this.elements.viewer.querySelectorAll(".product__media-item[data-media-id]")):[]}get usesActiveSlideNavigation(){return this.isInsideQuickAdd?this.mediaItems.length>1:!!(this.dataset.desktopLayout?.includes("thumbnail")&&this.mql.matches)}bindViewerDrag(){const slider=this.elements.viewer?.querySelector('[id^="Slider-"]');if(!slider||slider.dataset.quickAddDragBound==="true"||this.mediaItems.length<2)return;slider.dataset.quickAddDragBound="true";const DRAG_THRESHOLD=40;let isPointerDown=!1,isDragging=!1,startX=0,startY=0,activePointerId=null,suppressClick=!1;const isNavControl=target=>target.closest(".slider-buttons, .product-gallery-dots, .slider-button, .thumbnail-slider, .product__media-toggle, modal-opener.product__modal-opener"),goBy=direction=>{const items=this.mediaItems;if(items.length<2)return;let nextIndex=Math.max(0,items.findIndex(item=>item.classList.contains("is-active")))+direction;nextIndex<0&&(nextIndex=items.length-1),nextIndex>=items.length&&(nextIndex=0),this.setActiveMedia(items[nextIndex].dataset.mediaId,!1)},endDrag=event=>{if(!isPointerDown||activePointerId!=null&&event?.pointerId!=null&&event.pointerId!==activePointerId)return;const wasDragging=isDragging,deltaX=(event?.clientX??startX)-startX,pointerId=activePointerId;if(isPointerDown=!1,isDragging=!1,activePointerId=null,slider.classList.remove("is-dragging"),wasDragging&&pointerId!=null&&slider.hasPointerCapture?.(pointerId))try{slider.releasePointerCapture(pointerId)}catch{}wasDragging&&(Math.abs(deltaX)>=DRAG_THRESHOLD&&goBy(deltaX<0?1:-1),suppressClick=!0,setTimeout(()=>{suppressClick=!1},50))};slider.addEventListener("pointerdown",event=>{event.pointerType==="mouse"&&event.button!==0||isNavControl(event.target)||this.mediaItems.length<2||(isPointerDown=!0,isDragging=!1,activePointerId=event.pointerId,startX=event.clientX,startY=event.clientY)}),slider.addEventListener("pointermove",event=>{if(!isPointerDown||activePointerId!==event.pointerId)return;const deltaX=event.clientX-startX,deltaY=event.clientY-startY;if(!isDragging){if(Math.abs(deltaX)<DRAG_THRESHOLD&&Math.abs(deltaY)<DRAG_THRESHOLD)return;if(Math.abs(deltaY)>Math.abs(deltaX)){isPointerDown=!1;return}isDragging=!0,slider.classList.add("is-dragging");try{slider.setPointerCapture(event.pointerId)}catch{}}event.preventDefault()},{passive:!1}),slider.addEventListener("pointerup",endDrag),slider.addEventListener("pointercancel",endDrag),slider.addEventListener("lostpointercapture",endDrag),slider.addEventListener("dragstart",event=>event.preventDefault()),slider.addEventListener("click",event=>{suppressClick&&(event.preventDefault(),event.stopPropagation(),suppressClick=!1)},!0)}bindViewerButtons(){this.prevButton=this.elements.viewer.querySelector('button[name="previous"]'),this.nextButton=this.elements.viewer.querySelector('button[name="next"]'),this.prevButton?.addEventListener("click",event=>this.onViewerButtonClick(event,-1),!0),this.nextButton?.addEventListener("click",event=>this.onViewerButtonClick(event,1),!0)}onViewerButtonClick(event,direction){if(!this.usesActiveSlideNavigation)return;event.preventDefault(),event.stopImmediatePropagation();const items=this.mediaItems;if(items.length<2)return;let nextIndex=Math.max(0,items.findIndex(item=>item.classList.contains("is-active")))+direction;nextIndex<0&&(nextIndex=items.length-1),nextIndex>=items.length&&(nextIndex=0),this.setActiveMedia(items[nextIndex].dataset.mediaId,!1)}syncViewerControls(){!this.prevButton&&!this.nextButton||this.usesActiveSlideNavigation&&([this.prevButton,this.nextButton].forEac

1h(button=>{button&&(button.removeAttribute("disabled"),button.setAttribute("aria-disabled","false"))}),this.elements.viewer&&!this.elements.viewer.__galleryNavPatched&&(this.elements.viewer.__galleryNavPatched=!0,this.elements.viewer.update=()=>{[this.prevButton,this.nextButton].forEach(button=>{button&&(button.removeAttribute("disabled"),button.setAttribute("aria-disabled","false"))})},requestAnimationFrame(()=>this.elements.viewer.update())))}onSlideChanged(event){if(this.syncGalleryDots(event?.detail?.currentPage),!this.elements.thumbnails||!event?.detail?.currentElement)return;const thumbnail=this.elements.thumbnails.querySelector(`[data-target="${event.detail.currentElement.dataset.mediaId}"]`);this.setActiveThumbnail(thumbnail)}syncGalleryDots(currentPage){const dots=this.elements.viewer?.querySelectorAll(".product-gallery-dots__dot");!dots?.length||!currentPage||dots.forEach(dot=>{const isActive=Number(dot.dataset.dot)===Number(currentPage);dot.classList.toggle("is-active",isActive),dot.setAttribute("aria-current",isActive?"true":"false")})}bindGalleryDots(){const dots=this.elements.viewer?.querySelectorAll(".product-gallery-dots__dot");dots?.length&&dots.forEach(dot=>{dot.addEventListener("click",event=>{event.preventDefault(),event.stopPropagation();const index=Number(dot.dataset.dot)-1,items=this.mediaItems;index<0||!items[index]||this.setActiveMedia(items[index].dataset.mediaId,!1)})})}setActiveMedia(mediaId,prepend){const activeMedia=this.elements.viewer.querySelector(`.product__media-item[data-media-id="${mediaId}"]`)||this.elements.viewer.querySelector(".product__media-item[data-media-id]");if(!activeMedia)return;if(this.elements.viewer.querySelectorAll(".product__media-item[data-media-id]").forEach(element=>{element.classList.remove("is-active")}),activeMedia.classList.add("is-active"),activeMedia.classList.add("scroll-trigger--cancel"),activeMedia.style.opacity="1",activeMedia.style.transform="none",activeMedia.querySelectorAll("img").forEach(img=>{img.getAttribute("loading")==="lazy"&&img.setAttribute("loading","eager"),img.dataset.src&&!img.getAttribute("src")&&img.setAttribute("src",img.dataset.src),typeof img.decode=="function"&&img.decode().catch(()=>{})}),prepend){if(activeMedia.parentElement?.firstChild!==activeMedia&&activeMedia.parentElement.prepend(activeMedia),this.elements.thumbnails){const activeThumbnail2=this.elements.thumbnails.querySelector(`[data-target="${mediaId}"]`);activeThumbnail2&&activeThumbnail2.parentElement?.firstChild!==activeThumbnail2&&activeThumbnail2.parentElement.prepend(activeThumbnail2)}this.elements.viewer.slider&&this.elements.viewer.resetPages()}this.preventStickyHeader(),this.playActiveMedia(activeMedia),this.syncViewerControls(),!this.mql.matches&&this.elements.viewer?.slider&&activeMedia&&this.elements.viewer.slider.scrollTo({left:activeMedia.offsetLeft});const activeIndex=this.mediaItems.findIndex(item=>item===activeMedia);if(activeIndex>=0&&this.syncGalleryDots(activeIndex+1),!this.elements.thumbnails)return;const activeThumbnail=this.elements.thumbnails.querySelector(`[data-target="${mediaId}"]`);this.setActiveThumbnail(activeThumbnail),activeThumbnail&&this.announceLiveRegion(activeMedia,activeThumbnail.dataset.mediaPosition),this.syncThumbnailHeight?.()}setActiveThumbnail(thumbnail){!this.elements.thumbnails||!thumbnail||(this.elements.thumbnails.querySelectorAll("button").forEach(element=>element.removeAttribute("aria-current")),thumbnail.querySelector("button")?.setAttribute("aria-current",!0),!this.elements.thumbnails.isSlideVisible?.(thumbnail,10)&&this.elements.thumbnails.slider&&this.elements.thumbnails.slider.scrollTo({left:thumbnail.offsetLeft,top:thumbnail.offsetTop}))}announceLiveRegion(activeItem,position){const image=activeItem.querySelector(".product__modal-opener--image img");!image||!this.elements.liveRegion||(image.onload=()=>{this.elements.liveRegion.setAttribute("aria-hidden",!1),this.elements.liveRegion.innerHTML=window.accessibilityStrings.imageAvailable.replace("[index]",position),setTimeout(()=>{this.elements.liveRegion.setAttribute("aria-hidden",!0)},2e3)},image.src=image.src)}playActiveMedia(activeItem){window.pauseAllMedia();const deferredMedia=activeItem.querySelector(".deferred-media");deferredMedia&&deferredMedia.loadContent(!1)}preventStickyHeader(){this.stickyHeader=this.stickyHeader||document.querySelector("sticky-header"),this.stickyHeader&&this.stickyHeader.dispatchEvent(new Event("preventHeaderReveal"))}removeListSemantic(){this.elements.viewer?.slider&&(this.elements.viewer.slider.setAttribute("role","presentation"),this.elements.viewer.sliderItems?.forEach(sli

1de=>slide.setAttribute("role","presentation")))}});
2//# sourceMappingURL=/cdn/shop/t/53/assets/media-gallery.js.map?v=68073353792841103841789470864