https://www.luxuryhotelandsparobes.com/cdn/shop/t/117/assets/media-gallery.js?v=26324642200309453561791408349

1/*! Copyright (c) Safe As Milk. All rights reserved. */import PhotoSwipeLightbox from"photoswipe-lightbox";import{debounce,StateSwitch}from"utils";class MediaGallery extends HTMLElement{#navigationResizeObserver;#sliderResizeObserver;#boundHandleDeferredMedia;#boundHandleMediaQueryChange;#boundUpdateThumbs;#boundUpdateViewInSpace;#lightbox;#stateSwitch=null;#thumbWidth=70;#thumbHeight=70;constructor(){super(),this.#boundHandleMediaQueryChange=this.#handleMediaQueryChange.bind(this),this.#boundUpdateThumbs=this.#updateThumbs.bind(this),this.#boundUpdateViewInSpace=this.#updateViewInSpace.bind(this),this.#boundHandleDeferredMedia=this.#handleDeferredMedia.bind(this)}connectedCallback(){this.carousel=this.querySelector("media-carousel"),this.navigation=this.querySelector("media-gallery-navigation"),this.navigationThumbList=this.navigation?.querySelector(".js-media-gallery-thumb-list"),this.navigationPrevious=this.navigation?.querySelector(".js-media-gallery-nav-prev"),this.navigationNext=this.navigation?.querySelector(".js-media-gallery-nav-next"),this.viewInSpaceButton=this.querySelector(".js-product-view-in-space-btn"),this.classList.remove("media-gallery--loading","media-gallery--loading@mob","media-gallery--loading@desk"),this.autoplayVideos=this.getAttribute("data-enable-video-autoplay")==="true",this.carousel&&(typeof this.carousel.index<"u"?this.#init():this.carousel.addEventListener("on:media-carousel:init",(()=>{this.#init()}),{once:!0})),this.dataset.zoom&&this.#initZoom();const videoPlayerIntersectionCallback=entries=>{entries.forEach((entry=>{if(entry.isIntersecting){const videoPlayer=entry.target;videoPlayer.hasAttribute("loaded")||videoPlayer.loadContent(),this.autoplayVideos&&videoPlayer.play()}else{const videoPlayer=entry.target;videoPlayer.pause&&videoPlayer.playing&&videoPlayer.pause()}}))},options={rootMargin:"0px",threshold:.25},videoPlayerObserver=new IntersectionObserver(videoPlayerIntersectionCallback,options);Array.from(this.querySelectorAll(".js-slides video-player")).forEach((videoPlayer=>{videoPlayerObserver.observe(videoPlayer)}))}disconnectedCallback(){this.#navigationResizeObserver&&this.#navigationResizeObserver.disconnect(),this.#sliderResizeObserver&&this.#sliderResizeObserver.disconnect(),this.carousel?.off("on:media-carousel:init",this.#boundHandleDeferredMedia).off("on:media-carousel:slide-change",this.#boundUpdateThumbs).off("on:media-carousel:slide-change",this.#boundUpdateViewInSpace).off("on:media-carousel:slide-change",this.#boundHandleDeferredMedia).off("on:media-carousel:before-slide-change",MediaGallery.#pauseDeferredMedia),this.#lightbox&&this.#lightbox.destroy(),this.#stateSwitch&&this.#stateSwitch.off(this.#boundHandleMediaQueryChange)}goToSlide(mediaId){const slide=this.carousel?.querySelector(`[data-media-id="${mediaId}"]`);if(!slide)return;const slideIndex=slide.dataset.slideId;this.carousel.initialized&&this.carousel.slideTo(Number(slideIndex),200)}#init(){if(this.navigationThumbList){const currentSlideId=this.carousel.index;if(this.navigationThumbList.children[currentSlideId].classList.add("thumbnail-list__item--active"),this.navigationThumbList.children[currentSlideId].querySelector(".thumbnail").setAttribute("aria-current","true"),"ResizeObserver"in window)this.#navigationResizeObserver=new ResizeObserver(debounce((entries=>{entries.forEach((entry=>{const active=entry.target.querySelector(".thumbnail-list__item--active");this.#setCSSVars(this.#thumbWidth,this.#thumbHeight),this.#adjustThumbs(active),this.#navigationPagingVisibilityControl()}))}),50)),this.#navigationResizeObserver.observe(this.navigationThumbList),this.#sliderResizeObserver=new ResizeObserver(debounce((entries=>{entries.forEach((()=>{this.#setCSSVars(this.#thumbWidth,this.#thumbHeight)}))}),100)),this.#sliderResizeObserver.observe(this.carousel);else{const active=this.navigation.querySelector(".thumbnail-list__item--active");this.#setCSSVars(this.#thumbWidth,this.#thumbHeight),this.#adjustThumbs(active),this.#navigationPagingVisibilityControl()}Array.from(this.navigation.querySelectorAll(".thumbnail")).forEac

1h((el=>{el.addEventListener("click",(e=>{const slideNumber=Number(e.target.dataset.slideNumber);this.carousel.slideTo(slideNumber,200)}))})),this.#stateSwitch=new StateSwitch({max:"tab"}),this.#stateSwitch.active()?this.#setThumbnailDimensions("mobile"):this.#setThumbnailDimensions("desktop"),this.#stateSwitch.on(this.#boundHandleMediaQueryChange)}this.navigationThumbList&&this.navigationPrevious&&this.navigationNext&&this.#navigationControl(),this.carousel.currentSlide&&this.#loadAndPlayDeferredMedia(this.carousel.currentSlide),this.carousel.on("on:media-carousel:slide-change",this.#boundUpdateThumbs).on("on:media-carousel:slide-change",this.#boundUpdateViewInSpace).on("on:media-carousel:slide-change",this.#boundHandleDeferredMedia).on("on:media-carousel:before-slide-change",MediaGallery.#pauseDeferredMedia)}#initZoom(){const images=Array.from(this.querySelectorAll(`${this.carousel?".js-slides":""} .media-gallery__link`)).map((el=>({id:el.dataset.slideId,src:el.href,width:el.dataset.pswpWidth,height:el.dataset.pswpHeight}))),closeSVG=document.getElementById("template-icon-close").content.cloneNode(!0).firstElementChild;closeSVG.classList.add("pswp__icn");const arrowNextSVG=document.getElementById("template-icon-chevron").content.cloneNode(!0).firstElementChild;arrowNextSVG.classList.add("pswp__icn");const arrowPreviousSVG=document.getElementById("template-icon-chevron").content.cloneNode(!0).firstElementChild;arrowPreviousSVG.classList.add("pswp__icn","icon--left");const zoomIcon=document.getElementById("template-media-gallery-zoom-icon").content.cloneNode(!0).firstElementChild;zoomIcon.classList.add("pswp__icn"),this.#lightbox=new PhotoSwipeLightbox({arrowPrevSVG:arrowPreviousSVG.outerHTML,arrowNextSVG:arrowNextSVG.outerHTML,zoomSVG:zoomIcon.outerHTML,closeSVG:closeSVG.outerHTML,counter:!1,dataSource:images,bgOpacity:1,showHideAnimationType:"fade",pswpModule:()=>import("photoswipe")}),this.#lightbox.init(),this.#lightbox.addFilter("thumbEl",((thumbEl,data)=>{const el=(this.carousel||this).querySelector(`[data-slide-id="${data.id}"] img`);return el||thumbEl})),this.#lightbox.addFilter("placeholderSrc",((placeholderSrc,slide)=>{const el=(this.carousel||this).querySelector(`[data-slide-id="${slide.data.id}"] img`);return el?el.src:placeholderSrc})),this.carousel&&this.#lightbox.on("change",(()=>{const current=this.#lightbox.pswp.currSlide,{id}=current.data;id&&this.carousel.slideTo(Number(id))}));const boundHandleZoomLink=(event=>{event.preventDefault();const index=event.target.closest(".media-gallery__item")?.dataset.imageSlideIndex;Number(index)>=0&&this.#lightbox.loadAndOpen(Number(index))}).bind(this);this.carousel&&(this.carousel.initialized&&this.carousel.currentSlide.querySelector(".media-gallery__link")?.addEventListener("click",boundHandleZoomLink),this.carousel.addEventListener("on:media-carousel:init",(()=>{this.carousel.currentSlide.querySelector(".media-gallery__link")?.addEventListener("click",boundHandleZoomLink)})),this.carousel.addEventListener("on:media-carousel:slide-change",(({detail:{currentSlide,previousSlide}})=>{const previousLink=previousSlide?.querySelector(".media-gallery__link");previousLink&&previousLink.removeEventListener("click",boundHandleZoomLink);const link=currentSlide.querySelector(".media-gallery__link");link&&link.addEventListener("click",boundHandleZoomLink)}))),this.querySelectorAll(".media-gallery__link").forEach((link=>{link.addEventListener("click",boundHandleZoomLink)}))}#isThumbContainerVertical(){return this.classList.contains("media-gallery--thumbnails-aside")&&window.matchMedia("(min-width: 768px)").matches}#adjustThumbs(activeElement,behavior="instant"){if(!this.navigationThumbList)return;const isVertical=this.#isThumbContainerVertical(),coordinatesMapping={size:isVertical?"height":"width",start:isVertical?"top":"left",end:isVertical?"bottom":"right",marginBefore:isVertical?"marginTop":"marginLeft",marginAfter:isVertical?"marginBottom":"marginRight"},activeElementMarginBefore=Number(window.getComputedStyle(activeElement)[coordinatesMapping.marginBefore].replace("px","")),activeElementMarginAfter=Number(window.getComputedStyle(activeElement)[coordinatesMapping.marginAfter].replace("px","")),activeElementFullWidth=activeElementMarginBefore+activeElement.getBoundingClientRect()[coordinatesMapping.size]+activeElementMarginAfter,isActiveOutsideBefore=this.navigationThumbList.getBoundingClientRect()[coordinatesMapping.start]+activeElementFullWidth>activeElement.getBoundingClientRect()[coordinatesMapping.end]+activeElementMarginAfter,isActiveOutsideAfter=!isActiveOutsideBefore&&this.navigationThumbList.getBoundingClientRect()[coordinatesMapping.end]-activeElementFullWidth<activeElement.getBoundingClientRect()[coordinatesMapping.start]-activeElementMarginBefore;let displacement=0;isActiveOutsideBefore&&(displacement=activeElement.getBoundingClientRect()[coordinatesMapping.start]-activeElementMarginBefore-this.navigationThumbList.getBoundingClientRect()[coordinatesMapping.start]),isActiveOutsideAfter&&(displacement=activeElement.getBoundingClientRect()[coordinatesMapping.end]+activeElementMarginAfter-this.navigationThumbList.getBoundingClientRect()[coordinatesMapping.end]);const elementBeforeActive=activeElement.previousSibling;if(elementBeforeActive){const elementBeforeActiveMarginBefore=Number(window.getComputedStyle(activeElement)[coordinatesMapping.marginBefore].replace("px","")),elementBeforeActiveMarginAfter=Number(window.getComputedStyle(activeElement)[coordinatesMapping.marginAfter].replace("px","")),elementBeforeActiveFullWidth=elementBeforeActiveMarginBefore+elementBeforeActive.getBoundingClientRect()[coordinatesMapping.size]+elementBeforeActiveMarginAfter;this.navigationThumbList.getBoundingClientRect()[coordinatesMapping.start]+elementBeforeActiveFullWidth>elementBeforeActive.getBoundingClientRect()[coordinatesMapping.end]+elementBeforeActiveMarginAfter+1&&(displacement=elementBeforeActive.getBoundingClientRect()[coordinatesMapping.start]-elementBeforeActiveMarginBefore-this.navigationThumbList.getBoundingClientRect()[coordinatesMapping.start])}const elementAfterActive=activeElement.nextSibling;if(elementAfterActive){const elementAfterActiveMarginBefore=Number(window.getComputedStyle(activeElement)[coordinatesMapping.marginBefore].replace("px","")),elementAfterActiveMarginAfter=Number(window.getComputedStyle(activeElement)[coordinatesMapping.marginAfter].replace("px","")),elementAfterActiveFullWidth=elementAfterActiveMarginBefore+elementAfterActive.getBoundingClientRect()[coordinatesMapping.size]+elementAfterActiveMarginAfter;this.navigationThumbList.getBoundingClientRect()[coordinatesMapping.end]-elementAfterActiveFullWidth<elementAfterActive.getBoundingClientRect()[coordinatesMapping.start]-elementAfterActiveMarginBefore&&(displacement=elementAfterActive.getBoundingClientRect()[coordinatesMapping.end]+elementAfterActiveMarginAfter-this.navigationThumbList.getBoundingClientRect()[coordinatesMapping.end])}displacement&&this.navigationThumbList.scrollBy({top:isVertical?displacement:0,left:isVertical?0:displacement,behavior}),this.navigation?.classList.remove("media-gallery__nav--loading"),this.navigation?.classList.add("is-loaded")}#navigationPagingVisibilityControl(){if(!this.navigationThumbList||!this.navigationPrevious||!this.navigationNext)return;const isVertical=this.#isThumbContainerVertical(),coordinatesMapping={scrollSize:isVertical?"scrollHeight":"scrollWidth",clientSize:isVertical?"clientHeight":"clientWidth"};this.navigationThumbList[coordinatesMapping.scrollSize]>this.navigationThumbList[coordinatesMapping.clientSize]?(this.navigationPrevious.removeAttribute("hidden"),this.navigationNext.removeAttribute("hidden")):(this.navigationPrevious.setAttribute("hidden",""),this.navigationNext.setAttribute("hidden",""))}#navigationControl(){if(!this.navigationThumbList)return;const options={root:this.navigationThumbList,rootMargin:"2px",threshold:1};this.#navigationPagingVisibilityControl(),this.navigationPrevious.addEventListener("click",(()=>{const isVertical=this.#isThumbContainerVertical(),listComputedStyle=window.getComputedStyle(this.navigationThumbList),gapValue=parseInt(listComputedStyle.getPropertyValue("column-gap"),10);let displacement=this.navigationThumbList.getBoundingClientRect()[isVertical?"height":"width"]+gapValue;const remainingScroll=this.navigationThumbList[isVertical?"scrollTop":"scrollLeft"];remainingScroll<this.navigationThumbList.getBoundingClientRect()[isVertical?"height":"width"]&&(displacement=remainingScroll),this.navigationThumbList.scrollBy({top:isVertical?0-displacement:0,left:isVertical?0:0-displacement,behavior:"smooth"})})),this.navigationNext.addEventListener("click",(()=>{const isVertical=this.#isThumbContainerVertical(),listComputedStyle=window.getComputedStyle(this.navigationThumbList),gapValue=parseInt(listComputedStyle.getPropertyValue("column-gap"),10);let displacement=this.navigationThumbList.getBoundingClientRect()[isVertical?"height":"width"]+gapValue;const remainingScroll=this.navigationThumbList[isVertical?"scrollHeight":"scrollWidth"]-displacement-this.navigationThumbList[isVertical?"scrollTop":"scrollLeft"];remainingScroll<this.navigationThumbList.getBoundingClientRect()[isVertical?"height":"width"]&&(displacement=remainingScroll+gapValue),this.navigationThumbList.scrollBy({top:isVertical?displacement:0,left:isVertical?0:displacement,behavior:"smooth"})}));const callback=entries=>

1{entries.forEach((entry=>{const containerRect=this.navigationThumbList.getBoundingClientRect(),targetRect=entry.target.getBoundingClientRect(),isVertical=this.#isThumbContainerVertical(),coordinatesMapping={dimension:isVertical?"height":"width",start:isVertical?"top":"left",end:isVertical?"bottom":"right"};containerRect[coordinatesMapping.start]+targetRect[coordinatesMapping.dimension]>=targetRect[coordinatesMapping.end]&&(entry.isIntersecting?this.navigationPrevious.setAttribute("disabled",""):this.navigationPrevious.removeAttribute("disabled")),containerRect[coordinatesMapping.end]-targetRect[coordinatesMapping.dimension]<=targetRect[coordinatesMapping.start]&&(entry.isIntersecting?this.navigationNext.setAttribute("disabled",""):this.navigationNext.removeAttribute("disabled"))}))};if(this.navigationThumbList.children.length>3){const observer=new IntersectionObserver(callback,options);observer.observe(this.navigationThumbList.children[0]),observer.observe(this.navigationThumbList.children[this.navigationThumbList.children.length-1])}}#calculateThumbsRatio(preferredThumbSize=70,minContainerSize=300){const gap=Number(window.getComputedStyle(this.navigationThumbList).gap.split(" ")[0].replace("px","")),containerRect=this.navigationThumbList.getBoundingClientRect(),dimension=this.#isThumbContainerVertical()?"height":"width",containerSize=containerRect[dimension],deviation=Math.floor(preferredThumbSize/10),getRatio=currentContainerSize=>{const lowerBound=Math.floor(currentContainerSize/(preferredThumbSize+gap-deviation)),upperBound=Math.floor(currentContainerSize/(preferredThumbSize+gap+deviation)),finalRatio=upperBound>lowerBound?upperBound:lowerBound;return finalRatio>2?finalRatio:3};return containerSize<=minContainerSize?getRatio(minContainerSize):getRatio(containerSize)}#setCSSVars(preferredThumbWidth=70,preferredThumbHeight=70){if(!this.navigationThumbList)return;const isVertical=this.#isThumbContainerVertical();this.navigationThumbList.style.setProperty("--thumbRatio",this.#calculateThumbsRatio(isVertical?preferredThumbHeight:preferredThumbWidth)),isVertical?this.navigationThumbList.style.setProperty("--justify","start"):this.navigationThumbList.style.setProperty("--justify",this.navigationThumbList.scrollWidth>this.navigationThumbList.clientWidth?"start":"center");const navWrapper=this.navigation.closest(".js-product-slider-nav");navWrapper&&!navWrapper.classList.contains("is-loaded")&&navWrapper.classList.add("is-loaded")}#updateThumbs({detail:{activeIndex}}){if(!this.navigationThumbList)return;const currentElement=this.navigationThumbList.querySelector(".thumbnail-list__item--active"),nextElement=this.navigationThumbList.children[activeIndex];currentElement.classList.remove("thumbnail-list__item--active"),currentElement.querySelector(".thumbnail").removeAttribute("aria-current"),nextElement.classList.add("thumbnail-list__item--active"),nextElement.querySelector(".thumbnail").setAttribute("aria-current","true"),this.#adjustThumbs(nextElement,"smooth")}

1#updateViewInSpace({detail:{currentSlide}}){if(!this.viewInSpaceButton)return;const model=currentSlide?.querySelector(".media-gallery__item--model");model&&(this.viewInSpaceButton.dataset.shopifyModel3dId=model.dataset.mediaId)}#setThumbnailDimensions(viewport="mobile"){const[thumbWidthString,thumbHeightString]=(this.dataset.thumbnailsSize||"70:70").split(":"),[thumbWidthStringMobile,thumbHeightStringMobile]=(this.dataset.thumbnailsSizeMobile||"50:50").split(":"),thumbWidth=Number(thumbWidthString),thumbHeight=Number(thumbHeightString),thumbWidthMobile=Number(thumbWidthStringMobile),thumbHeightMobile=Number(thumbHeightStringMobile);viewport==="mobile"?(this.#thumbWidth=thumbWidthMobile,this.#thumbHeight=thumbHeightMobile):(this.#thumbWidth=thumbWidth,this.#thumbHeight=thumbHeight)}#handleMediaQueryChange(e){e.matches?this.#setThumbnailDimensions("mobile"):this.#setThumbnailDimensions("desktop")}#loadAndPlayDeferredMedia(currentSlide){const deferredMedia=currentSlide?.querySelector(".deferred-media, video-player");deferredMedia&&(deferredMedia.hasAttribute("loaded")?deferredMedia.tagName==="PRODUCT-MODEL"?deferredMedia.querySelector("model-viewer")?.play():deferredMedia.tagName==="VIDEO-PLAYER"&&this.autoplayVideos&&deferredMedia.play():(deferredMedia.tagName==="PRODUCT-MODEL"&&deferredMedia.addEventListener("on:product-model:loaded",(()=>{currentSlide.classList.add("swiper-no-swiping")}),{once:!0}),deferredMedia.tagName==="VIDEO-PLAYER"&&this.autoplayVideos&&deferredMedia.play(),deferredMedia.loadContent()))}#handleDeferredMedia({detail:{currentSlide}}){this.#loadAndPlayDeferredMedia(currentSlide)}static#pauseDeferredMedia({detail:{previousSlide}}){const deferredMedia=previousSlide?.querySelector(".deferred-media, video-player");deferredMedia?.tagName==="PRODUCT-MODEL"&&deferredMedia?.querySelector("model-viewer")?.pause(),deferredMedia?.tagName==="VIDEO-PLAYER"&&deferredMedia.pause()}}customElements.define("media-gallery",MediaGallery);
2//# sourceMappingURL=/cdn/shop/t/117/assets/media-gallery.js.map?v=26324642200309453561791408349