round-carousel-component/dist/round-carousel.js

An infinitely scrollable 3D carousel component for the web

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.RoundCarousel=e():t.RoundCarousel=e()}(self,function(){return function(){var t={96:function(t,e){!function(t){"use strict";var e,n=function(){return n=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var s in e=arguments[n])Object.prototype.hasOwnProperty.call(e,s)&&(t[s]=e[s]);return t},n.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError,t.TouchSwipeEventType=void 0,(e=t.TouchSwipeEventType||(t.TouchSwipeEventType={})).up="swipeup",e.tap="tap",e.down="swipedown",e.move="swipemove",e.left="swipeleft",e.right="swiperight";var o={endX:0,endY:0,moveX:0,moveY:0,startX:0,startY:0},s=function(){function e(t,e,n){return void 0===t&&(t=document.body),void 0===e&&(e={}),void 0===n&&(n=40),this.element=t,this.eventData=e,this.threshold=n,this.coords=o,this.isMoving=!1,this.moveCoords={x:0,y:0},this.onStart=this.onStart.bind(this),this.onMove=this.onMove.bind(this),this.onEnd=this.onEnd.bind(this),this.bind(),this}return e.prototype.bind=function(){var t=this.element;t.addEventListener("touchstart",this.onStart,{passive:!0}),t.addEventListener("touchmove",this.onMove,{passive:!0}),t.addEventListener("touchend",this.onEnd,{passive:!0}),t.addEventListener("mousedown",this.onStart,{passive:!0}),t.addEventListener("mousemove",this.onMove,{passive:!0}),t.addEventListener("mouseup",this.onEnd,{passive:!0})},e.prototype.unbind=function(){var t=this.element;t.removeEventListener("touchstart",this.onStart,!1),t.removeEventListener("touchmove",this.onMove,!1),t.removeEventListener("touchend",this.onEnd,!1),t.removeEventListener("mousedown",this.onStart,!1),t.removeEventListener("mousemove",this.onMove,!1),t.removeEventListener("mouseup",this.onEnd,!1)},e.prototype.getCoords=function(t){var e=this.moveCoords,n="pageX"in t;return e.x=n?t.pageX:t.changedTouches[0].screenX,e.y=n?t.pageY:t.changedTouches[0].screenY,e},e.prototype.resetCoords=function(){this.coords=o},e.prototype.getEndEventName=function(){var e=this.threshold,n=this.coords,o=n.startX,s=n.startY,i=n.endX,r=n.endY,d=Math.abs(i-o),u=Math.abs(r-s);if(d>u){if(i<o&&d>e)return t.TouchSwipeEventType.left;if(i>o&&d>e)return t.TouchSwipeEventType.right}else{if(r<s&&u>e)return t.TouchSwipeEventType.up;if(r>s&&u>e)return t.TouchSwipeEventType.down}return r===s&&i===o?t.TouchSwipeEventType.tap:""},e.prototype.dispatchEvent=function(t){var e=new CustomEvent(t,{detail:n(n({},this.eventData),{coords:this.coords})});this.element.dispatchEvent(e)},e.prototype.dispatchEnd=function(){var t=this.getEndEventName();t&&this.dispatchEvent(t)},e.prototype.onStart=function(t){var e=this.getCoords(t),n=e.x,o=e.y;this.isMoving=!0,this.coords.startX=n,this.coords.startY=o},e.prototype.onMove=function(e){if(this.isMoving){var n=this.getCoords(e),o=n.x,s=n.y;this.coords.moveX=o,this.coords.moveY=s,this.dispatchEvent(t.TouchSwipeEventType.move)}},e.prototype.onEnd=function(t){var e=this.getCoords(t),n=e.x,o=e.y;this.isMoving=!1,this.coords.endX=n,this.coords.endY=o,this.dispatchEnd(),this.resetCoords()},e}();t.default=s,Object.defineProperty(t,"__esModule",{value:!0})}(e)},635:function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{default:t}}n.d(e,{__importDefault:function(){return o}}),Object.create,Object.create}},e={};function n(o){var s=e[o];if(void 0!==s)return s.exports;var i=e[o]={exports:{}};return t[o].call(i.exports,i,i.exports,n),i.exports}n.d=function(t,e){for(var o in e)n.o(e,o)&&!n.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)};var o={};return function(){"use strict";var t=o;Object.defineProperty(t,"__esModule",{value:!0}),t.RoundCarousel=void 0;const e=n(635).__importDefault(n(96));class s{element;touchsweep=void 0;options;defaultOptions={items:[],itemWidth:210,showControls:!0,prevButtonContent:"Previous",nextButtonContent:"Next"};selectedIndex=0;constructor(t,e){if(this.element=t,this.options=Object.assign({},this.defaultOptions,e),!this.element)throw new Error("Carousel element is not defined");this.init()}init=()=>{this.build(),this.setStyle(),this.bind()};destroy=()=>{this.unbind()};setSelectedIndex=t=>{this.selectedIndex=t};prev=()=>{this.setSelectedIndex(this.selectedIndex-1),this.setStyle()};next=()=>{this.setSelectedIndex(this.selectedIndex+1),this.setStyle()};getValues=()=>{const{items:{length:t},itemWidth:e}=this.options;return{theta:360/t,radius:Math.round((e||210)/2/Math.tan(Math.PI/t)),length:t}};getSlideStyle=t=>{const{length:e,theta:n,radius:o}=this.getValues();let s="";return s=t<e?`opacity: 1; transform: rotateY(${n*t}deg) translateZ(${o}px);`:"opacity: 0; transform: none;",s};setStyle=()=>{const{theta:t,radius:e}=this.getValues(),n=`transform: translateZ(${-1*e}px) rotateY(${t*this.selectedIndex*-1}deg)`;this.element?.querySelector(".carousel__container")?.setAttribute("style",n)};bind=()=>{const t=this.element,n=t.querySelector(".carousel__control--prev"),o=t.querySelector(".carousel__control--next");this.touchsweep=new e.default(t||void 0),t?.addEventListener("swipeleft",this.next),t?.addEventListener("swiperight",this.prev),n?.addEventListener("click",this.prev),o?.addEventListener("click",this.next)};unbind=()=>{const t=this.element,e=t.querySelector(".carousel__control--prev"),n=t.querySelector(".carousel__control--next");this.touchsweep&&this.touchsweep.unbind(),t?.removeEventListener("swipeleft",this.next),t?.removeEventListener("swiperight",this.prev),e?.removeEventListener("click",this.prev),n?.removeEventListener("click",this.next)};build=()=>{this.element.innerHTML=`\n            <div class="carousel">\n                <div class="carousel__container">\n                    ${this.buildItems()}\n                </div>\n            </div>\n\n            ${this.buildControls()}\n        `};buildItems=()=>this.options.items.map((t,e)=>`\n                    <div class="carousel__slide" style="${this.getSlideStyle(e)}">\n                        <img src="${t.image}" alt="${t.alt}" />\n\n                        <div class="carousel__slide-overlay">${t.content}</div>\n                    </div>\n                `).join("");buildControls=()=>this.options.showControls?`\n            <div class="carousel__controls">\n                <button class="carousel__control carousel__control--prev">\n                    ${this.options.prevButtonContent}\n                </button>\n\n                <button class="carousel__control carousel__control--next">\n                    ${this.options.nextButtonContent}\n                </button>\n            </div>\n        `:""}t.RoundCarousel=s,t.default=s}(),o}()});