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.

download on GitHub

Works on modern browsers and IE10+

Installation & Usage

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.

Install via NPM

npm i egalink-toasty.js

Or you can download all ready-to-use files from here.

Link Files

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>

Usage

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!

Configuration

Configure the messages by overriding the default settings as shown below.

The defaults

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 it

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.

Public Methods

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

Creating Transitions

You can create new CSS3 transitions to show and hide each toast message.

Available CSS3 transitions list by default

fade (default transition)
slideLeftFade
slideLeftRightFade
slideRightFade
slideRightLeftFade
slideUpFade
slideUpDownFade
slideDownFade
slideDownUpFade
pinItUp
pinItDow

The CSS structure

/* 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; }
/* ------------------------------------------------------------------------- */

The new transition

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); }
/* ------------------------------------------------------------------------- */

Registering transition

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.");

Re-styling Toasts

You are allowed to re-stylize the messages as you need. Like a easily themeable plugin.

Have two options to re-styling

Replacing the CSS properties on the same default classes in the toasty.css file (preserving default CSS3 transitions in the plugin).
Creating new classes, properties and CSS3 transitions (default transitions in the plugin are lost).

In this example we will do everything by the long way (option 2).

The css structure

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 {}

Re-styled Toasts

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; }

The new Transition

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); }
/* ------------------------------------------------------------------------- */

Trying new config

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.");