carousel.min.js

class Carousel{constructor(settings){if(this._settings=settings,!this._initializeSettings(this._settings))throw"Missing required settings";this._setInitialSettings(this._settings),this._addButtonEventListeners(),this._startInterval(),window.onresize=()=>{this._handleResizing()}}_initializeSettings(settings){let defaults={rotation:{amount:1,timingFunction:"ease-in-out",duration:500},buttons:{hide:!1,disableForSingle:!1},display:{number:5,duration:0,startOffset:0,direction:"left"},class:{itemClassName:"carousel-item"},fit:{fitToChildren:!0,fitToParent:!1}};return void 0!==settings.id&&(this._id=settings.id,void 0===settings.rotation?(this._moveAmount=defaults.rotation.amount,this._duration=defaults.rotation.duration,this._timingFunction=defaults.rotation.timingFunction):(void 0===settings.rotation.amount?this._moveAmount=defaults.rotation.amount:this._moveAmount=settings.rotation.amount,void 0===settings.rotation.duration?this._duration=defaults.rotation.duration:this._duration=settings.rotation.duration,void 0===settings.rotation.timingFunction?this._timingFunction=defaults.rotation.timingFunction:this._timingFunction=settings.rotation.timingFunction),void 0===settings.buttons?(this._buttonsHide=defaults.buttons.hide,this._disableForSingle=defaults.buttons.disableForSingle):(void 0===settings.buttons.hide?this._buttonsHide=defaults.buttons.hide:this._buttonsHide=settings.buttons.hide,void 0===settings.buttons.disableForSingle?this._disableForSingle=defaults.buttons.disableForSingle:this._disableForSingle=settings.buttons.disableForSingle),void 0===settings.display?(this._displayNo=defaults.display.number,this._rotationDuration=defaults.display.duration,this._startOffset=defaults.display.startOffset,this._direction=defaults.display.direction):(void 0===settings.display.number?this._displayNo=defaults.display.number:this._displayNo=settings.display.number,void 0===settings.display.duration?this._rotationDuration=defaults.display.duration:this._rotationDuration=settings.display.duration,void 0===settings.display.startOffset?this._startOffset=defaults.display.startOffset:this._startOffset=settings.display.startOffset,void 0===settings.display.direction?this._direction=defaults.display.direction:this._direction=settings.display.direction),void 0===settings.fit?this._itemClassName=defaults.class.itemClassName:void 0===settings.class.itemClassName?this._itemClassName=defaults.class.itemClassName:this._itemClassName=settings.class.itemClassName,void 0===settings.fit?(this._fitToChildren=defaults.fit.fitToChildren,this._fitToParent=defaults.fit.fitToParent,this._responsive=defaults.fit.responsive):(void 0===settings.fit.fitToChildren?this._fitToChildren=defaults.fit.fitToChildren:this._fitToChildren=settings.fit.fitToChildren,void 0===settings.fit.fitToParent?this._fitToParent=defaults.fit.fitToParent:this._fitToParent=settings.fit.fitToParent,void 0===settings.fit.responsive?this._responsive=defaults.fit.responsive:this._responsive=settings.fit.responsive),!0)}_setInitialSettings(settings){if(document.documentElement.style.setProperty("--timingFunction",this._timingFunction),document.documentElement.style.setProperty("--duration",this._duration+"ms"),this._container=document.getElementById(this._id),!this._container)throw"Container does not exist";if(this._items=this._container.getElementsByClassName(this._itemClassName),this._totalItems=this._items.length,this._setChildrenWidth(),this._front=0,this._back=this._displayNo-1,this._elements=[...this._items],this._buttonsHide){let buttons=this._container.getElementsByClassName("carousel-button-next");for(let i=0;i<buttons.length;i++)buttons[i].style.display="none";buttons=this._container.getElementsByClassName("carousel-button-prev");for(let i=0;i<buttons.length;i++)buttons[i].style.display="none"}if(this._disableForSingle&&1===this._totalItems){this._duration=0;let buttons=this._container.getElementsByClassName("carousel-button-next");for(let i=0;i<buttons.length;i++)buttons[i].style.display="none";buttons=this._container.getElementsByClassName("carousel-button-prev");for(let i=0;i<buttons.length;i++)buttons[i].style.display="none"}this._moving=!1;for(let i=0;i<this._displayNo;i++)this._items[i]&&this._items[i].classList.add("active");if(this._displayNo>this._totalItems){let index=0;for(let i=0;i<this._displayNo-this._totalItems;i++){let el=this._elements[index].cloneNode(!0);this._container.firstElementChild.appendChild(el),index=this._mod(index+1,this._totalItems)}}this._fitToChildren&&(this._container.style.maxWidth=this._container.clientWidth+"px",this._container.style.width="100%")}_handleResizing(){this._responsive&&this._setChildrenWidth()}_setChildrenWidth(){if(this._fitToParent)for(let i=0;i<this._totalItems;i++)this._items[i].firstElementChild.style.width=this._container.clientWidth/this._displayNo+"px"}_addButtonEventListeners(){let next,prev;next=this._settings.nextBtnClass?document.getElementsByClassName(this._settings.nextBtnClass)[0]:document.getElementsByClassName("carousel-button-next")[0],prev=this._settings.backBtnClass?document.getElementsByClassName(this._settings.backBtnClass)[0]:document.getElementsByClassName("carousel-button-prev")[0],next&&next.addEventListener("click",()=>{this.moveNext()}),prev&&prev.addEventListener("click",()=>{this.movePrev()})}_startInterval(){this._startOffset>0?setTimeout(()=>{this._interval()},this._startOffset):this._rotationDuration>0&&this._interval()}_interval(){"right"===this._direction?this.moveNext():this.movePrev(),this._animationTimeout.then(()=>{this._rotationDuration>0&&setTimeout(()=>{this._interval()},this._rotationDuration)})}_mod(n,m){return(n%m+m)%m}_disableInteraction(){this._moving=!0}_enableInteraction(){this._moving=!1}_moveCarouselLeft(noSteps){return new Promise((resolve,reject)=>{if(this._moving)resolve("done");else{this._disableInteraction(),this._front=this._mod(this._front+noSteps,this._totalItems),this._back=this._mod(this._back+noSteps,this._totalItems);let moveAmount=0;for(let i=0;i<noSteps;i++)moveAmount+=this._items[i].offsetWidth;document.documentElement.style.setProperty("--moveAmount","-"+moveAmount+"px");let diff=this._totalItems-noSteps,index=this._mod(this._front+diff,this._totalItems);for(let i=0;i<noSteps;i++){let el=this._elements[index].cloneNode(!0);el.classList.remove("active"),this._container.firstElementChild.appendChild(el),index=this._mod(index+1,this._totalItems)}this._setChildrenWidth();for(let i=0;i<this._displayNo+noSteps;i++)this._items[i].classList.add("active");for(let i=0;i<this._items.length;i++)this._items[i].classList.add("slide");this._animationTimeout=setTimeout(()=>{for(let j=0;j<this._items.length;j++)this._items[j].classList.remove("slide");for(let j=0;j<noSteps;j++)this._items[0].remove();this._enableInteraction(),resolve("done")},this._duration+10)}})}_moveCarouselRight(noSteps){return new Promise((resolve,reject)=>{if(this._moving)resolve("done");else{this._disableInteraction(),this._front=this._mod(this._front-noSteps,this._totalItems),this._back=this._mod(this._back-noSteps,this._totalItems);let moveAmount=0;for(let i=0;i<noSteps;i++)moveAmount+=this._items[i].offsetWidth;document.documentElement.style.setProperty("--moveAmount","-"+moveAmount+"px");for(let i=0;i<this._items.length;i++)this._items[i].classList.add("startOffset");let index=this._mod(this._front+noSteps-1,this._totalItems);for(let i=0;i<noSteps;i++){let el=this._elements[index].cloneNode(!0);el.classList.add("startOffset"),this._items[0].parentNode.insertBefore(el,this._items[0]),index=this._mod(index-1,this._totalItems)}this._setChildrenWidth();for(let i=0;i<this._displayNo+noSteps;i++)this._items[i].classList.add("active");this._animationTimeout=setTimeout(()=>{for(let j=0;j<this._items.length;j++)this._items[j].classList.remove("slide"),this._items[j].classList.remove("startOffset");for(let i=0;i<noSteps;i++)this._items[this._totalItems].remove();this._enableInteraction(),resolve("done")},this._duration+10)}})}_updateDisplayDuration(duration){if(duration<0)throw"Duration cannot be negative";return 0===duration?(this._duration=0,this._removeRotationEventListeners()):0===this._duration&&(this._duration=duration,this._addRotationEventListeners()),!0}updateSettings(settings){return new Promise((resolve,reject)=>{this._animationTimeout.then(()=>{let wasMoving=!(0===this._rotationDuration);this._initializeSettings(settings),this._setInitialSettings(settings),settings.display.duration>0&&!wasMoving&&this._startInterval(),this._settings=settings,resolve("Settings updated")})})}moveNext(){this._animationTimeout=this._moveCarouselRight(this._moveAmount)}movePrev(){this._animationTimeout=this._moveCarouselLeft(this._moveAmount)}}