https://www.karenmabon.com/cdn/shop/t/26/assets/media-gallery.js?v=64888189692765725911783431766

1customElements.get("media-gallery")||customElements.define("media-gallery",class extends HTMLElement{constructor(){super();try{this.section={settings:JSON.parse(this.getAttribute("data-section-settings")||"{}")}}catch{this.section={settings:{}}}this.elements={liveRegion:this.querySelector('[id^="GalleryStatus"]'),viewer:this.querySelector('[id^="GalleryViewer"]'),thumbnails:this.querySelector('[id^="GalleryThumbnails"]'),dots:this.querySelector(".mobile-dot-navigation")},this.mql=window.matchMedia("(min-width: 750px)"),this.productInfo=document.getElementById(`ProductInfo-${this.dataset.section}`),this.prependMedia=this.dataset.disablePrepend!="true",this.productInfo&&Shopify.postLinksRetry&&this.productInfo.initShareLinks(),this.filteringOption=this.dataset.filteringOption,this.productSpecificFiltering=this.dataset.productSpecificFiltering==="true",this.filterOptionValues=[];try{const raw=this.dataset.filterOptionValues;raw&&(this.filterOptionValues=JSON.parse(raw))}catch{this.filterOptionValues=[]}this.videoIntersectionObserver=null,this.videoObserverTarget=null,this.videoObservers=[];const isGridLayout=["columns","columns_1","stacked"].includes(this.dataset.desktopLayout||"");if(this.elements.viewer)if(isGridLayout)this.initVideoAutoplayForGridLayout();else{this.elements.viewer.addEventListener("slideChanged",debounce(this.onSlideChanged.bind(this),500));const initialActiveMedia=this.elements.viewer.querySelector(".product__media-item.is-active");initialActiveMedia&&this.playActiveMedia(initialActiveMedia)}this.elements.thumbnails&&(this.elements.thumbnails.querySelectorAll("[data-target]").forEach(mediaToSwitch=>{const thumbnailButton=mediaToSwitch.querySelector("button");thumbnailButton&&thumbnailButton.addEventListener("click",()=>{this.setActiveMedia(mediaToSwitch.dataset.target,!1)})}),this.initThumbnailRowAlignment(),this.initThumbnailCarouselScrollEffects()),this.elements.dots&&this.elements.dots.querySelectorAll("[data-target]").forEach(dot=>{dot.addEventListener("click",()=>{this.setActiveMedia(dot.dataset.target,!1)})}),this.dataset.desktopLayout?.includes("thumbnail")&&this.mql.matches&&this.removeListSemantic(),this.filteringOption&&(document.addEventListener("variant:change",this.handleVariantChange.bind(this)),this.dataset.desktopLayout==="stacked"&&this.elements.viewer&&this.updateStackedLayoutFirstVisible()),this.addEventListener("click",this.handleVideoPlayOverlayClick.bind(this))}handleVideoPlayOverlayClick(event){const overlay=event.target.closest(".product-media-video-play-overlay");if(!overlay)return;const video=overlay.closest(".product-media-video-wrapper")?.querySelector("video");video&&(overlay.dataset.listenersAdded||(video.addEventListener("pause",()=>overlay.classList.remove("hidden")),video.addEventListener("ended",()=>overlay.classList.remove("hidden")),overlay.dataset.listenersAdded="true"),video.play().catch(()=>{}),overlay.classList.add("hidden"))}onSlideChanged(event){const currentElement=event.detail?.currentElement;if(currentElement&&(this.elements.viewer.querySelectorAll(".product__media-item").forEach(el=>el.classList.remove("is-active")),currentElement.classList.add("is-active"),this.playActiveMedia(currentElement)),this.elements.thumbnails){const thumbnail=this.elements.thumbnails.querySelector(`[data-target="${event.detail.currentElement.dataset.mediaId}"]`);thumbnail&&!thumbnail.classList.contains("hidden")&&this.setActiveThumbnail(thumbnail)}this.elements.dots&&this.setActiveDot(event.detail.currentElement.dataset.mediaId)}setActiveMedia(mediaId,prepend,filtering=!1,currentVariant=null){filtering&&currentVariant&&this.updateMediaFiltering(currentVariant);const activeMedia=this.elements.viewer.querySelector(`[data-media-id="${mediaId}"]`)||this.elements.viewer.querySelector("[data-media-id]");if(!activeMedia)return;if(this.elements.viewer.querySelectorAll("[data-media-id]").forEach(element=>{element.classList.remove("is-active")}),activeMedia?.classList?.add("is-active"),prepend&&this.prependMedia){if(activeMedia.parentElement.firstChild!==activeMedia&&activeMedia.parentElement.prepe

1nd(activeMedia),this.elements.thumbnails){const activeThumbnail=this.elements.thumbnails.querySelector(`[data-target="${mediaId}"]`);activeThumbnail.parentElement.firstChild!==activeThumbnail&&activeThumbnail.parentElement.prepend(activeThumbnail)}this.elements.viewer.slider&&this.elements.viewer.resetPages()}if(this.preventStickyHeader(),window.setTimeout(()=>{(!this.mql.matches||this.elements.thumbnails)&&activeMedia.parentElement.scrollTo({left:activeMedia.offsetLeft});const activeMediaRect=activeMedia.getBoundingClientRect();if(activeMediaRect.top>-.5)return;const top=activeMediaRect.top+window.scrollY;this.section?.settings?.no_scroll||window.scrollTo({top,behavior:"smooth"})}),["columns","columns_1","stacked"].includes(this.dataset.desktopLayout||"")||this.playActiveMedia(activeMedia),filtering&&currentVariant){if(this.elements.viewer&&this.elements.viewer.initPages&&this.elements.viewer.initPages(),this.elements.viewer&&this.elements.viewer.update&&this.elements.viewer.update(),this.elements.thumbnails){const activeThumbnail=this.elements.thumbnails.querySelector(`[data-target="${mediaId}"]`);activeThumbnail&&!activeThumbnail.classList.contains("hidden")&&(this.setActiveThumbnail(activeThumbnail),this.announceLiveRegion(activeMedia,activeThumbnail.dataset.mediaPosition))}this.elements.dots&&this.setActiveDot(mediaId);return}if(!(!this.elements.thumbnails&&!this.elements.dots)){if(this.elements.thumbnails){const activeThumbnail=this.elements.thumbnails.querySelector(`[data-target="${mediaId}"]`);this.setActiveThumbnail(activeThumbnail),this.announceLiveRegion(activeMedia,activeThumbnail.dataset.mediaPosition)}this.elements.dots&&this.setActiveDot(mediaId)}}isVerticalThumbnailLayout(){const layout=this.dataset.desktopLayout||"";return(layout==="vertical_left"||layout==="vertical_right")&&this.mql.matches}getVisibleThumbnailItems(){const slider=this.elements.thumbnails?.slider;return slider?Array.from(slider.querySelectorAll('[id^="Slide-"]')).filter(element=>!element.classList.contains("hidden")&&element.clientHeight>0):[]}getThumbnailItemOffset(items){if(items.length>1)return items[1].offsetTop-items[0].offsetTop;if(items.length===1){const sliderStyles=getComputedStyle(this.elements.thumbnails.slider),gap=parseFloat(sliderStyles.rowGap)||parseFloat(sliderStyles.gap)||parseFloat(sliderStyles.gridGap)||16;return items[0].offsetHeight+gap}return 0}isThumbnailVerticallyVisible(thumbnail,offset=10){const slider=this.elements.thumbnails?.slider;if(!slider||!thumbnail)return!0;const sliderRect=slider.getBoundingClientRect(),thumbRect=thumbnail.getBoundingClientRect();return thumbRect.top>=sliderRect.top+offset&&thumbRect.bottom<=sliderRect.bottom-offset}scrollVerticalThumbnails(thumbnail,{revealNext=!1}={}){const slider=this.elements.thumbnails?.slider;if(!slider||!thumbnail)return;const items=this.getVisibleThumbnailItems(),index=items.indexOf(thumbnail);if(index===-1)return;const itemOffset=this.getThumbnailItemOffset(items);if(!itemOffset)return;const edgeOffset=10,maxScroll=slider.scrollHeight-slider.clientHeight,sliderRect=slider.getBoundingClientRect(),thumbRect=thumbnail.getBoundingClientRect(),isAboveView=thumbRect.top<sliderRect.top+edgeOffset,isBelowView=thumbRect.bottom>sliderRect.bottom-edgeOffset,isFullyVisible=!isAboveView&&!isBelowView;if(isFullyVisible&&!revealNext)return;let scrollTop=slider.scrollTop;isAboveView?scrollTop=Math.max(0,slider.scrollTop-itemOffset):isBelowView&&(scrollTop=Math.min(maxScroll,slider.scrollTop+itemOffset)),revealNext&&index<items.length-1&&items[index+1].getBoundingClientRect().bottom>sliderRect.bottom-edgeOffset&&(scrollTop=Math.min(maxScroll,(isFullyVisible?slider.scrollTop:scrollTop)+itemOffset)),Math.abs(scrollTop-slider.scrollTop)>1&&slider.scrollTo({top:scrollTop,behavior:"smooth"})}shouldCenterThumbnailsWhenFit(){return this.section?.settings?.center_thumbnails_when_fit!==!1}getThumbnailListSlider(){return!this.elements.thumbnails||this.isVerticalThumbnailLayout()?null:this.elements.thumbnails.querySelector('.thumbnail-list.slider[id^="Slider-"]')||null}updateThumbnailRowAlignment(){if(!this.shouldCenterThumbnailsWhenFit()){const slider2=this.getThumbnailListSlider();slider2&&slider2.classList.remove("thumbnail-list--centered");return}const slider=this.getThumbnailListSlider();if(!slider)return;slider.scrollWidth<=slider.clientWidth+2?(slider.classList.add("thumbnail-list--centered"),slider.scrollLeft=0):slider.classList.remove("thumbnail-list--centered")}shouldUpdateThumbnailCarouselScrollFade(){const layout=this.dataset.desktopLayout||"",mobileThumbn

1ails=this.section?.settings?.mobile_thumbnails;return this.mql.matches?layout==="thumbnail_slider":mobileThumbnails==="show"}updateThumbnailCarouselScrollFade(){const thumbSlider=this.elements.thumbnails;if(!thumbSlider)return;if(!this.shouldUpdateThumbnailCarouselScrollFade()){thumbSlider.classList.remove("is-fade-left","is-fade-right","is-arrow-left","is-arrow-right");return}const list=this.getThumbnailListSlider();if(!list)return;const threshold=2,canScroll=list.scrollWidth>list.clientWidth+threshold,isDesktop=this.mql.matches,fadeEnabled=isDesktop?thumbSlider.dataset.showDesktopThumbnailFade==="true":thumbSlider.dataset.showMobileThumbnailFade==="true",arrowsEnabled=isDesktop?thumbSlider.dataset.showDesktopThumbnailArrows==="true":thumbSlider.dataset.showMobileThumbnailArrows==="true",prevBtn=thumbSlider.querySelector(".slider-button--prev"),nextBtn=thumbSlider.querySelector(".slider-button--next");if(!canScroll){thumbSlider.classList.remove("is-fade-left","is-fade-right","is-arrow-left","is-arrow-right"),prevBtn&&prevBtn.setAttribute("disabled","disabled"),nextBtn&&nextBtn.setAttribute("disabled","disabled");return}const atLeft=list.scrollLeft<=threshold,atRight=list.scrollLeft+list.clientWidth>=list.scrollWidth-threshold;fadeEnabled?(thumbSlider.classList.toggle("is-fade-left",!atLeft),thumbSlider.classList.toggle("is-fade-right",!atRight)):thumbSlider.classList.remove("is-fade-left","is-fade-right"),arrowsEnabled?(thumbSlider.classList.toggle("is-arrow-left",!atLeft),thumbSlider.classList.toggle("is-arrow-right",!atRight),prevBtn&&(atLeft?prevBtn.setAttribute("disabled","disabled"):prevBtn.removeAttribute("disabled")),nextBtn&&(atRight?nextBtn.setAttribute("disabled","disabled"):nextBtn.removeAttribute("disabled"))):thumbSlider.classList.remove("is-arrow-left","is-arrow-right")}initThumbnailCarouselScrollEffects(){const layout=this.dataset.desktopLayout||"",mobileThumbnails=this.section?.settings?.mobile_thumbnails;if(layout!=="thumbnail_slider"&&mobileThumbnails!=="show")return;const thumbSlider=this.elements.thumbnails,list=this.getThumbnailListSlider();if(!thumbSlider||!list)return;const onScroll=()=>this.updateThumbnailCarouselScrollFade();list.dataset.thumbnailCarouselScrollBound||(list.dataset.thumbnailCarouselScrollBound="true",list.addEventListener("scroll",onScroll,{passive:!0})),this.thumbnailCarouselResizeObserver||(this.thumbnailCarouselResizeObserver=new ResizeObserver(onScroll),this.thumbnailCarouselResizeObserver.observe(list)),this.thumbnailCarouselScrollResizeHandler||(this.thumbnailCarouselScrollResizeHandler=onScroll,window.addEventListener("resize",this.thumbnailCarouselScrollResizeHandler)),this.thumbnailCarouselMqlHandler||(this.thumbnailCarouselMqlHandler=onScroll,this.mql.addEventListener("change",this.thumbnailCarouselMqlHandler)),requestAnimationFrame(onScroll)}initThumbnailRowAlignment(){if(!this.shouldCenterThumbnailsWhenFit())return;const slider=this.getThumbnailListSlider();if(!slider)return;const runUpdate=()=>this.updateThumbnailRowAlignment();requestAnimationFrame(runUpdate),this.thumbnailRowResizeObserver||(this.thumbnailRowResizeObserver=new ResizeObserver(runUpdate),this.thumbnailRowResizeObserver.observe(slider)),this.thumbnailRowAlignmentResizeHandler||(this.thumbnailRowAlignmentResizeHandler=()=>runUpdate(),window.addEventListener("resize",this.thumbnailRowAlignmentResizeHandler))}scrollHorizontalThumbnailIntoView(thumbnail){const slider=this.getThumbnailListSlider();if(!slider||!thumbnail||slider.classList.contains("thumbnail-list--centered"))return;const edgeOffset=8,thumbRect=thumbnail.getBoundingClientRect(),sliderRect=slider.getBoundingClientRect();if(thumbRect.left>=sliderRect.left+edgeOffset&&thumbRect.right<=sliderRect.right-edgeOffset)return;const maxScroll=Math.max(0,slider.scrollWidth-slider.clientWidth),scrollLeft=Math.min(maxScroll,Math.max(0,thumbnail.offsetLeft-(slider.clientWidth-thumbnail.offsetWidth)/2));slider.scrollTo({left:scrollLeft,behavior:"smooth"})}setActiveThumbnail(thumbnail){if(!(!this.elements.thumbnails||!thumbnail)){if(this.elements.thumbnails.querySelectorAll("button").forEach(element=>element.removeAttribute("aria-current")),thumbnail.querySelector("button").setAttribute("aria-current",!0),this.isVerticalThumbnailLayout()){this.isThumbnailVerticallyVisible(thumbnail)||this.scrollVerticalThumbnails(thumbnail);return}this.scrollHorizontalThumbnailIntoView(thumbnail),this.updateThumbnailRowAlignment(),this.updateThumbnailCarouselScrollFade()}}setActiveDot(mediaId){if(!this.elements.dots)return;this.elements.dots.querySelectorAll(".dot-navigation-dot").forEach(dot=>{dot.classList.remove("active"),dot.removeAttribute("aria-current")});const activeDot=this.elements.dots.querySelector(`[data-target="${mediaId}"]`);activeDot&&(activeDot.classList.add("active"),activeDot.setAttribute("aria-current",!0))}announceLiveRegion(activeItem,position){const image=activeItem.querySelector(".product__modal-opener--image img");image&&(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)}initVideoAutoplayForGridLayout(){if(!(this.section?.settings?.enable_video_auto

1play!==!1)||!this.elements.viewer)return;this.elements.viewer.querySelectorAll(".product__media-item").forEach(item=>{const deferredMedia=item.querySelector(".deferred-media"),nativeVideo=item.querySelector("video");if(!deferredMedia&&!nativeVideo)return;const playMedia=()=>{if(deferredMedia&&!deferredMedia.hasAttribute("loaded"))deferredMedia.loadContent(!1);else if(deferredMedia){const video=deferredMedia.querySelector("video"),iframe=deferredMedia.querySelector("iframe");video&&video.play().catch(()=>{}),iframe?.contentWindow&&(iframe.classList.contains("js-youtube")?iframe.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}',"*"):iframe.classList.contains("js-vimeo")&&iframe.contentWindow.postMessage('{"method":"play"}',"*"))}nativeVideo&&nativeVideo.play().catch(()=>{})},pauseMedia=()=>{if(deferredMedia){const video=deferredMedia.querySelector("video"),iframe=deferredMedia.querySelector("iframe");video&&video.pause(),iframe?.contentWindow&&(iframe.classList.contains("js-youtube")?iframe.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}',"*"):iframe.classList.contains("js-vimeo")&&iframe.contentWindow.postMessage('{"method":"pause"}',"*"))}nativeVideo&&nativeVideo.pause()},observer=new IntersectionObserver(entries=>{entries.forEach(entry=>{entry.isIntersecting?playMedia():pauseMedia()})},{threshold:.25,rootMargin:"0px"});observer.observe(item),this.videoObservers.push({observer,target:item})})}pauseAllGalleryMedia(){const gallery=this;gallery.querySelectorAll("video").forEach(v=>v.pause()),gallery.querySelectorAll(".js-youtube").forEach(iframe=>{iframe.contentWindow?.postMessage('{"event":"command","func":"pauseVideo","args":""}',"*")}),gallery.querySelectorAll(".js-vimeo").forEach(iframe=>{iframe.contentWindow?.postMessage('{"method":"pause"}',"*")})}playActiveMedia(activeItem){this.pauseAllGalleryMedia(),this.videoIntersectionObserver&&this.videoObserverTarget&&(this.videoIntersectionObserver.unobserve(this.videoObserverTarget),this.videoObserverTarget=null);const enableAutoplay=this.section?.settings?.enable_video_autoplay!==!1,deferredMedia=activeItem.querySelector(".deferred-media"),nativeVideo=activeItem.querySelector("video");if(!enableAutoplay){deferredMedia&&!deferredMedia.hasAttribute("loaded")&&deferredMedia.loadContent(!1);return}const playMedia=()=>{if(deferredMedia&&!deferredMedia.hasAttribute("loaded"))deferredMedia.loadContent(!1);else if(deferredMedia){const video=deferredMedia.querySelector("video"),iframe=deferredMedia.querySelector("iframe");video&&video.play().catch(()=>{}),iframe?.contentWindow&&(iframe.classList.contains("js-youtube")?iframe.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}',"*"):iframe.classList.contains("js-vimeo")&&iframe.contentWindow.postMessage('{"method":"play"}',"*"))}nativeVideo&&nativeVideo.play().catch(()=>{})},pauseMedia=()=>{if(deferredMedia){const video=deferredMedia.querySelector("video");video&&video.pause()}nativeVideo&&nativeVideo.pause()},observerCallback=entries=>{entries.forEach(entry=>{entry.isIntersecting?playMedia():pauseMedia()})};this.playMediaGeneration=(this.playMediaGeneration||0)+1;const currentGeneration=this.playMediaGeneration,observerCallbackWithGuard=entries=>{currentGeneration===this.playMediaGeneration&&observerCallback(entries)};this.videoIntersectionObserver=new IntersectionObserver(observerCallbackWithGuard,{threshold:.25,rootMargin:"0px"}),this.videoObserverTarget=activeItem,this.videoIntersectionObserver.observe(activeItem);const rect=activeItem.getBoundingClientRect();rect.top<window.innerHeight&&rect.bottom>0&&playMedia()}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")))}handleVariantChange(event){if(!this.filteringOption||!event.detail.variant)return;const currentVariant=event.detail.variant;this.updateMediaFiltering(currentVariant);const firstVisibleMedia=this.querySelector(".product__media-item:not(.hidden)");if(firstVisibleMedia){const mediaId=firstVisibleMedia.dataset.mediaId;this.setActiveMedia(mediaId,!1,!0,currentVariant)}}updateStackedLayoutFirstVisible(){if(!(this.dataset.desktopLayout==="stacked")||!this.elements.viewer)return;this.elements.viewer.querySelectorAll(".product__media-item").forEach(item=>item.classList.remove("product__media-item--full"));const firstVisible=this.elements.viewer.querySelector(".product__media-item:not(.hidden)");firstVisible&&firstVisible.classList.add("product__media-item--full")}updateMediaFiltering(currentVariant){if(!this.filteringOption||!currentVariant)return;this.querySelectorAll(".product__media-item, .thumbnail-list__item, .dot-navigation-dot").forEach(slide=>{const slideAlt=slide.dataset.alt,variantValue=currentVariant[this.filteringOption];slideAlt==="always_display"||!slideAlt||slideAlt===""||slideAlt===variantValue||!this.filterOptionValues.includes(slideAlt)?slide.classList.remove("hidden"):slide.classList.add("hidden")}),this.updateStackedLayoutFirstVisible(),this.updateThumbnailRowAlignment(),this.updateThumbnailCarouselScrollFade(),this.querySelectorAll(".slider-counter__link").forEach(link=>{const linkAlt=link.dataset.alt,variantValue=currentVariant[this.filteringOption];linkAlt==="always_display"||!linkAlt||linkAlt===""||linkAlt===variantValue||!this.filterOptionValues.includes(linkAlt)?link.classList.remove("hidden"):link.classList.add("hidden")})}});
2//# sourceMappingURL=/cdn/shop/t/26/assets/media-gallery.js.map?v=64888189692765725911783431766