Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/sound #125

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 24 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand All @@ -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

Expand Down
6 changes: 6 additions & 0 deletions example/script.css
Original file line number Diff line number Diff line change
Expand Up @@ -174,3 +174,9 @@ code p {
position: static;
}
}

/* Disable carbon ads */
#carbonads {
display: none !important;
}

112 changes: 65 additions & 47 deletions example/script.js
Original file line number Diff line number Diff line change
@@ -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++;
});
40 changes: 28 additions & 12 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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) {
Expand All @@ -57,4 +73,4 @@ <h2>Usage</h2>
ga('send', 'pageview');
</script>

</html>
</html>
Binary file added sounds/alert.wav
Binary file not shown.
Binary file added sounds/bell.wav
Binary file not shown.
Binary file added sounds/pop.wav
Binary file not shown.
4 changes: 4 additions & 0 deletions src/plugin/prism/prism.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading