https://amandapalmer.net/cdn/shop/t/21/assets/collection-links.js?v=82286893601863644401784665881

1import{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-current")==="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-current",(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)};clearSelections=()=>{const{links}=this,{images}=this.refs;for(const link of links)link.setAttribute("aria-current","false");if(images)for(const image of images)image.removeAttribute("reveal")};#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;let cachedImageHeight=selectedImage.offsetHeight,cachedImageWidth=selectedImage.offsetWidth,rafId=null;const updateImagePosition=event2=>{rafId===null&&(rafId=requestAnimationFrame(()=>{rafId=null;const viewportHeight=window.innerHeight,viewportWidth=window.innerWidth,offset=15,yPos=event2.clientY+cachedImageHeight+offset>viewportHeight?event2.clientY-cachedImageHeight-offset:event2.clientY+offset,xPos=Math.min(Math.max(offset,event2.clientX+offset),viewportWidth-cachedImageWidth-offset);selectedImage.style.setProperty("--x",`${xPos}px`),selectedImage.style.setProperty("--y",`${yPos}px`)}))},reset=()=>{rafId!==null&&(cancelAnimationFrame(rafId),rafId=null),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);
2//# sourceMappingURL=/cdn/shop/t/21/assets/collection-links.js.map?v=82286893601863644401784665881