From 8d31285f21e4076f4d7c78e676c898313895753b Mon Sep 17 00:00:00 2001
From: Arun Negi <arunsnegi@protonmail.com>
Date: Mon, 11 May 2020 12:34:08 +0000
Subject: [PATCH] Feat: Pause timer on hover. (#21)

---
 src/js/Component.vue | 14 +++++++++++---
 src/js/helpers.js    | 29 ++++++++++++++++++++++++++++-
 2 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/src/js/Component.vue b/src/js/Component.vue
index 0057f70..09df046 100644
--- a/src/js/Component.vue
+++ b/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() {
diff --git a/src/js/helpers.js b/src/js/helpers.js
index 4b48897..37a8450 100644
--- a/src/js/helpers.js
+++ b/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}