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

An infinitely scrollable 3D carousel component for the web

/*! For license information please see round-carousel.js.LICENSE.txt */
!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={562: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 i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t},n.apply(this,arguments)};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},i=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,!1),t.addEventListener("touchmove",this.onMove,!1),t.addEventListener("touchend",this.onEnd,!1),t.addEventListener("mousedown",this.onStart,!1),t.addEventListener("mousemove",this.onMove,!1),t.addEventListener("mouseup",this.onEnd,!1)},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,i=n.startY,s=n.endX,r=n.endY,c=Math.abs(s-o),u=Math.abs(r-i);if(c>u){if(s<o&&c>e)return t.TouchSwipeEventType.left;if(s>o&&c>e)return t.TouchSwipeEventType.right}else{if(r<i&&u>e)return t.TouchSwipeEventType.up;if(r>i&&u>e)return t.TouchSwipeEventType.down}return r===i&&s===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,i=n.y;this.coords.moveX=o,this.coords.moveY=i,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=i,Object.defineProperty(t,"__esModule",{value:!0})}(e)}},e={};function n(o){var i=e[o];if(void 0!==i)return i.exports;var s=e[o]={exports:{}};return t[o].call(s.exports,s,s.exports,n),s.exports}var o={};return function(){"use strict";var t=o;Object.defineProperty(t,"__esModule",{value:!0}),t.RoundCarousel=void 0;var e=n(562),i=function(t,n){var o=this;if(this.touchsweep=void 0,this.defaultOptions={items:[],itemWidth:210,showControls:!0,prevButtonContent:"Previous",nextButtonContent:"Next"},this.selectedIndex=0,this.init=function(){o.build(),o.setStyle(),o.bind()},this.destroy=function(){o.unbind()},this.setSelectedIndex=function(t){o.selectedIndex=t},this.prev=function(){o.setSelectedIndex(o.selectedIndex-1),o.setStyle()},this.next=function(){o.setSelectedIndex(o.selectedIndex+1),o.setStyle()},this.getValues=function(){var t=o.options,e=t.items.length,n=t.itemWidth;return{theta:360/e,radius:Math.round((n||210)/2/Math.tan(Math.PI/e)),length:e}},this.getSlideStyle=function(t){var e=o.getValues(),n=e.length,i=e.theta,s=e.radius;return t<n?"opacity: 1; transform: rotateY(".concat(i*t,"deg) translateZ(").concat(s,"px);"):"opacity: 0; transform: none;"},this.setStyle=function(){var t,e,n=o.getValues(),i=n.theta,s=n.radius,r=i*o.selectedIndex*-1,c="transform: translateZ(".concat(-1*s,"px) rotateY(").concat(r,"deg)");null===(e=null===(t=o.element)||void 0===t?void 0:t.querySelector(".carousel__container"))||void 0===e||e.setAttribute("style",c)},this.bind=function(){var t=o.element,n=t.querySelector(".carousel__control--prev"),i=t.querySelector(".carousel__control--next");o.touchsweep=new e.default(t||void 0),null==t||t.addEventListener("swipeleft",o.next),null==t||t.addEventListener("swiperight",o.prev),null==n||n.addEventListener("click",o.prev),null==i||i.addEventListener("click",o.next)},this.unbind=function(){var t=o.element,e=t.querySelector(".carousel__control--prev"),n=t.querySelector(".carousel__control--next");o.touchsweep&&o.touchsweep.unbind(),null==t||t.removeEventListener("swipeleft",o.next),null==t||t.removeEventListener("swiperight",o.prev),null==e||e.removeEventListener("click",o.prev),null==n||n.removeEventListener("click",o.next)},this.build=function(){o.element.innerHTML='\n            <div class="carousel">\n                <div class="carousel__container">\n                    '.concat(o.buildItems(),"\n                </div>\n            </div>\n\n            ").concat(o.buildControls(),"\n        ")},this.buildItems=function(){return o.options.items.map((function(t,e){return'\n                    <div class="carousel__slide" style="'.concat(o.getSlideStyle(e),'">\n                        <img src="').concat(t.image,'" alt="').concat(t.alt,'" />\n\n                        <div class="carousel__slide-overlay">').concat(t.content,"</div>\n                    </div>\n                ")})).join("")},this.buildControls=function(){return o.options.showControls?'\n            <div class="carousel__controls">\n                <button class="carousel__control carousel__control--prev">\n                    '.concat(o.options.prevButtonContent,'\n                </button>\n\n                <button class="carousel__control carousel__control--next">\n                    ').concat(o.options.nextButtonContent,"\n                </button>\n            </div>\n        "):""},this.element=t,this.options=Object.assign({},this.defaultOptions,n),!this.element)throw new Error("Carousel element is not defined");this.init()};t.RoundCarousel=i,t.default=i}(),o}()}));