src/scss/bootstrap-4.0.0-alpha.6/js/dist/carousel.js

   1 var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
   2
   3 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
   4
   5 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
   6
   7 /**
   8  * --------------------------------------------------------------------------
   9  * Bootstrap (v4.0.0-alpha.6): carousel.js
  10  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  11  * --------------------------------------------------------------------------
  12  */
  13
  14 var Carousel = function ($) {
  15
  16   /**
  17    * ------------------------------------------------------------------------
  18    * Constants
  19    * ------------------------------------------------------------------------
  20    */
  21
  22   var NAME = 'carousel';
  23   var VERSION = '4.0.0-alpha.6';
  24   var DATA_KEY = 'bs.carousel';
  25   var EVENT_KEY = '.' + DATA_KEY;
  26   var DATA_API_KEY = '.data-api';
  27   var JQUERY_NO_CONFLICT = $.fn[NAME];
  28   var TRANSITION_DURATION = 600;
  29   var ARROW_LEFT_KEYCODE = 37; // KeyboardEvent.which value for left arrow key
  30   var ARROW_RIGHT_KEYCODE = 39; // KeyboardEvent.which value for right arrow key
  31
  32   var Default = {
  33     interval: 5000,
  34     keyboard: true,
  35     slide: false,
  36     pause: 'hover',
  37     wrap: true
  38   };
  39
  40   var DefaultType = {
  41     interval: '(number|boolean)',
  42     keyboard: 'boolean',
  43     slide: '(boolean|string)',
  44     pause: '(string|boolean)',
  45     wrap: 'boolean'
  46   };
  47
  48   var Direction = {
  49     NEXT: 'next',
  50     PREV: 'prev',
  51     LEFT: 'left',
  52     RIGHT: 'right'
  53   };
  54
  55   var Event = {
  56     SLIDE: 'slide' + EVENT_KEY,
  57     SLID: 'slid' + EVENT_KEY,
  58     KEYDOWN: 'keydown' + EVENT_KEY,
  59     MOUSEENTER: 'mouseenter' + EVENT_KEY,
  60     MOUSELEAVE: 'mouseleave' + EVENT_KEY,
  61     LOAD_DATA_API: 'load' + EVENT_KEY + DATA_API_KEY,
  62     CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY
  63   };
  64
  65   var ClassName = {
  66     CAROUSEL: 'carousel',
  67     ACTIVE: 'active',
  68     SLIDE: 'slide',
  69     RIGHT: 'carousel-item-right',
  70     LEFT: 'carousel-item-left',
  71     NEXT: 'carousel-item-next',
  72     PREV: 'carousel-item-prev',
  73     ITEM: 'carousel-item'
  74   };
  75
  76   var Selector = {
  77     ACTIVE: '.active',
  78     ACTIVE_ITEM: '.active.carousel-item',
  79     ITEM: '.carousel-item',
  80     NEXT_PREV: '.carousel-item-next, .carousel-item-prev',
  81     INDICATORS: '.carousel-indicators',
  82     DATA_SLIDE: '[data-slide], [data-slide-to]',
  83     DATA_RIDE: '[data-ride="carousel"]'
  84   };
  85
  86   /**
  87    * ------------------------------------------------------------------------
  88    * Class Definition
  89    * ------------------------------------------------------------------------
  90    */
  91
  92   var Carousel = function () {
  93     function Carousel(element, config) {
  94       _classCallCheck(this, Carousel);
  95
  96       this._items = null;
  97       this._interval = null;
  98       this._activeElement = null;
  99
 100       this._isPaused = false;
 101       this._isSliding = false;
 102
 103       this._config = this._getConfig(config);
 104       this._element = $(element)[0];
 105       this._indicatorsElement = $(this._element).find(Selector.INDICATORS)[0];
 106
 107       this._addEventListeners();
 108     }
 109
 110     // getters
 111
 112     // public
 113
 114     Carousel.prototype.next = function next() {
 115       if (this._isSliding) {
 116         throw new Error('Carousel is sliding');
 117       }
 118       this._slide(Direction.NEXT);
 119     };
 120
 121     Carousel.prototype.nextWhenVisible = function nextWhenVisible() {
 122       // Don't call next when the page isn't visible
 123       if (!document.hidden) {
 124         this.next();
 125       }
 126     };
 127
 128     Carousel.prototype.prev = function prev() {
 129       if (this._isSliding) {
 130         throw new Error('Carousel is sliding');
 131       }
 132       this._slide(Direction.PREVIOUS);
 133     };
 134
 135     Carousel.prototype.pause = function pause(event) {
 136       if (!event) {
 137         this._isPaused = true;
 138       }
 139
 140       if ($(this._element).find(Selector.NEXT_PREV)[0] && Util.supportsTransitionEnd()) {
 141         Util.triggerTransitionEnd(this._element);
 142         this.cycle(true);
 143       }
 144
 145       clearInterval(this._interval);
 146       this._interval = null;
 147     };
 148
 149     Carousel.prototype.cycle = function cycle(event) {
 150       if (!event) {
 151         this._isPaused = false;
 152       }
 153
 154       if (this._interval) {
 155         clearInterval(this._interval);
 156         this._interval = null;
 157       }
 158
 159       if (this._config.interval && !this._isPaused) {
 160         this._interval = setInterval((document.visibilityState ? this.nextWhenVisible : this.next).bind(this), this._config.interval);
 161       }
 162     };
 163
 164     Carousel.prototype.to = function to(index) {
 165       var _this = this;
 166
 167       this._activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0];
 168
 169       var activeIndex = this._getItemIndex(this._activeElement);
 170
 171       if (index > this._items.length - 1 || index < 0) {
 172         return;
 173       }
 174
 175       if (this._isSliding) {
 176         $(this._element).one(Event.SLID, function () {
 177           return _this.to(index);
 178         });
 179         return;
 180       }
 181
 182       if (activeIndex === index) {
 183         this.pause();
 184         this.cycle();
 185         return;
 186       }
 187
 188       var direction = index > activeIndex ? Direction.NEXT : Direction.PREVIOUS;
 189
 190       this._slide(direction, this._items[index]);
 191     };
 192
 193     Carousel.prototype.dispose = function dispose() {
 194       $(this._element).off(EVENT_KEY);
 195       $.removeData(this._element, DATA_KEY);
 196
 197       this._items = null;
 198       this._config = null;
 199       this._element = null;
 200       this._interval = null;
 201       this._isPaused = null;
 202       this._isSliding = null;
 203       this._activeElement = null;
 204       this._indicatorsElement = null;
 205     };
 206
 207     // private
 208
 209     Carousel.prototype._getConfig = function _getConfig(config) {
 210       config = $.extend({}, Default, config);
 211       Util.typeCheckConfig(NAME, config, DefaultType);
 212       return config;
 213     };
 214
 215     Carousel.prototype._addEventListeners = function _addEventListeners() {
 216       var _this2 = this;
 217
 218       if (this._config.keyboard) {
 219         $(this._element).on(Event.KEYDOWN, function (event) {
 220           return _this2._keydown(event);
 221         });
 222       }
 223
 224       if (this._config.pause === 'hover' && !('ontouchstart' in document.documentElement)) {
 225         $(this._element).on(Event.MOUSEENTER, function (event) {
 226           return _this2.pause(event);
 227         }).on(Event.MOUSELEAVE, function (event) {
 228           return _this2.cycle(event);
 229         });
 230       }
 231     };
 232
 233     Carousel.prototype._keydown = function _keydown(event) {
 234       if (/input|textarea/i.test(event.target.tagName)) {
 235         return;
 236       }
 237
 238       switch (event.which) {
 239         case ARROW_LEFT_KEYCODE:
 240           event.preventDefault();
 241           this.prev();
 242           break;
 243         case ARROW_RIGHT_KEYCODE:
 244           event.preventDefault();
 245           this.next();
 246           break;
 247         default:
 248           return;
 249       }
 250     };
 251
 252     Carousel.prototype._getItemIndex = function _getItemIndex(element) {
 253       this._items = $.makeArray($(element).parent().find(Selector.ITEM));
 254       return this._items.indexOf(element);
 255     };
 256
 257     Carousel.prototype._getItemByDirection = function _getItemByDirection(direction, activeElement) {
 258       var isNextDirection = direction === Direction.NEXT;
 259       var isPrevDirection = direction === Direction.PREVIOUS;
 260       var activeIndex = this._getItemIndex(activeElement);
 261       var lastItemIndex = this._items.length - 1;
 262       var isGoingToWrap = isPrevDirection && activeIndex === 0 || isNextDirection && activeIndex === lastItemIndex;
 263
 264       if (isGoingToWrap && !this._config.wrap) {
 265         return activeElement;
 266       }
 267
 268       var delta = direction === Direction.PREVIOUS ? -1 : 1;
 269       var itemIndex = (activeIndex + delta) % this._items.length;
 270
 271       return itemIndex === -1 ? this._items[this._items.length - 1] : this._items[itemIndex];
 272     };
 273
 274     Carousel.prototype._triggerSlideEvent = function _triggerSlideEvent(relatedTarget, eventDirectionName) {
 275       var slideEvent = $.Event(Event.SLIDE, {
 276         relatedTarget: relatedTarget,
 277         direction: eventDirectionName
 278       });
 279
 280       $(this._element).trigger(slideEvent);
 281
 282       return slideEvent;
 283     };
 284
 285     Carousel.prototype._setActiveIndicatorElement = function _setActiveIndicatorElement(element) {
 286       if (this._indicatorsElement) {
 287         $(this._indicatorsElement).find(Selector.ACTIVE).removeClass(ClassName.ACTIVE);
 288
 289         var nextIndicator = this._indicatorsElement.children[this._getItemIndex(element)];
 290
 291         if (nextIndicator) {
 292           $(nextIndicator).addClass(ClassName.ACTIVE);
 293         }
 294       }
 295     };
 296
 297     Carousel.prototype._slide = function _slide(direction, element) {
 298       var _this3 = this;
 299
 300       var activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0];
 301       var nextElement = element || activeElement && this._getItemByDirection(direction, activeElement);
 302
 303       var isCycling = Boolean(this._interval);
 304
 305       var directionalClassName = void 0;
 306       var orderClassName = void 0;
 307       var eventDirectionName = void 0;
 308
 309       if (direction === Direction.NEXT) {
 310         directionalClassName = ClassName.LEFT;
 311         orderClassName = ClassName.NEXT;
 312         eventDirectionName = Direction.LEFT;
 313       } else {
 314         directionalClassName = ClassName.RIGHT;
 315         orderClassName = ClassName.PREV;
 316         eventDirectionName = Direction.RIGHT;
 317       }
 318
 319       if (nextElement && $(nextElement).hasClass(ClassName.ACTIVE)) {
 320         this._isSliding = false;
 321         return;
 322       }
 323
 324       var slideEvent = this._triggerSlideEvent(nextElement, eventDirectionName);
 325       if (slideEvent.isDefaultPrevented()) {
 326         return;
 327       }
 328
 329       if (!activeElement || !nextElement) {
 330         // some weirdness is happening, so we bail
 331         return;
 332       }
 333
 334       this._isSliding = true;
 335
 336       if (isCycling) {
 337         this.pause();
 338       }
 339
 340       this._setActiveIndicatorElement(nextElement);
 341
 342       var slidEvent = $.Event(Event.SLID, {
 343         relatedTarget: nextElement,
 344         direction: eventDirectionName
 345       });
 346
 347       if (Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.SLIDE)) {
 348
 349         $(nextElement).addClass(orderClassName);
 350
 351         Util.reflow(nextElement);
 352
 353         $(activeElement).addClass(directionalClassName);
 354         $(nextElement).addClass(directionalClassName);
 355
 356         $(activeElement).one(Util.TRANSITION_END, function () {
 357           $(nextElement).removeClass(directionalClassName + ' ' + orderClassName).addClass(ClassName.ACTIVE);
 358
 359           $(activeElement).removeClass(ClassName.ACTIVE + ' ' + orderClassName + ' ' + directionalClassName);
 360
 361           _this3._isSliding = false;
 362
 363           setTimeout(function () {
 364             return $(_this3._element).trigger(slidEvent);
 365           }, 0);
 366         }).emulateTransitionEnd(TRANSITION_DURATION);
 367       } else {
 368         $(activeElement).removeClass(ClassName.ACTIVE);
 369         $(nextElement).addClass(ClassName.ACTIVE);
 370
 371         this._isSliding = false;
 372         $(this._element).trigger(slidEvent);
 373       }
 374
 375       if (isCycling) {
 376         this.cycle();
 377       }
 378     };
 379
 380     // static
 381
 382     Carousel._jQueryInterface = function _jQueryInterface(config) {
 383       return this.each(function () {
 384         var data = $(this).data(DATA_KEY);
 385         var _config = $.extend({}, Default, $(this).data());
 386
 387         if ((typeof config === 'undefined' ? 'undefined' : _typeof(config)) === 'object') {
 388           $.extend(_config, config);
 389         }
 390
 391         var action = typeof config === 'string' ? config : _config.slide;
 392
 393         if (!data) {
 394           data = new Carousel(this, _config);
 395           $(this).data(DATA_KEY, data);
 396         }
 397
 398         if (typeof config === 'number') {
 399           data.to(config);
 400         } else if (typeof action === 'string') {
 401           if (data[action] === undefined) {
 402             throw new Error('No method named "' + action + '"');
 403           }
 404           data[action]();
 405         } else if (_config.interval) {
 406           data.pause();
 407           data.cycle();
 408         }
 409       });
 410     };
 411
 412     Carousel._dataApiClickHandler = function _dataApiClickHandler(event) {
 413       var selector = Util.getSelectorFromElement(this);
 414
 415       if (!selector) {
 416         return;
 417       }
 418
 419       var target = $(selector)[0];
 420
 421       if (!target || !$(target).hasClass(ClassName.CAROUSEL)) {
 422         return;
 423       }
 424
 425       var config = $.extend({}, $(target).data(), $(this).data());
 426       var slideIndex = this.getAttribute('data-slide-to');
 427
 428       if (slideIndex) {
 429         config.interval = false;
 430       }
 431
 432       Carousel._jQueryInterface.call($(target), config);
 433
 434       if (slideIndex) {
 435         $(target).data(DATA_KEY).to(slideIndex);
 436       }
 437
 438       event.preventDefault();
 439     };
 440
 441     _createClass(Carousel, null, [{
 442       key: 'VERSION',
 443       get: function get() {
 444         return VERSION;
 445       }
 446     }, {
 447       key: 'Default',
 448       get: function get() {
 449         return Default;
 450       }
 451     }]);
 452
 453     return Carousel;
 454   }();
 455
 456   /**
 457    * ------------------------------------------------------------------------
 458    * Data Api implementation
 459    * ------------------------------------------------------------------------
 460    */
 461
 462   $(document).on(Event.CLICK_DATA_API, Selector.DATA_SLIDE, Carousel._dataApiClickHandler);
 463
 464   $(window).on(Event.LOAD_DATA_API, function () {
 465     $(Selector.DATA_RIDE).each(function () {
 466       var $carousel = $(this);
 467       Carousel._jQueryInterface.call($carousel, $carousel.data());
 468     });
 469   });
 470
 471   /**
 472    * ------------------------------------------------------------------------
 473    * jQuery
 474    * ------------------------------------------------------------------------
 475    */
 476
 477   $.fn[NAME] = Carousel._jQueryInterface;
 478   $.fn[NAME].Constructor = Carousel;
 479   $.fn[NAME].noConflict = function () {
 480     $.fn[NAME] = JQUERY_NO_CONFLICT;
 481     return Carousel._jQueryInterface;
 482   };
 483
 484   return Carousel;
 485 }(jQuery);
 486 //# sourceMappingURL=carousel.js.map