Skeets.toast NPM

skeets.toast

Make toast notifications with jQuery and Bootstrap

Install

npm install skeets.toast

Usage

The following are all equivalent:

 toast("hello world");
 toast({message:"hello world", type: "info"});
 toast({message:"hello world", type: "info", time: 3500, icon:"info", title=""});

Options

None of the following are required, but having at least a message or a title would probably be a good idea. ;)

message: the notification body text. Defaults to "". (you should probably have a message)

type: danger, warning, success, info (default)

title: Title text for the toast notification

time: Time (in thousanths of a second) before the toast disappears. Since there is an animation, anything under 1000 is not recommended. "0" disappears immediately, a negative number lasts forever. Default is 3500.

icon: font awesome icon to accompany message. Default depends on the type. "none" or "" will result in no icon.

forceIcon: If you change the type of an existing toast notification, the icon changes automatically to match it. Set this to true to avoid that behavior.

data: Optional data to store along side the notification.

Methods

Initialize:

var notification = toast({message: "hello world",...});

Or: (does the same thing)

var notification = new toast({message: "hello world",...});

Updating the toast:

notification.set("goodbye world");

Or:

notification.set({message: "goodbye world",...});

The same options are avaible for set as were available for Initialization.

Closing the notification:

notification.close();

Or:

notification.remove();

Reading the current state of notification:

if(notification.message === "hello world"){
  doSomethingAwesome();
}

CSS is not included in this package. Something like this would be good:

#toaster-notifications-container
{
  position  : fixed;
  bottom    : 50px;
  left      : 50px;
  max-width : calc(100% - 100px);
  width     : 600px;
  z-index   : 9999999;
}

.toaster-notification
{
  width    : 100%;
  display  : inline-block;
  position : relative;
}

.close-toaster-notification
{
  position : absolute;
  right    : 10px;
  top      : 10px;
  cursor   : pointer;
}

.toaster-notification-shell
{
  width : 100%;
}