aboutsummaryrefslogtreecommitdiffstats
path: root/vendor/twbs/bootstrap/js/src/modal.js
diff options
context:
space:
mode:
Diffstat (limited to 'vendor/twbs/bootstrap/js/src/modal.js')
-rw-r--r--vendor/twbs/bootstrap/js/src/modal.js59
1 files changed, 24 insertions, 35 deletions
diff --git a/vendor/twbs/bootstrap/js/src/modal.js b/vendor/twbs/bootstrap/js/src/modal.js
index 8dac75265..b4700f02a 100644
--- a/vendor/twbs/bootstrap/js/src/modal.js
+++ b/vendor/twbs/bootstrap/js/src/modal.js
@@ -1,6 +1,6 @@
/**
* --------------------------------------------------------------------------
- * Bootstrap (v5.0.2): modal.js
+ * Bootstrap (v5.1.1): modal.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
@@ -19,6 +19,8 @@ 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'
/**
* ------------------------------------------------------------------------
@@ -49,7 +51,6 @@ 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}`
@@ -62,10 +63,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"]'
/**
* ------------------------------------------------------------------------
@@ -80,6 +81,7 @@ 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
@@ -130,8 +132,6 @@ 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,11 +143,7 @@ class Modal extends BaseComponent {
this._showBackdrop(() => this._showElement(relatedTarget))
}
- hide(event) {
- if (event && ['A', 'AREA'].includes(event.target.tagName)) {
- event.preventDefault()
- }
-
+ hide() {
if (!this._isShown || this._isTransitioning) {
return
}
@@ -168,7 +164,7 @@ class Modal extends BaseComponent {
this._setEscapeEvent()
this._setResizeEvent()
- EventHandler.off(document, EVENT_FOCUSIN)
+ this._focustrap.deactivate()
this._element.classList.remove(CLASS_NAME_SHOW)
@@ -183,14 +179,8 @@ 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() {
@@ -206,6 +196,12 @@ class Modal extends BaseComponent {
})
}
+ _initializeFocusTrap() {
+ return new FocusTrap({
+ trapElement: this._element
+ })
+ }
+
_getConfig(config) {
config = {
...Default,
@@ -222,7 +218,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.appendChild(this._element)
+ document.body.append(this._element)
}
this._element.style.display = 'block'
@@ -241,13 +237,9 @@ class Modal extends BaseComponent {
this._element.classList.add(CLASS_NAME_SHOW)
- if (this._config.focus) {
- this._enforceFocus()
- }
-
const transitionComplete = () => {
if (this._config.focus) {
- this._element.focus()
+ this._focustrap.activate()
}
this._isTransitioning = false
@@ -259,17 +251,6 @@ 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 => {
@@ -431,11 +412,19 @@ 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