Purr – MooTools notifications

Purr is an alert / notifications glass ala growl for the awesome MooTools JavaScript framework.

It is a work in progress.

Download (@GitHub)

Documentation (@GitHub)

Some Examples

//This code ran when this page loaded:
 
window.addEvent('domready', function(){
	// create an instance for simple examples
	var example = new Purr({
		'mode': 	'top',
		'position': 'center'
	});
	example.alert('Click on the code blocks below to see different examples of purr in action.<br/><br/>You can dismiss this message by clicking on it.', {
		'className': 'notice',
		'hideAfter': false
	});
});
example.alert('as simple as it gets.');
example.alert(['an array', 'will create', 'multiple alerts'], {
	'hideAfter': 3000
});
example.alert('a click will usually dismiss these, not this one though', {
	'clickDismiss': false
});
// add special classes
example.alert('an extra class added', {
	'className': 'success'
});
example.alert('an extra class added', {
	'className': 'error'
});
example.alert('an extra class added', {
	'className': 'notice'
});
example.alert('repeating highlight, every 2 seconds', {
	'hideAfter': 		15000, // show a little longer
	'highlightRepeat': 	2000
});
example.alert('no highlight on this one.', {
	'highlight': false
});
example.alert('no fancy fx on this one.', {
	'highlight': false,
	'fx': {
		'duration': 0
	}
});
example.alert('won\'t go away unless you click the button.', {
	'hideAfter': false,
	'buttons': [{
		'text': 	'go away',
		'callback':	function(element){
			example.fadeOut(element, true)
		}
	}]
});
example.alert('Please note that if you pass a button in, clickDismiss will be disabled, but the auto-hiding is still enabled unless you say otherwise.', {
	'className': 'notice'
});
// alert returns the element so you can do stuff to it.
example.alert('Big Pink Text!').setStyles({
	'font-size':	'36px',
	'color':		'#F0F'
})
// html works as well
example.alert('<img src="http://mootools.net/assets/images/mootools.png"/>');
example.alert('<object width="300" height="265"><param name="movie" value="http://www.youtube.com/v/-q9uLtzDId8&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/-q9uLtzDId8&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="265"></embed></object>', {
	'hideAfter': false,
	// you can have as many buttons / callbacks as you want
	// accepts an array of objects
	'buttons': [{
		'text':		'close',
		'callback':	function(element){
			example.fadeOut(element);
		}
	},{
		'text':		'replace video with cat',
		'callback':	function(element){
			new Element('img', {
				'src': '/wp-content/themes/lite-brite/trickyInc/images/cat.jpg'
			}).replaces(element.getElement('embed'));
			element.getElements('button')[1].destroy();
		}
	}]
});
var followMe = new Element('a', {
	'styles': {
		'display':'block',
		'text-align':'center'
	},
	'href': 'http://twitter.com/re5et',
	'target': '_blank'
}).grab(new Element('img', {
	'src': '/wp-content/themes/lite-brite/trickyInc/images/follow-me.png'
}));
 
// if you pass an element, it will be injected
example.alert(followMe);

The following will allow you to change the orientation of the notifications. Try some of the above again after changing the position.

// change example to bottom mode, position on left
example = new Purr({
	'mode': 	'bottom',
	'position':	'left'
});
example.alert("in 'mode': 'bottom', the notifications will be placed at the bottom of the page, and the oldest entries will be at the bottom", {
	'className': 'notice'
});
example.alert('I am on the bottom left!');
// change example to top mode, position on right
example = new Purr({
	'mode': 	'top',
	'position':	'right'
});
example.alert("in 'mode': 'top', the notifications will be placed at the top of the page, and the oldest entries will be at the top", {
	'className': 'notice'
});
example.alert('I am on the top right!');
// change example to bottom mode, position on right
example = new Purr({
	'mode': 	'bottom',
	'position':	'right'
});
example.alert("in 'mode': 'bottom', the notifications will be placed at the bottom of the page, and the oldest entries will be at the bottom", {
	'className': 'notice'
});
example.alert('I am on the bottom right!');
// change example to top mode, position on left
example = new Purr({
	'mode': 	'top',
	'position':	'left'
});
example.alert("in 'mode':'top', the notifications will be placed at the top of the page, and the oldest entries will be at the top", {
	'className': 'notice'
});
example.alert('I am on the top left!');
// change example bottom mode, position back in the center
example = new Purr({
	'mode': 	'bottom',
	'position':	'center'
});
example.alert("in 'mode': 'bottom', the notifications will be placed at the bottom of the page, and the oldest entries will be at the bottom", {
	'className': 'notice'
});
example.alert('I am on the bottom and centered!');

This is not yet in the MooTools Forge. It will be soon.

Download (@GitHub)

Documentation (@GitHub)