Stop the timeout if the window is not focused

README.md

@@ -83,6 +83,7 @@ Toastify({
   gravity: "top", // `top` or `bottom`
   position: "left", // `left`, `center` or `right`
   stopOnFocus: true, // Prevents dismissing of toast on hover
+  stopOnWindowBlur: true, // Prevents dismissing of toast if the window is not focused
   style: {
     background: "linear-gradient(to right, #00b09b, #96c93d)",
   },
@@ -148,6 +149,7 @@ If `gravity` is equals to `bottom`, it will be pushed from bottom.
 | avatar | URL string | Image/icon to be shown before text |  |
 | className | string | Ability to provide custom class name for further customization |  |
 | stopOnFocus | boolean | To stop timer when hovered over the toast (Only if duration is set) | true |
+| stopOnWindowBlur | boolean | To stop timer if window is not focused (Only if duration is set) | true |
 | callback | Function | Invoked when the toast is dismissed |  |
 | onClick | Function | Invoked when the toast is clicked |  |
 | offset | Object | Ability to add some offset to axis | |

src/toastify-es.js

@@ -22,6 +22,7 @@
  * @property {url} avatar - Image/icon to be shown before text
  * @property {string} className - Ability to provide custom class name for further customization
  * @property {boolean} stopOnFocus - To stop timer when hovered over the toast (Only if duration is set)
+ * @property {boolean} stopOnWindowBlur - To stop timer if window is not focused (Only if duration is set)
  * @property {Function} callback - Invoked when the toast is dismissed
  * @property {Function} onClick - Invoked when the toast is clicked
  * @property {Object} offset - Ability to add some offset to axis
@@ -50,6 +51,7 @@ class Toastify {
       avatar: "",
       className: "",
       stopOnFocus: true,
+      stopOnWindowBlur: true,
       onClick: function() {},
       offset: { x: 0, y: 0 },
       escapeMarkup: true,
@@ -117,7 +119,7 @@ class Toastify {
       // Repositioning the toasts in case multiple toasts are present
       this._reposition();
 
-      if (this.options.duration > 0) {
+      if (this.options.duration > 0 && document.visibilityState === 'visible') {
         this.toastElement.timeOutValue = window.setTimeout(
           () => {
             // Remove the toast from DOM
@@ -158,6 +160,7 @@ class Toastify {
      * @param {url} [options.avatar] - Image/icon to be shown before text
      * @param {string} [options.className] - Ability to provide custom class name for further customization
      * @param {boolean} [options.stopOnFocus] - To stop timer when hovered over the toast (Only if duration is set)
+     * @param {boolean} [options.stopOnWindowBlur] - To stop timer if window is not focused (Only if duration is set)
      * @param {Function} [options.callback] - Invoked when the toast is dismissed
      * @param {Function} [options.onClick] - Invoked when the toast is clicked
      * @param {Object} [options.offset] - Ability to add some offset to axis
@@ -300,6 +303,28 @@ class Toastify {
         )
       }
 
+      // Clear timeout while window is not focused
+      if (this.options.stopOnWindowBlur && this.options.duration > 0) {
+        document.addEventListener(
+          "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
+              )
+            } else {
+              // stop countdown
+              window.clearTimeout(divElement.timeOutValue);
+            }
+          }
+        )
+      }
+
       // Adding an on-click destination path
       if (typeof this.options.destination !== "undefined") {
         divElement.addEventListener(

src/toastify.js

@@ -39,6 +39,7 @@
     avatar: "",
     className: "",
     stopOnFocus: true,
+    stopOnWindowBlur: true,
     onClick: function () {
     },
     offset: {x: 0, y: 0},
@@ -81,6 +82,7 @@
       this.options.avatar = options.avatar || Toastify.defaults.avatar; // img element src - url or a path
       this.options.className = options.className || Toastify.defaults.className; // additional class names for the toast
       this.options.stopOnFocus = options.stopOnFocus === undefined ? Toastify.defaults.stopOnFocus : options.stopOnFocus; // stop timeout on focus
+      this.options.stopOnWindowBlur = options.stopOnWindowBlur === undefined ? Toastify.defaults.stopOnWindowBlur : options.stopOnWindowBlur;
       this.options.onClick = options.onClick || Toastify.defaults.onClick; // Callback after click
       this.options.offset = options.offset || Toastify.defaults.offset; // toast offset
       this.options.escapeMarkup = options.escapeMarkup !== undefined ? options.escapeMarkup : Toastify.defaults.escapeMarkup;
@@ -222,6 +224,29 @@
         )
       }
 
+      // Clear timeout while window is not focused
+      if (this.options.stopOnWindowBlur && this.options.duration > 0) {
+        var self = this;
+        document.addEventListener(
+          "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
+              )
+            } else {
+              // stop countdown
+              window.clearTimeout(divElement.timeOutValue);
+            }
+          }
+        )
+      }
+
       // Adding an on-click destination path
       if (typeof this.options.destination !== "undefined") {
         divElement.addEventListener(
@@ -291,7 +316,7 @@
       // Repositioning the toasts in case multiple toasts are present
       Toastify.reposition();
 
-      if (this.options.duration > 0) {
+      if (this.options.duration > 0 && document.visibilityState === 'visible') {
         this.toastElement.timeOutValue = window.setTimeout(
           function() {
             // Remove the toast from DOM