https://museumstore.hmns.org/cdn/shop/t/40/assets/product-images.js?v=101208797313625026491789141441

1import Photoswipe from"@archetype-themes/modules/photoswipe";import{Slideshow}from"@archetype-themes/modules/slideshow";import{EVENTS}from"@archetype-themes/utils/events";class ProductImages extends HTMLElement{constructor(){super(),this.classes={hidden:"hide"},this.selectors={videoParent:".product__video-wrapper",modelParent:".product__model-wrapper",slide:".product-main-slide",currentSlide:".is-selected",startingSlide:".starting-slide",currentVariantJson:"[data-current-variant-json]",productOptionsJson:"[data-product-options-json]",closeMedia:".product-single__close-media",thumbSlider:"[data-product-thumbs]",thumbScroller:".product__thumbs--scroller",mainSlider:"[data-product-photos]",imageContainer:"[data-product-images]"},this.settings={imageSetName:null,imageSetIndex:null,currentImageSet:null,currentSlideIndex:0,mediaGalleryLayout:this.dataset.mediaGalleryLayout,hasVideos:!!this.querySelector(this.selectors.videoParent),hasModels:!!this.querySelector(this.selectors.modelParent)}}connectedCallback(){if(!this.dataset.modal)return;this.abortController=new AbortController,this.videoObjects={},this.sectionId=this.getAttribute("data-section-id"),this.currentVariant=JSON.parse(this.querySelector(this.selectors.currentVariantJson).textContent),this.productOptions=JSON.parse(this.querySelector(this.selectors.productOptionsJson).textContent),this.cacheElements();const dataSetEl=this.cache.mainSlider.querySelector("[data-set-name]");dataSetEl&&(this.settings.imageSetName=dataSetEl.dataset.setName,this.settings.imageSetIndex="option"+(this.productOptions.findIndex(opt=>this.getImageSetName(opt)==this.settings.imageSetName)+1)),this.initVariants(),this.initImageZoom(),this.initProductSlider(this.currentVariant),this.customMediaListeners()}disconnectedCallback(){this.abortController.abort(),this.flickity&&typeof this.flickity.destroy=="function"&&this.flickity.destroy()}cacheElements(){this.cache={mainSlider:this.querySelector(this.selectors.mainSlider),thumbSlider:this.querySelector(this.selectors.thumbSlider),thumbScroller:this.querySelector(this.selectors.thumbScroller)}}initVariants(){document.addEventListener(`${EVENTS.variantChange}:${this.dataset.sectionId}:${this.dataset.productId}`,this.updateVariantImage.bind(this),{signal:this.abortController.signal}),this.settings.imageSetIndex&&document.addEventListener(`${EVENTS.variantChange}:${this.dataset.sectionId}:${this.dataset.productId}`,this.updateImageSet.bind(this),{signal:this.abortController.signal})}imageSetArguments(variant){if(variant=variant||(this.variants?this.variants.currentVariant:null),!variant)return;const setValue=this.settings.currentImageSet=this.getImageSetName(variant[this.settings.imageSetIndex]),set=`${this.settings.imageSetName}_${setValue}`;return this.settings.currentSlideIndex=0,{cellSelector:'[data-group="'+set+'"]',imageSet:set,initialIndex:this.settings.currentSlideIndex}}updateImageSet(evt){const variant=evt?evt.detail.variant:this.variants?this.variants.currentVariant:null;if(!variant)return;const setValue=this.getImageSetName(variant[this.settings.imageSetIndex]);this.settings.currentImageSet!==setValue&&(this.initProductSlider(variant),this.dispatchEvent(new CustomEvent("product-images:updateImageSet",{bubbles:!0})))}updateImageSetThumbs(set){this.cache.thumbSlider?.querySelectorAll(".product__thumb-item").forEach(thumb=>{thumb.classList.toggle(this.classes.hidden,thumb.dataset.group!==set)})}getImageSetName(string){return string.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/-$/,"").replace(/^-/,"")}initImageZoom(){const container=this;container&&(this.photoswipe=new Photoswipe(this,this.sectionId),container.addEventListener("photoswipe:afterChange",function(evt){this.flickity&&this.flickity.goToSlide(evt.detail.index)}.bind(this)),document.addEventListener("tooltip:open",e=>{if(!e.detail.context==="QuickShop")return;const scripts=document.querySelectorAll('tool-tip product-component script[type="module"]');for(let i=0;i<scripts.length;i++){let script=document.createElement("script");script.type="module",script.textContent=scripts[i].textContent,scripts[i].parentNode.replaceChild(script,scripts[i])}}))}getThumbIndex(target){return target.dataset.index}updateVariantImage(evt){const variant=evt?.detail?.variant;if(!(!variant||!variant.featured_media))if(!matchMedia("(max-width: 768px)").matches&&this.settings.mediaGalleryLayout==="stacked"){const slide=this.cache.mainSlider.querySelector(`.product-main-slide[data-media-id="${variant.featured_media.id}"]`),imageIndex=this.getThumbIndex(slide);this.scrollToStackedMedia(imageIndex),this.handleStackedMediaChange(imageIndex)}else{const newImage=this.querySelector(`.product-main-slide[data-media-id="${variant.featured_media.id}"]`),imageIndex=this.getThumbIndex(newImage);if(typeof imageIndex>"u")return;this.flickity&&this.flickity.goToSlide(imageIndex)}}

