KnockoutJS-Toaster

KnockoutJS Toaster is a simple toast notification library built on top of Knockout.js 3.2 components. It is easy to use, custom element, small size, independent module and extensible. Jquery is not required.

Current Version 0.1.0

Demo

http://plnkr.co/edit/M7VVxt

Getting started

Link scripts:

<link href="css/toaster.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js" ></script>
<script src="js/toaster.js"></script>

Add toaster custom element:

<toast-container params='toasts: toaster.toasts'> </toast-container>  <!-- supply toasts from toaster to toast-container must required -->

Add toaster custom element with default options overridden:

<toast-container params='
                     timeout: 5000,
                     showClose: false,
                     limit: 5,
                     toasts: toaster.toasts'>
</toast-container>

Usage

Use toaster methods such as success, error, note, info, wait and warning to display different toast types. For example, write below JS code to display success toast in button click event handler.

	// Display a Success toast with title and onClick options
            toaster.success({
                title: "Success!",
                msg: 'Click to change me.',
                timeout: 0,
                showClose: false,
                onClick:  {
                    title : 'Well done!',
                    msg : 'Closing in 4 seconds.',
                    timeout : 4000
                }
            });

Options

Key	Default	Values	Description
limit	`10`	Integer	Limits maximum number of toasts displayed on page, set to 0 for unlimited toasts
showClose	`true`	Boolean	Show/hide close button in toast
clickToClose	`false`	Boolean	Enable or Disable click to close
pushTo	`top`	`top`, `bottom`	Position where new toasts are pushed to, either top or bottom in array
timeout	`3000`	Integer or `0`	How long to show the toast for in ms, set to 0 for indefinite.
position	`top-right`	`top-right`, `top-left`, `bottom-right`,`bottom-left`	Position in the page where toasts are to be displayed

Other Options

Key/Method	Values	Description
title	String	Title to be displayed in the toast
msg	String	Toast message
img	String	Image url to be displayed in the toast
waittimeout	Integer	Waiting time for toast to change its content. (required when onAdd option is used)
onAdd	Object	The toast type and content will change after waittimeout seconds.
type	`success`, `warning`, `info`, `error`,`wait`, `note`	Change the toast type when onAdd or onClick option is used.
onClick	String	The toast type and content will change after clicking on toast
clear()	function	To clear or remove all toasts

Animations

This library relies on CSS3 transformations for animations.

Known Issues

No callback on toast close in page view modal

Future enhancements

Callback events such as before or after closing toasts etc
Fully accessible via keyboard, for example closing of all toasts on ESC key
Auto-height and width based on the size attributes (to use, omit the height property in your CSS!)
If Toast message text is more, then show or hide entire text based on mouseover or mouseout events

Author

Shailendra Kumar

Credits

Inspired by http://plnkr.co/edit/HKTC1a

Copyright

License

KnockoutJS-Toaster is under MIT license - http://www.opensource.org/licenses/mit-license.php

jafin / knockoutjs-toaster Goto Github PK

knockoutjs-toaster's Introduction