carousel.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508
  1. function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
  2. function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
  3. 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); } }
  4. function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
  5. /**
  6. * --------------------------------------------------------------------------
  7. * Bootstrap (v4.1.1): carousel.js
  8. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  9. * --------------------------------------------------------------------------
  10. */
  11. var Carousel = function ($) {
  12. /**
  13. * ------------------------------------------------------------------------
  14. * Constants
  15. * ------------------------------------------------------------------------
  16. */
  17. var NAME = 'carousel';
  18. var VERSION = '4.1.1';
  19. var DATA_KEY = 'bs.carousel';
  20. var EVENT_KEY = "." + DATA_KEY;
  21. var DATA_API_KEY = '.data-api';
  22. var JQUERY_NO_CONFLICT = $.fn[NAME];
  23. var ARROW_LEFT_KEYCODE = 37; // KeyboardEvent.which value for left arrow key
  24. var ARROW_RIGHT_KEYCODE = 39; // KeyboardEvent.which value for right arrow key
  25. var TOUCHEVENT_COMPAT_WAIT = 500; // Time for mouse compat events to fire after touch
  26. var Default = {
  27. interval: 5000,
  28. keyboard: true,
  29. slide: false,
  30. pause: 'hover',
  31. wrap: true
  32. };
  33. var DefaultType = {
  34. interval: '(number|boolean)',
  35. keyboard: 'boolean',
  36. slide: '(boolean|string)',
  37. pause: '(string|boolean)',
  38. wrap: 'boolean'
  39. };
  40. var Direction = {
  41. NEXT: 'next',
  42. PREV: 'prev',
  43. LEFT: 'left',
  44. RIGHT: 'right'
  45. };
  46. var Event = {
  47. SLIDE: "slide" + EVENT_KEY,
  48. SLID: "slid" + EVENT_KEY,
  49. KEYDOWN: "keydown" + EVENT_KEY,
  50. MOUSEENTER: "mouseenter" + EVENT_KEY,
  51. MOUSELEAVE: "mouseleave" + EVENT_KEY,
  52. TOUCHEND: "touchend" + EVENT_KEY,
  53. LOAD_DATA_API: "load" + EVENT_KEY + DATA_API_KEY,
  54. CLICK_DATA_API: "click" + EVENT_KEY + DATA_API_KEY
  55. };
  56. var ClassName = {
  57. CAROUSEL: 'carousel',
  58. ACTIVE: 'active',
  59. SLIDE: 'slide',
  60. RIGHT: 'carousel-item-right',
  61. LEFT: 'carousel-item-left',
  62. NEXT: 'carousel-item-next',
  63. PREV: 'carousel-item-prev',
  64. ITEM: 'carousel-item'
  65. };
  66. var Selector = {
  67. ACTIVE: '.active',
  68. ACTIVE_ITEM: '.active.carousel-item',
  69. ITEM: '.carousel-item',
  70. NEXT_PREV: '.carousel-item-next, .carousel-item-prev',
  71. INDICATORS: '.carousel-indicators',
  72. DATA_SLIDE: '[data-slide], [data-slide-to]',
  73. DATA_RIDE: '[data-ride="carousel"]'
  74. /**
  75. * ------------------------------------------------------------------------
  76. * Class Definition
  77. * ------------------------------------------------------------------------
  78. */
  79. };
  80. var Carousel =
  81. /*#__PURE__*/
  82. function () {
  83. function Carousel(element, config) {
  84. this._items = null;
  85. this._interval = null;
  86. this._activeElement = null;
  87. this._isPaused = false;
  88. this._isSliding = false;
  89. this.touchTimeout = null;
  90. this._config = this._getConfig(config);
  91. this._element = $(element)[0];
  92. this._indicatorsElement = $(this._element).find(Selector.INDICATORS)[0];
  93. this._addEventListeners();
  94. } // Getters
  95. var _proto = Carousel.prototype;
  96. // Public
  97. _proto.next = function next() {
  98. if (!this._isSliding) {
  99. this._slide(Direction.NEXT);
  100. }
  101. };
  102. _proto.nextWhenVisible = function nextWhenVisible() {
  103. // Don't call next when the page isn't visible
  104. // or the carousel or its parent isn't visible
  105. if (!document.hidden && $(this._element).is(':visible') && $(this._element).css('visibility') !== 'hidden') {
  106. this.next();
  107. }
  108. };
  109. _proto.prev = function prev() {
  110. if (!this._isSliding) {
  111. this._slide(Direction.PREV);
  112. }
  113. };
  114. _proto.pause = function pause(event) {
  115. if (!event) {
  116. this._isPaused = true;
  117. }
  118. if ($(this._element).find(Selector.NEXT_PREV)[0]) {
  119. Util.triggerTransitionEnd(this._element);
  120. this.cycle(true);
  121. }
  122. clearInterval(this._interval);
  123. this._interval = null;
  124. };
  125. _proto.cycle = function cycle(event) {
  126. if (!event) {
  127. this._isPaused = false;
  128. }
  129. if (this._interval) {
  130. clearInterval(this._interval);
  131. this._interval = null;
  132. }
  133. if (this._config.interval && !this._isPaused) {
  134. this._interval = setInterval((document.visibilityState ? this.nextWhenVisible : this.next).bind(this), this._config.interval);
  135. }
  136. };
  137. _proto.to = function to(index) {
  138. var _this = this;
  139. this._activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0];
  140. var activeIndex = this._getItemIndex(this._activeElement);
  141. if (index > this._items.length - 1 || index < 0) {
  142. return;
  143. }
  144. if (this._isSliding) {
  145. $(this._element).one(Event.SLID, function () {
  146. return _this.to(index);
  147. });
  148. return;
  149. }
  150. if (activeIndex === index) {
  151. this.pause();
  152. this.cycle();
  153. return;
  154. }
  155. var direction = index > activeIndex ? Direction.NEXT : Direction.PREV;
  156. this._slide(direction, this._items[index]);
  157. };
  158. _proto.dispose = function dispose() {
  159. $(this._element).off(EVENT_KEY);
  160. $.removeData(this._element, DATA_KEY);
  161. this._items = null;
  162. this._config = null;
  163. this._element = null;
  164. this._interval = null;
  165. this._isPaused = null;
  166. this._isSliding = null;
  167. this._activeElement = null;
  168. this._indicatorsElement = null;
  169. }; // Private
  170. _proto._getConfig = function _getConfig(config) {
  171. config = _objectSpread({}, Default, config);
  172. Util.typeCheckConfig(NAME, config, DefaultType);
  173. return config;
  174. };
  175. _proto._addEventListeners = function _addEventListeners() {
  176. var _this2 = this;
  177. if (this._config.keyboard) {
  178. $(this._element).on(Event.KEYDOWN, function (event) {
  179. return _this2._keydown(event);
  180. });
  181. }
  182. if (this._config.pause === 'hover') {
  183. $(this._element).on(Event.MOUSEENTER, function (event) {
  184. return _this2.pause(event);
  185. }).on(Event.MOUSELEAVE, function (event) {
  186. return _this2.cycle(event);
  187. });
  188. if ('ontouchstart' in document.documentElement) {
  189. // If it's a touch-enabled device, mouseenter/leave are fired as
  190. // part of the mouse compatibility events on first tap - the carousel
  191. // would stop cycling until user tapped out of it;
  192. // here, we listen for touchend, explicitly pause the carousel
  193. // (as if it's the second time we tap on it, mouseenter compat event
  194. // is NOT fired) and after a timeout (to allow for mouse compatibility
  195. // events to fire) we explicitly restart cycling
  196. $(this._element).on(Event.TOUCHEND, function () {
  197. _this2.pause();
  198. if (_this2.touchTimeout) {
  199. clearTimeout(_this2.touchTimeout);
  200. }
  201. _this2.touchTimeout = setTimeout(function (event) {
  202. return _this2.cycle(event);
  203. }, TOUCHEVENT_COMPAT_WAIT + _this2._config.interval);
  204. });
  205. }
  206. }
  207. };
  208. _proto._keydown = function _keydown(event) {
  209. if (/input|textarea/i.test(event.target.tagName)) {
  210. return;
  211. }
  212. switch (event.which) {
  213. case ARROW_LEFT_KEYCODE:
  214. event.preventDefault();
  215. this.prev();
  216. break;
  217. case ARROW_RIGHT_KEYCODE:
  218. event.preventDefault();
  219. this.next();
  220. break;
  221. default:
  222. }
  223. };
  224. _proto._getItemIndex = function _getItemIndex(element) {
  225. this._items = $.makeArray($(element).parent().find(Selector.ITEM));
  226. return this._items.indexOf(element);
  227. };
  228. _proto._getItemByDirection = function _getItemByDirection(direction, activeElement) {
  229. var isNextDirection = direction === Direction.NEXT;
  230. var isPrevDirection = direction === Direction.PREV;
  231. var activeIndex = this._getItemIndex(activeElement);
  232. var lastItemIndex = this._items.length - 1;
  233. var isGoingToWrap = isPrevDirection && activeIndex === 0 || isNextDirection && activeIndex === lastItemIndex;
  234. if (isGoingToWrap && !this._config.wrap) {
  235. return activeElement;
  236. }
  237. var delta = direction === Direction.PREV ? -1 : 1;
  238. var itemIndex = (activeIndex + delta) % this._items.length;
  239. return itemIndex === -1 ? this._items[this._items.length - 1] : this._items[itemIndex];
  240. };
  241. _proto._triggerSlideEvent = function _triggerSlideEvent(relatedTarget, eventDirectionName) {
  242. var targetIndex = this._getItemIndex(relatedTarget);
  243. var fromIndex = this._getItemIndex($(this._element).find(Selector.ACTIVE_ITEM)[0]);
  244. var slideEvent = $.Event(Event.SLIDE, {
  245. relatedTarget: relatedTarget,
  246. direction: eventDirectionName,
  247. from: fromIndex,
  248. to: targetIndex
  249. });
  250. $(this._element).trigger(slideEvent);
  251. return slideEvent;
  252. };
  253. _proto._setActiveIndicatorElement = function _setActiveIndicatorElement(element) {
  254. if (this._indicatorsElement) {
  255. $(this._indicatorsElement).find(Selector.ACTIVE).removeClass(ClassName.ACTIVE);
  256. var nextIndicator = this._indicatorsElement.children[this._getItemIndex(element)];
  257. if (nextIndicator) {
  258. $(nextIndicator).addClass(ClassName.ACTIVE);
  259. }
  260. }
  261. };
  262. _proto._slide = function _slide(direction, element) {
  263. var _this3 = this;
  264. var activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0];
  265. var activeElementIndex = this._getItemIndex(activeElement);
  266. var nextElement = element || activeElement && this._getItemByDirection(direction, activeElement);
  267. var nextElementIndex = this._getItemIndex(nextElement);
  268. var isCycling = Boolean(this._interval);
  269. var directionalClassName;
  270. var orderClassName;
  271. var eventDirectionName;
  272. if (direction === Direction.NEXT) {
  273. directionalClassName = ClassName.LEFT;
  274. orderClassName = ClassName.NEXT;
  275. eventDirectionName = Direction.LEFT;
  276. } else {
  277. directionalClassName = ClassName.RIGHT;
  278. orderClassName = ClassName.PREV;
  279. eventDirectionName = Direction.RIGHT;
  280. }
  281. if (nextElement && $(nextElement).hasClass(ClassName.ACTIVE)) {
  282. this._isSliding = false;
  283. return;
  284. }
  285. var slideEvent = this._triggerSlideEvent(nextElement, eventDirectionName);
  286. if (slideEvent.isDefaultPrevented()) {
  287. return;
  288. }
  289. if (!activeElement || !nextElement) {
  290. // Some weirdness is happening, so we bail
  291. return;
  292. }
  293. this._isSliding = true;
  294. if (isCycling) {
  295. this.pause();
  296. }
  297. this._setActiveIndicatorElement(nextElement);
  298. var slidEvent = $.Event(Event.SLID, {
  299. relatedTarget: nextElement,
  300. direction: eventDirectionName,
  301. from: activeElementIndex,
  302. to: nextElementIndex
  303. });
  304. if ($(this._element).hasClass(ClassName.SLIDE)) {
  305. $(nextElement).addClass(orderClassName);
  306. Util.reflow(nextElement);
  307. $(activeElement).addClass(directionalClassName);
  308. $(nextElement).addClass(directionalClassName);
  309. var transitionDuration = Util.getTransitionDurationFromElement(activeElement);
  310. $(activeElement).one(Util.TRANSITION_END, function () {
  311. $(nextElement).removeClass(directionalClassName + " " + orderClassName).addClass(ClassName.ACTIVE);
  312. $(activeElement).removeClass(ClassName.ACTIVE + " " + orderClassName + " " + directionalClassName);
  313. _this3._isSliding = false;
  314. setTimeout(function () {
  315. return $(_this3._element).trigger(slidEvent);
  316. }, 0);
  317. }).emulateTransitionEnd(transitionDuration);
  318. } else {
  319. $(activeElement).removeClass(ClassName.ACTIVE);
  320. $(nextElement).addClass(ClassName.ACTIVE);
  321. this._isSliding = false;
  322. $(this._element).trigger(slidEvent);
  323. }
  324. if (isCycling) {
  325. this.cycle();
  326. }
  327. }; // Static
  328. Carousel._jQueryInterface = function _jQueryInterface(config) {
  329. return this.each(function () {
  330. var data = $(this).data(DATA_KEY);
  331. var _config = _objectSpread({}, Default, $(this).data());
  332. if (typeof config === 'object') {
  333. _config = _objectSpread({}, _config, config);
  334. }
  335. var action = typeof config === 'string' ? config : _config.slide;
  336. if (!data) {
  337. data = new Carousel(this, _config);
  338. $(this).data(DATA_KEY, data);
  339. }
  340. if (typeof config === 'number') {
  341. data.to(config);
  342. } else if (typeof action === 'string') {
  343. if (typeof data[action] === 'undefined') {
  344. throw new TypeError("No method named \"" + action + "\"");
  345. }
  346. data[action]();
  347. } else if (_config.interval) {
  348. data.pause();
  349. data.cycle();
  350. }
  351. });
  352. };
  353. Carousel._dataApiClickHandler = function _dataApiClickHandler(event) {
  354. var selector = Util.getSelectorFromElement(this);
  355. if (!selector) {
  356. return;
  357. }
  358. var target = $(selector)[0];
  359. if (!target || !$(target).hasClass(ClassName.CAROUSEL)) {
  360. return;
  361. }
  362. var config = _objectSpread({}, $(target).data(), $(this).data());
  363. var slideIndex = this.getAttribute('data-slide-to');
  364. if (slideIndex) {
  365. config.interval = false;
  366. }
  367. Carousel._jQueryInterface.call($(target), config);
  368. if (slideIndex) {
  369. $(target).data(DATA_KEY).to(slideIndex);
  370. }
  371. event.preventDefault();
  372. };
  373. _createClass(Carousel, null, [{
  374. key: "VERSION",
  375. get: function get() {
  376. return VERSION;
  377. }
  378. }, {
  379. key: "Default",
  380. get: function get() {
  381. return Default;
  382. }
  383. }]);
  384. return Carousel;
  385. }();
  386. /**
  387. * ------------------------------------------------------------------------
  388. * Data Api implementation
  389. * ------------------------------------------------------------------------
  390. */
  391. $(document).on(Event.CLICK_DATA_API, Selector.DATA_SLIDE, Carousel._dataApiClickHandler);
  392. $(window).on(Event.LOAD_DATA_API, function () {
  393. $(Selector.DATA_RIDE).each(function () {
  394. var $carousel = $(this);
  395. Carousel._jQueryInterface.call($carousel, $carousel.data());
  396. });
  397. });
  398. /**
  399. * ------------------------------------------------------------------------
  400. * jQuery
  401. * ------------------------------------------------------------------------
  402. */
  403. $.fn[NAME] = Carousel._jQueryInterface;
  404. $.fn[NAME].Constructor = Carousel;
  405. $.fn[NAME].noConflict = function () {
  406. $.fn[NAME] = JQUERY_NO_CONFLICT;
  407. return Carousel._jQueryInterface;
  408. };
  409. return Carousel;
  410. }($);
  411. //# sourceMappingURL=carousel.js.map