diff options
Diffstat (limited to 'vendor/twbs/bootstrap/js/src/collapse.js')
| -rw-r--r-- | vendor/twbs/bootstrap/js/src/collapse.js | 185 |
1 files changed, 66 insertions, 119 deletions
diff --git a/vendor/twbs/bootstrap/js/src/collapse.js b/vendor/twbs/bootstrap/js/src/collapse.js index 8831510df..33d5674eb 100644 --- a/vendor/twbs/bootstrap/js/src/collapse.js +++ b/vendor/twbs/bootstrap/js/src/collapse.js @@ -1,6 +1,6 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.0.2): collapse.js + * Bootstrap (v5.1.3): collapse.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ @@ -32,12 +32,12 @@ 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}` @@ -50,11 +50,13 @@ const CLASS_NAME_SHOW = 'show' const CLASS_NAME_COLLAPSE = 'collapse' const CLASS_NAME_COLLAPSING = 'collapsing' const CLASS_NAME_COLLAPSED = 'collapsed' +const CLASS_NAME_DEEPER_CHILDREN = `:scope .${CLASS_NAME_COLLAPSE} .${CLASS_NAME_COLLAPSE}` +const CLASS_NAME_HORIZONTAL = 'collapse-horizontal' const WIDTH = 'width' const HEIGHT = 'height' -const SELECTOR_ACTIVES = '.show, .collapsing' +const SELECTOR_ACTIVES = '.collapse.show, .collapse.collapsing' const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="collapse"]' /** @@ -69,10 +71,7 @@ class Collapse extends BaseComponent { this._isTransitioning = false this._config = this._getConfig(config) - this._triggerArray = SelectorEngine.find( - `${SELECTOR_DATA_TOGGLE}[href="#${this._element.id}"],` + - `${SELECTOR_DATA_TOGGLE}[data-bs-target="#${this._element.id}"]` - ) + this._triggerArray = [] const toggleList = SelectorEngine.find(SELECTOR_DATA_TOGGLE) @@ -88,10 +87,10 @@ class Collapse extends BaseComponent { } } - 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) { @@ -112,7 +111,7 @@ class Collapse extends BaseComponent { // Public toggle() { - if (this._element.classList.contains(CLASS_NAME_SHOW)) { + if (this._isShown()) { this.hide() } else { this.show() @@ -120,30 +119,20 @@ class Collapse extends BaseComponent { } 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.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.find(CLASS_NAME_DEEPER_CHILDREN, this._config.parent) + actives = SelectorEngine.find(SELECTOR_ACTIVES, this._config.parent).filter(elem => !children.includes(elem)) // remove children if greater depth } const container = SelectorEngine.findOne(this._selector) - if (actives) { + if (actives.length) { const tempActiveData = actives.find(elem => container !== elem) activesData = tempActiveData ? Collapse.getInstance(tempActiveData) : null @@ -157,17 +146,15 @@ class Collapse extends BaseComponent { 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.set(elemActive, DATA_KEY, null) - } - }) - } + if (!activesData) { + Data.set(elemActive, DATA_KEY, null) + } + }) const dimension = this._getDimension() @@ -176,23 +163,17 @@ class Collapse extends BaseComponent { 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.setTransitioning(true) + this._addAriaAndCollapsedClass(this._triggerArray, 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.trigger(this._element, EVENT_SHOWN) } @@ -204,7 +185,7 @@ class Collapse extends BaseComponent { } hide() { - if (this._isTransitioning || !this._element.classList.contains(CLASS_NAME_SHOW)) { + if (this._isTransitioning || !this._isShown()) { return } @@ -223,22 +204,19 @@ class Collapse extends BaseComponent { this._element.classList.remove(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW) const triggerArrayLength = this._triggerArray.length - if (triggerArrayLength > 0) { - 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) - } + for (let i = 0; i < triggerArrayLength; i++) { + const trigger = this._triggerArray[i] + const elem = getElementFromSelector(trigger) + + 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) this._element.classList.add(CLASS_NAME_COLLAPSE) EventHandler.trigger(this._element, EVENT_HIDDEN) @@ -249,8 +227,8 @@ class Collapse extends BaseComponent { this._queueCallback(complete, this._element, true) } - setTransitioning(isTransitioning) { - this._isTransitioning = isTransitioning + _isShown(element = this._element) { + return element.classList.contains(CLASS_NAME_SHOW) } // Private @@ -258,44 +236,40 @@ class Collapse extends BaseComponent { _getConfig(config) { config = { ...Default, + ...Manipulator.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}"]` + _initializeChildren() { + if (!this._config.parent) { + return + } - SelectorEngine.find(selector, parent) + const children = SelectorEngine.find(CLASS_NAME_DEEPER_CHILDREN, this._config.parent) + SelectorEngine.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) @@ -309,34 +283,22 @@ class Collapse extends BaseComponent { // Static - static collapseInterface(element, config) { - let data = Collapse.getInstance(element) - const _config = { - ...Default, - ...Manipulator.getDataAttributes(element), - ...(typeof config === 'object' && config ? config : {}) - } + static jQueryInterface(config) { + return this.each(function () { + const _config = {} + if (typeof config === 'string' && /show|hide/.test(config)) { + _config.toggle = false + } - if (!data && _config.toggle && typeof config === 'string' && /show|hide/.test(config)) { - _config.toggle = false - } + const data = Collapse.getOrCreateInstance(this, _config) - if (!data) { - data = new Collapse(element, _config) - } + if (typeof config === 'string') { + if (typeof data[config] === 'undefined') { + throw new TypeError(`No method named "${config}"`) + } - if (typeof config === 'string') { - if (typeof data[config] === 'undefined') { - throw new TypeError(`No method named "${config}"`) + data[config]() } - - data[config]() - } - } - - static jQueryInterface(config) { - return this.each(function () { - Collapse.collapseInterface(this, config) }) } } @@ -353,26 +315,11 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function ( event.preventDefault() } - const triggerData = Manipulator.getDataAttributes(this) const selector = getSelectorFromElement(this) const selectorElements = SelectorEngine.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() }) }) |