A simple mootools notification system

it is similar to the one found on twitter, i'll not play well in IE6 because it does not handle the position:fixed css style.

jump to the demo

the css


.notify {

cursor: pointer;
z-index: 59999;
position: fixed;
left: 0;
width: 100%;
font-weight: bold;
font-size: 12px;
color:#5c92c6;
background-color: #fbf1a4;
border: 1px solid #ccc;
display: inline-block;
padding: 3px 5px 3px;
}

the timer


//From prototype.js
var PeriodicalExecuter = new Class({

initialize: function(callback, frequency) {

this.callback = callback;
this.frequency = frequency;
this.currentlyExecuting = false;

this.registerCallback();
},

registerCallback: function() {

this.stop();
this.timer = setInterval(this.onTimerEvent.bind(this), this.frequency * 1000);
return this;
},

execute: function() {

this.callback(this);
return this;
},

stop: function() {

if (!this.timer) return this;
clearInterval(this.timer);
this.timer = null;
return this;
},

onTimerEvent: function() {

if (!this.currentlyExecuting) {

try {

this.currentlyExecuting = true;
this.execute();
} finally {

this.currentlyExecuting = false;
}
}

return this;
}
});


the notifier


var Notifier = new Class({

Implements: Options,
queue: [],
options: {

duration: 5000,
location: 'top'
},
initialize: function (options) {

this.setOptions(options);
this.timer = new PeriodicalExecuter(this.display.bind(this), 1).stop();
},
notify: function (message) {

var queue = this.queue;

switch($type(message)) {

case 'array':

message.each(function (m) { queue.push(m) });
break;
case 'object':
default:

queue.push(message);
break;
}

if(!this.timer.currentlyExecuting) this.timer.registerCallback();

return this
},
display: function (pe) {

var queue = this.queue;

//the queue is empty, stop execution
if(queue.length == 0) {

pe.stop();
return this
}

//no notification currently displayed
if(!this.notifier) {

var p = queue.shift(),
options = $merge(this.options, p.options),
notifier = null,
chain = function () { delete this.notifier; notifier.destroy(); }.bind(this),
clean = function () {
notifier.set('tween', {onComplete: chain}).tween('opacity', 0)
};

//empty
if(!p.message) return this;

//show message
notifier = this.notifier = new Element('div', {"class": "notify", events: {click: clean}, styles: {opacity : 0}, html: p.message}).
setStyle(options.location, 0).inject(document.body, 'top').
set('tween', {link: 'cancel', onComplete: function () { setTimeout(clean, options.duration) }}).tween('opacity', 1);
}

return this
}
});


Usage:


window.addEvent('domready', function () {

//messages
var queue = [{message: 'this is the firt text, will disappear in 5s or now if you click'}, {message: 'this is the second text with a duration of 10s, you can wait or click to remove', options: {duration: 10000}}, {message: 'this notification is located at the bottom', options: {location: 'bottom'}}];

new Notifier().notify(queue).notify({message: 'last message'});
});

jump to the demo