AToaster

What is AToaster ?

AToaster is an Angular directive to show a simple toaster to give the user an information : success, error, warning, loading

Get it bower style

bower install a-toaster

Get it git style

git clone https://github.com/arca-computing/AToaster.git

Time to use it

Include files

If you are using bower and grunt, you can use wiredep to auto include dependencies in your html file. If you want to include files manually, add those two :

<script type="text/javascript" src="AToaster.min.js"></script>
<link rel="stylesheet" type="text/css" href="AToaster.css"/>

Add it to your angular app

var app = angular.module('myApp', ['AToaster']);

Add it to your angular controller

This service is used to call some functions. They will manage the communication with the directive.

app.controller('MyController', ['...', 'service.toaster', '...', function(..., toaster, ...){

Add it in your html

Add it in your html under your controller declaration - You can add it anywhere but it must be inside a controller declaration in html

<div ng-controller="MyController">
  <toaster-container/>
</div>

Pop it !

toaster.pop('success', 'Done', 'Image upload done', null);

toaster.pop('error', 'Server error', 'an error occurred on the server', null);

toaster.pop('wait', 'File uploading', 'upload in progress', 0);
    $timeout(function(){
      toaster.clearAndPop('success', 'File Uploading', 'file uploaded', null);
    }, 3000);

toaster.pop('warning', 'Server info', 'server maintenance from 1PM to 3PM', null);

How it works

pop function will pop and stack on top

toaster.pop(type, title, message, timeout);

clear will remove all toasts

toaster.clear();

clearAndPop will clear all toasts then pop the new one

toaster.clearAndPop(type, title, message, timeout);

Type : 'success' 'error' 'warning' 'wait'

Title and Message : heuuu title and message :)

Timeout : 0 -> infinite (nice for wait type), null -> default timeout, else timeout in milliseconds