From 79d0107ba3fcf8a3577295505ad4b09244e2c579 Mon Sep 17 00:00:00 2001 From: Dieter Holvoet Date: Sun, 11 Dec 2022 21:34:29 +0100 Subject: [PATCH 1/2] Stop the timeout if the window is not focused --- README.md | 2 ++ src/toastify-es.js | 25 +++++++++++++++++++++++++ src/toastify.js | 25 +++++++++++++++++++++++++ 3 files changed, 52 insertions(+) diff --git a/README.md b/README.md index 1936395..6d6bb75 100644 --- a/README.md +++ b/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 | | diff --git a/src/toastify-es.js b/src/toastify-es.js index 784cf59..90263a0 100644 --- a/src/toastify-es.js +++ b/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, @@ -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( diff --git a/src/toastify.js b/src/toastify.js index 5d9659c..2d0f491 100644 --- a/src/toastify.js +++ b/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( From 099bfb660207eb1713e69ffbc0439a4ab0e40522 Mon Sep 17 00:00:00 2001 From: Dieter Holvoet Date: Tue, 13 Dec 2022 09:40:25 +0100 Subject: [PATCH 2/2] Fix timeout not stopping if the toast appears while the window is not focused --- src/toastify-es.js | 2 +- src/toastify.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/toastify-es.js b/src/toastify-es.js index 90263a0..8b4dbff 100644 --- a/src/toastify-es.js +++ b/src/toastify-es.js @@ -119,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 diff --git a/src/toastify.js b/src/toastify.js index 2d0f491..963bf5a 100644 --- a/src/toastify.js +++ b/src/toastify.js @@ -316,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