mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-09 15:16:51 +02:00
Code Issues Releases Wiki Activity

Implement data-dismiss="toast" to allow user to interact itself with the component (#27155)

Browse Source
This commit is contained in:
Laussel Loïc
2018-08-31 09:18:28 +02:00
committed by XhmikosR
parent 2f81ab007c
commit 4cac833447
4 changed files with 117 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
js/src/toast.js
View File

@@ -22,10 +22,11 @@ const Toast = (($) => {
const JQUERY_NO_CONFLICT = $.fn[NAME]
const Event = {
HIDE : `hide${EVENT_KEY}`,
HIDDEN : `hidden${EVENT_KEY}`,
SHOW : `show${EVENT_KEY}`,
SHOWN : `shown${EVENT_KEY}`
CLICK_DISMISS : `click.dismiss${EVENT_KEY}`,
HIDE : `hide${EVENT_KEY}`,
HIDDEN : `hidden${EVENT_KEY}`,
SHOW : `show${EVENT_KEY}`,
SHOWN : `shown${EVENT_KEY}`
}
const ClassName = {
@@ -49,6 +50,10 @@ const Toast = (($) => {
}
}
const Selector = {
DATA_DISMISS : '[data-dismiss="toast"]'
}
/**
* ------------------------------------------------------------------------
* Class Definition
@@ -60,6 +65,7 @@ const Toast = (($) => {
this._element = element
this._config = this._getConfig(config)
this._timeout = null
this._setListeners()
}
// Getters
@@ -104,30 +110,20 @@ const Toast = (($) => {
}, this._config.delay.show)
}
hide() {
hide(withoutTimeout) {
if (!this._element.classList.contains(ClassName.SHOW)) {
return
}
$(this._element).trigger(Event.HIDE)
const complete = () => {
$(this._element).trigger(Event.HIDDEN)
if (withoutTimeout) {
this._close()
} else {
this._timeout = setTimeout(() => {
this._close()
}, this._config.delay.hide)
}
this._timeout = setTimeout(() => {
this._element.classList.remove(ClassName.SHOW)
if (this._config.animation) {
const transitionDuration = Util.getTransitionDurationFromElement(this._element)
$(this._element)
.one(Util.TRANSITION_END, complete)
.emulateTransitionEnd(transitionDuration)
} else {
complete()
}
}, this._config.delay.hide)
}
dispose() {
@@ -138,6 +134,8 @@ const Toast = (($) => {
this._element.classList.remove(ClassName.SHOW)
}
$(this._element).off(Event.CLICK_DISMISS)
$.removeData(this._element, DATA_KEY)
this._element = null
this._config = null
@@ -168,6 +166,32 @@ const Toast = (($) => {
return config
}
_setListeners() {
$(this._element).on(
Event.CLICK_DISMISS,
Selector.DATA_DISMISS,
() => this.hide(true)
)
}
_close() {
const complete = () => {
$(this._element).trigger(Event.HIDDEN)
}
this._element.classList.remove(ClassName.SHOW)
if (this._config.animation) {
const transitionDuration = Util.getTransitionDurationFromElement(this._element)
$(this._element)
.one(Util.TRANSITION_END, complete)
.emulateTransitionEnd(transitionDuration)
} else {
complete()
}
}
// Static
static _jQueryInterface(config) {