import{Component}from"@theme/component";import{closest,clamp,center,getVisibleElements}from"@theme/utilities";import{SlideshowSelectEvent}from"@theme/events";import{Scroller}from"@theme/scrolling";import{cycleFocus}from"@theme/focus";class CollectionLinks extends Component{requiredRefs=["container"];#scroll;connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.#handleKeydown),this.addEventListener(SlideshowSelectEvent.eventName,this.#handleSlideshowSelect),this.#scroll=new Scroller(this.refs.container,{onScroll:this.#handleScroll})}disconnectedCallback(){super.disconnectedCallback(),this.#scroll.destroy()}get links(){return this.refs.links||[]}get currentIndex(){return this.links.findIndex(link=>link.getAttribute("aria-selected")==="true")}select(targetIndex,event){this.#updateSelectedLink(targetIndex),this.refs.slideshow?.select(targetIndex,void 0,{animate:!1}),event&&this.#revealImage(event)}#updateSelectedLink(index){const{links}=this,selectedIndex=clamp(index,0,links.length-1);for(const[index2,link]of links.entries())link.setAttribute("aria-selected",(index2===selectedIndex).toString())}#handleSlideshowSelect=async event=>{if(!event.detail.userInitiated)return;const{index}=event.detail;if(index===this.currentIndex)return;const selectedLink=this.links[index];selectedLink&&(this.#updateSelectedLink(index),this.#scroll.to(selectedLink))};#handleKeydown(event){let modifier=0;switch(event.key){case"ArrowRight":case"ArrowDown":modifier=1;break;case"ArrowLeft":case"ArrowUp":modifier=-1;break}modifier&&(event.preventDefault(),cycleFocus(this.links,modifier))}#handleScroll=()=>{const{links}=this,{container}=this.refs,visibleLinks=getVisibleElements(this,links,.1);if(visibleLinks.length===0)return;const centers=visibleLinks.map(link=>center(link,"x")),referencePoint=center(container,"x"),closestCenter=closest(centers,referencePoint),closestVisibleLink=visibleLinks[centers.indexOf(closestCenter)];if(!closestVisibleLink)return;const index=links.indexOf(closestVisibleLink);this.select(index)};#revealImage(event){if(!(event instanceof PointerEvent)||event.pointerType==="touch")return;const{target}=event;if(!(target instanceof HTMLElement))return;const{images}=this.refs,index=this.links.indexOf(target),selectedImage=images?.[index];if(!selectedImage)return;const updateImagePosition=event2=>{selectedImage.style.setProperty("--x",`${event2.clientX}px`),selectedImage.style.setProperty("--y",`${event2.clientY}px`)},reset=()=>{selectedImage.removeAttribute("reveal"),target.removeEventListener("mousemove",updateImagePosition)};updateImagePosition(event);for(const image of images)image===selectedImage?image.setAttribute("reveal",""):image.removeAttribute("reveal");target.addEventListener("mousemove",updateImagePosition),target.addEventListener("mouseleave",reset,{once:!0})}}customElements.get("collection-links-component")||customElements.define("collection-links-component",CollectionLinks);
//# sourceMappingURL=/s/files/1/0677/1399/0759/t/1/assets/collection-links.js.map?v=1783128463
