https://www.neurocosmedics.com/cdn/shop/t/34/assets/slideshow.js?v=106557976703040176111790818747

1import{Component}from"@theme/component";import{center,closest,clamp,mediaQueryLarge,prefersReducedMotion,preventDefault,viewTransition,scheduler}from"@theme/utilities";import{Scroller,scrollIntoView}from"@theme/scrolling";import{SlideshowSelectEvent}from"@theme/events";const SLIDE_VISIBLITY_THRESHOLD=.7;class SlideshowViewportObserver{static#instance=null;#observer=null;static getInstance(){return this.#instance||(this.#instance=new SlideshowViewportObserver),this.#instance}observe(slideshow){this.#observer||(this.#observer=new IntersectionObserver(entries=>{for(const entry of entries){const slideshowElement=entry.target;entry.isIntersecting?slideshowElement.setAttribute("in-viewport",""):slideshowElement.removeAttribute("in-viewport")}},{rootMargin:"100px"})),this.#observer.observe(slideshow)}unobserve(slideshow){this.#observer?.unobserve(slideshow),slideshow.removeAttribute("in-viewport")}}export class Slideshow extends Component{static get observedAttributes(){return["initial-slide"]}attributeChangedCallback(name,oldValue,newValue){name==="initial-slide"&&oldValue!==newValue&&requestAnimationFrame(()=>this.#resetToInitialSlide())}requiredRefs=["scroller"];async connectedCallback(){super.connectedCallback(),SlideshowViewportObserver.getInstance().observe(this),this.#outerSlideVisibilityController?.abort(),this.#outerSlideVisibilityController=null;const outerSlide=this.parentElement?.closest("slideshow-slide");if(outerSlide){this.#outerSlideVisibilityController=new AbortController,outerSlide.addEventListener("contentvisibilityautostatechange",event=>{if(event.skipped)return;const viewportObserver=SlideshowViewportObserver.getInstance();viewportObserver.unobserve(this),viewportObserver.observe(this),this.#intersectionObserver&&this.#setupIntersectionObserver(),this.hasAttribute("actioned")||requestAnimationFrame(()=>{this.isConnected&&!this.hasAttribute("actioned")&&this.#resetToInitialSlide()})},{signal:this.#outerSlideVisibilityController.signal});const guardedScroller=this.refs.scroller;guardedScroller&&guardedScroller.addEventListener("scroll",()=>{if(!this.disabled)return;const wanted=this.slides?.[this.current]?.offsetLeft??0;Math.abs(guardedScroller.scrollLeft-wanted)>1&&(guardedScroller.scrollLeft=wanted)},{passive:!0,signal:this.#outerSlideVisibilityController.signal})}if(this.#pageShowController?.abort(),this.#pageShowController=null,this.closest(".card-gallery")&&(this.#pageShowController=new AbortController,window.addEventListener("pageshow",event=>{const persisted=event.persisted,navigation=performance.getEntriesByType?.("navigation")?.[0];!persisted&&navigation?.type!=="back_forward"||(requestAnimationFrame(()=>this.#resetToInitialSlide()),setTimeout(()=>{this.isConnected&&this.#resetToInitialSlide()},300))},{signal:this.#pageShowController.signal})),viewTransition.current&&(await viewTransition.current,!this.isConnected))return;(this.slides?.length||0)<=1?this.#setupSlideshowWithoutControls():this.#setupSlideshow()}disconnectedCallback(){if(super.disconnectedCallback(),SlideshowViewportObserver.getInstance().unobserve(this),this.#outerSlideVisibilityController?.abort(),this.#outerSlideVisibilityController=null,this.#pageShowController?.abort(),this.#pageShowController=null,this.#intersectionObserver&&(this.#intersectionObserver.disconnect(),this.#intersectionObserver=null),this.#scroll){const{scroller}=this.refs;scroller.removeEventListener("mousedown",this.#handleMouseDown),this.#scroll.destroy()}(this.slides?.length||0)>1&&(this.removeEventListener("mouseenter",this.suspend),this.removeEventListener("mouseleave",this.resume),this.removeEventListener("pointerenter",this.#handlePointerEnter),document.removeEventListener("visibilitychange",this.#handleVisibilityChange)),this.#resizeObserver&&this.#resizeObserver.disconnect()}updatedCallback(){super.updatedCallback(),requestAnimationFrame(()=>{const slideCount=this.slides?.length||0;slideCount>1&&!this.#scroll?this.#setupSlideshow():slideCount>1&&this.#setupIntersectionObserver(),this.#resetToInitialSlide()})}#resetToInitialSlide(){if(!this.isConnected||!this.refs.slides?.length)return;const visibleSlides=this.slides;if(!visibleSlides?.length)return;const index=Math.min(Math.max(0,this.initialSlideIndex),visibleSlides.length-1),slideId=visibleSlides[index]?.getAttribute("slide-id");if(this.#scroll){slideId?this.select({id:slideId},void 0,{animate:!1,force:!0}):this.select(index,void 0,{animate:!1,force:!0});return}const{scroller}=this.refs;scroller instanceof HTMLElement&&(scroller.scrollLeft=0),visibleSlides.forEac

1h((s,i)=>{s.setAttribute("aria-hidden",i===index?"false":"true")}),this.current=index}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||!this.#scroll)return;const currentSlide=this.slides?.[this.current];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,{slides}=this;if(!slides?.length||requestedIndex===void 0||isNaN(requestedIndex))return;const{animate=!0,force=!1}=options,instant=prefersReducedMotion()||!animate,requestedSlideElement=slides?.[requestedIndex];if(currentSlide===requestedSlideElement&&!instant)return;this.infinite||(requestedIndex=clamp(requestedIndex,0,slides.length-1)),event?.preventDefault();

