coffeetoast

Toast made with Coffee!


Keywords
coffee, toast, coffeescript
License
MIT
Install
bower install coffeetoast

Documentation

CoffeeToast

Everybody likes toast right? Android got it right with the way it was implemented, a simple box positioned at the bottom of the window that would display some content to the user. Yet people of the web still haven't got this right. Until now! This plugins matches the Android implementation to make a nice & clean toast box for some content!

Can be installed through Bower!

bower install coffeetoast

n.b. Its called CoffeeToast because its made with CoffeeScript who'd of thought?!

Usage

Include the JavaScript file on your webpage.

<script src="../dist/js/CoffeeToast.js"></script>

And then create some new toast!

document.addEventListener("DOMContentLoaded", function () {
  var toast = new CoffeeToast("Well done! Task is done!", CoffeeToast.Bottom);

  setTimeout(function () {
    toast.show();
  }, 2000);
});

The CoffeeToast class takes 2 arguments, the first being the text you want to display and the second being the location. By default, it'll be positioned at the bottom. But changed the second argument to position it somewhere else!

The available positions are and are pretty self explanatory.

CoffeeToast.Top
CoffeeToast.Right
CoffeeToast.Bottom
CoffeeToast.Left

To show the created toast, run the show method. The show method can take 2 arguments. The first argument is the length of time to show the toast box and the second is whether to remove it from the DOM after it is hidden. By default the time is 1500ms and remove on hidden is false.

toast.show();
toast.show(CoffeeToast.Fast);
toast.show(CoffeToast.Slow, true);

There are two pre-configured speeds available.

CoffeeToast.Fast // 2500
CoffeeToast.Slow // 4000

Toasts will automatically hide when the timer has run out or when the user clicks on the element. However, you can remove it yourself with the hide method. This method takes one argument and that is whether to remove the toast when hidden. This is set to false by default.

toast.hide();
toast.hide(true);

Browser Support

It has been tested in all major browser and also in IE9+. IE9 doesn't do any fancy fading (Silly old browser!)