bark-notifications

- jQuery - transit

A super dynamic, 17kb notification system.

  • node.js
  • browserify
  • For any animation documentation, see transit
  • Alerts
  • Confirmations - customized anyway you want
  • Growl-like notifications
  • View states

Registers a new notification

 
//this will add a sort of "puff" alert 
Bark.
register("alert"). 
defaults({ ok: "OK" }). //set the default OK message 
modalClass("alert-modal"). //the background color for the alerts. Makes content unclickable. 
transitionIn({ scale: 0.75, opacity: 1}, { scale: 1, opacity: 1}). //scale from -> to on transition in 
transitionOut({ scale: 1, opacity: 1 }, { scale: 1.25, opacity: 0}). //puff out 
template($("[data-templateName='alert']").html());
 

Somewhere in your html <head />:

<script type="text/ejs" data-templateName="alert">
    <div class="alert">
        <div><%-message %></div>
        <a href="#" class="alert-ok close" data-name="ok"><%-ok %></a>
    </div>
</script> 
 

Now run your new alert:

Bark.alert("hello world!", function(event) {
    if(event.ok) {
        //do stuff 
    }
});

Bark allows you to customize notifications individually. Here's an example using are alert system above:

 
//closes the window after 5 seconds if the user hasn't clicked the "OK" button 
Bark.alert({ closeAfterTime: 5000, message: "You have mail" }, function() {
    
});

Displays a notification.

Bark.create().template("myTemplate").display("hello world!", function() {
    
});

Sets the transition-in animation properties

  • from - css properties
  • to - css properties
  • easing - css transit docs

Sets the transition-out animation properties.

Page layout options

  • options
    • center - if set to true, the all notifications will be placed in the center of the screen
    • right - make the notifications right-bound
    • top - top bound in pixels
    • bottom - --
    • left - --
    • width - width of the notifications container

Sets the class name of the background for the notifications. Set this property if you want to disable everything except notifications.

Sets the maximum number of notifications that are allowed to be displayed simultaneously.

For growl-like notifications, this number should be set the greater than 1. For alert-like notifications, this number should be set to 1.

Closes the notifications after the given duration (in milliseconds). Use this for growl-like notifications.