@ussebastian/kitdigital/dist/components/system/Carousel.js

Kit Digital de la Universidad San Sebastián

System.register(["./embla-carousel.esm-0aabc2f2.js","./WrapUtility.js"],(function(t){"use strict";var s,e;return{setters:[function(t){s=t.E},function(t){e=t.wrap}],execute:function(){t("Carousel",class{constructor(t){this.rootNode=t;const s=t=>this.rootNode.getAttribute(t),e=t=>this.rootNode.hasAttribute(t);this.carouselClass=s("data-uss-carousel"),this.rootNode.classList.add(this.carouselClass),this.carouselType=this.carouselClass.split("-").pop(),this.visibleItems=null,"cards"===this.carouselType&&(this.visibleItems=parseInt(s("data-uss-visible-items"),10)||1),this.align="cards"===this.carouselType?"start":"center",this.carouselItemsClass=s("data-uss-items-class"),this.title=s("data-uss-title"),this.hideControls=e("data-uss-hide-controls"),this.EmblaOptions={loop:e("data-uss-loop")&&["","true"].includes(s("data-uss-loop")),draggable:e("data-uss-draggable"),duration:parseInt(s("data-uss-speed"),10)||25,startIndex:parseInt(s("data-uss-startIndex"),10)||0,align:this.align},this.emblaInstance=null,this.prevButtonNode=null,this.nextButtonNode=null,this.pageButtonContainer=null,this.pageButtonsArray=null,this.mobileBreakpoint=990,this.counterNode=null,this.carouselItems=Array.from(this.carouselItemsClass?this.rootNode.querySelectorAll(`.${this.carouselItemsClass}`):this.rootNode.querySelectorAll(":scope > *")),this.totalItems=this.carouselItems.length,this.disableNextButtonAtIndex=this.totalItems-1,this.carouselViewport=null}setupPageButtons(t){this.pageButtonsArray.forEach(((s,e)=>{s.addEventListener("click",(()=>t.scrollTo(e)),!1)}))}generatePageButtons(t){const s=`<button class="uss-carousel-${this.carouselType}__page-single-button" type="button"></button>`,e=t.scrollSnapList().length;this.pageButtonContainer.innerHTML=new Array(e).fill(s).join("");const o=Array.from(this.pageButtonContainer.children);for(let t=0;t<o.length;t+=1){const s=o[t],e=String(t+1).padStart(2,"0");s.innerHTML=e}return o}selectPage(t){const s=t.previousScrollSnap(),e=t.selectedScrollSnap();-1!==s&&this.pageButtonsArray[s]&&this.pageButtonsArray[s].classList.remove(`uss-carousel-${this.carouselType}__page-single-button--selected`),this.pageButtonsArray[e]&&this.pageButtonsArray[e].classList.add(`uss-carousel-${this.carouselType}__page-single-button--selected`)}makeControls(){const t=document.createElement("div");if(t.classList.add(`uss-carousel-${this.carouselType}__control-container`),this.title){const t=document.createElement("h2");t.classList.add(`uss-carousel-${this.carouselType}__title`),t.innerHTML=this.title,this.rootNode.insertBefore(t,this.rootNode.firstChild)}const s=document.createElement("div");s.classList.add(`uss-carousel-${this.carouselType}__control`);const e=document.createElement("div");e.classList.add(`uss-carousel-${this.carouselType}__counter`),e.innerHTML=`01/${String(this.totalItems).padStart(2,"0")}`,this.counterNode=e;const o=document.createElement("div");o.classList.add(`uss-carousel-${this.carouselType}__page-buttons`),this.pageButtonContainer=o;const a=document.createElement("div");a.classList.add(`uss-carousel-${this.carouselType}__control-buttons-container`);const i=document.createElement("button");i.classList.add("uss-btn","uss-btn--slide","uss-btn--slide-prev"),i.setAttribute("data-uss-carousel-button","prev"),this.prevButtonNode=i;const n=document.createElement("i");n.classList.add("uss-icon","ri-arrow-left-s-line");const l=document.createElement("button");l.classList.add("uss-btn","uss-btn--slide","uss-btn--slide-next"),l.setAttribute("data-uss-carousel-button","next"),this.nextButtonNode=l;const r=document.createElement("i");return r.classList.add("uss-icon","ri-arrow-right-s-line"),i.appendChild(n),l.appendChild(r),a.appendChild(i),a.appendChild(l),s.appendChild(e),s.appendChild(o),s.appendChild(a),t.appendChild(s),t}handleButtonsDisableState(){if(this.EmblaOptions.loop)return this.prevButtonNode.disabled=!1,void(this.nextButtonNode.disabled=!1);const t=this.emblaInstance.canScrollPrev(),s=this.emblaInstance.canScrollNext();this.prevButtonNode.disabled=!t,this.nextButtonNode.disabled=!s}handleCounter(){const t=this.emblaInstance.selectedScrollSnap(),s=String(t+1).padStart(2,"0");this.counterNode.innerHTML=`${s}/${String(this.totalItems).padStart(2,"0")}`}mount(){if(this.rootNode.carouselInitialized)return;if(this.rootNode.carouselInitialized=!0,0===this.totalItems)return void console.warn("No carousel items found.");"cards"===this.carouselType&&this.visibleItems&&(this.carouselItems.forEach((t=>{t.classList.add(`uss-carousel-cards__md-col-${this.visibleItems}`)})),this.disableNextButtonAtIndex=this.carouselItems.length-this.visibleItems);const t=document.createElement("div");t.classList.add(`uss-carousel-${this.carouselType}__container`),e(this.carouselItems,t);const o=document.createElement("div");if(o.classList.add(`uss-carousel-${this.carouselType}__viewport`),this.carouselViewport=e([t],o),this.rootNode.appendChild(this.carouselViewport),!this.hideControls){const t=this.makeControls();this.rootNode.appendChild(t)}const a=s(this.carouselViewport,this.EmblaOptions);this.emblaInstance=a,this.hideControls||(this.handleCounter(),this.handleButtonsDisableState(),"cards"!==this.carouselType&&(this.pageButtonsArray=this.generatePageButtons(a),this.setupPageButtons(a),this.selectPage(a)),a.on("select",(()=>{this.handleCounter(),this.handleButtonsDisableState(),"cards"!==this.carouselType&&this.selectPage(a)})),this.prevButtonNode.addEventListener("click",(()=>a.scrollPrev()),!1),this.nextButtonNode.addEventListener("click",(()=>a.scrollNext()),!1))}})}}}));
//# sourceMappingURL=Carousel.js.map