Choose Between Displaying Multiple Toasts Or Just One

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
       </a>
     </td>
+    <td align="center">
+      <a href="https://github.com/TrevorSlobodnick">
+        <img
+          alt="Trevor Slobodnick"
+          src="https://avatars.githubusercontent.com/u/59592643?v=4"
+          width="117"
+        />
+        <br />
+        Trevor Slobodnick
+      </a>
+    </td>
   </tr>
 </table>
 

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;

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"
+  }
+})

index.html

@@ -25,9 +25,16 @@ <h1>Toastify JS</h1>
             <a href="https://twitter.com/intent/tweet?text=Pure+JavaScript+library+for+better+notification+messages&url=https://apvarun.github.io/toastify-js/&hashtags=JavaScript,toast&via=apvarun"
                 target="_blank" class="button">Tweet</a>
         </div>
+        <div class="settings">
+            <div class="form-check">
+                <label for="multiple">Display Multiple Toasts?</label>
+                <input type="checkbox" value="" id="multiple" checked>
+            </div>
+        </div>
         <div class="docs">
             <h2>Usage</h2>
             <code>
+                <p id="multiple-code"></p>
                 <p>Toastify({</p>
                 <p class="pad-left">text: "This is a toast",</p>
                 <p class="pad-left">duration: 3000</p>

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();
         },

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),