bulma-extensions
Version:
Set of extensions for Bulma.io CSS Framework
1 lines • 3.91 kB
JavaScript
"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var i=0;i<t.length;i++){var s=t[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,s.key,s)}}function _createClass(e,t,i){return t&&_defineProperties(e.prototype,t),i&&_defineProperties(e,i),e}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var Carousel=function(){function e(t){if(_classCallCheck(this,e),this._clickEvent="ontouchstart"in window?"touchstart":"click",this.element="string"==typeof t?document.querySelector(t):t,!this.element)throw new Error("An invalid selector or non-DOM node has been provided.");this.init()}return _createClass(e,[{key:"init",value:function(){this.items=Array.from(this.element.querySelectorAll(".carousel-item")),this.computedStyle=window.getComputedStyle(this.element),this.previousControl=this.element.querySelector(".carousel-nav-left"),this.nextControl=this.element.querySelector(".carousel-nav-right"),this._bindEvents(),this._initOrder(),this.element.dataset._autoPlay&&"true"==this.element.dataset._autoPlay&&this._autoPlay(this.element.dataset.delay||5e3)}},{key:"_bindEvents",value:function(){var e=this;this.previousControl&&this.previousControl.addEventListener(this._clickEvent,function(t){t.preventDefault(),e._slide("previous"),e._autoPlayInterval&&(clearInterval(e._autoPlayInterval),e._autoPlay(e.element.dataset.delay||5e3))},!1),this.nextControl&&this.nextControl.addEventListener(this._clickEvent,function(t){t.preventDefault(),e._slide("next"),e._autoPlayInterval&&(clearInterval(e._autoPlayInterval),e._autoPlay(e.element.dataset.delay||5e3))},!1),this.element.addEventListener("touchstart",function(t){e._swipeStart(t)}),this.element.addEventListener("mousedown",function(t){e._swipeStart(t)}),this.element.addEventListener("touchend",function(t){e._swipeEnd(t)}),this.element.addEventListener("mouseup",function(t){e._swipeEnd(t)})}},{key:"_initOrder",value:function(){var e=this.element.querySelector(".carousel-item.is-active"),t=this.items.indexOf(e);this.items.length;t?this.items.push(this.items.splice(0,t)):this.items.unshift(this.items.pop()),this._setOrder()}},{key:"_setOrder",value:function(){this.items.forEach(function(e,t){e.style["z-index"]=1!==t?"0":"1",e.style.order=t})}},{key:"_swipeStart",value:function(e){this._touch={start:{x:e.clientX,y:e.clientY},end:{x:e.clientX,y:e.clientY}}}},{key:"_swipeEnd",value:function(e){this._touch.end={x:e.clientX,y:e.clientY},this._handleGesture()}},{key:"_handleGesture",value:function(){var e=(this._touch.end.x-this._touch.start.x)/parseInt(this.computedStyle.getPropertyValue("width")),t=(this._touch.end.y-this._touch.start.y)/parseInt(this.computedStyle.getPropertyValue("height"));e>t&&e>.25&&this._slide("previous"),e<t&&e<-.25&&this._slide("next")}},{key:"_slide",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"next";this.items.length&&(this.element.querySelector(".carousel-item.is-active").classList.remove("is-active"),"previous"===t?(this.items.unshift(this.items.pop()),this.element.classList.add("is-reversing")):(this.items.push(this.items.shift()),this.element.classList.remove("is-reversing")),(this.items.length>=1?this.items[1]:this.items[0]).classList.add("is-active"),this._setOrder(),this.element.classList.toggle("carousel-animated"),setTimeout(function(){e.element.classList.toggle("carousel-animated")},50))}},{key:"_autoPlay",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:5e3;this._autoPlayInterval=setInterval(function(){e._slide("next")},t)}}]),e}();exports.default=Carousel,document.addEventListener("DOMContentLoaded",function(){var e=document.querySelectorAll(".carousel, .hero-carousel");[].forEach.call(e,function(e){new Carousel(e)})});