frontend_block_carousel.js
7.82 KB
var frontend_block_carousel;(()=>{"use strict";var e,t={};(e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})})(t);class s{constructor(e){this.el=e}init=()=>{this.currentSlide=1,this.currentZIndex=1,this.wrapper=this.el.querySelector(".stk-block-carousel__slider-wrapper"),this.type=this.el.classList.contains("stk--is-fade")?"fade":"slide",this.sliderEl=this.el.querySelector(".stk-block-carousel__slider"),this.slideEls=Array.from(this.sliderEl.children);const e=this.el.querySelectorAll(".stk-block-carousel__dots"),t=this.el.querySelectorAll(".stk-block-carousel__button__prev"),s=this.el.querySelectorAll(".stk-block-carousel__button__next");this.dotsEl=e[e.length-1],this.prevEl=t[t.length-1],this.nextEl=s[s.length-1],this.liveregion=document.createElement("div"),this.liveregion.setAttribute("aria-live","polite"),this.liveregion.setAttribute("aria-atomic","true"),this.liveregion.setAttribute("class","liveregion stk--hidden"),this.wrapper.appendChild(this.liveregion),this.slideEls[this.currentSlide-1].classList.add("stk-block-carousel__slide--active"),this.initProperties(),this.addEventListeners(),this.fixAccessibility(this.currentSlide),this.setDotActive(this.currentSlide),this.unpauseAutoplay()};initProperties=()=>{this.slidesToShow="slide"===this.type?parseInt(getComputedStyle(this.el).getPropertyValue("--slides-to-show"),10):1,this.autoplay=this.sliderEl.dataset.autoplay,this.updateDots()};updateDots=()=>{if(!this.dotsEl)return;this.dotEls=[],this.dotsEl.innerHTML="";const e=this.dotsEl.dataset.label;this.slideEls.forEach(((t,s)=>{if(s>=this.slideEls.length-this.slidesToShow+1)return;const i=document.createElement("div"),l=document.createElement("button");i.setAttribute("role","listitem"),l.classList.add("stk-block-carousel__dot"),l.setAttribute("aria-label",e.replace(/%+d/,s+1)),this.currentSlide===s+1&&l.classList.add("stk-block-carousel__dot--active"),i.appendChild(l),this.dotsEl.appendChild(i),l.addEventListener("click",(()=>{this.pauseAutoplay(),this.goToSlide(s+1),this.unpauseAutoplay()})),this.dotEls.push(l)}))};addEventListeners=()=>{window&&window.addEventListener("resize",this.initProperties),this.sliderEl.addEventListener("wheel",this.onWheel),this.sliderEl.addEventListener("mousedown",this.dragMouseDown),this.sliderEl.addEventListener("touchstart",this.dragTouchStart),this.sliderEl.addEventListener("scroll",this.onScroll),this.autoplay&&(this.el.addEventListener("mouseenter",this.pauseAutoplay),this.el.addEventListener("mouseleave",this.unpauseAutoplay)),this.prevEl&&this.prevEl.addEventListener("click",this.prevSlide),this.nextEl&&this.nextEl.addEventListener("click",this.nextSlide)};maxSlides=()=>{let e=this.slideEls.length;return"slide"===this.type&&(e-=this.slidesToShow-1),e};nextSlide=()=>{let e=this.currentSlide+1;e>this.maxSlides()&&(e=1),this.goToSlide(e)};prevSlide=()=>{let e=this.currentSlide-1;e<1&&(e=this.maxSlides()),this.goToSlide(e)};goToSlide=(e,t=!1)=>{if(e!==this.currentSlide||t){if(this.slideEls[this.currentSlide-1].classList.remove("stk-block-carousel__slide--active"),this.slideEls[e-1].classList.add("stk-block-carousel__slide--active"),"slide"===this.type)this.sliderEl.scrollLeft=this.slideEls[e-1].offsetLeft;else{this.slideEls[this.currentSlide-1].style.opacity=0;const t=this.slideEls[e-1];t.style.zIndex=++this.currentZIndex,t.style.transition="none",t.style.opacity=0,t.style.visibility="visible",t.style.left=`-${100*(e-1)}%`,setTimeout((()=>{t.style.transition="",t.style.opacity=1}),1)}this.fixAccessibility(e),this.setDotActive(e),this.currentSlide=e;try{this.liveregion.textContent=this.sliderEl.dataset.labelSlideOf.replace(/%+d/,e).replace(/%+d/,this.maxSlides())}catch(e){console.error("Carousel Slide N of N accessibility label is of invalid format")}clearTimeout(this.tempDisableOnScroll),this.tempDisableOnScroll=setTimeout((()=>{this.tempDisableOnScroll=null}),500)}};fixAccessibility=e=>{if("slide"===this.type)for(let t=1;t<=this.slideEls.length;t++)e<=t&&t<=e+this.slidesToShow-1?this.setSlideToVisible(t):this.setSlideToHide(t);else for(let t=1;t<=this.slideEls.length;t++)t===e?this.setSlideToVisible(t):this.setSlideToHide(t)};setDotActive=e=>{this.dotEls?.forEach(((t,s)=>{e===s+1?t.classList.add("stk-block-carousel__dot--active"):t.classList.remove("stk-block-carousel__dot--active")}))};setSlideToVisible=e=>{const t=this.slideEls[e-1];t.querySelectorAll('button, a, input, [role="button"]').forEach((e=>{e.removeAttribute("tabindex")})),t.setAttribute("aria-hidden","false")};setSlideToHide=e=>{const t=this.slideEls[e-1];t.querySelectorAll('button, a, input, [role="button"]').forEach((e=>{e.setAttribute("tabindex","-1")})),t.setAttribute("aria-hidden","true")};pauseAutoplay=()=>{setTimeout((()=>{clearInterval(this.autoplayInterval)}))};unpauseAutoplay=()=>{this.autoplay&&(clearInterval(this.autoplayInterval),this.autoplayInterval=setInterval(this.nextSlide,this.autoplay))};onWheel=e=>{if("fade"===this.type){if(this.wheelTimeout)return;e.deltaX>=15?(this.nextSlide(),this.wheelTimeout=setTimeout((()=>{this.wheelTimeout=null}),500)):e.deltaX<=-15&&(this.prevSlide(),this.wheelTimeout=setTimeout((()=>{this.wheelTimeout=null}),500))}};dragMouseDown=e=>{this.initialClientX=0,this.sliderEl.style.cursor="grabbing",clearTimeout(this.dragTimeout),this.sliderEl.classList.add("stk--snapping-deactivated"),this.initialScrollLeft=this.sliderEl.scrollLeft,this.initialClientX=e.clientX,document.body.addEventListener("mousemove",this.dragMouseMove),document.body.addEventListener("mouseup",this.dragMouseUp),this.pauseAutoplay()};dragMouseMove=e=>{const t=e.clientX-this.initialClientX;"slide"===this.type?this.sliderEl.scrollTo({left:this.initialScrollLeft-t}):"fade"===this.type&&(t<-40?(this.nextSlide(),this.dragMouseUp()):t>40&&(this.prevSlide(),this.dragMouseUp())),e.preventDefault(),this.pauseAutoplay()};dragMouseUp=()=>{if(document.body.removeEventListener("mousemove",this.dragMouseMove),document.body.removeEventListener("mouseup",this.dragMouseUp),this.sliderEl.style.cursor="","slide"===this.type){const e=this.sliderEl.scrollLeft;this.sliderEl.classList.remove("stk--snapping-deactivated");const t=this.sliderEl.scrollLeft;this.sliderEl.classList.add("stk--snapping-deactivated"),this.sliderEl.scrollLeft=e,this.sliderEl.scrollTo({left:t,behavior:"smooth"});const{slide:s}=this.slideEls.reduce(((e,s,i)=>{const l=i+1,o=Math.abs(s.offsetLeft-t);return o<=e.offsetDiff?{slide:l,offsetDiff:o}:e}),{slide:1,offsetDiff:1e3});this.currentSlide=s,this.setDotActive(s)}clearTimeout(this.dragTimeout),this.dragTimeout=setTimeout((()=>{this.sliderEl.classList.remove("stk--snapping-deactivated")}),500),this.unpauseAutoplay()};dragTouchStart=e=>{this.sliderEl.addEventListener("touchend",this.dragTouchEnd),this.sliderEl.addEventListener("touchmove",this.dragTouchMove),this.initialClientX=e.targetTouches[0].clientX,this.pauseAutoplay()};dragTouchEnd=()=>{this.sliderEl.removeEventListener("touchend",this.dragTouchEnd),this.sliderEl.removeEventListener("touchmove",this.dragTouchMove),this.pauseAutoplay()};dragTouchMove=e=>{if("fade"===this.type){const t=e.targetTouches[0].clientX-this.initialClientX;t<=-40?(this.nextSlide(),this.dragTouchEnd()):t>=40&&(this.prevSlide(),this.dragTouchEnd())}};onScroll=()=>{if("slide"===this.type){if(this.tempDisableOnScroll)return;const e=this.sliderEl.scrollLeft,{slide:t}=this.slideEls.reduce(((t,s,i)=>{const l=i+1,o=Math.abs(s.offsetLeft-e);return o<=t.offsetDiff?{slide:l,offsetDiff:o}:t}),{slide:1,offsetDiff:1e3});this.currentSlide=t,this.setDotActive(t)}}}window.stackableCarousel=new class{init=()=>{document.querySelectorAll(".stk-block-carousel").forEach((e=>{const t=new s(e);e.carousel=t,t.init()}))}},e=window.stackableCarousel.init,"undefined"!=typeof document&&("complete"!==document.readyState&&"interactive"!==document.readyState?document.addEventListener("DOMContentLoaded",e):e()),frontend_block_carousel=t})();