Toasty.js
A minimal JavaScript notification plugin that provides a simple way to display customizable toast messages on the web page with CSS3 transition effects.
Works on modern browsers and IE10+
Following the steps below you will be able to get the plugin up and running.
If you notice any bugs, please post them to
GitHub issues.
npm i egalink-toasty.js
Or you can download all ready-to-use files from here.
All ready-to-use files are located in the dist/ directory.
<!-- put these into the <head> of your HTML -->
<link href="dist/toasty.min.css" rel="stylesheet">
<script src="dist/toasty.min.js"></script>
Simply make a plugin instance and then create a message using any of the following methods:
// put this right in your main.js file:
var toast = new Toasty();
// this show an informational message:
toast.info("Here is some information!");
// show a successful message:
toast.success("You did something good!");
// show a warning message:
toast.warning("Warning! Do not proceed any further!");
// and this a error message:
toast.error("Something terrible happened!");
a message will appear in your web application!
Configure the messages by overriding the default settings as shown below.
var options = {
// STRING: main class name used to styling each toast message with CSS:
// .... IMPORTANT NOTE:
// .... if you change this, the configuration consider that you´re
// .... re-stylized the plug-in and default toast styles, including CSS3 transitions are lost.
classname: "toast",
// STRING: name of the CSS transition that will be used to show and hide all toast by default:
transition: "fade",
// BOOLEAN: specifies the way in which the toasts will be inserted in the HTML code:
// .... Set to BOOLEAN TRUE and the toast messages will be inserted before those already generated toasts.
// .... Set to BOOLEAN FALSE otherwise.
insertBefore: true,
// INTEGER: duration that the toast will be displayed in milliseconds:
// .... Default value is set to 4000 (4 seconds).
// .... If it set to 0, the duration for each toast is calculated by text-message length.
duration: 4000,
// BOOLEAN: enable or disable toast sounds:
// .... Set to BOOLEAN TRUE - to enable toast sounds.
// .... Set to BOOLEAN FALSE - otherwise.
// NOTE: this is not supported by mobile devices.
enableSounds: false,
// BOOLEAN: enable or disable auto hiding on toast messages:
// .... Set to BOOLEAN TRUE - to enable auto hiding.
// .... Set to BOOLEAN FALSE - disable auto hiding. Instead the user must click on toast message to close it.
autoClose: true,
// BOOLEAN: enable or disable the progressbar:
// .... Set to BOOLEAN TRUE - enable the progressbar only if the autoClose option value is set to BOOLEAN TRUE.
// .... Set to BOOLEAN FALSE - disable the progressbar.
progressBar: false,
// IMPORTANT: mobile browsers does not support this feature!
// Yep, support custom sounds for each toast message when are shown if the
// enableSounds option value is set to BOOLEAN TRUE:
// NOTE: the paths must point from the project's root folder.
sounds: {
// path to sound for informational message:
info: "./dist/sounds/info/1.mp3",
// path to sound for successfull message:
success: "./dist/sounds/success/1.mp3",
// path to sound for warn message:
warning: "./dist/sounds/warning/1.mp3",
// path to sound for error message:
error: "./dist/sounds/error/1.mp3",
},
// callback:
// onShow function will be fired when a toast message appears.
onShow: function (type) {},
// callback:
// onHide function will be fired when a toast message disappears.
onHide: function (type) {},
// the placement where prepend the toast container:
prependTo: document.body.childNodes[0]
};
// more js code...
Configure the plugin by passing any of these options as parameter in:
// using the main Toasty function:
var toast = new Toasty(options);
// or this public method:
toast.configure(options);
now, the plugin has been configured.
List of available public methods:
// the main Toasty function:
var toast = new Toasty(options);
// configure the plugin after be instantiated:
toast.configure(options);
// register a new transition for the plugin:
toast.transition(name);
// show an informational message:
toast.info(message, duration);
// show a successful message:
toast.success(message, duration);
// show a warning message:
toast.warning(message, duration);
// and this a error message:
toast.error(message, duration);
You can create new CSS3 transitions to show and hide each toast message.
/* Note that the "transition" property
* must be present in the main class. */
/* each toast message gets this style: */
.toast {
transition: 0.32s all ease-in-out;
}
/* a [fade] transition (DEFAULT TRANSITION IN THE PLUGIN): */
.toast-container--fade {
right: 0;
bottom: 0;
}
.toast-container--fade .toast-wrapper { display: inline-block; }
.toast.fade-init { opacity: 0; }
.toast.fade-show { opacity: 1; }
.toast.fade-hide { opacity: 0; }
/* ------------------------------------------------------------------------- */
Based on the previous css structure, you can create a new CSS3 transition as follows:
/* Note that the "transition" property
* must be present in the main class. */
/* each toast message gets this style: */
.toast {
transition: 0.32s all ease-in-out;
}
/* a [scale] transition: */
.toast-container--scale {
right: 0;
bottom: 0;
}
.toast-container--scale .toast-wrapper { display: inline-block; }
.toast.scale-init { opacity: 0; transform: scale(0); }
.toast.scale-show { opacity: 1; transform: scale(1); }
.toast.scale-hide { opacity: 0; transform: scale(0); }
/* ------------------------------------------------------------------------- */
now, you able to register the new transition in plugin:
// the main Toasty function:
var toast = new Toasty();
// register the new CSS transition that will be used
// to show and hide the toast:
toast.transition("scale");
// and run the first message with this new transition:
toast.info("You have been registred a new scale transition correctly.");
You are allowed to re-stylize the messages as you need. Like a easily themeable plugin.
In this example we will do everything by the long way (option 2).
Required CSS properties are written in each corresponding class:
/* the main container: */
.toast-container {
position: fixed;
z-index: 999999;
pointer-events: none;
}
/* the wrapper where the toast messages appends: */
.toast-container .toast-wrapper {
position: relative;
}
/* the class that is assigned to the sound player. */
/* Normally, this is a hidden wildcard: */
.toast-container .toast-soundplayer {
display: none;
visibility: hidden;
}
/**
* Toast messages styles:
* -------------------------------------------------- */
/* each toast message gets this style: */
.toast {
position: relative;
pointer-events: none;
-webkit-transition: all 0.32s ease-in-out;
-moz-transition: all 0.32s ease-in-out;
-ms-transition: all 0.32s ease-in-out;
-o-transition: all 0.32s ease-in-out;
transition: all 0.32s ease-in-out;
}
/* informational toast class: */
.toast--info {}
/* successful toast class: */
.toast--success {}
/* warning toast class: */
.toast--warning {}
/* error toast class: */
.toast--error {}
/* this class is assigned to each toast message when autoClose
* plugin option is set to BOOLEAN false. */
/* Normally, this is a pointer events handler:*/
.toast.close-on-click {
cursor: pointer;
pointer-events: auto;
}
/**
* Progress bar styles:
* -------------------------------------------------- */
/* each progress bar gets this style: */
.toast-progressbar {
-webkit-transition: width 0s ease;
-moz-transition: width 0s ease;
-ms-transition: width 0s ease;
-o-transition: width 0s ease;
transition: width 0s ease;
}
/* progress bar color for each toast type: */
.toast-progressbar--info {}
.toast-progressbar--success {}
.toast-progressbar--warning {}
.toast-progressbar--error {}
Based on the previous CSS structure, then the plugin could be re-stylized as follows:
/* the main container: */
.alert-container {
position: fixed;
z-index: 999999;
pointer-events: none;
background-color: rgba(255,255,255, 0.32);
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
}
/* the wrapper where the toast messages appends: */
.alert-container .alert-wrapper {
position: relative;
display: inline-block;
margin: 0 auto;
}
/* the class that is assigned to the sound player. */
/* Normally, this is a hidden wildcard: */
.alert-container .alert-soundplayer {
display: none;
visibility: hidden;
}
/**
* Toast messages styles:
* -------------------------------------------------- */
/* each toast message gets this style: */
.alert {
position: relative;
pointer-events: none;
-webkit-transition: all 0.32s ease-in-out;
-moz-transition: all 0.32s ease-in-out;
-ms-transition: all 0.32s ease-in-out;
-o-transition: all 0.32s ease-in-out;
transition: all 0.32s ease-in-out;
display: block;
margin: 4% auto 0 auto;
padding: 2em 2em;
background-color: #fff;
color: #505050;
max-width: 100%;
font-size: 1.25em;
overflow: hidden;
border-radius: 6px;
box-shadow: 1px 1px 12px 2px rgba(0,0,0, 0.32);
}
/* informational toast class: */
.alert--info { color: #31708F; }
/* successful toast class: */
.alert--success { color: #3C763D; }
/* warning toast class: */
.alert--warning { color: #8A6D3B; }
/* error toast class: */
.alert--error { color: #A94442; }
/* this class is assigned to each toast message when autoClose
* plugin option is set to BOOLEAN false. */
/* Normally, this is a pointer events handler:*/
.alert.close-on-click {
cursor: pointer;
pointer-events: auto;
}
/**
* Progress bar styles:
* -------------------------------------------------- */
/* each progress bar gets this style: */
.alert-progressbar {
-webkit-transition: width 0s ease;
-moz-transition: width 0s ease;
-ms-transition: width 0s ease;
-o-transition: width 0s ease;
transition: width 0s ease;
position: absolute;
height: 4px;
width: 0%;
left: 0px;
bottom: 0px;
opacity: 0.5;
}
/* progress bar color for each toast type: */
.alert-progressbar--info { background-color: #91C5F2; }
.alert-progressbar--success { background-color: #A6CA8A; }
.alert-progressbar--warning { background-color: #F2C779; }
.alert-progressbar--error { background-color: #F5ACA6; }
We will use the same transition created in the section Creating Transitions.
/* Note that the "transition" property
* must be present in the main class. */
/* each toast message gets this style: */
.alert {
transition: 0.32s all ease-in-out;
}
/* a [scale] transition: */
.alert-container--scale {
right: 0;
bottom: 0;
}
.alert-container--scale .alert-wrapper { display: inline-block; }
.alert.scale-init { opacity: 0; transform: scale(0); }
.alert.scale-show { opacity: 1; transform: scale(1); }
.alert.scale-hide { opacity: 0; transform: scale(0); }
/* ------------------------------------------------------------------------- */
Now, you must configure the plugin to attach new CSS styles:
// the main Toasty function:
var toast = new Toasty({
// STRING: main class name used to styling each toast message with CSS:
// .... IMPORTANT NOTE:
// .... if you change this, the configuration consider that you´re
// .... re-stylized the plugin and default toast styles, including css3 transitions are lost.
classname: "alert",
// STRING: name of the CSS transition that will be used to show and hide all toast by default:
transition: "scale",
// BOOLEAN: specifies the way in which the toasts will be inserted in the html code:
// .... Set to BOOLEAN TRUE and the toast messages will be inserted before those already generated toasts.
// .... Set to BOOLEAN FALSE otherwise.
insertBefore: false,
// BOOLEAN: enable or disable the progressbar:
// .... Set to BOOLEAN TRUE - enable the progressbar only if the autoClose option value is set to BOOLEAN TRUE.
// .... Set to BOOLEAN FALSE - disable the progressbar.
progressBar: true,
// BOOLEAN: enable or disable toast sounds:
// .... Set to BOOLEAN TRUE - to enable toast sounds.
// .... Set to BOOLEAN FALSE - otherwise.
// NOTE: this is not supported by mobile devices.
enableSounds: false
});
// register the new transition:
toast.transition("scale");
// and run the first message with this re-styling:
toast.info("The toast messages have been re-stylized correctly.");