diff options
Diffstat (limited to 'js/dist/collapse.js')
| -rw-r--r-- | js/dist/collapse.js | 210 |
1 files changed, 96 insertions, 114 deletions
diff --git a/js/dist/collapse.js b/js/dist/collapse.js index 5a1beb7d3d..a0898e68db 100644 --- a/js/dist/collapse.js +++ b/js/dist/collapse.js @@ -1,22 +1,29 @@ /*! - * Bootstrap collapse.js v5.0.2 (https://getbootstrap.com/) + * Bootstrap collapse.js v5.1.0 (https://getbootstrap.com/) * Copyright 2011-2021 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/selector-engine.js'), require('./dom/data.js'), require('./dom/event-handler.js'), require('./dom/manipulator.js'), require('./base-component.js')) : - typeof define === 'function' && define.amd ? define(['./dom/selector-engine', './dom/data', './dom/event-handler', './dom/manipulator', './base-component'], factory) : - (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Collapse = factory(global.SelectorEngine, global.Data, global.EventHandler, global.Manipulator, global.Base)); -}(this, (function (SelectorEngine, Data, EventHandler, Manipulator, BaseComponent) { 'use strict'; + 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'; function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } - var SelectorEngine__default = /*#__PURE__*/_interopDefaultLegacy(SelectorEngine); var Data__default = /*#__PURE__*/_interopDefaultLegacy(Data); var EventHandler__default = /*#__PURE__*/_interopDefaultLegacy(EventHandler); var Manipulator__default = /*#__PURE__*/_interopDefaultLegacy(Manipulator); + var SelectorEngine__default = /*#__PURE__*/_interopDefaultLegacy(SelectorEngine); var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent); + /** + * -------------------------------------------------------------------------- + * Bootstrap (v5.1.0): util/index.js + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) + * -------------------------------------------------------------------------- + */ + const toType = obj => { if (obj === null || obj === undefined) { return `${obj}`; @@ -83,7 +90,7 @@ } if (typeof obj === 'string' && obj.length > 0) { - return SelectorEngine__default['default'].findOne(obj); + return document.querySelector(obj); } return null; @@ -100,8 +107,20 @@ } }); }; + /** + * 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 => element.offsetHeight; + + const reflow = element => { + // eslint-disable-next-line no-unused-expressions + element.offsetHeight; + }; const getjQuery = () => { const { @@ -153,7 +172,7 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.0.2): collapse.js + * Bootstrap (v5.1.0): collapse.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ @@ -169,11 +188,11 @@ const DATA_API_KEY = '.data-api'; const Default = { toggle: true, - parent: '' + parent: null }; const DefaultType = { toggle: 'boolean', - parent: '(string|element)' + parent: '(null|element)' }; const EVENT_SHOW = `show${EVENT_KEY}`; const EVENT_SHOWN = `shown${EVENT_KEY}`; @@ -184,6 +203,7 @@ const CLASS_NAME_COLLAPSE = 'collapse'; const CLASS_NAME_COLLAPSING = 'collapsing'; const CLASS_NAME_COLLAPSED = 'collapsed'; + const CLASS_NAME_HORIZONTAL = 'collapse-horizontal'; const WIDTH = 'width'; const HEIGHT = 'height'; const SELECTOR_ACTIVES = '.show, .collapsing'; @@ -199,7 +219,7 @@ super(element); this._isTransitioning = false; this._config = this._getConfig(config); - this._triggerArray = SelectorEngine__default['default'].find(`${SELECTOR_DATA_TOGGLE}[href="#${this._element.id}"],` + `${SELECTOR_DATA_TOGGLE}[data-bs-target="#${this._element.id}"]`); + this._triggerArray = []; const toggleList = SelectorEngine__default['default'].find(SELECTOR_DATA_TOGGLE); for (let i = 0, len = toggleList.length; i < len; i++) { @@ -214,10 +234,10 @@ } } - this._parent = this._config.parent ? this._getParent() : null; + this._initializeChildren(); if (!this._config.parent) { - this._addAriaAndCollapsedClass(this._element, this._triggerArray); + this._addAriaAndCollapsedClass(this._triggerArray, this._isShown()); } if (this._config.toggle) { @@ -236,7 +256,7 @@ toggle() { - if (this._element.classList.contains(CLASS_NAME_SHOW)) { + if (this._isShown()) { this.hide(); } else { this.show(); @@ -244,30 +264,21 @@ } show() { - if (this._isTransitioning || this._element.classList.contains(CLASS_NAME_SHOW)) { + if (this._isTransitioning || this._isShown()) { return; } - let actives; + let actives = []; let activesData; - if (this._parent) { - actives = SelectorEngine__default['default'].find(SELECTOR_ACTIVES, this._parent).filter(elem => { - if (typeof this._config.parent === 'string') { - return elem.getAttribute('data-bs-parent') === this._config.parent; - } - - return elem.classList.contains(CLASS_NAME_COLLAPSE); - }); - - if (actives.length === 0) { - actives = null; - } + if (this._config.parent) { + const children = SelectorEngine__default['default'].find(`.${CLASS_NAME_COLLAPSE} .${CLASS_NAME_COLLAPSE}`, this._config.parent); + actives = SelectorEngine__default['default'].find(SELECTOR_ACTIVES, this._config.parent).filter(elem => !children.includes(elem)); // remove children if greater depth } const container = SelectorEngine__default['default'].findOne(this._selector); - if (actives) { + if (actives.length) { const tempActiveData = actives.find(elem => container !== elem); activesData = tempActiveData ? Collapse.getInstance(tempActiveData) : null; @@ -282,17 +293,17 @@ return; } - if (actives) { - actives.forEach(elemActive => { - if (container !== elemActive) { - Collapse.collapseInterface(elemActive, 'hide'); - } + actives.forEach(elemActive => { + if (container !== elemActive) { + Collapse.getOrCreateInstance(elemActive, { + toggle: false + }).hide(); + } - if (!activesData) { - Data__default['default'].set(elemActive, DATA_KEY, null); - } - }); - } + if (!activesData) { + Data__default['default'].set(elemActive, DATA_KEY, null); + } + }); const dimension = this._getDimension(); @@ -302,22 +313,18 @@ this._element.style[dimension] = 0; - if (this._triggerArray.length) { - this._triggerArray.forEach(element => { - element.classList.remove(CLASS_NAME_COLLAPSED); - element.setAttribute('aria-expanded', true); - }); - } + this._addAriaAndCollapsedClass(this._triggerArray, true); - this.setTransitioning(true); + this._isTransitioning = true; const complete = () => { + this._isTransitioning = false; + this._element.classList.remove(CLASS_NAME_COLLAPSING); this._element.classList.add(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW); this._element.style[dimension] = ''; - this.setTransitioning(false); EventHandler__default['default'].trigger(this._element, EVENT_SHOWN); }; @@ -330,7 +337,7 @@ } hide() { - if (this._isTransitioning || !this._element.classList.contains(CLASS_NAME_SHOW)) { + if (this._isTransitioning || !this._isShown()) { return; } @@ -351,22 +358,19 @@ const triggerArrayLength = this._triggerArray.length; - if (triggerArrayLength > 0) { - for (let i = 0; i < triggerArrayLength; i++) { - const trigger = this._triggerArray[i]; - const elem = getElementFromSelector(trigger); + for (let i = 0; i < triggerArrayLength; i++) { + const trigger = this._triggerArray[i]; + const elem = getElementFromSelector(trigger); - if (elem && !elem.classList.contains(CLASS_NAME_SHOW)) { - trigger.classList.add(CLASS_NAME_COLLAPSED); - trigger.setAttribute('aria-expanded', false); - } + if (elem && !this._isShown(elem)) { + this._addAriaAndCollapsedClass([trigger], false); } } - this.setTransitioning(true); + this._isTransitioning = true; const complete = () => { - this.setTransitioning(false); + this._isTransitioning = false; this._element.classList.remove(CLASS_NAME_COLLAPSING); @@ -380,45 +384,47 @@ this._queueCallback(complete, this._element, true); } - setTransitioning(isTransitioning) { - this._isTransitioning = isTransitioning; + _isShown(element = this._element) { + return element.classList.contains(CLASS_NAME_SHOW); } // Private _getConfig(config) { config = { ...Default, + ...Manipulator__default['default'].getDataAttributes(this._element), ...config }; config.toggle = Boolean(config.toggle); // Coerce string values + config.parent = getElement(config.parent); typeCheckConfig(NAME, config, DefaultType); return config; } _getDimension() { - return this._element.classList.contains(WIDTH) ? WIDTH : HEIGHT; + return this._element.classList.contains(CLASS_NAME_HORIZONTAL) ? WIDTH : HEIGHT; } - _getParent() { - let { - parent - } = this._config; - parent = getElement(parent); - const selector = `${SELECTOR_DATA_TOGGLE}[data-bs-parent="${parent}"]`; - SelectorEngine__default['default'].find(selector, parent).forEach(element => { + _initializeChildren() { + if (!this._config.parent) { + return; + } + + const children = SelectorEngine__default['default'].find(`.${CLASS_NAME_COLLAPSE} .${CLASS_NAME_COLLAPSE}`, this._config.parent); + SelectorEngine__default['default'].find(SELECTOR_DATA_TOGGLE, this._config.parent).filter(elem => !children.includes(elem)).forEach(element => { const selected = getElementFromSelector(element); - this._addAriaAndCollapsedClass(selected, [element]); + if (selected) { + this._addAriaAndCollapsedClass([element], this._isShown(selected)); + } }); - return parent; } - _addAriaAndCollapsedClass(element, triggerArray) { - if (!element || !triggerArray.length) { + _addAriaAndCollapsedClass(triggerArray, isOpen) { + if (!triggerArray.length) { return; } - const isOpen = element.classList.contains(CLASS_NAME_SHOW); triggerArray.forEach(elem => { if (isOpen) { elem.classList.remove(CLASS_NAME_COLLAPSED); @@ -431,33 +437,23 @@ } // Static - static collapseInterface(element, config) { - let data = Collapse.getInstance(element); - const _config = { ...Default, - ...Manipulator__default['default'].getDataAttributes(element), - ...(typeof config === 'object' && config ? config : {}) - }; - - if (!data && _config.toggle && typeof config === 'string' && /show|hide/.test(config)) { - _config.toggle = false; - } - - if (!data) { - data = new Collapse(element, _config); - } + static jQueryInterface(config) { + return this.each(function () { + const _config = {}; - if (typeof config === 'string') { - if (typeof data[config] === 'undefined') { - throw new TypeError(`No method named "${config}"`); + if (typeof config === 'string' && /show|hide/.test(config)) { + _config.toggle = false; } - data[config](); - } - } + const data = Collapse.getOrCreateInstance(this, _config); - static jQueryInterface(config) { - return this.each(function () { - Collapse.collapseInterface(this, config); + if (typeof config === 'string') { + if (typeof data[config] === 'undefined') { + throw new TypeError(`No method named "${config}"`); + } + + data[config](); + } }); } @@ -475,26 +471,12 @@ event.preventDefault(); } - const triggerData = Manipulator__default['default'].getDataAttributes(this); const selector = getSelectorFromElement(this); const selectorElements = SelectorEngine__default['default'].find(selector); selectorElements.forEach(element => { - const data = Collapse.getInstance(element); - let 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.collapseInterface(element, config); + Collapse.getOrCreateInstance(element, { + toggle: false + }).toggle(); }); }); /** |