ngProphet

A very lean AngularJS directive to display toast messages on web pages. This project adheres to Semantic Versioning. Sometimes I do screw up though.

Version 1.0.0

Table of Contents

• Installation
  • Download
  • Install
• Usage
  • Simplest Display
  • Callback
  • Options
  • Custom Toast Types
• License

Installation

Get the files:

Choose any of the ways to get prophet:

• clone from github
• Install from bower

Find the files

You'll see the files in the dist folder:

dist
├── css
│   ├── ngProphet.css
│   └── ngProphet.min.css
└── js
    └── ngProphet.js

Wire it up

Include the css and js files in your webpage:

<link rel="stylesheet" href="dist/css/prophet.min.css">

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

<ul class="prophet"></ul>

Inject the directive in your angular module

angular.module('yourApp', ['ngProphet'])

API

ngProphet exposes a $message service. You should inject this service in whichever scope you need the toast messages to display. Optionally, ngProphet also exposes a configuration API via $messageProvider. If you want to customize the directive, you should do it via $messageProvider in Angular's configuration phase. More on that here Once the configuration part of your angular module is complete, you can then inject $message service in the dependency injections and use it to show the toast messages.

The toast message stays for a default duration of 4000 milliseconds or until the user clicks on it. After which, the toast message is removed from the DOM.

Simplest display

angular.module('yourApp',['ngProphet'])
    .controller('someCtrl', ['$message', function($message){
        $message.show("You're hella rad!");
    }])

Callback

You can also provide a callback to every toast message. The callback will be triggered after the toast message is removed automatically or when the user clicks on the toast message. The callback sends the autogenerated ID of the toast message (which can be overridden).

angular.module('yourApp',['ngProphet'])
    .controller('someCtrl', ['$message', function($message){
        $message.show("You're hella rad!", function(id){
            //do stuff after user clicks on the toast or when the the toast goes away
        });
    }])

Options

You can also optionally include a set of options as a second argument (followed by the callback if any ) on every toast message. If the values are not implemented, the default values take up. The following are the keys that options takes

• id The id is autogenerated per toast message.

  • default: auto-generated
  • Type: number

• type Prophet has 3 presets types: success, error and default. You can also set more presets. Click here to see how.

  

  • default: "default"
  • Type: string

• duration The time each toast message stays on the web page before disappearing. Takes value in miliseconds.

  • default: 4000
  • Type: number

• class You can further customize the look of every toast message by providing extra CSS classes to override. Takes a single string of class names seperated by spaces.

  • default: ""
  • Type: string

Example

angular.module('yourModule',['ngProphet'])
   .controller('someCtrl', ['$scope', '$message', function($scope, $message){
       $message.show("Dexter, what's that?", {
           type:'success',
           duration:8000,
           class:'thin-border transparent-10 glass'
           }, function(id){
           console.log(id);
           //do something else here after the user clicks on it
       })        
   }]) 

Custom Types

You can also add more presets by providing the background-color, color and type for more uses. Please note, all the keys are mandatory. Adding new presets must be done in the configuration phase of your angular application's life-cycle by triggering the ngProphet's $messageProvider API.

angular.module('yourApp',['ngProphet'])
    .config(['$messageProvider', function($messageProvider){
        $messageProvider.types([{
            "type":"flash",
            "backgroundColor":"grey",
            "color":"white"
        }, {
            "type":"processing",
            "backgroundColor":"#fafafa",
            "color":"grey"
        }])
        //$messageProvider.types() accepts a single object or an array of objects
    }])
    .controller('someCtrl', ['$scope', '$message', function($scope, $message){
            if($scope.processing) $message.show("Processing your transaction...", {type:'processing'})
            else $message.show('Done!', {duration:10000, type:"success"})
    }])
            

License

Open source under the MIT License. All rights reserved.