diff options
Diffstat (limited to 'js/dist/collapse.js')
-rw-r--r-- | js/dist/collapse.js | 347 |
1 files changed, 257 insertions, 90 deletions
diff --git a/js/dist/collapse.js b/js/dist/collapse.js index d46dfec848..159135b51d 100644 --- a/js/dist/collapse.js +++ b/js/dist/collapse.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.Collapse = 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.Collapse = 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,108 @@ } /** + * -------------------------------------------------------------------------- + * 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 reflow = function reflow(element) { + return element.offsetHeight; + }; + + /** * ------------------------------------------------------------------------ * Constants * ------------------------------------------------------------------------ @@ -73,7 +177,6 @@ var DATA_KEY = 'bs.collapse'; var EVENT_KEY = "." + DATA_KEY; var DATA_API_KEY = '.data-api'; - var JQUERY_NO_CONFLICT = $.fn[NAME]; var Default = { toggle: true, parent: '' @@ -82,7 +185,7 @@ toggle: 'boolean', parent: '(string|element)' }; - var Event = { + var Event$1 = { SHOW: "show" + EVENT_KEY, SHOWN: "shown" + EVENT_KEY, HIDE: "hide" + EVENT_KEY, @@ -117,17 +220,17 @@ this._isTransitioning = false; this._element = element; this._config = this._getConfig(config); - this._triggerArray = [].slice.call(document.querySelectorAll("[data-toggle=\"collapse\"][href=\"#" + element.id + "\"]," + ("[data-toggle=\"collapse\"][data-target=\"#" + element.id + "\"]"))); - var toggleList = [].slice.call(document.querySelectorAll(Selector.DATA_TOGGLE)); + this._triggerArray = makeArray(SelectorEngine.find("[data-toggle=\"collapse\"][href=\"#" + element.id + "\"]," + ("[data-toggle=\"collapse\"][data-target=\"#" + element.id + "\"]"))); + var toggleList = makeArray(SelectorEngine.find(Selector.DATA_TOGGLE)); for (var i = 0, len = toggleList.length; i < len; i++) { var elem = toggleList[i]; - var selector = Util.getSelectorFromElement(elem); - var filterElement = [].slice.call(document.querySelectorAll(selector)).filter(function (foundElem) { + var selector = getSelectorFromElement(elem); + var filterElement = makeArray(SelectorEngine.find(selector)).filter(function (foundElem) { return foundElem === element; }); - if (selector !== null && filterElement.length > 0) { + if (selector !== null && filterElement.length) { this._selector = selector; this._triggerArray.push(elem); @@ -143,6 +246,8 @@ if (this._config.toggle) { this.toggle(); } + + Data.setData(element, DATA_KEY, this); } // Getters @@ -150,7 +255,7 @@ // Public _proto.toggle = function toggle() { - if ($(this._element).hasClass(ClassName.SHOW)) { + if (this._element.classList.contains(ClassName.SHOW)) { this.hide(); } else { this.show(); @@ -160,7 +265,7 @@ _proto.show = function show() { var _this = this; - if (this._isTransitioning || $(this._element).hasClass(ClassName.SHOW)) { + if (this._isTransitioning || this._element.classList.contains(ClassName.SHOW)) { return; } @@ -168,7 +273,7 @@ var activesData; if (this._parent) { - actives = [].slice.call(this._parent.querySelectorAll(Selector.ACTIVES)).filter(function (elem) { + actives = makeArray(SelectorEngine.find(Selector.ACTIVES, this._parent)).filter(function (elem) { if (typeof _this._config.parent === 'string') { return elem.getAttribute('data-parent') === _this._config.parent; } @@ -181,87 +286,113 @@ } } + var container = SelectorEngine.findOne(this._selector); + if (actives) { - activesData = $(actives).not(this._selector).data(DATA_KEY); + var tempActiveData = actives.filter(function (elem) { + return container !== elem; + }); + activesData = tempActiveData[0] ? Data.getData(tempActiveData[0], DATA_KEY) : null; if (activesData && activesData._isTransitioning) { return; } } - var startEvent = $.Event(Event.SHOW); - $(this._element).trigger(startEvent); + var startEvent = EventHandler.trigger(this._element, Event$1.SHOW); - if (startEvent.isDefaultPrevented()) { + if (startEvent.defaultPrevented) { return; } if (actives) { - Collapse._jQueryInterface.call($(actives).not(this._selector), 'hide'); + actives.forEach(function (elemActive) { + if (container !== elemActive) { + Collapse._collapseInterface(elemActive, 'hide'); + } - if (!activesData) { - $(actives).data(DATA_KEY, null); - } + if (!activesData) { + Data.setData(elemActive, DATA_KEY, null); + } + }); } var dimension = this._getDimension(); - $(this._element).removeClass(ClassName.COLLAPSE).addClass(ClassName.COLLAPSING); + this._element.classList.remove(ClassName.COLLAPSE); + + this._element.classList.add(ClassName.COLLAPSING); + this._element.style[dimension] = 0; if (this._triggerArray.length) { - $(this._triggerArray).removeClass(ClassName.COLLAPSED).attr('aria-expanded', true); + this._triggerArray.forEach(function (element) { + element.classList.remove(ClassName.COLLAPSED); + element.setAttribute('aria-expanded', true); + }); } this.setTransitioning(true); var complete = function complete() { - $(_this._element).removeClass(ClassName.COLLAPSING).addClass(ClassName.COLLAPSE).addClass(ClassName.SHOW); + _this._element.classList.remove(ClassName.COLLAPSING); + + _this._element.classList.add(ClassName.COLLAPSE); + + _this._element.classList.add(ClassName.SHOW); + _this._element.style[dimension] = ''; _this.setTransitioning(false); - $(_this._element).trigger(Event.SHOWN); + EventHandler.trigger(_this._element, Event$1.SHOWN); }; var capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1); var scrollSize = "scroll" + capitalizedDimension; - var transitionDuration = Util.getTransitionDurationFromElement(this._element); - $(this._element).one(Util.TRANSITION_END, complete).emulateTransitionEnd(transitionDuration); + var transitionDuration = getTransitionDurationFromElement(this._element); + EventHandler.one(this._element, TRANSITION_END, complete); + emulateTransitionEnd(this._element, transitionDuration); this._element.style[dimension] = this._element[scrollSize] + "px"; }; _proto.hide = function hide() { var _this2 = this; - if (this._isTransitioning || !$(this._element).hasClass(ClassName.SHOW)) { + if (this._isTransitioning || !this._element.classList.contains(ClassName.SHOW)) { return; } - var startEvent = $.Event(Event.HIDE); - $(this._element).trigger(startEvent); + var startEvent = EventHandler.trigger(this._element, Event$1.HIDE); - if (startEvent.isDefaultPrevented()) { + if (startEvent.defaultPrevented) { return; } var dimension = this._getDimension(); this._element.style[dimension] = this._element.getBoundingClientRect()[dimension] + "px"; - Util.reflow(this._element); - $(this._element).addClass(ClassName.COLLAPSING).removeClass(ClassName.COLLAPSE).removeClass(ClassName.SHOW); + reflow(this._element); + + this._element.classList.add(ClassName.COLLAPSING); + + this._element.classList.remove(ClassName.COLLAPSE); + + this._element.classList.remove(ClassName.SHOW); + var triggerArrayLength = this._triggerArray.length; if (triggerArrayLength > 0) { for (var i = 0; i < triggerArrayLength; i++) { var trigger = this._triggerArray[i]; - var selector = Util.getSelectorFromElement(trigger); + var selector = getSelectorFromElement(trigger); if (selector !== null) { - var $elem = $([].slice.call(document.querySelectorAll(selector))); + var elem = SelectorEngine.findOne(selector); - if (!$elem.hasClass(ClassName.SHOW)) { - $(trigger).addClass(ClassName.COLLAPSED).attr('aria-expanded', false); + if (!elem.classList.contains(ClassName.SHOW)) { + trigger.classList.add(ClassName.COLLAPSED); + trigger.setAttribute('aria-expanded', false); } } } @@ -272,12 +403,17 @@ var complete = function complete() { _this2.setTransitioning(false); - $(_this2._element).removeClass(ClassName.COLLAPSING).addClass(ClassName.COLLAPSE).trigger(Event.HIDDEN); + _this2._element.classList.remove(ClassName.COLLAPSING); + + _this2._element.classList.add(ClassName.COLLAPSE); + + EventHandler.trigger(_this2._element, Event$1.HIDDEN); }; this._element.style[dimension] = ''; - var transitionDuration = Util.getTransitionDurationFromElement(this._element); - $(this._element).one(Util.TRANSITION_END, complete).emulateTransitionEnd(transitionDuration); + var transitionDuration = getTransitionDurationFromElement(this._element); + EventHandler.one(this._element, TRANSITION_END, complete); + emulateTransitionEnd(this._element, transitionDuration); }; _proto.setTransitioning = function setTransitioning(isTransitioning) { @@ -285,7 +421,7 @@ }; _proto.dispose = function dispose() { - $.removeData(this._element, DATA_KEY); + Data.removeData(this._element, DATA_KEY); this._config = null; this._parent = null; this._element = null; @@ -298,12 +434,13 @@ config = _objectSpread({}, Default, config); config.toggle = Boolean(config.toggle); // Coerce string values - Util.typeCheckConfig(NAME, config, DefaultType); + typeCheckConfig(NAME, config, DefaultType); return config; }; _proto._getDimension = function _getDimension() { - var hasWidth = $(this._element).hasClass(Dimension.WIDTH); + var hasWidth = this._element.classList.contains(Dimension.WIDTH); + return hasWidth ? Dimension.WIDTH : Dimension.HEIGHT; }; @@ -312,64 +449,79 @@ var parent; - if (Util.isElement(this._config.parent)) { - parent = this._config.parent; // It's a jQuery object + if (isElement(this._config.parent)) { + parent = this._config.parent; // it's a jQuery object - if (typeof this._config.parent.jquery !== 'undefined') { + if (typeof this._config.parent.jquery !== 'undefined' || typeof this._config.parent[0] !== 'undefined') { parent = this._config.parent[0]; } } else { - parent = document.querySelector(this._config.parent); + parent = SelectorEngine.findOne(this._config.parent); } var selector = "[data-toggle=\"collapse\"][data-parent=\"" + this._config.parent + "\"]"; - var children = [].slice.call(parent.querySelectorAll(selector)); - $(children).each(function (i, element) { + makeArray(SelectorEngine.find(selector, parent)).forEach(function (element) { _this3._addAriaAndCollapsedClass(Collapse._getTargetFromElement(element), [element]); }); return parent; }; _proto._addAriaAndCollapsedClass = function _addAriaAndCollapsedClass(element, triggerArray) { - var isOpen = $(element).hasClass(ClassName.SHOW); + if (element) { + var isOpen = element.classList.contains(ClassName.SHOW); + + if (triggerArray.length) { + triggerArray.forEach(function (elem) { + if (!isOpen) { + elem.classList.add(ClassName.COLLAPSED); + } else { + elem.classList.remove(ClassName.COLLAPSED); + } - if (triggerArray.length) { - $(triggerArray).toggleClass(ClassName.COLLAPSED, !isOpen).attr('aria-expanded', isOpen); + elem.setAttribute('aria-expanded', isOpen); + }); + } } } // Static ; Collapse._getTargetFromElement = function _getTargetFromElement(element) { - var selector = Util.getSelectorFromElement(element); - return selector ? document.querySelector(selector) : null; + var selector = getSelectorFromElement(element); + return selector ? SelectorEngine.findOne(selector) : null; }; - Collapse._jQueryInterface = function _jQueryInterface(config) { - return this.each(function () { - var $this = $(this); - var data = $this.data(DATA_KEY); + Collapse._collapseInterface = function _collapseInterface(element, config) { + var data = Data.getData(element, DATA_KEY); - var _config = _objectSpread({}, Default, $this.data(), typeof config === 'object' && config ? config : {}); + var _config = _objectSpread({}, Default, Manipulator.getDataAttributes(element), typeof config === 'object' && config ? config : {}); - if (!data && _config.toggle && /show|hide/.test(config)) { - _config.toggle = false; - } + if (!data && _config.toggle && /show|hide/.test(config)) { + _config.toggle = false; + } + + if (!data) { + data = new Collapse(element, _config); + } - if (!data) { - data = new Collapse(this, _config); - $this.data(DATA_KEY, data); + if (typeof config === 'string') { + if (typeof data[config] === 'undefined') { + throw new Error("No method named \"" + config + "\""); } - if (typeof config === 'string') { - if (typeof data[config] === 'undefined') { - throw new TypeError("No method named \"" + config + "\""); - } + data[config](); + } + }; - data[config](); - } + Collapse._jQueryInterface = function _jQueryInterface(config) { + return this.each(function () { + Collapse._collapseInterface(this, config); }); }; + Collapse._getInstance = function _getInstance(element) { + return Data.getData(element, DATA_KEY); + }; + _createClass(Collapse, null, [{ key: "VERSION", get: function get() { @@ -391,36 +543,51 @@ */ - $(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) { + EventHandler.on(document, Event$1.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) { // preventDefault only for <a> elements (which change the URL) not inside the collapsible element - if (event.currentTarget.tagName === 'A') { + if (event.target.tagName === 'A') { event.preventDefault(); } - var $trigger = $(this); - var selector = Util.getSelectorFromElement(this); - var selectors = [].slice.call(document.querySelectorAll(selector)); - $(selectors).each(function () { - var $target = $(this); - var data = $target.data(DATA_KEY); - var config = data ? 'toggle' : $trigger.data(); + var triggerData = Manipulator.getDataAttributes(this); + var selector = getSelectorFromElement(this); + var selectorElements = makeArray(SelectorEngine.find(selector)); + selectorElements.forEach(function (element) { + var data = Data.getData(element, DATA_KEY); + var config; + + if (data) { + // update parent attribute + if (data._parent === null && typeof triggerData.parent === 'string') { + data._config.parent = triggerData.parent; + data._parent = data._getParent(); + } + + config = 'toggle'; + } else { + config = triggerData; + } - Collapse._jQueryInterface.call($target, config); + Collapse._collapseInterface(element, config); }); }); /** * ------------------------------------------------------------------------ * jQuery * ------------------------------------------------------------------------ + * add .collapse to jQuery only if jQuery is present */ - $.fn[NAME] = Collapse._jQueryInterface; - $.fn[NAME].Constructor = Collapse; + if (typeof jQuery !== 'undefined') { + var JQUERY_NO_CONFLICT = jQuery.fn[NAME]; + jQuery.fn[NAME] = Collapse._jQueryInterface; + jQuery.fn[NAME].Constructor = Collapse; - $.fn[NAME].noConflict = function () { - $.fn[NAME] = JQUERY_NO_CONFLICT; - return Collapse._jQueryInterface; - }; + jQuery.fn[NAME].noConflict = function () { + jQuery.fn[NAME] = JQUERY_NO_CONFLICT; + return Collapse._jQueryInterface; + }; + } return Collapse; |