diff options
Diffstat (limited to 'vendor/twbs/bootstrap/js/src/collapse.js')
| -rw-r--r-- | vendor/twbs/bootstrap/js/src/collapse.js | 184 |
1 files changed, 119 insertions, 65 deletions
diff --git a/vendor/twbs/bootstrap/js/src/collapse.js b/vendor/twbs/bootstrap/js/src/collapse.js index f38878f9b..8831510df 100644 --- a/vendor/twbs/bootstrap/js/src/collapse.js +++ b/vendor/twbs/bootstrap/js/src/collapse.js @@ -1,6 +1,6 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.1.1): collapse.js + * Bootstrap (v5.0.2): 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: null + parent: '' } const DefaultType = { toggle: 'boolean', - parent: '(null|element)' + parent: '(string|element)' } const EVENT_SHOW = `show${EVENT_KEY}` @@ -50,12 +50,11 @@ const CLASS_NAME_SHOW = 'show' 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 = '.collapse.show, .collapse.collapsing' +const SELECTOR_ACTIVES = '.show, .collapsing' const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="collapse"]' /** @@ -70,7 +69,10 @@ class Collapse extends BaseComponent { this._isTransitioning = false this._config = this._getConfig(config) - this._triggerArray = [] + this._triggerArray = SelectorEngine.find( + `${SELECTOR_DATA_TOGGLE}[href="#${this._element.id}"],` + + `${SELECTOR_DATA_TOGGLE}[data-bs-target="#${this._element.id}"]` + ) const toggleList = SelectorEngine.find(SELECTOR_DATA_TOGGLE) @@ -86,10 +88,10 @@ class Collapse extends BaseComponent { } } - this._initializeChildren() + this._parent = this._config.parent ? this._getParent() : null if (!this._config.parent) { - this._addAriaAndCollapsedClass(this._triggerArray, this._isShown()) + this._addAriaAndCollapsedClass(this._element, this._triggerArray) } if (this._config.toggle) { @@ -110,7 +112,7 @@ class Collapse extends BaseComponent { // Public toggle() { - if (this._isShown()) { + if (this._element.classList.contains(CLASS_NAME_SHOW)) { this.hide() } else { this.show() @@ -118,20 +120,30 @@ class Collapse extends BaseComponent { } show() { - if (this._isTransitioning || this._isShown()) { + if (this._isTransitioning || this._element.classList.contains(CLASS_NAME_SHOW)) { return } - let actives = [] + let actives let activesData - if (this._config.parent) { - const children = SelectorEngine.find(`.${CLASS_NAME_COLLAPSE} .${CLASS_NAME_COLLAPSE}`, this._config.parent) - actives = SelectorEngine.find(SELECTOR_ACTIVES, this._config.parent).filter(elem => !children.includes(elem)) // remove children if greater depth + 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 + } } const container = SelectorEngine.findOne(this._selector) - if (actives.length) { + if (actives) { const tempActiveData = actives.find(elem => container !== elem) activesData = tempActiveData ? Collapse.getInstance(tempActiveData) : null @@ -145,15 +157,17 @@ class Collapse extends BaseComponent { return } - actives.forEach(elemActive => { - if (container !== elemActive) { - Collapse.getOrCreateInstance(elemActive, { toggle: false }).hide() - } + if (actives) { + actives.forEach(elemActive => { + if (container !== elemActive) { + Collapse.collapseInterface(elemActive, 'hide') + } - if (!activesData) { - Data.set(elemActive, DATA_KEY, null) - } - }) + if (!activesData) { + Data.set(elemActive, DATA_KEY, null) + } + }) + } const dimension = this._getDimension() @@ -162,17 +176,23 @@ class Collapse extends BaseComponent { this._element.style[dimension] = 0 - this._addAriaAndCollapsedClass(this._triggerArray, true) - this._isTransitioning = true + if (this._triggerArray.length) { + this._triggerArray.forEach(element => { + element.classList.remove(CLASS_NAME_COLLAPSED) + element.setAttribute('aria-expanded', true) + }) + } + + this.setTransitioning(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) } @@ -184,7 +204,7 @@ class Collapse extends BaseComponent { } hide() { - if (this._isTransitioning || !this._isShown()) { + if (this._isTransitioning || !this._element.classList.contains(CLASS_NAME_SHOW)) { return } @@ -203,19 +223,22 @@ class Collapse extends BaseComponent { this._element.classList.remove(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW) const triggerArrayLength = this._triggerArray.length - 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) + 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) + } } } - this._isTransitioning = true + this.setTransitioning(true) const complete = () => { - this._isTransitioning = false + this.setTransitioning(false) this._element.classList.remove(CLASS_NAME_COLLAPSING) this._element.classList.add(CLASS_NAME_COLLAPSE) EventHandler.trigger(this._element, EVENT_HIDDEN) @@ -226,8 +249,8 @@ class Collapse extends BaseComponent { this._queueCallback(complete, this._element, true) } - _isShown(element = this._element) { - return element.classList.contains(CLASS_NAME_SHOW) + setTransitioning(isTransitioning) { + this._isTransitioning = isTransitioning } // Private @@ -235,40 +258,44 @@ 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(CLASS_NAME_HORIZONTAL) ? WIDTH : HEIGHT + return this._element.classList.contains(WIDTH) ? WIDTH : HEIGHT } - _initializeChildren() { - if (!this._config.parent) { - return - } + _getParent() { + let { parent } = this._config + + parent = getElement(parent) + + const selector = `${SELECTOR_DATA_TOGGLE}[data-bs-parent="${parent}"]` - const children = SelectorEngine.find(`.${CLASS_NAME_COLLAPSE} .${CLASS_NAME_COLLAPSE}`, this._config.parent) - SelectorEngine.find(SELECTOR_DATA_TOGGLE, this._config.parent).filter(elem => !children.includes(elem)) + SelectorEngine.find(selector, parent) .forEach(element => { const selected = getElementFromSelector(element) - if (selected) { - this._addAriaAndCollapsedClass([element], this._isShown(selected)) - } + this._addAriaAndCollapsedClass( + selected, + [element] + ) }) + + return parent } - _addAriaAndCollapsedClass(triggerArray, isOpen) { - if (!triggerArray.length) { + _addAriaAndCollapsedClass(element, triggerArray) { + if (!element || !triggerArray.length) { return } + const isOpen = element.classList.contains(CLASS_NAME_SHOW) + triggerArray.forEach(elem => { if (isOpen) { elem.classList.remove(CLASS_NAME_COLLAPSED) @@ -282,22 +309,34 @@ class Collapse extends BaseComponent { // Static - static jQueryInterface(config) { - return this.each(function () { - const _config = {} - if (typeof config === 'string' && /show|hide/.test(config)) { - _config.toggle = false - } + static collapseInterface(element, config) { + let data = Collapse.getInstance(element) + const _config = { + ...Default, + ...Manipulator.getDataAttributes(element), + ...(typeof config === 'object' && config ? config : {}) + } - const data = Collapse.getOrCreateInstance(this, _config) + if (!data && _config.toggle && typeof config === 'string' && /show|hide/.test(config)) { + _config.toggle = false + } - if (typeof config === 'string') { - if (typeof data[config] === 'undefined') { - throw new TypeError(`No method named "${config}"`) - } + if (!data) { + data = new Collapse(element, _config) + } - data[config]() + if (typeof config === 'string') { + if (typeof data[config] === 'undefined') { + throw new TypeError(`No method named "${config}"`) } + + data[config]() + } + } + + static jQueryInterface(config) { + return this.each(function () { + Collapse.collapseInterface(this, config) }) } } @@ -314,11 +353,26 @@ 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 => { - Collapse.getOrCreateInstance(element, { toggle: false }).toggle() + 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) }) }) |