From d387184ec80acc6973acd4ae874fa8f7bcd04233 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Laussel=20Lo=C3=AFc?= Date: Fri, 31 Aug 2018 09:18:28 +0200 Subject: [PATCH] Implement `data-dismiss="toast"` to allow user to interact itself with the component (#27155) --- js/src/toast.js | 66 ++++++++++++++++++++---------- js/tests/unit/toast.js | 29 +++++++++++++ js/tests/visual/toast.html | 10 ++++- site/docs/4.1/components/toasts.md | 44 ++++++++++++++++---- 4 files changed, 117 insertions(+), 32 deletions(-) diff --git a/js/src/toast.js b/js/src/toast.js index cb6de974b5cc..1e70e091f2bb 100644 --- a/js/src/toast.js +++ b/js/src/toast.js @@ -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) { diff --git a/js/tests/unit/toast.js b/js/tests/unit/toast.js index 873661c76f63..d9c5e1fb6ece 100644 --- a/js/tests/unit/toast.js +++ b/js/tests/unit/toast.js @@ -232,4 +232,33 @@ $(function () { }) .bootstrapToast('show') }) + + + QUnit.test('should close toast when close element with data-dismiss attribute is set', function (assert) { + assert.expect(2) + var done = assert.async() + + var toastHtml = + '
' + + '' + + '
' + + var $toast = $(toastHtml) + .bootstrapToast() + .appendTo($('#qunit-fixture')) + + $toast + .on('shown.bs.toast', function () { + assert.strictEqual($toast.hasClass('show'), true) + var button = $toast.find('.close') + button.trigger('click') + }) + .on('hidden.bs.toast', function () { + assert.strictEqual($toast.hasClass('show'), false) + done() + }) + .bootstrapToast('show') + }) }) diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html index 6897022c06ed..902194617b6a 100644 --- a/js/tests/visual/toast.html +++ b/js/tests/visual/toast.html @@ -26,22 +26,28 @@

Toast Bootstrap Visual Test

-
+ -
+