https://cieleathletics.com/cdn/shop/t/130/assets/scroll-slider.js?v=102789905217116710021788332057

1import{E as EVENTS}from"./events-55e4fd80.js";class ScrollSlider extends HTMLElement{constructor(){super(),this.strings=window.theme.strings,this.selectors={slider:".scroll-slider__slider",slide:".scroll-slider__slider > *",pageDots:"[data-scroll-slider-page-dots]",pageDotsInner:"[data-scroll-slider-page-dots-inner]",dot:"[data-scroll-slider-page-dot]",prevButton:"[js-scroll-slider-prev-button]",nextButton:"[js-scroll-slider-next-button]",counterWrapper:".scroll-slider__counter",currentCounter:".scroll-slider__counter--current",totalCounter:".scroll-slider__counter--total",mobileLoopButton:".scroll-slider__mobile-loop-nav"},this.classes={dotActive:"active",hidden:"hidden"}}connectedCallback(){this.slider=this.querySelector(this.selectors.slider);const sliderParent=this.parentElement;if(this.hasBorderedGrid=sliderParent.dataset.gridStyle==="bordered_grid",this.initialized=!1,this.controller=new AbortController,this.sliderItems=this.querySelectorAll(this.selectors.slide),!this.sliderItems.length)return;this.slideCount=this.sliderItems.length,this.slider.dataset.slideCount=this.slideCount;const{id,navigationContainer,autoplay,autoplayDelay,autoplayPauseOnHover,isSlideshow,loopBackToStart,loopBackToStartMobile}=this.dataset;this.id=id,this.isSlideshow=isSlideshow==="true",this.autoplayDelay=parseInt(autoplayDelay,10),this.shouldAutoplay=autoplay==="true",this.shouldPauseOnHover=autoplayPauseOnHover==="true",this.loopBackToStart=loopBackToStart==="true",this.loopBackToStartMobile=loopBackToStartMobile==="true",this.userIsOnTouchScreen=()=>window.matchMedia("(pointer: coarse)").matches,this.eventOptions={signal:this.controller.signal};const navigationWrapper=navigationContainer?this.closest(navigationContainer):this;this.pageDotsElement=navigationWrapper.querySelector(this.selectors.pageDots),this.pageDotsElementInner=navigationWrapper.querySelector(this.selectors.pageDotsInner),this.counterWrapper=navigationWrapper.querySelector(this.selectors.counterWrapper),this.currentPageElement=navigationWrapper.querySelector(this.selectors.currentCounter),this.pageTotalElement=navigationWrapper.querySelector(this.selectors.totalCounter),this.prevButton=navigationWrapper.querySelector(this.selectors.prevButton),this.nextButton=navigationWrapper.querySelector(this.selectors.nextButton),this.loopBackToStartMobile&&(this.mobileLoopButton=sliderParent.querySelector(this.selectors.mobileLoopButton)),this.pageDotEvents=[],this.initEvents(),this.dataset.initializationStrategy==="manual"?document.addEventListener(EVENTS.SCROLL_SLIDER_INIT(this.id),event=>{const source=event.detail.source||null;this.initScroller(source)},this.eventOptions):new ResizeObserver(()=>this.initScroller()).observe(this.slider)}initEvents(){this.slider.addEventListener("scroll",this.handleScrollPositionChange.bind(this),this.eventOptions),document.addEventListener(EVENTS.SCROLL_SLIDER_GO_TO_SLIDE(this.id),event=>{this.scrollTo(event.detail.slideIndex*this.sliderWidth,event.detail.behavior)},this.eventOptions),this.prevButton&&this.prevButton.addEventListener("click",this.onButtonClick.bind(this),this.eventOptions),this.nextButton&&this.nextButton.addEventListener("click",this.onButtonClick.bind(this),this.eventOptions),this.mobileLoopButton&&this.mobileLoopButton.addEventListener("click",e=>{e.preventDefault(),this.scrollTo(0,"instant")},this.eventOptions)}setInitialSlide(){this.initialSlide=null;for(let i=0;i<this.sliderItems.length;i++){const slide=this.sliderItems[i];if(slide.getAttribute("data-initial-slide")!==null){this.initialSlide=slide;break}}this.initialSlide&&document.dispatchEvent(new CustomEvent(EVENTS.SCROLL_SLIDER_GO_TO_SLIDE(this.id),{detail:{slideIndex:this.initialSlide.dataset.slideIndex,behavior:"instant"}}))}initScroller(source=null){const previousTotalPageCount=this.totalPages;if(this.sliderItemsToShow=Array.from(this.sliderItems).filter(element=>element.clientWidth>0),this.contentsAreScrollable=this.slider.scrollWidth>this.slider.offsetWidth,this.dataset.contentsAreScrollable=this.contentsAreScrollable,!!this.sliderItemsToShow.length){if(this.sliderStyles=getComputedStyle(this.slider),this.styles=getComputedStyle(this),this.gapWidth=parseFloat(this.sliderStyles.getPropertyValue("gap")),this.fullWidthPaddingOffset=parseFloat(this.sliderStyles.getPropertyValue("padding-left")),this.columns=this.styles.getPropertyValue("--scroll-columns"),this.visibleColumns=this.columns-1,this.sliderWidth=this.offsetWidth-this.fullWidthPaddingOffset,this.slideWidth=this.sliderItemsToShow[0].offsetWidth,this.slideWidthWithGap=this.slideWidth+this.gapWidth*this.visibleColumns/this.columns,this.slidesPerPage=Math.floor(this.sliderWidth/this.slideWidthWithGap),this.slidesPerPage===0){console.log("scroll-slider error, this.slidesPerPage calculated as 0, aborting");return}this.totalPages=Math.ceil(this.sliderItemsToShow.length/this.slidesPerPage),this.pageDotsElement&&previousTotalPageCount!==this.totalPages&&this.initPageDots(),(!this.initialized||this.dataset.initializationStrategy==="manual")&&(document.dispatchEvent(new CustomEvent(EVENTS.SCROLL_SLIDER_INITIALIZED(this.id),{detail:{source}})),this.initialized=!0,this.setInitialSlide()),this.handleScrollPositionChange()}}initPageDots(){let dotTemplateMarkup=this.pageDotsElement.querySelector("template").innerHTML;dotTemplateMarkup=dotTemplateMarkup.replace("{{ number }}

1","[[number]]"),this.pageDotController&&this.pageDotController.abort(),this.pageDotController=new AbortController,this.pageDotsElementInner.innerHTML="",this.dots=null;for(let index=0;index<this.totalPages;index++){const dotMarkup=dotTemplateMarkup.replaceAll("[[number]]",index),template=document.createElement("template");template.innerHTML=dotMarkup;const dot=template.content;this.pageDotsElementInner.appendChild(dot)}this.pageDotsElement.addEventListener("click",this.onDotsContainerClick.bind(this),{signal:this.pageDotController.signal}),this.dots=this.pageDotsElement.querySelectorAll(this.selectors.dot),this.pageDotsElement.setAttribute("data-dot-count",this.totalPages)}handleScrollPositionChange(){const previousPage=this.currentPage;this.currentPage=Math.round(this.slider.scrollLeft/(this.slideWidthWithGap*this.slidesPerPage))+1,this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length-1],this.fullWidthPaddingOffset)&&this.currentPage!==this.totalPages&&++this.currentPage,this.counterWrapper&&(this.totalPages===1?this.counterWrapper.classList.add(this.classes.hidden):(this.counterWrapper.classList.remove(this.classes.hidden),this.currentPageElement.textContent=this.currentPage,this.pageTotalElement.textContent=this.totalPages)),this.pageDotsElement&&(this.pageDotsElement.classList.remove(this.classes.hidden),this.dots.forEach(dot=>dot.classList.remove(this.classes.dotActive)),this.dots[this.currentPage-1]?.classList.add(this.classes.dotActive),this.totalPages===1&&this.pageDotsElement.classList.add(this.classes.hidden)),this.currentPage!==previousPage&&document.dispatchEvent(new CustomEvent(EVENTS.SCROLL_SLIDER_CHANGED(this.id),{detail:{previousPage,previousElement:this.sliderItemsToShow[previousPage-1],currentPage:this.currentPage,currentElement:this.sliderItemsToShow[this.currentPage-1]}})),!this.isSlideshow&&this.nextButton&&this.prevButton&&(this.totalPages===1?(this.prevButton.hidden=!0,this.nextButton.hidden=!0):(this.prevButton.hidden=!1,this.nextButton.hidden=!1),this.isSlideVisible(this.sliderItemsToShow[0])&&this.slider.scrollLeft<=0?this.prevButton.setAttribute("disabled","disabled"):this.prevButton.removeAttribute("disabled"),this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length-1])&&this.loopBackToStart===!1?this.nextButton.setAttribute("disabled","disabled"):this.nextButton.removeAttribute("disabled"))}isSlideVisible(element,offset=0){const elOffsetLeft=element.offsetLeft,sliderScrollLeft=this.slider.scrollLeft;this.hasBorderedGrid&&(offset+=1);const lastVisibleSlidePosition=Math.floor(this.sliderWidth+sliderScrollLeft+offset);return Math.floor(elOffsetLeft+element.offsetWidth)<=lastVisibleSlidePosition}userIsTabbing(){return document.body.classList.contains("user-is-tabbing")}onDotsContainerClick(event){event.target.tagName==="BUTTON"&&this.onDotClick(event)}onDotClick(event){event.preventDefault();const scrollBehavior=this.isSlideshow?"instant":"smooth",{goTo}=event.target.dataset;this.scrollTo(goTo*this.slideWidthWithGap*this.slidesPerPage,scrollBehavior)}onButtonClick(event){event.preventDefault();const amountToScroll=this.slidesPerPage*this.slideWidthWithGap,movingForwards=event.currentTarget.name==="next",lastSlideVisible=this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length-1]);let scrollBehavior=this.isSlideshow?"instant":"smooth",destinationPosition;if(lastSlideVisible&&movingForwards&&this.loopBackToStart)destinationPosition=0,scrollBehavior="instant";else{const currentPosition=this.slider.scrollLeft;destinationPosition=movingForwards?currentPosition+amountToScroll:currentPosition-amountToScroll}this.scrollTo(destinationPosition,scrollBehavior)}scrollTo(left,behavior="smooth"){this.slideScrollPosition=left,this.slider.scrollTo({left,behavior})}updateSlideVisibility(){this.sliderItems.forEach((slide,index)=>{slide.toggleAttribute("inert",index!==this.currentPage-1)})}disconnectedCallback(){this.controller.abort(),this.pageDotController?.abort()}}customElements.get("scroll-slider-component")||customElements.define("scroll-slider-component",ScrollSlider);export{ScrollSlider as default};
2//# sourceMappingURL=/cdn/shop/t/130/assets/scroll-slider.js.map?v=102789905217116710021788332057