Add ability to keep toast opened (#46)

PR #25 Issue #43
ankurk91 · Feb 14, 2021 · 48ee615 · 48ee615
1 parent 56181d9
commit 48ee615
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/examples/App.vue b/examples/App.vue
@@ -32,7 +32,7 @@
 
               <div class="form-group">
                 <label>Duration <code>({{ form.duration / 1000 }} seconds)</code></label>
-                <input type="range" class="custom-range" min="100" max="60000"
+                <input type="range" class="custom-range" min="0" step="1000" max="60000"
                        v-model.number="form.duration">
               </div>
 

diff --git a/readme.md b/readme.md
@@ -46,7 +46,7 @@ The API methods accepts these options:
 |  message         | String              | --                   |  Message text/html (required)   |
 |  type            | String              | `success`            |  One of `success`, `info`, `warning`, `error`, `default`  |
 |  position        | String              | `bottom-right`       |  One of `top`, `bottom`, `top-right`, `bottom-right`,`top-left`, `bottom-left`  |
-|  duration        | Number              | `3000`               |  Visibility duration in milliseconds    |
+|  duration        | Number              | `3000`               |  Visibility duration in milliseconds, set `0` to keep toast visible    |
 |  dismissible     | Boolean             | `true`               |  Allow user dismiss by clicking    |
 |  onClick         | Function            | --                   |  Do something when user clicks    |
 |  onDismiss       | Function            | --                   |  Do something after toast gets dismissed    |

diff --git a/src/js/Component.vue b/src/js/Component.vue
@@ -111,7 +111,7 @@
       },
 
       dismiss() {
-        this.timer.stop();
+        if(this.timer) this.timer.stop();
         clearTimeout(this.queueTimer);
         this.isActive = false;
 
@@ -132,16 +132,19 @@
         this.correctParent.insertAdjacentElement('afterbegin', this.$el);
         this.isActive = true;
 
-        this.timer = new Timer(this.dismiss, this.duration);
+        if (this.duration) {
+          this.timer = new Timer(this.dismiss, this.duration);
+        }
       },
 
       whenClicked() {
         if (!this.dismissible) return;
         this.onClick.apply(null, arguments);
         this.dismiss()
       },
+
       toggleTimer(newVal) {
-        if (!this.pauseOnHover) return;
+        if (!this.pauseOnHover || !this.timer) return;
         newVal ? this.timer.pause() : this.timer.resume();
       }
     },