Link Files

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.

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

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