mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-08 22:56:46 +02:00
Code Issues Releases Wiki Activity

Prevent toast autohiding if focusing or hovering (#33221)

Browse Source
This commit is contained in:
Ryan Berliner
2021-05-11 01:37:57 -04:00
committed by GitHub
parent c3ad760cd7
commit 9c3ab6557e
2 changed files with 229 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
js/src/toast.js
View File

@@ -26,6 +26,10 @@ const DATA_KEY = 'bs.toast'
const EVENT_KEY = `.${DATA_KEY}`
const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}`
const EVENT_MOUSEOVER = `mouseover${EVENT_KEY}`
const EVENT_MOUSEOUT = `mouseout${EVENT_KEY}`
const EVENT_FOCUSIN = `focusin${EVENT_KEY}`
const EVENT_FOCUSOUT = `focusout${EVENT_KEY}`
const EVENT_HIDE = `hide${EVENT_KEY}`
const EVENT_HIDDEN = `hidden${EVENT_KEY}`
const EVENT_SHOW = `show${EVENT_KEY}`
@@ -62,6 +66,8 @@ class Toast extends BaseComponent {
this._config = this._getConfig(config)
this._timeout = null
this._hasMouseInteraction = false
this._hasKeyboardInteraction = false
this._setListeners()
}
@@ -100,11 +106,7 @@ class Toast extends BaseComponent {
EventHandler.trigger(this._element, EVENT_SHOWN)
if (this._config.autohide) {
this._timeout = setTimeout(() => {
this.hide()
}, this._config.delay)
}
this._maybeScheduleHide()
}
this._element.classList.remove(CLASS_NAME_HIDE)
@@ -159,8 +161,53 @@ class Toast extends BaseComponent {
return config
}
_maybeScheduleHide() {
if (!this._config.autohide) {
return
}
if (this._hasMouseInteraction || this._hasKeyboardInteraction) {
return
}
this._timeout = setTimeout(() => {
this.hide()
}, this._config.delay)
}
_onInteraction(event, isInteracting) {
switch (event.type) {
case 'mouseover':
case 'mouseout':
this._hasMouseInteraction = isInteracting
break
case 'focusin':
case 'focusout':
this._hasKeyboardInteraction = isInteracting
break
default:
break
}
if (isInteracting) {
this._clearTimeout()
return
}
const nextElement = event.relatedTarget
if (this._element === nextElement || this._element.contains(nextElement)) {
return
}
this._maybeScheduleHide()
}
_setListeners() {
EventHandler.on(this._element, EVENT_CLICK_DISMISS, SELECTOR_DATA_DISMISS, () => this.hide())
EventHandler.on(this._element, EVENT_MOUSEOVER, event => this._onInteraction(event, true))
EventHandler.on(this._element, EVENT_MOUSEOUT, event => this._onInteraction(event, false))
EventHandler.on(this._element, EVENT_FOCUSIN, event => this._onInteraction(event, true))
EventHandler.on(this._element, EVENT_FOCUSOUT, event => this._onInteraction(event, false))
}
_clearTimeout() {