1const 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;if(!instant&&!isAdjacentSlide&&visibleSlides.length===1){this.#disabled=!0,await this.#scroll.finished;const targetSlide=slides[index];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&&this.#scroll.to(slide,{instant,force}),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 this.#visibleSlides}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;#intersectionObserver=null;#visibleSlides=[];#outerSlideVisibilityController=null;#pageShowController=null;#setupSlideshowWithoutControls(){if(this.current=0,this.hasAttribute("auto-hide-controls")){const{slideshowControls}=this.refs;slideshowControls instanceof HTMLElement&&(slideshowControls.hidden=!0)}this.refs.slides?.[0]&&this.refs.slides[0].setAttribute("aria-hidden","false")}#setupSlideshow(){this.#setupIntersectionObserver();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.hasAttribute("allow-nested-scroll")||this.disabled,this.resume(),this.current=this.initialSlideIndex,scheduler.schedule(()=>{let visibleSlidesAmount=0;const initialSlideId=this.initialSlide?.getAttribute("slide-id");requestAnimationFrame(()=>{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-control

1s")&&this.#updateControlsVisibility()}),this.#resizeObserver.observe(this.refs.slideshowContainer)})}#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;if(!this.#scroll)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;#dragListenersAbortController=null;#dragCapturedPointerId=null;#cancelOngoingDrag=()=>{const controller=this.#dragListenersAbortController;if(this.#dragListenersAbortController=null,controller&&controller.abort(),!this.#dragging&&!this.hasAttribute("dragging"))return;if(this.#dragging=!1,this.removeAttribute("dragging"),this.#dragCapturedPointerId!=null){try{this.releasePointerCapture(this.#dragCapturedPointerId)}catch{}this.#dragCapturedPointerId=null}const{slides}=this,{scroller}=this.refs;if(!this.#scroll||!slides?.length||!scroller){this.#scroll&&(this.#scroll.snap=!0),document.hidden||this.resume();return}const next=this.#sync(),newSlide=slides[next];newSlide&&(this.#scroll.to(newSlide),this.#centerSelectedThumbnail(next),this.current=next),this.#scroll.snap=!0,document.hidden||this.resume()};#handleMouseDown=event=>{const{slides}=this;if(!slides||slides.length<=1||!(event.target instanceof Element)||this.disabled||this.#dragging||event.button!==0||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.#dragListenersAbortController=controller,this.#dragCapturedPointerId=null,this.#dragging=!0;const onPointerMove=event2=>{const current=event2[axis],initialDelta=startPosition-current;if(!initialDelta)return;if(!moved){moved=!0,this.#dragCapturedPointerId=event2.pointerId,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){this.#dragListenersAbortController=null,this.#dragging=!1,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=>{this.#dragListenersAbortController=null,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}`);if(this.#scroll.to(newSlide),this.removeAttribute("dragging"),this.#dragCapturedPointerId!=null){try{this.releasePointerCapture(this.#dragCapturedPointerId)}catch{}this.#dragCapturedPointerId=null}this.#centerSelectedThumbnail(newIndex),this.dispatchEvent(new SlideshowSelectEvent({index:newIndex,previousIndex:currentIndex,userInitiated:!0,trigger:"drag",slide:newSlide,id:newSlide.getAttribute("slide-id")}

1)),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}),window.addEventListener("blur",this.#cancelOngoingDrag,{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.#cancelOngoingDrag()):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"})}#setupIntersectionObserver(){const{slides,scroller}=this.refs;slides?.length&&(this.#intersectionObserver&&this.#intersectionObserver.disconnect(),this.#visibleSlides.length=0,this.#intersectionObserver=new IntersectionObserver(entries=>{const allEntries=[...entries,...this.#intersectionObserver?this.#intersectionObserver.takeRecords():[]];for(const entry of allEntries){const slide=entry.target,isCurrentlyVisible=this.#visibleSlides.includes(slide),shouldBeVisible=entry.intersectionRatio>=SLIDE_VISIBLITY_THRESHOLD;if(shouldBeVisible&&!isCurrentlyVisible)this.#visibleSlides.push(slide);else if(!shouldBeVisible&&isCurrentlyVisible){const index=this.#visibleSlides.indexOf(slide);index>-1&&this.#visibleSlides.splice(index,1)}}this.#visibleSlides.sort((a,b)=>slides.indexOf(a)-slides.indexOf(b)),this.#updateVisibleSlides()},{root:scroller,threshold:SLIDE_VISIBLITY_THRESHOLD,rootMargin:"1px"}

1),slides.forEach(slide=>{this.#intersectionObserver?.observe(slide)}))}#updateVisibleSlides(){const{slides}=this;if(!slides||!slides.length)return 0;const visibleSlides=this.visibleSlides;return visibleSlides.length===0?0:(scheduler.schedule(()=>{slides.forEach(slide=>{const isVisible=visibleSlides.includes(slide);slide.setAttribute("aria-hidden",`${!isVisible}`)})}),visibleSlides.length)}syncToInitialSlideAfterSectionMorph(){if(!this.isConnected)return;const slideCount=this.slides?.length||0;slideCount>1&&!this.#scroll?this.#setupSlideshow():slideCount>1&&this.#setupIntersectionObserver(),this.#resetToInitialSlide()}}export function syncProductGridSlideshowsAfterMorph(sectionRoot){const run=()=>{for(const el of sectionRoot.querySelectorAll(".product-grid slideshow-component"))typeof el.syncToInitialSlideAfterSectionMorph=="function"&&el.syncToInitialSlideAfterSectionMorph()};requestAnimationFrame(()=>{run(),requestAnimationFrame(run)}),viewTransition.current&&viewTransition.current.then(()=>{requestAnimationFrame(()=>{run(),requestAnimationFrame(run)})})}customElements.get("slideshow-component")||customElements.define("slideshow-component",Slideshow);
2//# sourceMappingURL=/cdn/shop/t/34/assets/slideshow.js.map?v=106557976703040176111790818747