1stackedMediaInit(){const mediaGalleryElements=this.querySelectorAll(".product-slideshow .product-main-slide");this.mediaObservers=[];for(let index=0;index<mediaGalleryElements.length;index++){const slideElement=mediaGalleryElements[index],mediaObserver=new IntersectionObserver((entries,observer)=>{entries.forEach(entry=>{entry.isIntersecting&&entry.intersectionRatio>=.5&&(this.settings.currentSlideIndex=index,this.handleStackedMediaChange(this.settings.currentSlideIndex))})},{root:null,rootMargin:"400px 0px 0px 0px",threshold:[0,.5,1]});mediaObserver.observe(slideElement),this.mediaObservers.push(mediaObserver)}}handleStackedMediaChange(index){const mediaTarget=this.querySelectorAll(".product-slideshow .product-main-slide")[index];if(mediaTarget){if(this.settings.hasVideos){const video=mediaTarget.querySelector(this.selectors.videoParent);if(video){const isLandEl=video.querySelector("is-land"),videoMediaEl=video.querySelector("video-media");isLandEl.dispatchEvent(new CustomEvent("select")),videoMediaEl.hasAttribute("autoplay")&&!videoMediaEl.hasAttribute("playing")&&videoMediaEl.hasAttribute("loaded")&&videoMediaEl.play()}}if(this.settings.hasModels){const model=mediaTarget.querySelector(this.selectors.modelParent);if(model){const isLandEl=model.querySelector("is-land"),modelMediaEl=model.querySelector("model-media");isLandEl.dispatchEvent(new CustomEvent("select")),modelMediaEl.hasAttribute("autoplay")&&!modelMediaEl.hasAttribute("playing")&&modelMediaEl.hasAttribute("loaded")&&modelMediaEl.play()}const currentMedia=mediaTarget.querySelector(this.selectors.media);currentMedia&&(currentMedia.dispatchEvent(new CustomEvent("mediaVisible",{bubbles:!0,cancelable:!0,detail:{autoplayMedia:!1}})),mediaTarget.querySelector(".shopify-model-viewer-ui__button").setAttribute("tabindex",0),mediaTarget.querySelector(".product-single__close-media").setAttribute("tabindex",0))}}}scrollToStackedMedia(index){const mediaTarget=this.querySelectorAll(".product-slideshow .product-main-slide")[index];if(!mediaTarget)return;const position=mediaTarget.offsetTop;window.scroll({top:position,behavior:"smooth"})}initProductSlider(variant){if(this.cache.mainSlider.querySelectorAll(this.selectors.slide).length<=1){const slide=this.cache.mainSlider.querySelector(this.selectors.slide);slide&&slide.classList.add("is-selected");return}if(this.flickity&&typeof this.flickity.destroy=="function"&&this.flickity.destroy(),variant){const activeSlide=this.cache.mainSlider.querySelector(this.selectors.startingSlide);this.settings.currentSlideIndex=this._slideIndex(activeSlide)}let mainSliderArgs={dragThreshold:25,adaptiveHeight:!0,avoidReflow:!0,initialIndex:this.settings.currentSlideIndex,childNav:this.cache.thumbSlider,childNavScroller:this.cache.thumbScroller,childVertical:this.cache.thumbSlider?.dataset.position==="beside",pageDots:!0,wrapAround:!0,callbacks:{onInit:this.onSliderInit.bind(this),onChange:this.onSlideChange.bind(this)}};if(this.settings.imageSetName){const imageSetArgs=this.imageSetArguments(variant);mainSliderArgs=Object.assign({},mainSliderArgs,imageSetArgs),this.updateImageSetThumbs(mainSliderArgs.imageSet)}if(!matchMedia("(max-width: 768px)").matches&&this.settings.mediaGalleryLayout==="stacked"){(this.querySelector(this.selectors.imageContainer)||this).setAttribute("data-has-slideshow","false"),this.stackedMediaInit(

1);return}this.flickity=new Slideshow(this.cache.mainSlider,mainSliderArgs),setTimeout(()=>{this.flickity.resize()},100)}onSliderInit(slide){const video=slide.querySelector(this.selectors.videoParent);video&&video.querySelector("is-land").dispatchEvent(new CustomEvent("select"));const model=slide.querySelector(this.selectors.modelParent);model&&model.querySelector("is-land").dispatchEvent(new CustomEvent("select")),this.settings.imageSetName&&this.prepMediaOnSlide(slide)}onSlideChange(index){if(!this.flickity)return;const prevSlide=this.cache.mainSlider.querySelector('.product-main-slide[data-index="'+this.settings.currentSlideIndex+'"]'),nextSlide=this.settings.imageSetName?this.cache.mainSlider.querySelectorAll(".flickity-slider .product-main-slide")[index]:this.cache.mainSlider.querySelector('.product-main-slide[data-index="'+index+'"]');prevSlide.setAttribute("tabindex","-1"),nextSlide.setAttribute("tabindex",0),this.stopMediaOnSlide(prevSlide),this.prepMediaOnSlide(nextSlide),this.settings.currentSlideIndex=index}stopMediaOnSlide(slide){const video=slide.querySelector(this.selectors.videoParent);if(video){const videoMediaEl=video.querySelector("video-media");videoMediaEl.hasAttribute("playing")&&videoMediaEl.pause()}const currentMedia=slide.querySelector(this.selectors.modelParent);if(currentMedia){const modelMediaEl=currentMedia.querySelector("model-media");modelMediaEl.hasAttribute("playing")&&modelMediaEl.pause()}}prepMediaOnSlide(slide){const video=slide.querySelector(this.selectors.videoParent);if(video){this.flickity.reposition();const isLandEl=video.querySelector("is-land"),videoMediaEl=video.querySelector("video-media");isLandEl.dispatchEvent(new CustomEvent("select")),videoMediaEl.hasAttribute("autoplay")&&!videoMediaEl.hasAttribute("playing")&&videoMediaEl.hasAttribute("loaded")&&videoMediaEl.play()}const nextMedia=slide.querySelector(this.selectors.modelParent);if(nextMedia){this.flickity.reposition();const isLandEl=nextMedia.querySelector("is-land"),modelMediaEl=nextMedia.querySelector("model-media");isLandEl.dispatchEvent(new CustomEvent("select")),modelMediaEl.hasAttribute("autoplay")&&!modelMediaEl.hasAttribute("playing")&&modelMediaEl.hasAttribute("loaded")&&modelMediaEl.play()}}_slideIndex(el){return el.getAttribute("data-index")}customMediaListeners(){document.querySelectorAll(this.selectors.closeMedia).forEach(el=>{el.addEventListener("click",function(){let slide;this.settings.mediaGalleryLayout==="stacked"?slide=this.cache.mainSlider.querySelector(`.product-main-slide[data-index="${this.settings.currentSlideIndex}"]`):slide=this.cache.mainSlider.querySelector(this.selectors.currentSlide);const media=slide.querySelector(this.selectors.media);media&&media.dispatchEvent(new CustomEvent("mediaHidden",{bubbles:!0,cancelable:!0}))}.bind(this))});const modelViewers=this.querySelectorAll("model-viewer");modelViewers.length&&modelViewers.forEach(el=>{el.addEventListener("shopify_model_viewer_ui_toggle_play",this.mediaLoaded.bind(this),{signal:this.abortController.signal}),el.addEventListener("shopify_model_viewer_ui_toggle_pause",this.mediaUnloaded.bind(this),{signal:this.abortController.signal})})}mediaLoaded(evt){this.flickity&&this.flickity.setDraggable(!1)}mediaUnloaded(evt){this.flickity&&this.flickity.setDraggable(!0)}}customElements.define("product-images",ProductImages);
2//# sourceMappingURL=/cdn/shop/t/40/assets/product-images.js.map?v=101208797313625026491789141441