frontend_block_carousel.js 11.6 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"),this.infiniteScroll=this.el.classList.contains("stk--infinite-scroll"),this.isiOS=function(){const t=navigator?.userAgent;return t&&(-1===t.indexOf("iPhone")||t.indexOf("iPad"))}(),this.hasTouched=!1;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.initProperties(),this.addEventListeners(),this.fixChildrenAccessibility(),this.fixAccessibility(this.currentSlide),this.setDotActive(this.currentSlide),this.slideEls[this.currentSlide-1].classList.add("stk-block-carousel__slide--active"),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.infiniteScroll&&(this.clones=this.slideEls.map((t=>t.cloneNode(!0))),this.clones.map(((t,e)=>(t.classList.add(`stk-slide-clone-${e+1}`),e===this.clones.length-1?this.sliderEl.insertBefore(t,this.slideEls[0]):this.sliderEl.appendChild(t)))),this.sliderEl.style.scrollBehavior="unset",this.sliderEl.scrollLeft=this.slideEls[0].offsetLeft,this.sliderEl.style.scrollBehavior="",this.currentSlide=1),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.infiniteScroll&&!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),this.isiOS&&document.body.addEventListener("touchend",this.onTouchEndIOS)};maxSlides=()=>{let t=this.slideEls.length;return"slide"!==this.type||this.isRTL||(t-=this.slidesToShow-1),t};nextSlide=()=>{let t=this.currentSlide+1;this.infiniteScroll&&t>this.slideEls.length?this.swapSlides("N"):(!this.infiniteScroll&&t>this.maxSlides()&&(t=this.slideOffset),this.goToSlide(t))};prevSlide=()=>{let t=this.currentSlide-1;this.infiniteScroll&&t<this.slideOffset?this.swapSlides("P"):(!this.infiniteScroll&&t<this.slideOffset&&(t=this.maxSlides()),this.goToSlide(t))};swapSlides=t=>{let e;"N"===t?([this.clones[this.clones.length-1],...this.slideEls.slice(0,-1)].map((t=>this.sliderEl.appendChild(t))),e=1):([this.slideEls[this.slideEls.length-1],...this.clones.slice(0,-1)].reverse().map((t=>this.sliderEl.insertBefore(t,this.sliderEl.firstChild))),e=this.slideEls.length),this.slideEls[this.currentSlide-1].classList.remove("stk-block-carousel__slide--active");const s=[...this.slideEls];this.slideEls=[...this.clones],this.clones=s,this.sliderEl.style.scrollBehavior="unset",this.sliderEl.scrollLeft=this.clones[this.currentSlide-1].offsetLeft,this.sliderEl.style.scrollBehavior="",setTimeout((()=>{this.goToSlide(e)}),1)};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 if("fade"===this.type){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||this.infiniteScroll&&0===t&&s===this.dotEls.length-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))}else this.infiniteScroll&&t.deltaX<=-1&&0===this.sliderEl.scrollLeft?(this.sliderEl.style.scrollBehavior="unset",this.sliderEl.scrollLeft=this.slideEls[this.slideEls.length-1].offsetLeft,this.sliderEl.style.scrollBehavior=""):this.infiniteScroll&&t.deltaX>=1&&this.sliderEl.scrollLeft>=this.clones[0].offsetLeft&&this.clones.every(((t,e)=>this.sliderEl.scrollLeft!==t.offsetLeft||(this.sliderEl.style.scrollBehavior="unset",this.sliderEl.scrollLeft=this.slideEls[e].offsetLeft,this.sliderEl.style.scrollBehavior="",!1)))};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=>{let e=t.clientX-this.initialClientX;"slide"===this.type?(this.infiniteScroll&&0===this.sliderEl.scrollLeft&&e>0?(this.initialScrollLeft=this.slideEls[this.slideEls.length-1].offsetLeft,this.initialClientX=t.clientX,e=0):this.infiniteScroll&&this.sliderEl.scrollLeft>=this.clones[0].offsetLeft&&e<0&&(this.initialScrollLeft=this.slideEls[0].offsetLeft,this.initialClientX=t.clientX,e=0),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.isiOS&&(this.hasTouched=!0),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.unpauseAutoplay()};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,e=this.infiniteScroll?[...this.slideEls,...this.clones]:this.slideEls;let{slide:s}=e.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.infiniteScroll&&s>this.slideEls.length&&(s-=this.slideEls.length),this.currentSlide=s,this.setDotActive(s)}};onTouchEndIOS=t=>{if(!this.hasTouched)return;const e=t.target;if(!e.closest(".stk-block-carousel__slider")&&("A"===e.tagName||"BUTTON"===e.tagName||e.closest("a")||e.closest("button"))){const s=new MouseEvent("click",{bubbles:!0,cancelable:!0});e.dispatchEvent(s),t.preventDefault()}this.hasTouched=!1}}window.stackableCarousel=new class{init=()=>{document.querySelectorAll(".stk-block-carousel").forEach((t=>{if(!t._StackableHasInitCarousel){const e=new s(t);t.carousel=e,e.init(),t._StackableHasInitCarousel=!0}}))}},t=window.stackableCarousel.init,"undefined"!=typeof document&&("complete"!==document.readyState&&"interactive"!==document.readyState?document.addEventListener("DOMContentLoaded",t):t()),frontend_block_carousel=e})();