diff options
Diffstat (limited to 'vendor/twbs/bootstrap/js/src/modal.js')
-rw-r--r-- | vendor/twbs/bootstrap/js/src/modal.js | 59 |
1 files changed, 35 insertions, 24 deletions
diff --git a/vendor/twbs/bootstrap/js/src/modal.js b/vendor/twbs/bootstrap/js/src/modal.js index b4700f02a..8dac75265 100644 --- a/vendor/twbs/bootstrap/js/src/modal.js +++ b/vendor/twbs/bootstrap/js/src/modal.js @@ -1,6 +1,6 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.1.1): modal.js + * Bootstrap (v5.0.2): modal.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ @@ -19,8 +19,6 @@ import SelectorEngine from './dom/selector-engine' import ScrollBarHelper from './util/scrollbar' import BaseComponent from './base-component' import Backdrop from './util/backdrop' -import FocusTrap from './util/focustrap' -import { enableDismissTrigger } from './util/component-functions' /** * ------------------------------------------------------------------------ @@ -51,6 +49,7 @@ const EVENT_HIDE_PREVENTED = `hidePrevented${EVENT_KEY}` const EVENT_HIDDEN = `hidden${EVENT_KEY}` const EVENT_SHOW = `show${EVENT_KEY}` const EVENT_SHOWN = `shown${EVENT_KEY}` +const EVENT_FOCUSIN = `focusin${EVENT_KEY}` const EVENT_RESIZE = `resize${EVENT_KEY}` const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}` const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}` @@ -63,10 +62,10 @@ const CLASS_NAME_FADE = 'fade' const CLASS_NAME_SHOW = 'show' const CLASS_NAME_STATIC = 'modal-static' -const OPEN_SELECTOR = '.modal.show' const SELECTOR_DIALOG = '.modal-dialog' const SELECTOR_MODAL_BODY = '.modal-body' const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="modal"]' +const SELECTOR_DATA_DISMISS = '[data-bs-dismiss="modal"]' /** * ------------------------------------------------------------------------ @@ -81,7 +80,6 @@ class Modal extends BaseComponent { this._config = this._getConfig(config) this._dialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element) this._backdrop = this._initializeBackDrop() - this._focustrap = this._initializeFocusTrap() this._isShown = false this._ignoreBackdropClick = false this._isTransitioning = false @@ -132,6 +130,8 @@ class Modal extends BaseComponent { this._setEscapeEvent() this._setResizeEvent() + EventHandler.on(this._element, EVENT_CLICK_DISMISS, SELECTOR_DATA_DISMISS, event => this.hide(event)) + EventHandler.on(this._dialog, EVENT_MOUSEDOWN_DISMISS, () => { EventHandler.one(this._element, EVENT_MOUSEUP_DISMISS, event => { if (event.target === this._element) { @@ -143,7 +143,11 @@ class Modal extends BaseComponent { this._showBackdrop(() => this._showElement(relatedTarget)) } - hide() { + hide(event) { + if (event && ['A', 'AREA'].includes(event.target.tagName)) { + event.preventDefault() + } + if (!this._isShown || this._isTransitioning) { return } @@ -164,7 +168,7 @@ class Modal extends BaseComponent { this._setEscapeEvent() this._setResizeEvent() - this._focustrap.deactivate() + EventHandler.off(document, EVENT_FOCUSIN) this._element.classList.remove(CLASS_NAME_SHOW) @@ -179,8 +183,14 @@ class Modal extends BaseComponent { .forEach(htmlElement => EventHandler.off(htmlElement, EVENT_KEY)) this._backdrop.dispose() - this._focustrap.deactivate() super.dispose() + + /** + * `document` has 2 events `EVENT_FOCUSIN` and `EVENT_CLICK_DATA_API` + * Do not move `document` in `htmlElements` array + * It will remove `EVENT_CLICK_DATA_API` event that should remain + */ + EventHandler.off(document, EVENT_FOCUSIN) } handleUpdate() { @@ -196,12 +206,6 @@ class Modal extends BaseComponent { }) } - _initializeFocusTrap() { - return new FocusTrap({ - trapElement: this._element - }) - } - _getConfig(config) { config = { ...Default, @@ -218,7 +222,7 @@ class Modal extends BaseComponent { if (!this._element.parentNode || this._element.parentNode.nodeType !== Node.ELEMENT_NODE) { // Don't move modal's DOM position - document.body.append(this._element) + document.body.appendChild(this._element) } this._element.style.display = 'block' @@ -237,9 +241,13 @@ class Modal extends BaseComponent { this._element.classList.add(CLASS_NAME_SHOW) + if (this._config.focus) { + this._enforceFocus() + } + const transitionComplete = () => { if (this._config.focus) { - this._focustrap.activate() + this._element.focus() } this._isTransitioning = false @@ -251,6 +259,17 @@ class Modal extends BaseComponent { this._queueCallback(transitionComplete, this._dialog, isAnimated) } + _enforceFocus() { + EventHandler.off(document, EVENT_FOCUSIN) // guard against infinite focus loop + EventHandler.on(document, EVENT_FOCUSIN, event => { + if (document !== event.target && + this._element !== event.target && + !this._element.contains(event.target)) { + this._element.focus() + } + }) + } + _setEscapeEvent() { if (this._isShown) { EventHandler.on(this._element, EVENT_KEYDOWN_DISMISS, event => { @@ -412,19 +431,11 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function ( }) }) - // avoid conflict when clicking moddal toggler while another one is open - const allReadyOpen = SelectorEngine.findOne(OPEN_SELECTOR) - if (allReadyOpen) { - Modal.getInstance(allReadyOpen).hide() - } - const data = Modal.getOrCreateInstance(target) data.toggle(this) }) -enableDismissTrigger(Modal) - /** * ------------------------------------------------------------------------ * jQuery |