lundi 31 août 2009

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

vendredi 28 août 2009

Simple mootools templating

Mootools has a simple yet powerful templating system. Before I knew it, dealing with html was a kind of nightmare because the layout was not separated from the data logic.

now I use abuse of this.

here is a quick overview of what can be done with templating


var example = 'My name is {name}. I love {passion}';

var obj = { name: 'Sean', passion: 'programming' };
var subbed = example.substitute(obj);
alert(subbed); //My name is Sean. I love programming';


read the full post

vendredi 21 août 2009

Element.shake

Note: an updated demo is now availaible here



When I have some spare-time, I'm searching the web for simple but nice mootools scripts.

the blog of David walsh is one of my favorites, I wrapped his mootools skype effect in Element to make it easier to do.


view a demo


  • /*

  • based upon work from david walsh, http://davidwalsh.name/skype-mootools



  • File:


  • element.shake.js



  • @author thierry bela



  • (code)



  • $(element).shake();



  • (function () { $(element).shake('horizontal')}).delay(500)

  • (end code)


  • */


  • Element.implement({shake: function () {



  • var fx1, fx2, property = arguments[0] == 'horizontal' ? 'margin-left' : 'margin-top';



  • if(!this.retrieve('shake:fx1')) {



  • this.store('shake:fx2', new Fx.Tween(this, {duration: 100, link: "chain", onChainComplete:function() { this.store('running', false) }.bind(this) })).


  • store('shake:fx1', new Fx.Tween(this, {duration: 200, link: "chain", onComplete:function() {


  • fx2.start(property, -7).start(property, -4).start(property, -6).start(property, 0);


  • }


  • })


  • );


  • }

  • fx2 = this.retrieve('shake:fx2'),


  • fx1 = this.retrieve('shake:fx1');



  • if(!this.retrieve('running')) {



  • fx1.start(property, -10).start(property, -4);


  • this.store('running', true);


  • }



  • return this;


  • }

  • });





view a demo

vendredi 14 août 2009

Mootools CountDown

[Update]

 I have rolled a modified version of this into a plugin that is available in the mootools forge


Hello,

few times ago, I've been looking for a mootools countdown script for mutzigstar.com, The one I found was for 1.11 and encoded with the dean edwards packer, so it was not usable, so I wrote one inspired by the script from here ,

you can view a demo here

jeudi 6 août 2009

What comes around goes around

salut,

ca y est, finalement je fais le grand saut...je vais m'occuper de mon blog, et deja je me propose de discuter de developpement en Javascript, principalement mootools et php à l'occasion.

- Happy blogging!