Restart the progress bar after re-focusing the page (apvarun#109, apvarun#112)

Author: DieterHolvoet

src/toastify-es.js

@@ -137,6 +137,33 @@ class Toastify {
       return this;
     }
 
+    startToast() {
+      var self = this;
+      // add back the timeout
+      this.toastElement.timeOutValue = window.setTimeout(
+        () => {
+          // Remove the toast from DOM
+          this._removeElement(this.toastElement);
+        },
+        this.options.duration
+      );
+
+      // Restart the progress bar animation
+      var progressBar = this.toastElement.querySelector('.toast-progress');
+      progressBar.style.animationPlayState = '';
+      var newProgressBar = progressBar.cloneNode(true);
+      progressBar.parentNode.replaceChild(newProgressBar, progressBar);
+    }
+
+    pauseToast() {
+      // Stop countdown
+      window.clearTimeout(this.toastElement.timeOutValue);
+
+      // Pause the progress bar animation
+      var progressBar = this.toastElement.querySelector('.toast-progress');
+      progressBar.style.animationPlayState = 'paused';
+    }
+
     /**
      * Hide the toast
      * @public
@@ -291,20 +318,14 @@ class Toastify {
         divElement.addEventListener(
           "mouseover",
           (event) => {
-            window.clearTimeout(divElement.timeOutValue);
+            this.pauseToast();
           }
         )
         // add back the timeout
         divElement.addEventListener(
           "mouseleave",
           () => {
-            divElement.timeOutValue = window.setTimeout(
-              () => {
-                // Remove the toast from DOM
-                this._removeElement(divElement);
-              },
-              this.options.duration
-            )
+            this.startToast();
           }
         )
       }
@@ -315,17 +336,9 @@ class Toastify {
           "visibilitychange",
           (event) => {
             if (document.visibilityState === 'visible') {
-              // add back the timeout
-              divElement.timeOutValue = window.setTimeout(
-                () => {
-                  // Remove the toast from DOM
-                  this._removeElement(divElement);
-                },
-                this.options.duration
-              )
+              this.startToast();
             } else {
-              // stop countdown
-              window.clearTimeout(divElement.timeOutValue);
+              this.pauseToast();
             }
           }
         )

src/toastify.js

@@ -210,21 +210,15 @@
         // stop countdown
         divElement.addEventListener(
           "mouseover",
-          function(event) {
-            window.clearTimeout(divElement.timeOutValue);
+          function() {
+            self.pauseToast();
           }
         )
         // add back the timeout
         divElement.addEventListener(
           "mouseleave",
           function() {
-            divElement.timeOutValue = window.setTimeout(
-              function() {
-                // Remove the toast from DOM
-                self.removeElement(divElement);
-              },
-              self.options.duration
-            )
+            self.startToast();
           }
         )
       }
@@ -236,17 +230,9 @@
           "visibilitychange",
           function() {
             if (document.visibilityState === 'visible') {
-              // add back the timeout
-              divElement.timeOutValue = window.setTimeout(
-                function() {
-                  // Remove the toast from DOM
-                  self.removeElement(divElement);
-                },
-                  self.options.duration
-              )
+              self.startToast();
             } else {
-              // stop countdown
-              window.clearTimeout(divElement.timeOutValue);
+              self.pauseToast();
             }
           }
         )
@@ -343,6 +329,33 @@
       return this;
     },
 
+    startToast: function() {
+      var self = this;
+      // add back the timeout
+      this.toastElement.timeOutValue = window.setTimeout(
+        function() {
+          // Remove the toast from DOM
+          self.removeElement(self.toastElement);
+        },
+          self.options.duration
+      );
+
+      // Restart the progress bar animation
+      var progressBar = this.toastElement.querySelector('.toast-progress');
+      progressBar.style.animationPlayState = '';
+      var newProgressBar = progressBar.cloneNode(true);
+      progressBar.parentNode.replaceChild(newProgressBar, progressBar);
+    },
+
+    pauseToast: function() {
+      // Stop countdown
+      window.clearTimeout(this.toastElement.timeOutValue);
+
+      // Pause the progress bar animation
+      var progressBar = this.toastElement.querySelector('.toast-progress');
+      progressBar.style.animationPlayState = 'paused';
+    },
+
     hideToast: function() {
       if (this.toastElement.timeOutValue) {
         clearTimeout(this.toastElement.timeOutValue);