From 688bce4fa695cc360a0d084e34f029b0c192b223 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 22 Jun 2021 21:29:16 +0300 Subject: Release v5.0.2 (#34276) * Bump version to v5.0.2. * Dist --- js/src/dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index e79ac4591..681369b48 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -1,6 +1,6 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.0.1): dropdown.js + * Bootstrap (v5.0.2): dropdown.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -- cgit v1.2.3 From d3c6f25fd0cc811a681f3a6b88708c04b2c9b797 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Thu, 10 Jun 2021 17:51:01 +0300 Subject: Add `isShown` method and reuse it --- js/src/dropdown.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 681369b48..d9bd903c1 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -11,12 +11,12 @@ import { defineJQueryPlugin, getElement, getElementFromSelector, + getNextActiveElement, isDisabled, isElement, - isVisible, isRTL, + isVisible, noop, - getNextActiveElement, typeCheckConfig } from './util/index' import EventHandler from './dom/event-handler' @@ -128,7 +128,7 @@ class Dropdown extends BaseComponent { return } - const isActive = this._element.classList.contains(CLASS_NAME_SHOW) + const isActive = this._isShown() if (isActive) { this.hide() @@ -139,7 +139,7 @@ class Dropdown extends BaseComponent { } show() { - if (isDisabled(this._element) || this._menu.classList.contains(CLASS_NAME_SHOW)) { + if (isDisabled(this._element) || this._isShown(this._menu)) { return } @@ -201,7 +201,7 @@ class Dropdown extends BaseComponent { } hide() { - if (isDisabled(this._element) || !this._menu.classList.contains(CLASS_NAME_SHOW)) { + if (isDisabled(this._element) || !this._isShown(this._menu)) { return } @@ -279,6 +279,10 @@ class Dropdown extends BaseComponent { return config } + _isShown(element = this._element) { + return element.classList.contains(CLASS_NAME_SHOW) + } + _getMenuElement() { return SelectorEngine.next(this._element, SELECTOR_MENU)[0] } @@ -398,7 +402,7 @@ class Dropdown extends BaseComponent { continue } - if (!context._element.classList.contains(CLASS_NAME_SHOW)) { + if (!context._isShown()) { continue } -- cgit v1.2.3 From 3533e2d637d694b5b11a65c7911c3dc45d131e42 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Thu, 10 Jun 2021 17:56:43 +0300 Subject: Merge `dropdownInterface` to `jQueryInterface` --- js/src/dropdown.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index d9bd903c1..09414c97b 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -371,21 +371,19 @@ class Dropdown extends BaseComponent { // Static - static dropdownInterface(element, config) { - const data = Dropdown.getOrCreateInstance(element, config) + static jQueryInterface(config) { + return this.each(function () { + const data = Dropdown.getOrCreateInstance(this, config) + + if (typeof config !== 'string') { + return + } - 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 () { - Dropdown.dropdownInterface(this, config) }) } @@ -503,7 +501,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, Dropdown.clearMenus) EventHandler.on(document, EVENT_KEYUP_DATA_API, Dropdown.clearMenus) EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) { event.preventDefault() - Dropdown.dropdownInterface(this) + Dropdown.getOrCreateInstance(this) }) /** -- cgit v1.2.3 From d130b00cad9552feb313cbd04486bd179b7295df Mon Sep 17 00:00:00 2001 From: GeoSot Date: Thu, 8 Jul 2021 17:42:09 +0300 Subject: simplify toggle --- js/src/dropdown.js | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 09414c97b..be561b128 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -124,18 +124,7 @@ class Dropdown extends BaseComponent { // Public toggle() { - if (isDisabled(this._element)) { - return - } - - const isActive = this._isShown() - - if (isActive) { - this.hide() - return - } - - this.show() + return this._isShown() ? this.hide() : this.show() } show() { -- cgit v1.2.3 From d01a08547def495cb1c814ffaecb9d36cad14acd Mon Sep 17 00:00:00 2001 From: GeoSot Date: Thu, 8 Jul 2021 17:54:15 +0300 Subject: use classList `add` instead of `toggle` on show --- js/src/dropdown.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index be561b128..1e0029a60 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -184,8 +184,8 @@ class Dropdown extends BaseComponent { this._element.focus() this._element.setAttribute('aria-expanded', true) - this._menu.classList.toggle(CLASS_NAME_SHOW) - this._element.classList.toggle(CLASS_NAME_SHOW) + this._menu.classList.add(CLASS_NAME_SHOW) + this._element.classList.add(CLASS_NAME_SHOW) EventHandler.trigger(this._element, EVENT_SHOWN, relatedTarget) } -- cgit v1.2.3 From b1dad0943f4fc8c6eb6bf58f5e38a5615dd78e5b Mon Sep 17 00:00:00 2001 From: GeoSot Date: Thu, 8 Jul 2021 17:59:18 +0300 Subject: handle click event in one place, remove undocumented click listener on element in case of not having the proper markup --- js/src/dropdown.js | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 1e0029a60..95752d998 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -48,7 +48,6 @@ const EVENT_HIDE = `hide${EVENT_KEY}` const EVENT_HIDDEN = `hidden${EVENT_KEY}` const EVENT_SHOW = `show${EVENT_KEY}` const EVENT_SHOWN = `shown${EVENT_KEY}` -const EVENT_CLICK = `click${EVENT_KEY}` const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}` const EVENT_KEYDOWN_DATA_API = `keydown${EVENT_KEY}${DATA_API_KEY}` const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}` @@ -103,8 +102,6 @@ class Dropdown extends BaseComponent { this._config = this._getConfig(config) this._menu = this._getMenuElement() this._inNavbar = this._detectNavbar() - - this._addEventListeners() } // Getters @@ -218,13 +215,6 @@ class Dropdown extends BaseComponent { // Private - _addEventListeners() { - EventHandler.on(this._element, EVENT_CLICK, event => { - event.preventDefault() - this.toggle() - }) - } - _completeHide(relatedTarget) { const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE, relatedTarget) if (hideEvent.defaultPrevented) { @@ -490,7 +480,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, Dropdown.clearMenus) EventHandler.on(document, EVENT_KEYUP_DATA_API, Dropdown.clearMenus) EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) { event.preventDefault() - Dropdown.getOrCreateInstance(this) + Dropdown.getOrCreateInstance(this).toggle() }) /** -- cgit v1.2.3 From 99161913115fa4637cb7ab723bbae3fd552d0d09 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Thu, 8 Jul 2021 18:23:54 +0300 Subject: extract createPopper method --- js/src/dropdown.js | 50 +++++++++++++++++++++++++++----------------------- 1 file changed, 27 insertions(+), 23 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 95752d998..60a27dbb0 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -129,7 +129,6 @@ class Dropdown extends BaseComponent { return } - const parent = Dropdown.getParentFromElement(this._element) const relatedTarget = { relatedTarget: this._element } @@ -140,32 +139,12 @@ class Dropdown extends BaseComponent { return } + const parent = Dropdown.getParentFromElement(this._element) // Totally disable Popper for Dropdowns in Navbar if (this._inNavbar) { Manipulator.setDataAttribute(this._menu, 'popper', 'none') } else { - if (typeof Popper === 'undefined') { - throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org)') - } - - let referenceElement = this._element - - if (this._config.reference === 'parent') { - referenceElement = parent - } else if (isElement(this._config.reference)) { - referenceElement = getElement(this._config.reference) - } else if (typeof this._config.reference === 'object') { - referenceElement = this._config.reference - } - - const popperConfig = this._getPopperConfig() - const isDisplayStatic = popperConfig.modifiers.find(modifier => modifier.name === 'applyStyles' && modifier.enabled === false) - - this._popper = Popper.createPopper(referenceElement, this._menu, popperConfig) - - if (isDisplayStatic) { - Manipulator.setDataAttribute(this._menu, 'popper', 'static') - } + this._createPopper(parent) } // If this is a touch-enabled device we add extra @@ -258,6 +237,31 @@ class Dropdown extends BaseComponent { return config } + _createPopper(parent) { + if (typeof Popper === 'undefined') { + throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org)') + } + + let referenceElement = this._element + + if (this._config.reference === 'parent') { + referenceElement = parent + } else if (isElement(this._config.reference)) { + referenceElement = getElement(this._config.reference) + } else if (typeof this._config.reference === 'object') { + referenceElement = this._config.reference + } + + const popperConfig = this._getPopperConfig() + const isDisplayStatic = popperConfig.modifiers.find(modifier => modifier.name === 'applyStyles' && modifier.enabled === false) + + this._popper = Popper.createPopper(referenceElement, this._menu, popperConfig) + + if (isDisplayStatic) { + Manipulator.setDataAttribute(this._menu, 'popper', 'static') + } + } + _isShown(element = this._element) { return element.classList.contains(CLASS_NAME_SHOW) } -- cgit v1.2.3 From e85a6ed77c92ee43cf23b5c6ce479dbd0100be66 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Thu, 8 Jul 2021 18:44:58 +0300 Subject: make `dataApiKeydownHandler` to handle specific instance, avoiding extra manipulations --- js/src/dropdown.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 60a27dbb0..52c5339fa 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -449,20 +449,20 @@ class Dropdown extends BaseComponent { return } - const getToggleButton = () => this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0] + const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0] + const instance = Dropdown.getOrCreateInstance(getToggleButton) if (event.key === ESCAPE_KEY) { - getToggleButton().focus() - Dropdown.clearMenus() + instance.hide() return } if (event.key === ARROW_UP_KEY || event.key === ARROW_DOWN_KEY) { if (!isActive) { - getToggleButton().click() + instance.show() } - Dropdown.getInstance(getToggleButton())._selectMenuItem(event) + instance._selectMenuItem(event) return } -- cgit v1.2.3