diff --git a/README.md b/README.md index 1936395..fa25778 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, @@ -419,6 +420,17 @@ If `gravity` is equals to `bottom`, it will be pushed from bottom. prousseau-korem + + + Trevor Slobodnick +
+ Trevor Slobodnick +
+ 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/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/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

diff --git a/src/toastify-es.js b/src/toastify-es.js index 784cf59..d90df79 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 toasts that are currently showing + Toastify.activeToasts.forEach(toast => toast.removeElement(toast.toastElement)) + } + + // Add toast to the static "toasts" array + Toastify.activeToasts.push(this) + // Supporting function chaining return this; } @@ -366,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 5d9659c..b0c71cc 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.removeElement(toast.toastElement)) + } + + // Add toast to the static "toasts" array + Toastify.activeToasts.push(this) + // Supporting function chaining return this; }, @@ -334,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),