https://butchershoppedirect.com/cdn/shop/t/30/assets/slider.js?v=16608070972504562371772118570

1import{registerComponent,debounce}from"helpers";import WYATTElement from"wyatt";registerComponent("wyatt-slider",class extends WYATTElement{constructor(){super(),this.currentIndex=this.config.startAt||0,this.slider=this.querySelector("[data-slider]"),this.slides=Array.from(this.slider.children),this.navigation=null,this.navigationButtons=[],this.slideCount=this.slides.length,this.slidesToHideCount=0,this.navigationItemsToShow=this.slideCount,this.initializedSlider=!1,this.sliderGap=parseFloat(window.getComputedStyle(this.slider).gap)||0}connectedCallback(){this.setupData(),this.setupNavigation(),this.setupControls(),this.bindEvents(),this.connectSliders(),this.initializeSlider()}setupData(){this.slides.forEach((slide,index)=>{slide.dataset.slide=index,slide.classList.add("slider__slide")})}setupNavigation(){if(!this.config.showNavigation)return;this.navigation=document.createElement("div");const navigationButton=this.querySelector("[data-navigation-button]").content;this.slides.forEach((slide,index)=>{const button=navigationButton.cloneNode(!0);button.querySelector(".slider__dot").textContent=`Slide ${index+1}`,button.querySelector("[data-slider-navigation-button]").dataset.sliderNavigationButton=index,this.navigation.appendChild(button)}),this.navigation.classList.add("slider__navigation"),this.appendChild(this.navigation),this.navigationButtons=this.navigation.querySelectorAll("[data-slider-navigation-button]")}setupControls(){if(this.config.hideControls)return;const template=this.querySelector("[data-controls]").content,controls=document.importNode(template,!0);this.config.showNavigation?this.navigation.appendChild(controls):this.appendChild(controls),this.setAttribute("has-controls",!0),this.controlButtons=this.querySelectorAll("[data-slider-control-button]")}bindEvents(){this.config.hideControls||this.bindControlEvents(),this.config.showNavigation&&this.bindNavigationEvents(),"onscrollsnapchanging"in this.slider?this.slider.addEventListener("scrollsnapchanging",event=>{this.handleScrollSnapChanging(event)}):this.slider.addEventListener("scroll",debounce(event=>{this.handleScroll(event)},300).bind(this)),window.addEventListener("resize",debounce(()=>{this.handleResize()},300)),this.subscribe(WYATT.PubSub.events.containerShown,()=>{this.initializedSlider||this.slider.offsetParent===null||this.initializeSlider()})}connectSliders(){const sliderToNavigate=document.querySelector(this.config.navigationFor);sliderToNavigate&&(this.sliderToNavigate=sliderToNavigate,sliderToNavigate.navigatedBy=this,this.slides.forEach(sli

1de=>{this.updateSlideAsNavigation(slide),slide.querySelector("button").addEventListener("click",this.handleSlideAsNavigationClick.bind(this))}))}initializeSlider(){this.sliderIsVisible()&&(this.initializedSlider=!0,this.updateNavigationItemsToShow(this.currentIndex),this.updateNavigationButtons(this.currentIndex),this.updateControlButtons(this.currentIndex),this.goTo(this.config.startAt,"instant"),this.setAttribute("ready",!0))}updateNavigationItemsToShow(newIndex){const reversedSlides=[...this.slides].reverse(),containerWidth=this.getVisibleWidth(),currentVisibleSlidesCount=Array.from(this.navigationButtons).filter(slide=>!slide.hasAttribute("hidden")).length;this.slidesToHideCount=0;let accumulatedWidth=reversedSlides[0].getBoundingClientRect().width;reversedSlides.slice(1).some(slide=>{const slideWidth=slide.getBoundingClientRect().width+this.sliderGap;return accumulatedWidth+=slideWidth,accumulatedWidth>containerWidth?!0:(this.slidesToHideCount+=1,!1)}),this.navigationItemsToShow=Math.max(1,this.slides.length-this.slidesToHideCount),this.currentIndex=Math.min(newIndex,this.navigationItemsToShow-1),currentVisibleSlidesCount!==this.navigationItemsToShow&&(this.navigationButtons.forEach((button,index)=>{button.hidden=index>=this.navigationItemsToShow}),this.updateState(this.currentIndex))}updateCurrentSlide(newIndex){this.slides[this.currentIndex].setAttribute("active",!1),this.currentIndex=newIndex,this.slides[this.currentIndex].setAttribute("active",!0)}updateNavigationButtons(newIndex){this.hideNavigation=this.slider.offsetWidth>=this.slider.scrollWidth,this.hideNavigation?this.navigation?.setAttribute("hidden",!0):this.navigation?.removeAttribute("hidden"),this.navigationButtons?.forEach(button=>{button.setAttribute("active",!1)}),this.navigationButtons?.[Math.min(newIndex,this.navigationItemsToShow-1)]?.setAttribute("active",!0)}updateControlButtons(newIndex){this.config.hideControls||(this.hideControls=this.slider.offsetWidth>=this.slider.scrollWidth,this.hideControls?this.removeAttribute("has-controls"):this.setAttribute("has-controls",!0),this.controlButtons.forEach(button=>{button.hidden=this.hideControls;const direction=button.dataset.sliderControlButton,onFirstSlide=newIndex===0,onLastSlide=newIndex===this.navigationItemsToShow-1;direction==="previous"&&onFirstSlide||direction==="next"&&onLastSlide?button.disabled=!0:button.disabled=!1}))}updateSlideAsNavigation(slide){const button=document.createElement("button"),html=slide.innerHTML;button.type="button",button.classList.add("button-reset","slider__slide-button"),button.innerHTML=html,slide.innerHTML="",slide.appendChild(button)}updateState(newIndex){this.updateNavigationButtons(newIndex),this.updateCurrentSlide(newIndex),this.updateControlButtons(newIndex)}bindControlEvents(){this.controlButtons&&this.controlButtons.forEach(button=>{button.addEventListener("click",this.handleControlClick.bind(this))})}bindNavigationEvents(){this.navigation&&this.navigationButtons.forEach(button=>{button.addEventListener("click",this.handleNavigationClick.bind(this))})}handleResize(){this.sliderIsVisible()&&this.initializedSlider?this.updateNavigationItemsToShow(this.currentIndex):this.initializedSlider=!1}handleControlClick(event){const newIndex=event.currentTarget.dataset.sliderControlButton==="next"?this.currentIndex+1:this.currentIndex-1;this.goTo(newIndex),this.navigatedBy&&this.navigatedBy.goTo(newIndex),this.sliderToNavigate&&this.sliderToNavigate.goTo(newIndex)}handleNavigationClick(event){const button=event.currentTarget,newIndex=parseInt(button.dataset.sliderNavigationButton,10);this.goTo(newIndex)}handleScroll(event){if(this===this.sliderToNavigate?.navigatedBy)return;const newIndex=this.calculateCurrentIndex();newIndex!==this.currentIndex&&(event.preventDefault(),this.updateState(newIndex),this.navigatedBy&&this.navigatedBy.goTo(newIndex))}handleScrollSnapChanging(event){if(this===this.sliderToNavigate?.navigatedBy)return;const slideIndex=parseInt(event.snapTargetInline.dataset.slide,10),newIndex=Math.min(slideIndex,this.navigationItemsToShow-1);this.updateState(newIndex),this.navigatedBy&&this.navigatedBy.goTo(newIndex)}handleSlideAsNavigationClick(event){const slide=event.currentTarget.closest("[data-sli

1de]"),index=parseInt(slide.dataset.slide,10);event.preventDefault(),this.sliderToNavigate.goTo(index),this.updateState(index)}sliderIsVisible(){return this.slider.offsetParent!==null&&this.slider.offsetWidth>0}calculateCurrentIndex(){const{scrollLeft,scrollWidth,offsetWidth}=this.slider,maxScroll=scrollWidth-offsetWidth;if(scrollLeft>=maxScroll-1)return this.slideCount-1;if(scrollLeft<=1)return 0;const scrollProgress=scrollLeft/maxScroll,index=Math.round(scrollProgress*(this.slideCount-1));return Math.min(index,this.slideCount-1)}getVisibleWidth(){const styles=getComputedStyle(this.slider),scrollPadding=parseFloat(styles.scrollPaddingInline)||parseFloat(styles.scrollPaddingLeft)||0;return this.slider.getBoundingClientRect().width-scrollPadding}goTo(newIndex,behavior="smooth"){const newSlide=this.slider.querySelector(`[data-slide="${newIndex}"]`),width=newSlide.offsetWidth,slideDifference=newIndex-this.currentIndex;newSlide&&(this.slider.scrollBy({top:0,left:width*slideDifference,behavior}),this.updateState(newIndex))}});
2//# sourceMappingURL=/cdn/shop/t/30/assets/slider.js.map?v=16608070972504562371772118570