https://vanderohe.com/cdn/shop/t/31/assets/media-slideshow.js?v=174506362282798429261759408375

1import{c as b}from"vendors/focus-trap.esm";import{S as m}from"vendors/splide.esm";class f extends HTMLElement{constructor(){if(super(),this.slideshow=this.querySelector(".splide.media__main"),this.slideshowList=this.slideshow.querySelector(".splide__list"),this.slides=this.slideshow.querySelectorAll(".splide__slide"),this.slideshowThumbnails=this.querySelector(".splide.media__thumbnails"),this.mediaRatio=this.slideshow.dataset.mediaRatio,this.thumbnailPlacement=this.slideshow.dataset.thumbnailPlacement,this.imagesLoaded=!1,this.mediaThumbnailsScrolling=this.querySelector(".media__thumbnails--scrolling"),this.mediaThumbnailsScrolling&&(this.mediaThumbnails=this.mediaThumbnailsScrolling.querySelectorAll(".media__thumbnail")),this.currentLightboxIndex=0,this.lightboxImages=[],this.bindEvents(),this.initSlideshow(),theme.isTouchDevice())return;const e=JSON.parse(this.dataset.zoom),t=JSON.parse(this.dataset.lightbox);e&&this.initZoom(),t&&this.initLightbox()}bindEvents(){this.mediaThumbnails&&this.mediaThumbnails.forEach(e=>{e.addEventListener("click",t=>this.selectThumbnail(t))})}initSlideshow(){switch(this.slideshowOptions=JSON.parse(this.slideshow.dataset.options),this.mediaRatio){case"square":this.slideshowOptions.heightRatio=1;break;case"portrait":this.slideshowOptions.heightRatio=1.5;break;case"landscape":this.slideshowOptions.heightRatio=.75;break}if(this.slides.forEach((e,t)=>{e.setAttribute("data-slide-index",t)}),this.main=new m(this.slideshow,this.slideshowOptions),this.main.on("move",(e,t,i)=>{if(this.mediaRatio==="adapt"){let s=e+1;s<10&&(s=`0${s}`);const a=this.slideshow.querySelector(`#${this.main.root.id}-slide${s}`).querySelector(".product__media-image");this.slideshowList.style.height=`${a.offsetHeight}px`}this.imagesLoaded||this.loadImages()}),this.main.on("moved",(e,t,i)=>{if(this.mediaThumbnailsScrolling){const s="media__thumbnail--active",o=this.querySelector(`.${s}`),a=this.mediaThumbnailsScrolling.querySelector(`.media__thumbnail[data-index="${e}"]`);o.classList.remove(s),a.classList.add(s),a.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})}}),this.main.on("mounted",()=>{this.mediaRatio==="adapt"&&(this.onResize(),this.slideshow.querySelector(".splide__slide.is-active"))}),this.slideshowThumbnails&&(this.slideshowThumbnailsOptions=JSON.parse(this.slideshowThumbnails.dataset.options),this.thumbnails=new m(this.slideshowThumbnails,this.slideshowThumbnailsOptions),this.main.sync(this.thumbnails)),this.main.mount(),this.slideshowThumbnails){this.thumbnails.mount();const e=this.slideshowThumbnails.querySelector(".splide__track"),i=this.slideshowThumbnails.querySelector(".splide__list").querySelectorAll(".splide__slide"),s=getComputedStyle(e),o=parseInt(s.marginLeft),a=parseInt(s.marginRight);this.thumbnailsContainer=this.querySelector(".media__thumbnails-container"),this.mediaResizeObserver=new ResizeObserver(d=>{const l=d[0].target;let h=0;i.forEach((r,c)=>{const u=getComputedStyle(r);let g=0;c+1!==i.length&&(g=parseFloat(u.marginLeft)+parseFloat(u.marginRight)),h=h+r.offsetWidth+g});const n=h+o+a;n<l.offsetWidth?(this.thumbnailsContainer.style.width=`${n}px`,this.thumbnails.refresh()):this.thumbnailsContainer.style.width="auto"}),this.mediaResizeObserver.observe(this)}}initZoom(){const e=[...this.slides].filter(i=>i.dataset.mediaType==="image"),t=e[0].offsetWidth;this.setAttribute("data-zoom-enabled",!0),e.forEach(i=>{const s=i.querySelector(".product__media-image");let o=Number(s.dataset.width);if(o>1400&&(o=1400),t>o){i.classList.add("zoom-disabled");return}i.style.backgroundImage=`url(${s.src})`,i.addEventListener("mousemove",a=>{const d=a.currentTarget.querySelector(".product__media-image");Number(d.dataset.width);const l=a.currentTarget;let h,n;a.offsetX!==void 0?h=a.offsetX:a.touches&&a.touches.length>0&&(h=a.touches[0].pageX),a.offsetY!==void 0?n=a.offsetY:a.touches&&a.touches.length>0&&(n=a.touches[0].pageY);const r=h/l.offsetWidth*100,c=n/l.offsetHeight*100;l.style.backgroundPosition=`${r}% ${c}%`})})}initLightbox(){const e=[...this.slides].filter(t=>t.dataset.mediaType==="image");this.lightboxImages=e.map(t=>t.querySelector(".product__media-image")),e.forEach((t,i)=>{const s=t.querySelector(".product__media-image");s.classList.add("cursor-pointer"),s.addEventListener("click",o=>

1{this.showLightbox(i)})}),this.modal=this.querySelector(".modal"),this.closeButton=this.querySelector(".modal__close"),this.modalBackground=this.querySelector(".modal__background"),this.modalContainer=this.querySelector(".modal__container"),this.prevButton=document.createElement("button"),this.prevButton.classList.add("modal__nav","modal__nav--prev","absolute","left-4","top-1/2","-translate-y-1/2","z-50","w-6","h-6","fill-current","text-primary-background"),this.prevButton.innerHTML=`
2      <span class="sr-only">${theme.strings.previous}</span>
3      <svg aria-hidden="true" focusable="false" role="presentation" class="icon fill-current icon-ui-chevron-left" viewBox="0 0 320 512"><path d="M34.52 239.03 228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path></svg>
4    `,this.nextButton=document.createElement("button"),this.nextButton.classList.add("modal__nav","modal__nav--next","absolute","right-4","top-1/2","-translate-y-1/2","z-50","w-6","h-6","fill-current","text-primary-background"),this.nextButton.innerHTML=`
5      <span class="sr-only">${theme.strings.next}</span>
6      <svg aria-hidden="true" focusable="false" role="presentation" class="icon fill-current icon-ui-chevron-right" viewBox="0 0 320 512"><path d="M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path></svg>
7    `,this.modal.appendChild(this.prevButton),this.modal.appendChild(this.nextButton),this.focusTrap=b(this.modal,{initialFocus:!1}),this.closeButton.addEventListener("click",t=>{t.preventDefault(),this.closeLightbox()}),this.modalBackground.addEventListener("click",t=>{t.preventDefault(),this.closeLightbox()}),this.modalContainer.addEventListener("click",t=>{t.preventDefault(),this.closeLightbox()}),this.addEventListener("keyup",t=>{t.code.toUpperCase()==="ESCAPE"&&this.closeLightbox()}),this.prevButton.addEventListener("click",t=>{t.preventDefault(),this.showPreviousLightboxImage()}),this.nextButton.addEventListener("click",t=>{t.preventDefault(),this.showNextLightboxImage()}),this.modal.addEventListener("keydown",t=>{t.key==="ArrowLeft"?(t.preventDefault(),this.showPreviousLightboxImage()):t.key==="ArrowRight"&&(t.preventDefault(),this.showNextLightboxImage())})}showLightbox(e){if(e<0||e>=this.lightboxImages.length)return;this.currentLightboxIndex=e;const t=this.lightboxImages[e];if(!t)return;const i=t.cloneNode(!0);i.setAttribute("sizes","100vw"),i.classList.remove("cursor-pointer"),this.modal.querySelector(".modal__container").replaceChildren(i),document.body.classList.add("has-modal"),this.modal.classList.add("modal--active"),this.closeButton=this.querySelector(".modal__close"),this.closeButton.focus(),this.prevButton.classList.remove("hidden"),this.nextButton.classList.remove("hidden"),this.updateLightboxNavigation(),this.focusTrap.activate()}showPreviousLightboxImage(){let e=this.currentLightboxIndex-1;e<0&&(e=this.lightboxImages.length-1),this.showLightbox(e),this.main.go(e)}showNextLightboxImage(){let e=this.currentLightboxIndex+1;e>=this.lightboxImages.length&&(e=0),this.showLightbox(e),this.main.go(e)}updateLightboxNavigation(){this.prevButton.classList.toggle("hidden",this.currentLightboxIndex===0),this.nextButton.classList.toggle("hidden",this.currentLightboxIndex===this.lightboxImages.length-1)}closeLightbox(){document.body.classList.remove("has-modal"),this.modal.classList.remove("modal--active"),this.focusTrap.deactivate()}disableDrag(){this.main.options={drag:!1,keyboard:!1}}enableDrag(){this.main.options={drag:!0,keyboard:!0}}selectThumbnail(e){const t="media__thumbnail--active",i=this.querySelector(`.${t}`),s=e.currentTarget,o=Number(s.dataset.index);i.classList.remove(t),s.classList.add(t),this.main.go(o)}reinitalize(){this.main&&(this.main.destroy(),this.main.mount(),this.main.refresh()),this.thumbnails&&(this.thumbnails.destroy(),this.thumbnails.mount(),this.thumbnails.refresh()),this.thumbnails&&this.main&&this.main.sync(this.thumbnails)}setActiveMedia(e){const t=this.querySelector(`[data-media-id="${e}"]`);if(!t)return;const i=Number(t.dataset.slideIndex);this.main.go(i)}loadImages(){this.slideshow.querySelectorAll("img").forEach(t=>{t.setAttribute("loading","eager")}),this.imagesLoaded=!0}onResize(){this.slideshowResizeObserver=new ResizeObserver(e=>{const t=this.slideshow.querySelector(".splide__slide.is-active .product__media-image");this.main.state.is(m.STATES.IDLE)&&(this.slideshowList.style.height=`${t.offsetHeight}px`)}),this.slideshowResizeObserver.observe(this.slideshow)}}customElements.define("media-slideshow",f);