Feature/sound

README.md

@@ -17,6 +17,7 @@ Toastify is a lightweight, vanilla JS toast notification library.
 * Multiple stacked notifications
 * Customizable
 * No blocking of execution thread
+* Sound Support for Toast Notifications
 
 ### Customization options
 
@@ -124,12 +125,31 @@ Toastify({
 }).showToast();
 ```
 
-Toast will be pushed 50px from right in x axis and 10px from top in y axis.
+### Add Sound
+
+This feature enhances the Toastify library by providing sound support for toast notifications. Now you can add custom sounds to your toast notifications, making them more engaging and interactive. The sound feature allows you to specify the type of sound (e.g., bell or alert) and even use your own custom sound files. With this addition, you can create a more immersive user experience and capture your users' attention with audio cues.
+
+```javascript
+Toastify({
+  text: 'I am a toast',
+  duration: 3000,
+  sound: {
+    default: true, // Use the default sound (set to false if a custom sound file is provided)
+    type: 'bell', // Specify type [bell,alert,pop]
+    src: './sounds/alert.wav', // Specify the source file for the custom sound (make sure 'default' is set to false)
+  }
+}).showToast()
+```
+To utilize the sound feature in Toastify, follow these steps:
 
 **Note:**
 
-If `position` is equals to `left`, it will be pushed from left.
-If `gravity` is equals to `bottom`, it will be pushed from bottom.
+Set the sound property to an object with the following properties:
+  - `default`: Set it to `true` to use the default sound provided by Toastify. Set it to false if you want to use a custom sound file.
+  - `type`: Specify the type of sound you want to use. Available options are 'bell' and 'alert'.
+  - `src`: If `default` is set to `false`, provide the path to your custom sound file using the src property.
+
+With this new sound support feature, you can create visually and audibly appealing toast notifications, enriching your users' experience on your website or application.
 
 ## API
 
@@ -155,6 +175,7 @@ If `gravity` is equals to `bottom`, it will be pushed from bottom.
 | style | object | Use the HTML DOM Style properties to add any style directly to toast | |
 | ariaLive | string | Announce the toast to screen readers, see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions for options | "polite" |
 | oldestFirst | boolean | Set the order in which toasts are stacked in page | true |
+| soundType | string | For default type use `type` | 'pop', 'alert', 'bell'
 
 > Deprecated properties: `backgroundColor` -  use `style.background` option instead
 

example/script.css

@@ -174,3 +174,9 @@ code p {
         position: static;
     }
 }
+
+/* Disable carbon ads */
+#carbonads {
+    display: none !important;
+}
+

example/script.js

@@ -1,72 +1,90 @@
 var bgColors = [
-    "linear-gradient(to right, #00b09b, #96c93d)",
-    "linear-gradient(to right, #ff5f6d, #ffc371)",
-  ],
-  i = 0;
+  "linear-gradient(to right, #00b09b, #96c93d)",
+  "linear-gradient(to right, #ff5f6d, #ffc371)",
+],
+i = 0;
 
 Toastify({
-  text: "Hi",
-  duration: 4500,
-  destination: "https://github.com/apvarun/toastify-js",
-  newWindow: true,
-  gravity: "top",
-  position: 'left',
+text: "Hi",
+duration: 4500,
+destination: "https://github.com/apvarun/toastify-js",
+newWindow: true,
+gravity: "top",
+position: 'left',
 }).showToast();
 
 setTimeout(function() {
-  Toastify({
-    text: "Simple JavaScript Toasts",
-    gravity: "top",
-    position: 'center',
-    style: {
-      background: '#0f3443'
-    }
-  }).showToast();
+Toastify({
+  text: "Simple JavaScript Toasts",
+  gravity: "top",
+  position: 'center',
+  style: {
+    background: '#0f3443'
+  }
+}).showToast();
 }, 1000);
 
 // Options for the toast
 var options = {
-  text: "Happy toasting!",
-  duration: 2500,
-  callback: function() {
-    console.log("Toast hidden");
-    Toastify.reposition();
-  },
-  close: true,
-  style: {
-    background: "linear-gradient(to right, #00b09b, #96c93d)",
-  }
+text: "Happy toasting!",
+duration: 2500,
+callback: function() {
+  console.log("Toast hidden");
+  Toastify.reposition();
+},
+close: true,
+style: {
+  background: "linear-gradient(to right, #00b09b, #96c93d)",
+}
 };
 
 // Initializing the toast
 var myToast = Toastify(options);
 
 // Toast after delay
 setTimeout(function() {
-  myToast.showToast();
+myToast.showToast();
 }, 4500);
 
 setTimeout(function() {
-  Toastify({
-    text: "Highly customizable",
-    gravity: "bottom",
-    position: 'left',
-    close: true,
-    style: {
-      background: "linear-gradient(to right, #ff5f6d, #ffc371)",
-    }
-  }).showToast();
+Toastify({
+  text: "Highly customizable",
+  gravity: "bottom",
+  position: 'left',
+  close: true,
+  style: {
+    background: "linear-gradient(to right, #ff5f6d, #ffc371)",
+  }
+}).showToast();
 }, 3000);
 
 // Displaying toast on manual action `Try`
 document.getElementById("new-toast").addEventListener("click", function() {
-  Toastify({
-    text: "I am a toast",
-    duration: 3000,
-    close: i % 3 ? true : false,
-    style: {
-      background: bgColors[i % 2],
-    }
-  }).showToast();
-  i++;
+Toastify({
+  text: "I am a toast",
+  duration: 3000,
+  close: i % 3 ? true : false,
+  style: {
+    background: bgColors[i % 2],
+  }
+}).showToast();
+i++;
+});
+
+// Displaying toast on manual action `Try Sound`
+document.getElementById("new-toast-sound").addEventListener("click", function() {
+Toastify({
+  text: "I am a toast",
+  duration: 3000,
+  sound: {
+    default: true,
+    type: 'pop',
+    src: './sounds/alert.wav' // If having custom file
+  },
+  close: i % 3 ? true : false,
+  style: {
+    background: bgColors[i % 2],
+  }
+}).showToast();
+i++;
 });

index.html

@@ -6,11 +6,14 @@
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Toastify JS - Pure JavaScript Toast Notificaton Library</title>
-    <meta name="description" content="Toastify is a pure JavaScript library that lets you create notifications toasts/messages.">
+    <meta name="description"
+        content="Toastify is a pure JavaScript library that lets you create notifications toasts/messages.">
     <meta name="keywords" content="Javascript,Library,Toastify">
     <meta name="author" content="apvarun">
     <link rel="stylesheet" type="text/css" href="example/script.css">
     <link rel="stylesheet" type="text/css" href="src/toastify.css">
+    <!-- Prism plugin css -->
+    <link rel="stylesheet" type="text/css" href="src/plugin/prism/prism.css">
 </head>
 
 <body id="root">
@@ -21,29 +24,42 @@ <h1>Toastify JS</h1>
         <p>Better notification messages</p>
         <div class="buttons">
             <a href="#" id="new-toast" class="button">Try</a>
-            <a href="https://github.com/apvarun/toastify-js/blob/master/README.md" target="_blank" class="button">Docs</a>
+            <a href="#" id="new-toast-sound" class="button">Try with sound</a>
+            <a href="https://github.com/apvarun/toastify-js/blob/master/README.md" target="_blank"
+                class="button">Docs</a>
             <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="docs">
             <h2>Usage</h2>
-            <code>
-                <p>Toastify({</p>
-                <p class="pad-left">text: "This is a toast",</p>
-                <p class="pad-left">duration: 3000</p>
-                <p>}).showToast();</p>
-            </code>
+            <h4>Normal Toast</h4>
+            <iframe
+                src="https://carbon.now.sh/embed?bg=rgba%28255%2C255%2C255%2C1%29&t=seti&wt=none&l=auto&width=680&ds=false&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=7px&ph=12px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=Toastify%28%257B%250A%2520%2520%2520%2520text%253A%2520%2522This%2520is%2520a%2520toast%2522%252C%250A%2520%2520%2520%2520duration%253A%25203000%250A%257D%29.showToast%28%29%253B"
+                style="width: 283px; height: 185px; border:0; transform: scale(1); overflow:hidden;"
+                sandbox="allow-scripts allow-same-origin">
+            </iframe>
+
+            <h4>Sound Toast</h4>
+            <iframe
+                src="https://carbon.now.sh/embed?bg=rgba%28255%2C255%2C255%2C1%29&t=seti&wt=none&l=auto&width=680&ds=false&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=7px&ph=12px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=Toastify%28%257B%250A%2520%2520text%253A%2520%27I%2520am%2520a%2520toast%27%252C%250A%2520%2520duration%253A%25203000%252C%250A%2520%2520sound%253A%2520%257B%250A%2520%2520%2520%2520default%253A%2520true%252C%2520%252F%252F%2520Use%2520the%2520default%2520sound%2520%28set%2520to%2520false%2520if%2520a%2520custom%2520sound%2520file%2520is%2520provided%29%250A%2520%2520%2520%2520type%253A%2520%27bell%27%252C%2520%252F%252F%2520Specify%2520type%2520%255Bbell%252Calert%252Cpop%255D%250A%2520%2520%2520%2520src%253A%2520%27.%252Fsounds%252Falert.wav%27%252C%2520%252F%252F%2520Specify%2520the%2520source%2520file%2520for%2520the%2520custom%2520sound%2520%28make%2520sure%2520%27default%27%2520is%2520set%2520to%2520false%29%250A%2520%2520%257D%250A%257D%29.showToast%28%29"
+                style="width: 1024px; height: 274px; border:0; transform: scale(1); overflow:hidden;"
+                sandbox="allow-scripts allow-same-origin">
+            </iframe>
         </div>
         <div class="repo">
-            <iframe src="https://ghbtns.com/github-btn.html?user=apvarun&repo=toastify-js&type=star&count=true&size=large" frameborder="0"
-                scrolling="0" width="160px" height="30px"></iframe>
+            <iframe
+                src="https://ghbtns.com/github-btn.html?user=apvarun&repo=toastify-js&type=star&count=true&size=large"
+                frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
         </div>
-        <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEAIP2QI&placement=apvarungithubio" id="_carbonads_js"></script>
+        <script async type="text/javascript"
+            src="//cdn.carbonads.com/carbon.js?serve=CEAIP2QI&placement=apvarungithubio" id="_carbonads_js"></script>
     </div>
 </body>
 
 <script type="text/javascript" src="src/toastify.js"></script>
 <script type="text/javascript" src="example/script.js"></script>
+<!-- Prism plugin JS -->
+<script type="text/javascript" src="/src/plugin/prism/prism.js"></script>
 
 <script>
     (function (i, s, o, g, r, a, m) {
@@ -57,4 +73,4 @@ <h2>Usage</h2>
     ga('send', 'pageview');
 </script>
 
-</html>
+</html>