Remove the show delay for our toast plugin

Author: Johann-S

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,

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'))
 

js/tests/visual/toast.html

@@ -26,7 +26,7 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
     </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 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
     <script src="../../dist/toast.js"></script>
     <script>
       $(function () {
-        $('#toastAutoHide').attr('data-delay', JSON.stringify({
-          show: 0,
-          hide: 2000
-        }))
         $('.toast').toast()
 
         $('#btnShowToast').on('click', function () {

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>