import{Component}from"@theme/component";import{center,closest,clamp,getVisibleElements,mediaQueryLarge,prefersReducedMotion,preventDefault,viewTransition,scheduler}from"@theme/utilities";import{Scroller,scrollIntoView}from"@theme/scrolling";import{SlideshowSelectEvent}from"@theme/events";const SLIDE_VISIBLITY_THRESHOLD=.7;export class Slideshow extends Component{static get observedAttributes(){return["initial-slide"]}attributeChangedCallback(name,oldValue,newValue){name==="initial-slide"&&oldValue!==newValue&&queueMicrotask(()=>{if(!this.isConnected||!this.#scroll||!this.refs.slides)return;const index=parseInt(newValue,10)||0,slide_id=this.refs.slides[index]?.getAttribute("slide-id");slide_id&&this.select({id:slide_id},void 0,{animate:!1})})}requiredRefs=["scroller"];async connectedCallback(){if(super.connectedCallback(),viewTransition.current&&(await viewTransition.current,!this.isConnected))return;const{scroller}=this.refs;this.#scroll=new Scroller(scroller,{onScroll:this.#handleScroll,onScrollStart:this.#onTransitionInit,onScrollEnd:this.#onTransitionEnd}),scroller.addEventListener("mousedown",this.#handleMouseDown),this.addEventListener("mouseenter",this.suspend),this.addEventListener("mouseleave",this.resume),this.addEventListener("pointerenter",this.#handlePointerEnter),document.addEventListener("visibilitychange",this.#handleVisibilityChange),this.#updateControlsVisibility(),this.disabled=this.isNested||this.disabled,this.resume(),this.current=this.initialSlideIndex,scheduler.schedule(()=>{let visibleSlidesAmount=0;const initialSlideId=this.initialSlide?.getAttribute("slide-id");this.initialSlideIndex!==0&&initialSlideId?(this.select({id:initialSlideId},void 0,{animate:!1}),visibleSlidesAmount=1):(visibleSlidesAmount=this.#updateVisibleSlides(),visibleSlidesAmount===0&&(this.select(0,void 0,{animate:!1}),visibleSlidesAmount=1)),this.#resizeObserver=new ResizeObserver(async()=>{viewTransition.current&&await viewTransition.current,visibleSlidesAmount>1&&this.#updateVisibleSlides(),this.hasAttribute("auto-hide-controls")&&this.#updateControlsVisibility()}),this.#resizeObserver.observe(this.refs.slideshowContainer)})}disconnectedCallback(){super.disconnectedCallback();const{scroller}=this.refs;scroller.removeEventListener("mousedown",this.#handleMouseDown),this.removeEventListener("mouseenter",this.suspend),this.removeEventListener("mouseleave",this.resume),this.removeEventListener("pointerenter",this.#handlePointerEnter),document.removeEventListener("visibilitychange",this.#handleVisibilityChange),this.#scroll?.destroy(),this.#resizeObserver&&this.#resizeObserver.disconnect()}get isNested(){return this.parentElement?.closest("slideshow-component")!==null}get initialSlide(){return this.refs.slides?.[this.initialSlideIndex]}async select(input,event,options={}){if(this.#disabled||!this.refs.slides?.length)return;for(const slide2 of this.refs.slides)slide2.hasAttribute("reveal")&&(slide2.removeAttribute("reveal"),slide2.setAttribute("aria-hidden","true"));let requestedIndex=(()=>{if(typeof input=="number")return input;if(typeof input=="string")return parseInt(input,10);if("id"in input){const requestedSlide=this.refs.slides.find(slide2=>slide2.getAttribute("slide-id")==input.id);return!requestedSlide||!this.slides?void 0:(requestedSlide.hasAttribute("hidden")&&(requestedSlide.setAttribute("reveal",""),requestedSlide.setAttribute("aria-hidden","false")),this.slides.indexOf(requestedSlide))}})();const{current}=this;if(requestedIndex===void 0||isNaN(requestedIndex)||requestedIndex===current)return;const{slides}=this;if(!slides?.length)return;this.infinite||(requestedIndex=clamp(requestedIndex,0,slides.length-1)),event?.preventDefault();const{animate=!0}=options,lastIndex=slides.length-1;let index=requestedIndex;requestedIndex<0?index=lastIndex:requestedIndex>lastIndex&&(index=0);const isAdjacentSlide=Math.abs(index-current)<=1&&requestedIndex>=0&&requestedIndex<=lastIndex,{visibleSlides}=this,instant=prefersReducedMotion()||!animate;if(!instant&&!isAdjacentSlide&&visibleSlides.length===1){this.#disabled=!0,await this.#scroll.finished;const targetSlide=slides[index],currentSlide=slides[current];if(!targetSlide||!currentSlide)return;const placeholder=document.createElement("slideshow-slide");targetSlide.before(placeholder),requestedIndex<current?currentSlide.before(targetSlide):currentSlide.after(targetSlide),current===0&&this.#scroll.to(currentSlide,{instant:!0}),queueMicrotask(async()=>{await this.#scroll.finished,this.#disabled=!1,placeholder.replaceWith(targetSlide),this.#scroll.to(targetSlide,{instant:!0})})}const slide=slides[index];if(!slide)return;const previousIndex=this.current;slide.setAttribute("aria-hidden","false"),this.#scroll.to(slide,{instant}),this.current=this.slides?.indexOf(slide)||0,this.#centerSelectedThumbnail(index,instant?"instant":"smooth"),this.dispatchEvent(new SlideshowSelectEvent({index,previousIndex,userInitiated:event!=null,trigger:"select",slide,id:slide.getAttribute("slide-id")}))}next(event,options){event?.preventDefault(),this.select(this.nextIndex,event,options)}previous(event,options){event?.preventDefault(),this.select(this.previousIndex,event,options)}play(interval=this.autoplayInterval){this.#interval||(this.paused=!1,this.#interval=setInterval(()=>{this.matches(":hover")||document.hidden||this.next()},interval))}pause(){this.paused=!0,this.suspend()}get paused(){return this.hasAttribute("paused")}set paused(value){value?this.setAttribute("paused",""):this.removeAttribute("paused")}suspend(){clearInterval(this.#interval),this.#interval=void 0}resume(){!this.autoplay||this.paused||(this.pause(),this.play())}get autoplay(){return!!this.autoplayInterval}get autoplayInterval(){const interval=this.getAttribute("autoplay"),value=parseInt(`${interval}`,10);if(!Number.isNaN(value))return value*1e3}#current=0;get current(){return this.#current}set current(value){const{current,thumbnails,dots,slides,previous,next}=this.refs;this.#current=value,current&&(current.textContent=`${value+1}`);for(const controls of[thumbnails,dots])controls?.forEach((el,i)=>el.setAttribute("aria-selected",`${i===value}`));previous&&(previous.disabled=!this.infinite&&value===0),next&&(next.disabled=!!(!this.infinite&&slides&&this.nextIndex>=slides.length))}get infinite(){return this.getAttribute("infinite")!=null}get visibleSlides(){return getVisibleElements(this.refs.scroller,this.slides,SLIDE_VISIBLITY_THRESHOLD,"x")}get previousIndex(){const{current,visibleSlides}=this,modifier=visibleSlides.length>1?visibleSlides.length:1;return current-modifier}get nextIndex(){const{current,visibleSlides}=this,modifier=visibleSlides.length>1?visibleSlides.length:1;return current+modifier}get atStart(){const{current,slides}=this;return slides?.length?current===0:!1}get atEnd(){const{current,slides}=this;return slides?.length?current===slides.length-1:!1}set disabled(value){this.setAttribute("disabled",String(value))}get disabled(){return this.getAttribute("disabled")==="true"||this.hasAttribute("mobile-disabled")&&!mediaQueryLarge.matches}#disabled=!1;#interval=void 0;#scroll;#resizeObserver;#handleScroll=()=>{const previousIndex=this.#current,index=this.#sync();if(index===previousIndex)return;const slide=this.slides?.[index];slide&&this.dispatchEvent(new SlideshowSelectEvent({index,previousIndex,userInitiated:!0,trigger:"scroll",slide,id:slide.getAttribute("slide-id")}))};#onTransitionInit=()=>{this.setAttribute("transitioning","")};#onTransitionEnd=()=>{this.#updateVisibleSlides(),this.removeAttribute("transitioning")};#sync=()=>{const{slides}=this;if(!slides)return this.current=0;const visibleSlides=this.visibleSlides;if(!visibleSlides.length)return this.current;const{axis}=this.#scroll,{scroller}=this.refs,centers=visibleSlides.map(slide=>center(slide,axis)),referencePoint=visibleSlides.length>1?scroller.getBoundingClientRect()[axis]:center(scroller,axis),closestCenter=closest(centers,referencePoint),closestVisibleSlide=visibleSlides[centers.indexOf(closestCenter)];if(!closestVisibleSlide)return this.current=0;const index=slides.indexOf(closestVisibleSlide);return this.current=index};#dragging=!1;#handleMouseDown=event=>{const{slides}=this;if(!slides||slides.length<=1||!(event.target instanceof Element)||this.disabled||this.#dragging||event.target.closest("model-viewer"))return;event.preventDefault();const{axis}=this.#scroll,startPosition=event[axis],controller=new AbortController,{signal}=controller,startTime=performance.now();let previous=startPosition,velocity=0,moved=!1,distanceTravelled=0;this.#dragging=!0;const onPointerMove=event2=>{const current=event2[axis],initialDelta=startPosition-current;if(!initialDelta)return;if(!moved){moved=!0,this.setPointerCapture(event2.pointerId),document.addEventListener("click",preventDefault,{once:!0,signal});const movingRight=initialDelta<0,movingLeft=initialDelta>0,closestSlideshow=this.parentElement?.closest("slideshow-component"),isNested=closestSlideshow instanceof Slideshow&&closestSlideshow!==this,cannotMoveInDirection=movingRight&&this.atStart||movingLeft&&this.atEnd;if(isNested&&cannotMoveInDirection){controller.abort();return}this.pause(),this.setAttribute("dragging","")}event2.stopImmediatePropagation();const delta=previous-current,timeDelta=performance.now()-startTime;velocity=Math.round(delta/timeDelta*1e3),previous=current,distanceTravelled+=Math.abs(delta),this.#scroll.by(delta,{instant:!0})},onPointerUp=async event2=>{controller.abort();const{current,slides:slides2}=this,{scroller}=this.refs;if(this.#dragging=!1,!slides2?.length||!scroller)return;const direction=Math.sign(velocity),next=this.#sync(),modifier=current!==next||Math.abs(velocity)<10||distanceTravelled<10?0:direction,newIndex=clamp(next+modifier,0,slides2.length-1),newSlide=slides2[newIndex],currentIndex=this.current;if(!newSlide)throw new Error(`Slide not found at index ${newIndex}`);this.#scroll.to(newSlide),this.removeAttribute("dragging"),this.releasePointerCapture(event2.pointerId),this.#centerSelectedThumbnail(newIndex),this.dispatchEvent(new SlideshowSelectEvent({index:newIndex,previousIndex:currentIndex,userInitiated:!0,trigger:"drag",slide:newSlide,id:newSlide.getAttribute("slide-id")})),this.current=newIndex,await this.#scroll.finished,!this.#dragging&&(this.#scroll.snap=!0,this.resume())};this.#scroll.snap=!1,document.addEventListener("pointermove",onPointerMove,{signal}),document.addEventListener("pointerup",onPointerUp,{signal}),document.addEventListener("pointerdown",onPointerUp,{signal}),document.addEventListener("pointercancel",onPointerUp,{signal}),document.addEventListener("pointercapturelost",onPointerUp,{signal})};#handlePointerEnter=()=>{this.setAttribute("actioned","")};get slides(){return this.refs.slides?.filter(slide=>!slide.hasAttribute("hidden")||slide.hasAttribute("reveal"))}get initialSlideIndex(){const initialSlide=this.getAttribute("initial-slide");return initialSlide==null?0:parseInt(initialSlide,10)}#handleVisibilityChange=()=>document.hidden?this.pause():this.resume();#updateControlsVisibility(){if(!this.hasAttribute("auto-hide-controls"))return;const{scroller,slideshowControls}=this.refs;slideshowControls instanceof HTMLElement&&(slideshowControls.hidden=scroller.scrollWidth<=scroller.offsetWidth)}#centerSelectedThumbnail(index,behavior="smooth"){const selectedThumbnail=this.refs.thumbnails?.[index];if(!selectedThumbnail)return;const{thumbnailsContainer}=this.refs;if(!thumbnailsContainer||!(thumbnailsContainer instanceof HTMLElement))return;const{slideshowControls}=this.refs;!slideshowControls||!(slideshowControls instanceof HTMLElement)||scrollIntoView(selectedThumbnail,{ancestor:thumbnailsContainer,behavior,block:"center",inline:"center"})}#updateVisibleSlides(){const{slides}=this;if(!slides||!slides.length)return 0;const visibleSlides=this.visibleSlides;return scheduler.schedule(()=>{slides.forEach(slide=>{const isVisible=visibleSlides.includes(slide);slide.setAttribute("aria-hidden",`${!isVisible}`)})}),visibleSlides.length}}customElements.get("slideshow-component")||customElements.define("slideshow-component",Slideshow);
//# sourceMappingURL=/cdn/shop/t/47/assets/slideshow.js.map?v=63092151078244317761757451905