diff options
author | Rohit Sharma <rohit2sharma95@gmail.com> | 2021-03-24 21:25:00 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2021-04-18 08:47:50 +0300 |
commit | 38a79ec64cf148cae16cd98f9f2c5bc174175cc9 (patch) | |
tree | c16762f45869e073d3d8c17ae2dda6b24c9482a2 /js | |
parent | 7100a0da522dbeeed6c6a749fe1364badf461199 (diff) |
Refactor dropdown's hide functionality
Diffstat (limited to 'js')
-rw-r--r-- | js/src/dropdown.js | 83 |
1 files changed, 33 insertions, 50 deletions
diff --git a/js/src/dropdown.js b/js/src/dropdown.js index ae440e4724..7561f98127 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -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 } - } - - 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() + if (event.type === 'click') { + relatedTarget.clickEvent = event + } } - 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) } } |