rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00
Code Issues Actions Packages Releases Activity

Refactor dropdown's hide functionality

Browse Source
This commit is contained in:
Rohit Sharma 2021-03-24 23:55:00 +05:30 committed by XhmikosR
parent 7100a0da52
commit 38a79ec64c
1 changed files with 34 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
js/src/dropdown.js
View File

@ -212,28 +212,7 @@ class Dropdown extends BaseComponent {
relatedTarget: this._element
}
const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE, relatedTarget)
if (hideEvent.defaultPrevented) {
return
}
// If this is a touch-enabled device we remove the extra
// empty mouseover listeners we added for iOS support
if ('ontouchstart' in document.documentElement) {
[].concat(...document.body.children)
.forEach(elem => EventHandler.off(elem, 'mouseover', noop))
}
if (this._popper) {
this._popper.destroy()
}
this._menu.classList.toggle(CLASS_NAME_SHOW)
this._element.classList.toggle(CLASS_NAME_SHOW)
this._element.setAttribute('aria-expanded', 'false')
Manipulator.removeDataAttribute(this._menu, 'popper')
EventHandler.trigger(this._element, EVENT_HIDDEN, relatedTarget)
this._completeHide(relatedTarget)
}
dispose() {
@ -263,6 +242,30 @@ class Dropdown extends BaseComponent {
})
}
_completeHide(relatedTarget) {
const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE, relatedTarget)
if (hideEvent.defaultPrevented) {
return
}
// If this is a touch-enabled device we remove the extra
// empty mouseover listeners we added for iOS support
if ('ontouchstart' in document.documentElement) {
[].concat(...document.body.children)
.forEach(elem => EventHandler.off(elem, 'mouseover', noop))
}
if (this._popper) {
this._popper.destroy()
}
this._menu.classList.toggle(CLASS_NAME_SHOW)
this._element.classList.toggle(CLASS_NAME_SHOW)
this._element.setAttribute('aria-expanded', 'false')
Manipulator.removeDataAttribute(this._menu, 'popper')
EventHandler.trigger(this._element, EVENT_HIDDEN, relatedTarget)
}
_getConfig(config) {
config = {
...this.constructor.Default,
@ -421,14 +424,6 @@ class Dropdown extends BaseComponent {
for (let i = 0, len = toggles.length; i < len; i++) {
const context = Data.get(toggles[i], DATA_KEY)
const relatedTarget = {
relatedTarget: toggles[i]
}
if (event && event.type === 'click') {
relatedTarget.clickEvent = event
}
if (!context) {
continue
}
@ -438,6 +433,10 @@ class Dropdown extends BaseComponent {
continue
}
const relatedTarget = {
relatedTarget: toggles[i]
}
if (event) {
// Don't close the menu if the clicked element or one of its parents is the dropdown button
if ([context._element].some(element => event.composedPath().includes(element))) {
@ -448,29 +447,13 @@ class Dropdown extends BaseComponent {
if (event.type === 'keyup' && event.key === TAB_KEY && dropdownMenu.contains(event.target)) {
continue
}
if (event.type === 'click') {
relatedTarget.clickEvent = event
}
}
const hideEvent = EventHandler.trigger(toggles[i], EVENT_HIDE, relatedTarget)
if (hideEvent.defaultPrevented) {
continue
}
// If this is a touch-enabled device we remove the extra
// empty mouseover listeners we added for iOS support
if ('ontouchstart' in document.documentElement) {
[].concat(...document.body.children)
.forEach(elem => EventHandler.off(elem, 'mouseover', noop))
}
if (context._popper) {
context._popper.destroy()
}
dropdownMenu.classList.remove(CLASS_NAME_SHOW)
toggles[i].classList.remove(CLASS_NAME_SHOW)
toggles[i].setAttribute('aria-expanded', 'false')
Manipulator.removeDataAttribute(dropdownMenu, 'popper')
EventHandler.trigger(toggles[i], EVENT_HIDDEN, relatedTarget)
context._completeHide(relatedTarget)
}
}