diff options
| -rw-r--r-- | js/src/toast.js | 37 | ||||
| -rw-r--r-- | js/tests/unit/toast.js | 27 | ||||
| -rw-r--r-- | js/tests/visual/toast.html | 6 | ||||
| -rw-r--r-- | site/docs/4.1/components/toasts.md | 10 |
4 files changed, 17 insertions, 63 deletions
diff --git a/js/src/toast.js b/js/src/toast.js index 1e70e091f..878ffe029 100644 --- a/js/src/toast.js +++ b/js/src/toast.js @@ -38,16 +38,13 @@ const Toast = (($) => { const DefaultType = { animation : 'boolean', autohide : 'boolean', - delay : '(number|object)' + delay : 'number' } const Default = { animation : true, autohide : true, - delay : { - show: 0, - hide: 500 - } + delay : 500 } const Selector = { @@ -95,19 +92,16 @@ const Toast = (($) => { } } - this._timeout = setTimeout(() => { - this._element.classList.add(ClassName.SHOW) - - if (this._config.animation) { - const transitionDuration = Util.getTransitionDurationFromElement(this._element) + this._element.classList.add(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.show) + $(this._element) + .one(Util.TRANSITION_END, complete) + .emulateTransitionEnd(transitionDuration) + } else { + complete() + } } hide(withoutTimeout) { @@ -122,7 +116,7 @@ const Toast = (($) => { } else { this._timeout = setTimeout(() => { this._close() - }, this._config.delay.hide) + }, this._config.delay) } } @@ -150,13 +144,6 @@ const Toast = (($) => { ...typeof config === 'object' && config ? config : {} } - if (typeof config.delay === 'number') { - config.delay = { - show: config.delay, - hide: config.delay - } - } - Util.typeCheckConfig( NAME, config, diff --git a/js/tests/unit/toast.js b/js/tests/unit/toast.js index d9c5e1fb6..e6bd6be1e 100644 --- a/js/tests/unit/toast.js +++ b/js/tests/unit/toast.js @@ -184,28 +184,6 @@ $(function () { .bootstrapToast('show') }) - QUnit.test('should allow to pass delay object in html', function (assert) { - assert.expect(1) - var done = assert.async() - - var toastHtml = - '<div class="toast" data-delay=\'{"show": 0, "hide": 1}\'>' + - '<div class="toast-body">' + - 'a simple toast' + - '</div>' + - '</div>' - - var $toast = $(toastHtml) - .bootstrapToast() - .appendTo($('#qunit-fixture')) - - $toast.on('shown.bs.toast', function () { - assert.strictEqual($toast.hasClass('show'), true) - done() - }) - .bootstrapToast('show') - }) - QUnit.test('should allow to config in js', function (assert) { assert.expect(1) var done = assert.async() @@ -219,10 +197,7 @@ $(function () { var $toast = $(toastHtml) .bootstrapToast({ - delay: { - show: 0, - hide: 1 - } + delay: 1 }) .appendTo($('#qunit-fixture')) diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html index 902194617..d069a163a 100644 --- a/js/tests/visual/toast.html +++ b/js/tests/visual/toast.html @@ -26,7 +26,7 @@ </div> <div class="notifications"> - <div id="toastAutoHide" class="toast" role="alert" aria-live="assertive" aria-atomic="true"> + <div id="toastAutoHide" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000"> <div class="toast-header"> <img class="rounded mr-2" data-src="holder.js/20x20?size=1&text=.&bg=#007aff" alt=""> <strong class="mr-auto">Bootstrap</strong> @@ -60,10 +60,6 @@ <script src="../../dist/toast.js"></script> <script> $(function () { - $('#toastAutoHide').attr('data-delay', JSON.stringify({ - show: 0, - hide: 2000 - })) $('.toast').toast() $('#btnShowToast').on('click', function () { diff --git a/site/docs/4.1/components/toasts.md b/site/docs/4.1/components/toasts.md index 84359084d..12fbf60d2 100644 --- a/site/docs/4.1/components/toasts.md +++ b/site/docs/4.1/components/toasts.md @@ -242,15 +242,11 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap </tr> <tr> <td>delay</td> - <td>number | object</td> + <td>number</td> <td> - <code>{ show: 0, hide: 500 }</code> - </td> - <td> - <p>Delay showing and hiding the toast (ms)</p> - <p>If a number is supplied, delay is applied to both hide/show</p> - <p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p> + <code>500</code> </td> + <td>Delay hiding the toast (ms)</td> </tr> </tbody> </table> |