Mootools, évènements chainés
Ayant dédiés les deux dernières semaines à Mootools, je me suis décidé à vous écrire
afin de décrire quelques une des techniques simples que je viens de redécouvrir, elles vont
sont peut être déjà connues, si c’est le cas veuillez ne pas m’en vouloir.
Pour résumer, la première technique permet l’utilisation de méthodes statiques ou
d’objets statiques :
var ObjA = new Class({...}); ObjA.fct = function(){...}; ObjA.var = "val";
Tandis que la deuxième technique permet d’utiliser les chaines d’évènements afin de lier des
comportements successifs de nature différentes, sur des objets différents :
var classA = new Class({ Implements: [Chain, Events], initialise: function(element){ this.element = element this.other_element = element.appendChild(new Element('img')) //Initialise les évènements permettant d'enchainer et de réinitialiser les functions this.addEvent('init_completed:pause(100)', function(){this.callChain()}.bind(this)); this.addEvent('reinit:throttle(100)', function(){this.clearChain()}.bind(this)); //Initialisation des effets this.morph = new Fx.Morph(this.element, { link:'ignore', //Permet de controler l'enchainement onComplete: function(){this.callChain()}.bind(this) }) this.move_shutter.chain = this.chain; }, close: function(){ this.fireEvent('reinit'); this.chain( function(){ console.log('close_start'); this.morph.start({'bottom':[this.bottom_shutter, this.element.getHeight()]}) }.bind(this), function(){ this.element.removeChild(this.container); this.callChain(); }.bind(this) ); this.fireEvent('init_completed'); return this; }, open: function(){ this.fireEvent('reinit'); this.chain( function(){ console.log('open_start'); this.element.appendChild(this.container); this.callChain(); }.bind(this), function(){ this.container.fade('show'); //Cet effet est instantanné, //sinon, il ne pourrait être utilisé ici sans un wait this.callChain(); }.bind(this), function(){ //Utilisation d'un effet non prédéfini this.element.move({ duration:'long', transition:'bounce:out', offset:{x: 10, y: 100}, onComplete: function(){this.callChain()}.bind(this)}); }.bind(this) ); this.fireEvent('init_completed'); return this; } })
L’appel peut ensuite être effectué ainsi :
new ObjA().open().wait(3000).close(); //3000ms est non le temps attendu à la fin de l’animation, mais celui
//commencant juste après l’enregistrement des différentes fonctions ~10ms