diff options
Diffstat (limited to 'js/dist/collapse.js')
| -rw-r--r-- | js/dist/collapse.js | 314 |
1 files changed, 65 insertions, 249 deletions
diff --git a/js/dist/collapse.js b/js/dist/collapse.js index ebd0ae26de..c0e5cd3730 100644 --- a/js/dist/collapse.js +++ b/js/dist/collapse.js @@ -1,199 +1,34 @@ /*! - * Bootstrap collapse.js v5.1.3 (https://getbootstrap.com/) - * Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors) + * Bootstrap collapse.js v5.2.0-beta1 (https://getbootstrap.com/) + * Copyright 2011-2022 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ (function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/data.js'), require('./dom/event-handler.js'), require('./dom/manipulator.js'), require('./dom/selector-engine.js'), require('./base-component.js')) : - typeof define === 'function' && define.amd ? define(['./dom/data', './dom/event-handler', './dom/manipulator', './dom/selector-engine', './base-component'], factory) : - (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Collapse = factory(global.Data, global.EventHandler, global.Manipulator, global.SelectorEngine, global.Base)); -})(this, (function (Data, EventHandler, Manipulator, SelectorEngine, BaseComponent) { 'use strict'; + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./util/index'), require('./dom/event-handler'), require('./dom/selector-engine'), require('./base-component')) : + typeof define === 'function' && define.amd ? define(['./util/index', './dom/event-handler', './dom/selector-engine', './base-component'], factory) : + (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Collapse = factory(global.Index, global.EventHandler, global.SelectorEngine, global.BaseComponent)); +})(this, (function (index, EventHandler, SelectorEngine, BaseComponent) { 'use strict'; const _interopDefaultLegacy = e => e && typeof e === 'object' && 'default' in e ? e : { default: e }; - const Data__default = /*#__PURE__*/_interopDefaultLegacy(Data); const EventHandler__default = /*#__PURE__*/_interopDefaultLegacy(EventHandler); - const Manipulator__default = /*#__PURE__*/_interopDefaultLegacy(Manipulator); const SelectorEngine__default = /*#__PURE__*/_interopDefaultLegacy(SelectorEngine); const BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent); /** * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): util/index.js - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) - * -------------------------------------------------------------------------- - */ - - const toType = obj => { - if (obj === null || obj === undefined) { - return `${obj}`; - } - - return {}.toString.call(obj).match(/\s([a-z]+)/i)[1].toLowerCase(); - }; - - const getSelector = element => { - let selector = element.getAttribute('data-bs-target'); - - if (!selector || selector === '#') { - let hrefAttr = element.getAttribute('href'); // The only valid content that could double as a selector are IDs or classes, - // so everything starting with `#` or `.`. If a "real" URL is used as the selector, - // `document.querySelector` will rightfully complain it is invalid. - // See https://github.com/twbs/bootstrap/issues/32273 - - if (!hrefAttr || !hrefAttr.includes('#') && !hrefAttr.startsWith('.')) { - return null; - } // Just in case some CMS puts out a full URL with the anchor appended - - - if (hrefAttr.includes('#') && !hrefAttr.startsWith('#')) { - hrefAttr = `#${hrefAttr.split('#')[1]}`; - } - - selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : null; - } - - return selector; - }; - - const getSelectorFromElement = element => { - const selector = getSelector(element); - - if (selector) { - return document.querySelector(selector) ? selector : null; - } - - return null; - }; - - const getElementFromSelector = element => { - const selector = getSelector(element); - return selector ? document.querySelector(selector) : null; - }; - - const isElement = obj => { - if (!obj || typeof obj !== 'object') { - return false; - } - - if (typeof obj.jquery !== 'undefined') { - obj = obj[0]; - } - - return typeof obj.nodeType !== 'undefined'; - }; - - const getElement = obj => { - if (isElement(obj)) { - // it's a jQuery object or a node element - return obj.jquery ? obj[0] : obj; - } - - if (typeof obj === 'string' && obj.length > 0) { - return document.querySelector(obj); - } - - return null; - }; - - const typeCheckConfig = (componentName, config, configTypes) => { - Object.keys(configTypes).forEach(property => { - const expectedTypes = configTypes[property]; - const value = config[property]; - const valueType = value && isElement(value) ? 'element' : toType(value); - - if (!new RegExp(expectedTypes).test(valueType)) { - throw new TypeError(`${componentName.toUpperCase()}: Option "${property}" provided type "${valueType}" but expected type "${expectedTypes}".`); - } - }); - }; - /** - * Trick to restart an element's animation - * - * @param {HTMLElement} element - * @return void - * - * @see https://www.charistheo.io/blog/2021/02/restart-a-css-animation-with-javascript/#restarting-a-css-animation - */ - - - const reflow = element => { - // eslint-disable-next-line no-unused-expressions - element.offsetHeight; - }; - - const getjQuery = () => { - const { - jQuery - } = window; - - if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) { - return jQuery; - } - - return null; - }; - - const DOMContentLoadedCallbacks = []; - - const onDOMContentLoaded = callback => { - if (document.readyState === 'loading') { - // add listener on the first call when the document is in loading state - if (!DOMContentLoadedCallbacks.length) { - document.addEventListener('DOMContentLoaded', () => { - DOMContentLoadedCallbacks.forEach(callback => callback()); - }); - } - - DOMContentLoadedCallbacks.push(callback); - } else { - callback(); - } - }; - - const defineJQueryPlugin = plugin => { - onDOMContentLoaded(() => { - const $ = getjQuery(); - /* istanbul ignore if */ - - if ($) { - const name = plugin.NAME; - const JQUERY_NO_CONFLICT = $.fn[name]; - $.fn[name] = plugin.jQueryInterface; - $.fn[name].Constructor = plugin; - - $.fn[name].noConflict = () => { - $.fn[name] = JQUERY_NO_CONFLICT; - return plugin.jQueryInterface; - }; - } - }); - }; - - /** - * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): collapse.js + * Bootstrap (v5.2.0-beta1): collapse.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ /** - * ------------------------------------------------------------------------ * Constants - * ------------------------------------------------------------------------ */ const NAME = 'collapse'; const DATA_KEY = 'bs.collapse'; const EVENT_KEY = `.${DATA_KEY}`; const DATA_API_KEY = '.data-api'; - const Default = { - toggle: true, - parent: null - }; - const DefaultType = { - toggle: 'boolean', - parent: '(null|element)' - }; const EVENT_SHOW = `show${EVENT_KEY}`; const EVENT_SHOWN = `shown${EVENT_KEY}`; const EVENT_HIDE = `hide${EVENT_KEY}`; @@ -209,28 +44,30 @@ const HEIGHT = 'height'; const SELECTOR_ACTIVES = '.collapse.show, .collapse.collapsing'; const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="collapse"]'; + const Default = { + toggle: true, + parent: null + }; + const DefaultType = { + toggle: 'boolean', + parent: '(null|element)' + }; /** - * ------------------------------------------------------------------------ - * Class Definition - * ------------------------------------------------------------------------ + * Class definition */ class Collapse extends BaseComponent__default.default { constructor(element, config) { - super(element); + super(element, config); this._isTransitioning = false; - this._config = this._getConfig(config); this._triggerArray = []; const toggleList = SelectorEngine__default.default.find(SELECTOR_DATA_TOGGLE); - for (let i = 0, len = toggleList.length; i < len; i++) { - const elem = toggleList[i]; - const selector = getSelectorFromElement(elem); - const filterElement = SelectorEngine__default.default.find(selector).filter(foundElem => foundElem === this._element); + for (const elem of toggleList) { + const selector = index.getSelectorFromElement(elem); + const filterElement = SelectorEngine__default.default.find(selector).filter(foundElement => foundElement === this._element); if (selector !== null && filterElement.length) { - this._selector = selector; - this._triggerArray.push(elem); } } @@ -251,6 +88,10 @@ return Default; } + static get DefaultType() { + return DefaultType; + } + static get NAME() { return NAME; } // Public @@ -269,23 +110,16 @@ return; } - let actives = []; - let activesData; + let activeChildren = []; // find active children if (this._config.parent) { - const children = SelectorEngine__default.default.find(CLASS_NAME_DEEPER_CHILDREN, this._config.parent); - actives = SelectorEngine__default.default.find(SELECTOR_ACTIVES, this._config.parent).filter(elem => !children.includes(elem)); // remove children if greater depth + activeChildren = this._getFirstLevelChildren(SELECTOR_ACTIVES).filter(element => element !== this._element).map(element => Collapse.getOrCreateInstance(element, { + toggle: false + })); } - const container = SelectorEngine__default.default.findOne(this._selector); - - if (actives.length) { - const tempActiveData = actives.find(elem => container !== elem); - activesData = tempActiveData ? Collapse.getInstance(tempActiveData) : null; - - if (activesData && activesData._isTransitioning) { - return; - } + if (activeChildren.length && activeChildren[0]._isTransitioning) { + return; } const startEvent = EventHandler__default.default.trigger(this._element, EVENT_SHOW); @@ -294,17 +128,9 @@ return; } - actives.forEach(elemActive => { - if (container !== elemActive) { - Collapse.getOrCreateInstance(elemActive, { - toggle: false - }).hide(); - } - - if (!activesData) { - Data__default.default.set(elemActive, DATA_KEY, null); - } - }); + for (const activeInstance of activeChildren) { + activeInstance.hide(); + } const dimension = this._getDimension(); @@ -351,19 +177,16 @@ const dimension = this._getDimension(); this._element.style[dimension] = `${this._element.getBoundingClientRect()[dimension]}px`; - reflow(this._element); + index.reflow(this._element); this._element.classList.add(CLASS_NAME_COLLAPSING); this._element.classList.remove(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW); - const triggerArrayLength = this._triggerArray.length; + for (const trigger of this._triggerArray) { + const element = index.getElementFromSelector(trigger); - for (let i = 0; i < triggerArrayLength; i++) { - const trigger = this._triggerArray[i]; - const elem = getElementFromSelector(trigger); - - if (elem && !this._isShown(elem)) { + if (element && !this._isShown(element)) { this._addAriaAndCollapsedClass([trigger], false); } } @@ -390,15 +213,10 @@ } // Private - _getConfig(config) { - config = { ...Default, - ...Manipulator__default.default.getDataAttributes(this._element), - ...config - }; + _configAfterMerge(config) { config.toggle = Boolean(config.toggle); // Coerce string values - config.parent = getElement(config.parent); - typeCheckConfig(NAME, config, DefaultType); + config.parent = index.getElement(config.parent); return config; } @@ -411,14 +229,21 @@ return; } - const children = SelectorEngine__default.default.find(CLASS_NAME_DEEPER_CHILDREN, this._config.parent); - SelectorEngine__default.default.find(SELECTOR_DATA_TOGGLE, this._config.parent).filter(elem => !children.includes(elem)).forEach(element => { - const selected = getElementFromSelector(element); + const children = this._getFirstLevelChildren(SELECTOR_DATA_TOGGLE); + + for (const element of children) { + const selected = index.getElementFromSelector(element); if (selected) { this._addAriaAndCollapsedClass([element], this._isShown(selected)); } - }); + } + } + + _getFirstLevelChildren(selector) { + const children = SelectorEngine__default.default.find(CLASS_NAME_DEEPER_CHILDREN, this._config.parent); // remove children if greater depth + + return SelectorEngine__default.default.find(selector, this._config.parent).filter(element => !children.includes(element)); } _addAriaAndCollapsedClass(triggerArray, isOpen) { @@ -426,26 +251,21 @@ return; } - triggerArray.forEach(elem => { - if (isOpen) { - elem.classList.remove(CLASS_NAME_COLLAPSED); - } else { - elem.classList.add(CLASS_NAME_COLLAPSED); - } - - elem.setAttribute('aria-expanded', isOpen); - }); + for (const element of triggerArray) { + element.classList.toggle(CLASS_NAME_COLLAPSED, !isOpen); + element.setAttribute('aria-expanded', isOpen); + } } // Static static jQueryInterface(config) { - return this.each(function () { - const _config = {}; + const _config = {}; - if (typeof config === 'string' && /show|hide/.test(config)) { - _config.toggle = false; - } + if (typeof config === 'string' && /show|hide/.test(config)) { + _config.toggle = false; + } + return this.each(function () { const data = Collapse.getOrCreateInstance(this, _config); if (typeof config === 'string') { @@ -460,9 +280,7 @@ } /** - * ------------------------------------------------------------------------ - * Data Api implementation - * ------------------------------------------------------------------------ + * Data API implementation */ @@ -472,22 +290,20 @@ event.preventDefault(); } - const selector = getSelectorFromElement(this); + const selector = index.getSelectorFromElement(this); const selectorElements = SelectorEngine__default.default.find(selector); - selectorElements.forEach(element => { + + for (const element of selectorElements) { Collapse.getOrCreateInstance(element, { toggle: false }).toggle(); - }); + } }); /** - * ------------------------------------------------------------------------ * jQuery - * ------------------------------------------------------------------------ - * add .Collapse to jQuery only if jQuery is present */ - defineJQueryPlugin(Collapse); + index.defineJQueryPlugin(Collapse); return Collapse; |