https://calzadospitillos.com/cdn/shop/t/27/assets/product-list-car…?v=177205078213014193261784199656

1class ProductListCarouselScrollbar extends HTMLElement{#abortController=new AbortController;#resizeObserver;#scroller;#dragStart;connectedCallback(){this.#abortController.abort(),this.#resizeObserver?.disconnect(),this.#abortController=new AbortController;const track=this.querySelector(".product-list-carousel-scrollbar__track"),thumb=this.querySelector(".product-list-carousel-scrollbar__thumb"),section=this.closest('[data-testid="product-list"]');if(!track||!thumb||!section)return;const signal=this.#abortController.signal,refresh=()=>this.#refresh(section,track,thumb);section.querySelectorAll(".resource-list__carousel slideshow-slides").forEach(scroller=>{scroller.addEventListener("scroll",refresh,{signal,passive:!0})}),window.addEventListener("resize",refresh,{signal,passive:!0}),track.addEventListener("pointerdown",event=>this.#handlePointerDown(event,track,thumb),{signal}),track.addEventListener("pointermove",event=>this.#handlePointerMove(event,track,thumb),{signal}),track.addEventListener("pointerup",event=>this.#endDrag(event,track,thumb),{signal}),track.addEventListener("pointercancel",event=>this.#endDrag(event,track,thumb),{signal}),track.addEventListener("keydown",event=>this.#handleKeydown(event),{signal}),this.#resizeObserver=new ResizeObserver(refresh),this.#resizeObserver.observe(section),requestAnimationFrame(refresh)}disconnectedCallback(){this.#abortController.abort(),this.#resizeObserver?.disconnect()}#refresh(section,track,thumb){const visibleScroller=[...section.querySelectorAll(".resource-list__carousel slideshow-slides")].find(scroller=>scroller.getClientRects().length>0);if(!visibleScroller){this.hidden=!0;return}this.#scroller=visibleScroller;const carousel=visibleScroller.closest("slideshow-component.resource-list__carousel"),visibleGallery=visibleScroller.querySelector("slideshow-slide:not([hidden]) .card-gallery");carousel&&visibleGallery&&carousel.style.setProperty("--product-list-gallery-height",`${visibleGallery.getBoundingClientRect().height}px`);const maxScroll=Math.max(0,visibleScroller.scrollWidth-visibleScroller.clientWidth);if(this.hidden=maxScroll<=1,this.hidden)return;const trackWidth=track.clientWidth,thumbWidth=Math.max(32,trackWidth*(visibleScroller.clientWidth/visibleScroller.scrollWidth)),maxThumbOffset=Math.max(0,trackWidth-thumbWidth),progress=maxScroll>0?visibleScroller.scrollLeft/maxScroll:0;thumb.style.width=`${thumbWidth}px`,thumb.style.transform=`translate3d(${progress*maxThumbOffset}px, 0, 0)`,track.setAttribute("aria-valuenow",String(Math.round(progress*100)))}#handlePointerDown(event,track,thumb){!this.#scroller||event.button!==0||(this.#scroller.style.scrollSnapType="none",this.#scroller.style.scrollBehavior="auto",event.target!==thumb&&this.#scrollToPointer(event,track,thumb),this.#dragStart={pointerX:event.clientX,scrollLeft:this.#scroller.scrollLeft},track.setPointerCapture(event.pointerId),thumb.classList.add("is-dragging"),event.preventDefault())}#handlePointerMove(event,track,thumb){if(!this.#dragStart||!this.#scroller)return;const maxScroll=this.#scroller.scrollWidth-this.#scroller.clientWidth,maxThumbOffset=track.clientWidth-thumb.offsetWidth;if(maxThumbOffset<=0)return;const delta=(event.clientX-this.#dragStart.pointerX)/maxThumbOffset*maxScroll;this.#scroller.scrollLeft=this.#dragStart.scrollLeft+delta}#endDrag(event,track,thumb){!this.#dragStart||!this.#scroller||(this.#dragStart=null,thumb.classList.remove("is-dragging"),track.hasPointerCapture(event.pointerId)&&track.releasePointerCapture(event.pointerId))}#scrollToPointer(event,track,thumb){const maxScroll=this.#scroller.scrollWidth-this.#scroller.clientWidth,maxThumbOffset=track.clientWidth-thumb.offsetWidth,rect=track.getBoundingClientRect(),offset=Math.max(0,Math.min(maxThumbOffset,event.clientX-rect.left-thumb.offsetWidth/2));this.#scroller.scrollLeft=maxThumbOffset>0?offset/maxThumbOffset*maxScroll:0}#handleKeydown(event){if(!this.#scroller)return;const maxScroll=this.#scroller.scrollWidth-this.#scroller.clientWidth,step=Math.max(40,this.#scroller.clientWidth*.1);let nextPosition;if(event.key==="ArrowLeft")nextPosition=this.#scroller.scrollLeft-step;else if(event.key==="ArrowRight")nextPosition=this.#scroller.scrollLeft+step;else if(event.key==="Home")nextPosition=0;else if(event.key==="End")nextPosition=maxScroll;else return;event.preventDefault(),this.#scroller.scrollTo({left:nextPosition,behavior:"smooth"})}}customElements.get("product-list-carousel-scrollbar")||customElements.define("product-list-carousel-scrollbar",ProductListCarouselScrollbar);
2//# sourceMappingURL=/cdn/shop/t/27/assets/product-list-carousel-scrollbar.

2js.map?v=177205078213014193261784199656