Feat: Pause timer on hover. (ankurk91#21)

src/js/Component.vue

@@ -7,6 +7,8 @@
       v-show="isActive"
       class="toast"
       :class="[`toast-${type}`, `is-${position}`]"
+      @mouseover="mouseover = true"
+      @mouseleave="mouseover = false"
       @click="whenClicked">
       <div class="toast-icon"></div>
       <p class="toast-text" v-html="message"></p>
@@ -15,7 +17,7 @@
 </template>
 
 <script>
-  import {removeElement} from './helpers.js';
+  import {removeElement, Timer} from './helpers.js';
   import Positions from './positions.js'
   import eventBus from './bus.js'
 
@@ -62,6 +64,7 @@
         isActive: false,
         parentTop: null,
         parentBottom: null,
+        mouseover: null,
       }
     },
     beforeMount() {
@@ -71,6 +74,11 @@
       this.showNotice();
       eventBus.$on('toast.clear', this.close)
     },
+    watch: {
+      mouseover: function (val) {
+        val ? this.timer.pause() : this.timer.resume();
+      }
+    },
     methods: {
       setupContainer() {
         this.parentTop = document.querySelector('.notices.is-top');
@@ -103,7 +111,7 @@
       },
 
       close() {
-        clearTimeout(this.timer);
+        this.timer.stop();
         clearTimeout(this.queueTimer);
         this.isActive = false;
 
@@ -124,7 +132,7 @@
         this.correctParent.insertAdjacentElement('afterbegin', this.$el);
         this.isActive = true;
 
-        this.timer = setTimeout(this.close, this.duration)
+        this.timer = new Timer(this.close, this.duration);
       },
 
       whenClicked() {

src/js/helpers.js

@@ -6,4 +6,31 @@ const removeElement = (el) => {
   }
 };
 
-export {removeElement}
+// custom timer with pause, resume ability
+// thanks to: https://stackoverflow.com/a/3969760
+class Timer {
+  constructor(callback, delay) {
+    this.startTime = Date.now();
+    this.callback = callback;
+    this.delay = delay;
+
+    this.timer = setTimeout(callback, delay);
+  }
+
+  pause() {
+    this.stop();
+    this.delay -= Date.now() - this.startTime;
+  }
+
+  resume() {
+    this.stop();
+    this.startTime = Date.now();
+    this.timer = setTimeout(this.callback, this.delay);
+  }
+
+  stop() {
+    clearTimeout(this.timer);
+  }
+}
+
+export {removeElement, Timer}