diff options
Diffstat (limited to 'js/dist/carousel.js')
-rw-r--r-- | js/dist/carousel.js | 352 |
1 files changed, 245 insertions, 107 deletions
diff --git a/js/dist/carousel.js b/js/dist/carousel.js index 287b2435f6..57144f43f3 100644 --- a/js/dist/carousel.js +++ b/js/dist/carousel.js @@ -4,13 +4,15 @@ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ (function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('jquery'), require('./util.js')) : - typeof define === 'function' && define.amd ? define(['jquery', './util.js'], factory) : - (global = global || self, global.Carousel = factory(global.jQuery, global.Util)); -}(this, function ($, Util) { 'use strict'; + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/data.js'), require('./dom/eventHandler.js'), require('./dom/manipulator.js'), require('./dom/selectorEngine.js')) : + typeof define === 'function' && define.amd ? define(['./dom/data.js', './dom/eventHandler.js', './dom/manipulator.js', './dom/selectorEngine.js'], factory) : + (global = global || self, global.Carousel = factory(global.Data, global.EventHandler, global.Manipulator, global.SelectorEngine)); +}(this, function (Data, EventHandler, Manipulator, SelectorEngine) { 'use strict'; - $ = $ && $.hasOwnProperty('default') ? $['default'] : $; - Util = Util && Util.hasOwnProperty('default') ? Util['default'] : Util; + Data = Data && Data.hasOwnProperty('default') ? Data['default'] : Data; + EventHandler = EventHandler && EventHandler.hasOwnProperty('default') ? EventHandler['default'] : EventHandler; + Manipulator = Manipulator && Manipulator.hasOwnProperty('default') ? Manipulator['default'] : Manipulator; + SelectorEngine = SelectorEngine && SelectorEngine.hasOwnProperty('default') ? SelectorEngine['default'] : SelectorEngine; function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { @@ -63,6 +65,120 @@ } /** + * -------------------------------------------------------------------------- + * Bootstrap (v4.3.1): util/index.js + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + * -------------------------------------------------------------------------- + */ + var MILLISECONDS_MULTIPLIER = 1000; + var TRANSITION_END = 'transitionend'; + var jQuery = window.jQuery; // Shoutout AngusCroll (https://goo.gl/pxwQGp) + + var toType = function toType(obj) { + return {}.toString.call(obj).match(/\s([a-z]+)/i)[1].toLowerCase(); + }; + + var getSelectorFromElement = function getSelectorFromElement(element) { + var selector = element.getAttribute('data-target'); + + if (!selector || selector === '#') { + var hrefAttr = element.getAttribute('href'); + selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : ''; + } + + try { + return document.querySelector(selector) ? selector : null; + } catch (err) { + return null; + } + }; + + var getTransitionDurationFromElement = function getTransitionDurationFromElement(element) { + if (!element) { + return 0; + } // Get transition-duration of the element + + + var _window$getComputedSt = window.getComputedStyle(element), + transitionDuration = _window$getComputedSt.transitionDuration, + transitionDelay = _window$getComputedSt.transitionDelay; + + var floatTransitionDuration = parseFloat(transitionDuration); + var floatTransitionDelay = parseFloat(transitionDelay); // Return 0 if element or transition duration is not found + + if (!floatTransitionDuration && !floatTransitionDelay) { + return 0; + } // If multiple durations are defined, take the first + + + transitionDuration = transitionDuration.split(',')[0]; + transitionDelay = transitionDelay.split(',')[0]; + return (parseFloat(transitionDuration) + parseFloat(transitionDelay)) * MILLISECONDS_MULTIPLIER; + }; + + var triggerTransitionEnd = function triggerTransitionEnd(element) { + element.dispatchEvent(new Event(TRANSITION_END)); + }; + + var isElement = function isElement(obj) { + return (obj[0] || obj).nodeType; + }; + + var emulateTransitionEnd = function emulateTransitionEnd(element, duration) { + var called = false; + var durationPadding = 5; + var emulatedDuration = duration + durationPadding; + + function listener() { + called = true; + element.removeEventListener(TRANSITION_END, listener); + } + + element.addEventListener(TRANSITION_END, listener); + setTimeout(function () { + if (!called) { + triggerTransitionEnd(element); + } + }, emulatedDuration); + }; + + var typeCheckConfig = function typeCheckConfig(componentName, config, configTypes) { + Object.keys(configTypes).forEach(function (property) { + var expectedTypes = configTypes[property]; + var value = config[property]; + var valueType = value && isElement(value) ? 'element' : toType(value); + + if (!new RegExp(expectedTypes).test(valueType)) { + throw new Error(componentName.toUpperCase() + ": " + ("Option \"" + property + "\" provided type \"" + valueType + "\" ") + ("but expected type \"" + expectedTypes + "\".")); + } + }); + }; + + var makeArray = function makeArray(nodeList) { + if (!nodeList) { + return []; + } + + return [].slice.call(nodeList); + }; + + var isVisible = function isVisible(element) { + if (!element) { + return false; + } + + if (element.style && element.parentNode && element.parentNode.style) { + return element.style.display !== 'none' && element.parentNode.style.display !== 'none' && element.style.visibility !== 'hidden'; + } + + return false; + }; + + var reflow = function reflow(element) { + return element.offsetHeight; + }; + + /** * ------------------------------------------------------------------------ * Constants * ------------------------------------------------------------------------ @@ -73,7 +189,6 @@ var DATA_KEY = 'bs.carousel'; var EVENT_KEY = "." + DATA_KEY; var DATA_API_KEY = '.data-api'; - var JQUERY_NO_CONFLICT = $.fn[NAME]; var ARROW_LEFT_KEYCODE = 37; // KeyboardEvent.which value for left arrow key var ARROW_RIGHT_KEYCODE = 39; // KeyboardEvent.which value for right arrow key @@ -103,7 +218,7 @@ LEFT: 'left', RIGHT: 'right' }; - var Event = { + var Event$1 = { SLIDE: "slide" + EVENT_KEY, SLID: "slid" + EVENT_KEY, KEYDOWN: "keydown" + EVENT_KEY, @@ -164,11 +279,13 @@ this.touchDeltaX = 0; this._config = this._getConfig(config); this._element = element; - this._indicatorsElement = this._element.querySelector(Selector.INDICATORS); + this._indicatorsElement = SelectorEngine.findOne(Selector.INDICATORS, this._element); this._touchSupported = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0; this._pointerEvent = Boolean(window.PointerEvent || window.MSPointerEvent); this._addEventListeners(); + + Data.setData(element, DATA_KEY, this); } // Getters @@ -184,7 +301,7 @@ _proto.nextWhenVisible = function nextWhenVisible() { // Don't call next when the page isn't visible // or the carousel or its parent isn't visible - if (!document.hidden && $(this._element).is(':visible') && $(this._element).css('visibility') !== 'hidden') { + if (!document.hidden && isVisible(this._element)) { this.next(); } }; @@ -200,8 +317,8 @@ this._isPaused = true; } - if (this._element.querySelector(Selector.NEXT_PREV)) { - Util.triggerTransitionEnd(this._element); + if (SelectorEngine.findOne(Selector.NEXT_PREV, this._element)) { + triggerTransitionEnd(this._element); this.cycle(true); } @@ -219,7 +336,7 @@ this._interval = null; } - if (this._config.interval && !this._isPaused) { + if (this._config && this._config.interval && !this._isPaused) { this._interval = setInterval((document.visibilityState ? this.nextWhenVisible : this.next).bind(this), this._config.interval); } }; @@ -227,7 +344,7 @@ _proto.to = function to(index) { var _this = this; - this._activeElement = this._element.querySelector(Selector.ACTIVE_ITEM); + this._activeElement = SelectorEngine.findOne(Selector.ACTIVE_ITEM, this._element); var activeIndex = this._getItemIndex(this._activeElement); @@ -236,7 +353,7 @@ } if (this._isSliding) { - $(this._element).one(Event.SLID, function () { + EventHandler.one(this._element, Event$1.SLID, function () { return _this.to(index); }); return; @@ -254,8 +371,8 @@ }; _proto.dispose = function dispose() { - $(this._element).off(EVENT_KEY); - $.removeData(this._element, DATA_KEY); + EventHandler.off(this._element, EVENT_KEY); + Data.removeData(this._element, DATA_KEY); this._items = null; this._config = null; this._element = null; @@ -269,7 +386,7 @@ _proto._getConfig = function _getConfig(config) { config = _objectSpread({}, Default, config); - Util.typeCheckConfig(NAME, config, DefaultType); + typeCheckConfig(NAME, config, DefaultType); return config; }; @@ -296,15 +413,16 @@ var _this2 = this; if (this._config.keyboard) { - $(this._element).on(Event.KEYDOWN, function (event) { + EventHandler.on(this._element, Event$1.KEYDOWN, function (event) { return _this2._keydown(event); }); } if (this._config.pause === 'hover') { - $(this._element).on(Event.MOUSEENTER, function (event) { + EventHandler.on(this._element, Event$1.MOUSEENTER, function (event) { return _this2.pause(event); - }).on(Event.MOUSELEAVE, function (event) { + }); + EventHandler.on(this._element, Event$1.MOUSELEAVE, function (event) { return _this2.cycle(event); }); } @@ -322,25 +440,25 @@ } var start = function start(event) { - if (_this3._pointerEvent && PointerType[event.originalEvent.pointerType.toUpperCase()]) { - _this3.touchStartX = event.originalEvent.clientX; + if (_this3._pointerEvent && PointerType[event.pointerType.toUpperCase()]) { + _this3.touchStartX = event.clientX; } else if (!_this3._pointerEvent) { - _this3.touchStartX = event.originalEvent.touches[0].clientX; + _this3.touchStartX = event.touches[0].clientX; } }; var move = function move(event) { // ensure swiping with one touch and not pinching - if (event.originalEvent.touches && event.originalEvent.touches.length > 1) { + if (event.touches && event.touches.length > 1) { _this3.touchDeltaX = 0; } else { - _this3.touchDeltaX = event.originalEvent.touches[0].clientX - _this3.touchStartX; + _this3.touchDeltaX = event.touches[0].clientX - _this3.touchStartX; } }; var end = function end(event) { - if (_this3._pointerEvent && PointerType[event.originalEvent.pointerType.toUpperCase()]) { - _this3.touchDeltaX = event.originalEvent.clientX - _this3.touchStartX; + if (_this3._pointerEvent && PointerType[event.pointerType.toUpperCase()]) { + _this3.touchDeltaX = event.clientX - _this3.touchStartX; } _this3._handleSwipe(); @@ -365,27 +483,29 @@ } }; - $(this._element.querySelectorAll(Selector.ITEM_IMG)).on(Event.DRAG_START, function (e) { - return e.preventDefault(); + makeArray(SelectorEngine.find(Selector.ITEM_IMG, this._element)).forEach(function (itemImg) { + EventHandler.on(itemImg, Event$1.DRAG_START, function (e) { + return e.preventDefault(); + }); }); if (this._pointerEvent) { - $(this._element).on(Event.POINTERDOWN, function (event) { + EventHandler.on(this._element, Event$1.POINTERDOWN, function (event) { return start(event); }); - $(this._element).on(Event.POINTERUP, function (event) { + EventHandler.on(this._element, Event$1.POINTERUP, function (event) { return end(event); }); this._element.classList.add(ClassName.POINTER_EVENT); } else { - $(this._element).on(Event.TOUCHSTART, function (event) { + EventHandler.on(this._element, Event$1.TOUCHSTART, function (event) { return start(event); }); - $(this._element).on(Event.TOUCHMOVE, function (event) { + EventHandler.on(this._element, Event$1.TOUCHMOVE, function (event) { return move(event); }); - $(this._element).on(Event.TOUCHEND, function (event) { + EventHandler.on(this._element, Event$1.TOUCHEND, function (event) { return end(event); }); } @@ -412,7 +532,7 @@ }; _proto._getItemIndex = function _getItemIndex(element) { - this._items = element && element.parentNode ? [].slice.call(element.parentNode.querySelectorAll(Selector.ITEM)) : []; + this._items = element && element.parentNode ? makeArray(SelectorEngine.find(Selector.ITEM, element.parentNode)) : []; return this._items.indexOf(element); }; @@ -437,27 +557,28 @@ _proto._triggerSlideEvent = function _triggerSlideEvent(relatedTarget, eventDirectionName) { var targetIndex = this._getItemIndex(relatedTarget); - var fromIndex = this._getItemIndex(this._element.querySelector(Selector.ACTIVE_ITEM)); + var fromIndex = this._getItemIndex(SelectorEngine.findOne(Selector.ACTIVE_ITEM, this._element)); - var slideEvent = $.Event(Event.SLIDE, { + return EventHandler.trigger(this._element, Event$1.SLIDE, { relatedTarget: relatedTarget, direction: eventDirectionName, from: fromIndex, to: targetIndex }); - $(this._element).trigger(slideEvent); - return slideEvent; }; _proto._setActiveIndicatorElement = function _setActiveIndicatorElement(element) { if (this._indicatorsElement) { - var indicators = [].slice.call(this._indicatorsElement.querySelectorAll(Selector.ACTIVE)); - $(indicators).removeClass(ClassName.ACTIVE); + var indicators = SelectorEngine.find(Selector.ACTIVE, this._indicatorsElement); + + for (var i = 0; i < indicators.length; i++) { + indicators[i].classList.remove(ClassName.ACTIVE); + } var nextIndicator = this._indicatorsElement.children[this._getItemIndex(element)]; if (nextIndicator) { - $(nextIndicator).addClass(ClassName.ACTIVE); + nextIndicator.classList.add(ClassName.ACTIVE); } } }; @@ -465,7 +586,7 @@ _proto._slide = function _slide(direction, element) { var _this4 = this; - var activeElement = this._element.querySelector(Selector.ACTIVE_ITEM); + var activeElement = SelectorEngine.findOne(Selector.ACTIVE_ITEM, this._element); var activeElementIndex = this._getItemIndex(activeElement); @@ -488,14 +609,14 @@ eventDirectionName = Direction.RIGHT; } - if (nextElement && $(nextElement).hasClass(ClassName.ACTIVE)) { + if (nextElement && nextElement.classList.contains(ClassName.ACTIVE)) { this._isSliding = false; return; } var slideEvent = this._triggerSlideEvent(nextElement, eventDirectionName); - if (slideEvent.isDefaultPrevented()) { + if (slideEvent.defaultPrevented) { return; } @@ -512,18 +633,11 @@ this._setActiveIndicatorElement(nextElement); - var slidEvent = $.Event(Event.SLID, { - relatedTarget: nextElement, - direction: eventDirectionName, - from: activeElementIndex, - to: nextElementIndex - }); - - if ($(this._element).hasClass(ClassName.SLIDE)) { - $(nextElement).addClass(orderClassName); - Util.reflow(nextElement); - $(activeElement).addClass(directionalClassName); - $(nextElement).addClass(directionalClassName); + if (this._element.classList.contains(ClassName.SLIDE)) { + nextElement.classList.add(orderClassName); + reflow(nextElement); + activeElement.classList.add(directionalClassName); + nextElement.classList.add(directionalClassName); var nextElementInterval = parseInt(nextElement.getAttribute('data-interval'), 10); if (nextElementInterval) { @@ -533,20 +647,35 @@ this._config.interval = this._config.defaultInterval || this._config.interval; } - var transitionDuration = Util.getTransitionDurationFromElement(activeElement); - $(activeElement).one(Util.TRANSITION_END, function () { - $(nextElement).removeClass(directionalClassName + " " + orderClassName).addClass(ClassName.ACTIVE); - $(activeElement).removeClass(ClassName.ACTIVE + " " + orderClassName + " " + directionalClassName); + var transitionDuration = getTransitionDurationFromElement(activeElement); + EventHandler.one(activeElement, TRANSITION_END, function () { + nextElement.classList.remove(directionalClassName); + nextElement.classList.remove(orderClassName); + nextElement.classList.add(ClassName.ACTIVE); + activeElement.classList.remove(ClassName.ACTIVE); + activeElement.classList.remove(orderClassName); + activeElement.classList.remove(directionalClassName); _this4._isSliding = false; setTimeout(function () { - return $(_this4._element).trigger(slidEvent); + EventHandler.trigger(_this4._element, Event$1.SLID, { + relatedTarget: nextElement, + direction: eventDirectionName, + from: activeElementIndex, + to: nextElementIndex + }); }, 0); - }).emulateTransitionEnd(transitionDuration); + }); + emulateTransitionEnd(activeElement, transitionDuration); } else { - $(activeElement).removeClass(ClassName.ACTIVE); - $(nextElement).addClass(ClassName.ACTIVE); + activeElement.classList.remove(ClassName.ACTIVE); + nextElement.classList.add(ClassName.ACTIVE); this._isSliding = false; - $(this._element).trigger(slidEvent); + EventHandler.trigger(this._element, Event$1.SLID, { + relatedTarget: nextElement, + direction: eventDirectionName, + from: activeElementIndex, + to: nextElementIndex + }); } if (isCycling) { @@ -555,52 +684,55 @@ } // Static ; - Carousel._jQueryInterface = function _jQueryInterface(config) { - return this.each(function () { - var data = $(this).data(DATA_KEY); + Carousel._carouselInterface = function _carouselInterface(element, config) { + var data = Data.getData(element, DATA_KEY); - var _config = _objectSpread({}, Default, $(this).data()); + var _config = _objectSpread({}, Default, Manipulator.getDataAttributes(element)); - if (typeof config === 'object') { - _config = _objectSpread({}, _config, config); - } + if (typeof config === 'object') { + _config = _objectSpread({}, _config, config); + } - var action = typeof config === 'string' ? config : _config.slide; + var action = typeof config === 'string' ? config : _config.slide; - if (!data) { - data = new Carousel(this, _config); - $(this).data(DATA_KEY, data); + if (!data) { + data = new Carousel(element, _config); + } + + if (typeof config === 'number') { + data.to(config); + } else if (typeof action === 'string') { + if (typeof data[action] === 'undefined') { + throw new Error("No method named \"" + action + "\""); } - if (typeof config === 'number') { - data.to(config); - } else if (typeof action === 'string') { - if (typeof data[action] === 'undefined') { - throw new TypeError("No method named \"" + action + "\""); - } + data[action](); + } else if (_config.interval && _config.ride) { + data.pause(); + data.cycle(); + } + }; - data[action](); - } else if (_config.interval && _config.ride) { - data.pause(); - data.cycle(); - } + Carousel._jQueryInterface = function _jQueryInterface(config) { + return this.each(function () { + Carousel._carouselInterface(this, config); }); }; Carousel._dataApiClickHandler = function _dataApiClickHandler(event) { - var selector = Util.getSelectorFromElement(this); + var selector = getSelectorFromElement(this); if (!selector) { return; } - var target = $(selector)[0]; + var target = SelectorEngine.findOne(selector); - if (!target || !$(target).hasClass(ClassName.CAROUSEL)) { + if (!target || !target.classList.contains(ClassName.CAROUSEL)) { return; } - var config = _objectSpread({}, $(target).data(), $(this).data()); + var config = _objectSpread({}, Manipulator.getDataAttributes(target), Manipulator.getDataAttributes(this)); var slideIndex = this.getAttribute('data-slide-to'); @@ -608,15 +740,19 @@ config.interval = false; } - Carousel._jQueryInterface.call($(target), config); + Carousel._carouselInterface(target, config); if (slideIndex) { - $(target).data(DATA_KEY).to(slideIndex); + Data.getData(target, DATA_KEY).to(slideIndex); } event.preventDefault(); }; + Carousel._getInstance = function _getInstance(element) { + return Data.getData(element, DATA_KEY); + }; + _createClass(Carousel, null, [{ key: "VERSION", get: function get() { @@ -638,29 +774,31 @@ */ - $(document).on(Event.CLICK_DATA_API, Selector.DATA_SLIDE, Carousel._dataApiClickHandler); - $(window).on(Event.LOAD_DATA_API, function () { - var carousels = [].slice.call(document.querySelectorAll(Selector.DATA_RIDE)); + EventHandler.on(document, Event$1.CLICK_DATA_API, Selector.DATA_SLIDE, Carousel._dataApiClickHandler); + EventHandler.on(window, Event$1.LOAD_DATA_API, function () { + var carousels = makeArray(SelectorEngine.find(Selector.DATA_RIDE)); for (var i = 0, len = carousels.length; i < len; i++) { - var $carousel = $(carousels[i]); - - Carousel._jQueryInterface.call($carousel, $carousel.data()); + Carousel._carouselInterface(carousels[i], Data.getData(carousels[i], DATA_KEY)); } }); /** * ------------------------------------------------------------------------ * jQuery * ------------------------------------------------------------------------ + * add .carousel to jQuery only if jQuery is present */ - $.fn[NAME] = Carousel._jQueryInterface; - $.fn[NAME].Constructor = Carousel; + if (typeof jQuery !== 'undefined') { + var JQUERY_NO_CONFLICT = jQuery.fn[NAME]; + jQuery.fn[NAME] = Carousel._jQueryInterface; + jQuery.fn[NAME].Constructor = Carousel; - $.fn[NAME].noConflict = function () { - $.fn[NAME] = JQUERY_NO_CONFLICT; - return Carousel._jQueryInterface; - }; + jQuery.fn[NAME].noConflict = function () { + jQuery.fn[NAME] = JQUERY_NO_CONFLICT; + return Carousel._jQueryInterface; + }; + } return Carousel; |