From dbad7ee05bdaebe893a5d50a955ba70228912942 Mon Sep 17 00:00:00 2001 From: TrevorSlobodnick Date: Wed, 31 Aug 2022 18:57:43 -0400 Subject: [PATCH 1/9] Updated Toastify class variables and show/hide functions to support the use of only a single toast at a time I still need to test the code, but the basics are there. The class Toastify will have a class variable multiple, and when set to false, will only allow one toast to appear on the screen at a time. To accomplish this, there is a class variable activeToasts that is an array of all the toasts that are currently shown on the screen. In the showToast function, check if the multiple variable is false, if it is, call the hideToast function on each toast that is showing, then add the current toast to the activeToasts array. In hideToast, we now also remove the current toast from the activeToasts array. --- src/toastify-es.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/toastify-es.js b/src/toastify-es.js index 784cf59..a4f3a21 100644 --- a/src/toastify-es.js +++ b/src/toastify-es.js @@ -33,6 +33,9 @@ class Toastify { + static multiple = true + static activeToasts = [] + defaults = { oldestFirst: true, text: "Toastify is awesome!", @@ -127,6 +130,14 @@ class Toastify { ); // Binding `this` for function invocation } + if(Toastify.multiple === false){ + // call hideToast on all the the toasts that are currently showing + Toastify.activeToasts.forEach(toast => toast.hideToast()) + } + + // Add toast to the static "toasts" array + Toastify.activeToasts.push(this) + // Supporting function chaining return this; } @@ -140,6 +151,13 @@ class Toastify { clearTimeout(this.toastElement.timeOutValue); } this._removeElement(this.toastElement); + // Remove toast from the "activeToasts" array + const index = Toastify.activeToasts.indexOf(this) + // Make sure a valid index was found before removing + if(index != -1){ + // Remove the toast from the activeToasts array + Toastify.activeToasts.splice(index, 1) + } } /** From 464757bf938c2d6b21b935bbf59b3141ed50f6cc Mon Sep 17 00:00:00 2001 From: TrevorSlobodnick Date: Wed, 31 Aug 2022 19:24:07 -0400 Subject: [PATCH 2/9] The code added in toastify-es.js was also put in toastify.js Looking at the code again, I am not sure what toastiy-es.js is used for, but I figured it wouldnt hurt to add the code to both files. --- src/toastify-es.js | 1 + src/toastify.js | 19 +++++++++++++++++++ 2 files changed, 20 insertions(+) diff --git a/src/toastify-es.js b/src/toastify-es.js index a4f3a21..0138afd 100644 --- a/src/toastify-es.js +++ b/src/toastify-es.js @@ -151,6 +151,7 @@ class Toastify { clearTimeout(this.toastElement.timeOutValue); } this._removeElement(this.toastElement); + // Remove toast from the "activeToasts" array const index = Toastify.activeToasts.indexOf(this) // Make sure a valid index was found before removing diff --git a/src/toastify.js b/src/toastify.js index 5d9659c..d8710ae 100644 --- a/src/toastify.js +++ b/src/toastify.js @@ -20,6 +20,9 @@ // Library version version = "1.12.0"; + Toastify.multiple = true; + Toastify.activeToasts = []; + // Set the default global options Toastify.defaults = { oldestFirst: true, @@ -301,6 +304,14 @@ ); // Binding `this` for function invocation } + if(Toastify.multiple === false){ + // call hideToast on all the the toasts that are currently showing + Toastify.activeToasts.forEach(toast => toast.hideToast()) + } + + // Add toast to the static "toasts" array + Toastify.activeToasts.push(this) + // Supporting function chaining return this; }, @@ -310,6 +321,14 @@ clearTimeout(this.toastElement.timeOutValue); } this.removeElement(this.toastElement); + + // Remove toast from the "activeToasts" array + const index = Toastify.activeToasts.indexOf(this) + // Make sure a valid index was found before removing + if(index != -1){ + // Remove the toast from the activeToasts array + Toastify.activeToasts.splice(index, 1) + } }, // Removing the element from the DOM From 53292bedbcf7d2fb8917191629cb60952f74f877 Mon Sep 17 00:00:00 2001 From: TrevorSlobodnick Date: Wed, 31 Aug 2022 19:54:32 -0400 Subject: [PATCH 3/9] Added the UI for the toggle multi-toast to the demo Only the UI is finished, currently toggling does nothing, but that will change soon. --- example/script.css | 15 +++++++++++++++ index.html | 7 +++++++ 2 files changed, 22 insertions(+) diff --git a/example/script.css b/example/script.css index 11a46bb..edb4f4a 100644 --- a/example/script.css +++ b/example/script.css @@ -29,6 +29,21 @@ body { display: none; } +.settings{ + width: 60%; + background-color: white; + border: 1px solid #e3e3e3; + padding: 0.5rem; + margin-bottom: 1rem; + text-align: center; + border-radius: 4px; +} + +.settings #multiple{ + /* Make checkbox bigger */ + transform: scale(1.2); +} + .docs { display: flex; justify-content: center; diff --git a/index.html b/index.html index 49174ee..4503100 100644 --- a/index.html +++ b/index.html @@ -25,9 +25,16 @@

Toastify JS

Tweet +
+
+ + +
+

Usage

+

Toastify({

text: "This is a toast",

duration: 3000

From bcbfd69c9f1f8fdb27556b3230333055104a6a8e Mon Sep 17 00:00:00 2001 From: TrevorSlobodnick Date: Wed, 31 Aug 2022 18:57:43 -0400 Subject: [PATCH 4/9] Updated Toastify class variables and show/hide functions to support the use of only a single toast at a time I still need to test the code, but the basics are there. The class Toastify will have a class variable multiple, and when set to false, will only allow one toast to appear on the screen at a time. To accomplish this, there is a class variable activeToasts that is an array of all the toasts that are currently shown on the screen. In the showToast function, check if the multiple variable is false, if it is, call the hideToast function on each toast that is showing, then add the current toast to the activeToasts array. In hideToast, we now also remove the current toast from the activeToasts array. --- src/toastify-es.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/toastify-es.js b/src/toastify-es.js index 0138afd..9c74d4b 100644 --- a/src/toastify-es.js +++ b/src/toastify-es.js @@ -151,7 +151,7 @@ class Toastify { clearTimeout(this.toastElement.timeOutValue); } this._removeElement(this.toastElement); - + // Remove toast from the "activeToasts" array const index = Toastify.activeToasts.indexOf(this) // Make sure a valid index was found before removing From 42f0d999973a813323a786281d4ef3e8b1f49b35 Mon Sep 17 00:00:00 2001 From: TrevorSlobodnick Date: Wed, 31 Aug 2022 19:24:07 -0400 Subject: [PATCH 5/9] The code added in toastify-es.js was also put in toastify.js Looking at the code again, I am not sure what toastiy-es.js is used for, but I figured it wouldnt hurt to add the code to both files. From 5fa5714bf0991526f0bc8aecb661ec84afcc1787 Mon Sep 17 00:00:00 2001 From: TrevorSlobodnick Date: Thu, 1 Sep 2022 00:38:13 -0400 Subject: [PATCH 6/9] Fixed type and added function in script.js that toggles Toastify.multiple when a checkbox is clicked There is a small bug, if I declare Toastify.multiple = true to start, then later switch it to false, it will allow 2 toasts on the screen at the same time. But it works as expected if Toast.multiple = false is set from the start... I will look into this bug --- example/script.js | 12 ++++++++++++ src/toastify-es.js | 4 ++-- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/example/script.js b/example/script.js index 8d290ff..e9d7e1b 100644 --- a/example/script.js +++ b/example/script.js @@ -70,3 +70,15 @@ document.getElementById("new-toast").addEventListener("click", function() { }).showToast(); i++; }); + +document.getElementById("multiple").addEventListener("change", function(e){ + const element = document.getElementById("multiple-code") + if(e.currentTarget.checked == true){ + Toastify.multiple = true + element.textContent = "Toastify.multiple = true" + } + else{ + Toastify.multiple = false + element.textContent = "Toastify.multiple = false" + } +}) diff --git a/src/toastify-es.js b/src/toastify-es.js index 9c74d4b..f83f0c8 100644 --- a/src/toastify-es.js +++ b/src/toastify-es.js @@ -131,7 +131,7 @@ class Toastify { } if(Toastify.multiple === false){ - // call hideToast on all the the toasts that are currently showing + // call hideToast on all the toasts that are currently showing Toastify.activeToasts.forEach(toast => toast.hideToast()) } @@ -152,7 +152,7 @@ class Toastify { } this._removeElement(this.toastElement); - // Remove toast from the "activeToasts" array + // Get the index position of the current toast in te activeToasts array const index = Toastify.activeToasts.indexOf(this) // Make sure a valid index was found before removing if(index != -1){ From 90d7353ad1fd103e2a265388ef0b5a41225214f1 Mon Sep 17 00:00:00 2001 From: TrevorSlobodnick Date: Thu, 1 Sep 2022 00:58:25 -0400 Subject: [PATCH 7/9] Bug fixed - Correctly displaying 1 toast at a time instead of 2 when Toastify.multiple = false In my previous commit I mentioned there was a bug where more than one toast would appear even when Toastify.multiple = false. This is because I thought that the hideToast() function was called every time a toast "ended". After looking into it, it is actually the "removeElement" function that gets called everytime, so I moved my code to that function and now everything is running how it should. --- src/toastify-es.js | 18 +++++++++--------- src/toastify.js | 20 ++++++++++---------- 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/toastify-es.js b/src/toastify-es.js index f83f0c8..d90df79 100644 --- a/src/toastify-es.js +++ b/src/toastify-es.js @@ -132,7 +132,7 @@ class Toastify { if(Toastify.multiple === false){ // call hideToast on all the toasts that are currently showing - Toastify.activeToasts.forEach(toast => toast.hideToast()) + Toastify.activeToasts.forEach(toast => toast.removeElement(toast.toastElement)) } // Add toast to the static "toasts" array @@ -151,14 +151,6 @@ class Toastify { clearTimeout(this.toastElement.timeOutValue); } this._removeElement(this.toastElement); - - // Get the index position of the current toast in te activeToasts array - const index = Toastify.activeToasts.indexOf(this) - // Make sure a valid index was found before removing - if(index != -1){ - // Remove the toast from the activeToasts array - Toastify.activeToasts.splice(index, 1) - } } /** @@ -385,6 +377,14 @@ class Toastify { // Calling the callback function this.options.callback.call(toastElement); + // Get the index position of the current toast in te activeToasts array + const index = Toastify.activeToasts.indexOf(this) + // Make sure an index was found before removing + if(index != -1){ + // Remove the toast from the activeToasts array + Toastify.activeToasts.splice(index, 1) + } + // Repositioning the toasts again this._reposition(); }, diff --git a/src/toastify.js b/src/toastify.js index d8710ae..b0c71cc 100644 --- a/src/toastify.js +++ b/src/toastify.js @@ -305,8 +305,8 @@ } if(Toastify.multiple === false){ - // call hideToast on all the the toasts that are currently showing - Toastify.activeToasts.forEach(toast => toast.hideToast()) + // call hideToast on all the the toasts that are currently "showing" + Toastify.activeToasts.forEach(toast => toast.removeElement(toast.toastElement)) } // Add toast to the static "toasts" array @@ -321,14 +321,6 @@ clearTimeout(this.toastElement.timeOutValue); } this.removeElement(this.toastElement); - - // Remove toast from the "activeToasts" array - const index = Toastify.activeToasts.indexOf(this) - // Make sure a valid index was found before removing - if(index != -1){ - // Remove the toast from the activeToasts array - Toastify.activeToasts.splice(index, 1) - } }, // Removing the element from the DOM @@ -353,6 +345,14 @@ // Calling the callback function this.options.callback.call(toastElement); + // Remove toast from the "activeToasts" array + const index = Toastify.activeToasts.indexOf(this) + // Make sure an index was found before removing + if(index != -1){ + // Remove the toast from the activeToasts array + Toastify.activeToasts.splice(index, 1) + } + // Repositioning the toasts again Toastify.reposition(); }.bind(this), From 946a7317f543d296d03d9e7b49d7aa7b62515b59 Mon Sep 17 00:00:00 2001 From: TrevorSlobodnick Date: Thu, 1 Sep 2022 01:20:41 -0400 Subject: [PATCH 8/9] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 1936395..01e0bb6 100644 --- a/README.md +++ b/README.md @@ -74,6 +74,7 @@ And the script at the bottom of the page ## Documentation ```javascript +Toastify.multiple = true // Default - Allows multiple toasts to be displayed Toastify({ text: "This is a toast", duration: 3000, From 8da3d6c21b005f546f3da065c3bff7705fd47786 Mon Sep 17 00:00:00 2001 From: TrevorSlobodnick Date: Thu, 1 Sep 2022 01:33:52 -0400 Subject: [PATCH 9/9] Update README.md --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index 01e0bb6..fa25778 100644 --- a/README.md +++ b/README.md @@ -420,6 +420,17 @@ If `gravity` is equals to `bottom`, it will be pushed from bottom. prousseau-korem + + + Trevor Slobodnick +
+ Trevor Slobodnick + +