frontend_block_carousel.js
8.68 KB
var frontend_block_carousel;(()=>{"use strict";var t,e={};(t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})})(e);class s{constructor(t){this.el=t}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),this.isRTL="rtl"===document.documentElement?.getAttribute("dir")||"rtl"===document.body?.getAttribute("dir");const t=this.el.querySelectorAll(".stk-block-carousel__dots"),e=this.el.querySelectorAll(".stk-block-carousel__button__prev"),s=this.el.querySelectorAll(".stk-block-carousel__button__next");this.dotsEl=t[t.length-1],this.prevEl=e[e.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.fixChildrenAccessibility(),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.slideOffset=this.isRTL&&"slide"===this.type?this.slidesToShow:1,this.isRTL&&(this.updateDefaultIcon(),this.slidesToShow>1&&(this.currentSlide=this.slidesToShow,this.setDotActive(this.currentSlide))),this.updateDots()};updateDots=()=>{if(!this.dotsEl)return;this.dotEls=[],this.dotsEl.innerHTML="";const t=this.dotsEl.dataset.label;this.slideEls.forEach(((e,s)=>{if(!this.isRTL&&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",t.replace(/%+d/,s+1)),this.currentSlide===s+1&&l.classList.add("stk-block-carousel__dot--active"),i.appendChild(l),s>=this.slideOffset-1&&this.dotsEl.appendChild(i),l.addEventListener("click",(()=>{this.pauseAutoplay(),this.goToSlide(s+1),this.unpauseAutoplay()})),this.dotEls.push(l)}))};updateDefaultIcon=()=>{const t=this.el.querySelector(".stk-block-carousel__button.stk-block-carousel__button__prev .fa-chevron-left"),e=this.el.querySelector(".stk-block-carousel__button.stk-block-carousel__button__next .fa-chevron-right");t&&(t.style.transform="rotate(180deg)"),e&&(e.style.transform="rotate(180deg)")};addEventListeners=()=>{window&&window.addEventListener("resize",this.initProperties),this.sliderEl.addEventListener("wheel",this.onWheel,{passive:!0}),this.sliderEl.addEventListener("mousedown",this.dragMouseDown),this.sliderEl.addEventListener("touchstart",this.dragTouchStart,{passive:!0}),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 t=this.slideEls.length;return"slide"!==this.type||this.isRTL||(t-=this.slidesToShow-1),t};nextSlide=()=>{let t=this.currentSlide+1;t>this.maxSlides()&&(t=this.slideOffset),this.goToSlide(t)};prevSlide=()=>{let t=this.currentSlide-1;t<this.slideOffset&&(t=this.maxSlides()),this.goToSlide(t)};goToSlide=(t,e=!1)=>{if(t!==this.currentSlide||e){if(this.slideEls[this.currentSlide-1].classList.remove("stk-block-carousel__slide--active"),this.slideEls[t-1].classList.add("stk-block-carousel__slide--active"),"slide"===this.type)this.sliderEl.scrollLeft=this.slideEls[t-1].offsetLeft;else{this.slideEls[this.currentSlide-1].style.opacity=0;const e=this.slideEls[t-1];e.style.zIndex=++this.currentZIndex,e.style.transition="none",e.style.opacity=0,e.style.visibility="visible",e.style.left=`${this.isRTL?"":"-"}${100*(t-1)}%`,setTimeout((()=>{e.style.transition="",e.style.opacity=1}),1)}this.fixAccessibility(t),this.setDotActive(t),this.currentSlide=t;try{this.liveregion.textContent=this.sliderEl.dataset.labelSlideOf.replace(/%+d/,t).replace(/%+d/,this.maxSlides())}catch(t){console.error("Carousel Slide N of N accessibility label is of invalid format")}clearTimeout(this.tempDisableOnScroll),this.tempDisableOnScroll=setTimeout((()=>{this.tempDisableOnScroll=null}),500)}};fixAccessibility=t=>{if("slide"===this.type)for(let e=1;e<=this.slideEls.length;e++)t<=e&&e<=t+this.slidesToShow-1?this.setSlideToVisible(e):this.setSlideToHide(e);else for(let e=1;e<=this.slideEls.length;e++)e===t?this.setSlideToVisible(e):this.setSlideToHide(e)};fixChildrenAccessibility=()=>{this.slideEls.forEach((t=>{t.setAttribute("role","listitem")}))};setDotActive=t=>{this.dotEls?.forEach(((e,s)=>{t===s+1?e.classList.add("stk-block-carousel__dot--active"):e.classList.remove("stk-block-carousel__dot--active")}))};setSlideToVisible=t=>{const e=this.slideEls[t-1];e.querySelectorAll('button, a, input, [role="button"]').forEach((t=>{t.removeAttribute("tabindex")})),e.setAttribute("aria-hidden","false")};setSlideToHide=t=>{const e=this.slideEls[t-1];e.querySelectorAll('button, a, input, [role="button"]').forEach((t=>{t.setAttribute("tabindex","-1")})),e.setAttribute("aria-hidden","true")};pauseAutoplay=()=>{setTimeout((()=>{clearInterval(this.autoplayInterval)}))};unpauseAutoplay=()=>{this.autoplay&&(clearInterval(this.autoplayInterval),this.autoplayInterval=setInterval(this.nextSlide,this.autoplay))};onWheel=t=>{if("fade"===this.type){if(this.wheelTimeout)return;t.deltaX>=15?(this.nextSlide(),this.wheelTimeout=setTimeout((()=>{this.wheelTimeout=null}),500)):t.deltaX<=-15&&(this.prevSlide(),this.wheelTimeout=setTimeout((()=>{this.wheelTimeout=null}),500))}};dragMouseDown=t=>{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=t.clientX,document.body.addEventListener("mousemove",this.dragMouseMove),document.body.addEventListener("mouseup",this.dragMouseUp),this.pauseAutoplay()};dragMouseMove=t=>{const e=t.clientX-this.initialClientX;"slide"===this.type?this.sliderEl.scrollTo({left:this.initialScrollLeft-e}):"fade"===this.type&&(e<-40?(this.nextSlide(),this.dragMouseUp()):e>40&&(this.prevSlide(),this.dragMouseUp())),t.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 t=this.sliderEl.scrollLeft;this.sliderEl.classList.remove("stk--snapping-deactivated");const e=this.sliderEl.scrollLeft;this.sliderEl.classList.add("stk--snapping-deactivated"),this.sliderEl.scrollLeft=t,this.sliderEl.scrollTo({left:e,behavior:"smooth"});const{slide:s}=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=s,this.setDotActive(s)}clearTimeout(this.dragTimeout),this.dragTimeout=setTimeout((()=>{this.sliderEl.classList.remove("stk--snapping-deactivated")}),500),this.unpauseAutoplay()};dragTouchStart=t=>{this.sliderEl.addEventListener("touchend",this.dragTouchEnd),this.sliderEl.addEventListener("touchmove",this.dragTouchMove),this.initialClientX=t.targetTouches[0].clientX,this.pauseAutoplay()};dragTouchEnd=()=>{this.sliderEl.removeEventListener("touchend",this.dragTouchEnd),this.sliderEl.removeEventListener("touchmove",this.dragTouchMove),this.pauseAutoplay()};dragTouchMove=t=>{if("fade"===this.type){const e=t.targetTouches[0].clientX-this.initialClientX;e<=-40?(this.nextSlide(),this.dragTouchEnd()):e>=40&&(this.prevSlide(),this.dragTouchEnd())}};onScroll=()=>{if("slide"===this.type){if(this.tempDisableOnScroll)return;const t=this.sliderEl.scrollLeft,{slide:e}=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=e,this.setDotActive(e)}}}window.stackableCarousel=new class{init=()=>{document.querySelectorAll(".stk-block-carousel").forEach((t=>{const e=new s(t);t.carousel=e,e.init()}))}},t=window.stackableCarousel.init,"undefined"!=typeof document&&("complete"!==document.readyState&&"interactive"!==document.readyState?document.addEventListener("DOMContentLoaded",t):t()),frontend_block_carousel=e})();