io-toaster

Invent One

Based on Toastr package

Check it out at toastr

Quick Start

One Easy Step

For other API calls, see the toastr demo.

1. import minified js and css files from dist/ directory

Basic Usage

node

import {IOToaster} from 'io-toaster';
 
// OR
 
const IOToaster = require('io-toaster').IOToaster;

browser

<!--
 1. Download library from gitlab repo
 2. Unzip and copy dist folder into your project
 3. link css and js files in dist/
-->
<link href="./RELATIVE_PATH/dist/io-toaster.min.css" type="text/css" rel="stylesheet">
<script src="./RELATIVE_PATH/dist/io-toaster.min.js" type="text/javascript"></script> 

Other Options

// Display an info toast with no title
IOToaster.info('Are you the 6 fingered man?')
// Display a warning toast, with no title
IOToaster.warning('My name is Inigo Montoya. You killed my father, prepare to die!')
 
// Display a success toast, with a title
IOToaster.success('Have fun storming the castle!', 'Miracle Max Says')
 
// Display an error toast, with a title
IOToaster.error('I do not think that word means what you think it means.', 'Inconceivable!')
 
// Immediately remove current toasts without using animation
IOToaster.remove()
 
// Remove current toasts using animation
IOToaster.clear()
 
// Override global options
IOToaster.success('We do have the Kapua suite available.', 'Turtle Bay Resort', {timeOut: 5000})

Escape HTML characters

In case you want to escape HTML characters in title and message

IOToaster.options.escapeHtml = true;

Close Button

Optionally enable a close button

IOToaster.options.closeButton = true;

Optionally override the close button's HTML.

IOToaster.options.closeHtml = '<button><i class="icon-off"></i></button>';

You can also override the CSS/LESS for #toast-container .toast-close-button

Optionally override the hide animation when the close button is clicked (falls back to hide configuration).

IOToaster.options.closeMethod = 'fadeOut';
IOToaster.options.closeDuration = 300;
IOToaster.options.closeEasing = 'swing';

Display Sequence

Show newest toast at bottom (top is default)

IOToaster.options.newestOnTop = false;

Callbacks

// Define a callback for when the toast is shown/hidden/clicked
IOToaster.options.onShown = function() { console.log('hello'); }
IOToaster.options.onHidden = function() { console.log('goodbye'); }
IOToaster.options.onclick = function() { console.log('clicked'); }
IOToaster.options.onCloseClick = function() { console.log('close button clicked'); }

Animation Options

IO Toaster will supply default animations, so you do not have to provide any of these settings. However you have the option to override the animations if you like.

Easings

Optionally override the animation easing to show or hide the toasts. Default is swing. swing and linear are built into jQuery.

IOToaster.options.showEasing = 'swing';
IOToaster.options.hideEasing = 'linear';
IOToaster.options.closeEasing = 'linear';

Using the jQuery Easing plugin (http://www.gsgd.co.uk/sandbox/jquery/easing/)

IOToaster.options.showEasing = 'easeOutBounce';
IOToaster.options.hideEasing = 'easeInBack';
IOToaster.options.closeEasing = 'easeInBack';

Animation Method

Use the jQuery show/hide method of your choice. These default to fadeIn/fadeOut. The methods fadeIn/fadeOut, slideDown/slideUp, and show/hide are built into jQuery.

IOToaster.options.showMethod = 'slideDown';
IOToaster.options.hideMethod = 'slideUp';
IOToaster.options.closeMethod = 'slideUp';

Prevent Duplicates

Rather than having identical toasts stack, set the preventDuplicates property to true. Duplicates are matched to the previous toast based on their message content.

IOToaster.options.preventDuplicates = true;

Timeouts

Control how IO Toaster interacts with users by setting timeouts appropriately. Timeouts can be disabled by setting them to 0.

IOToaster.options.timeOut = 30; // How long the toast will display without user interaction
IOToaster.options.extendedTimeOut = 60; // How long the toast will display after a user hovers over it

Progress Bar

Visually indicate how long before a toast expires.

IOToaster.options.progressBar = true;

rtl

Flip the IO Toaster to be displayed properly for right-to-left languages.

IOToaster.options.rtl = true;

Building IO Toaster

npm install -g gulp
npm install

At this point the dependencies have been installed and you can build IO Toaster

• Run the analytics gulp analyze
• Run the build gulp

Contributing

No contribution will be accepted on this project.

Authors

Invent One

Credits

Based on toastr

Copyright

Copyright © 2018