Archive

Posts Tagged ‘javascript’

Mootools, évènements chainés

mai 8th, 2012
1 comment

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

Author: Nicolas de Marqué Categories: Web Tags: ,

Utilisation de fonction sur un évènement

août 28th, 2008
No comments

Evènement dans le code HTML

Sur un évènement du dom, une méthode simple est de référencer directement dans le code html, l’attribut onevent à la balise que l’on veut rendre dynamique.

Exemple :

<input type="text" value="entrer" />

Cette méthode très avantageuse permet :

  • de passer des paramètres à la fonction destinataire
  • de garder la balise émettrice de l’appel

Ce qui n’est pas possible avec les fonctions dynamiques.

Evènements gérés de manière dynamique

Deux standards

Le premier standard est celui du dom, il est reconnu par firefox et opéra, et s’écrit sur la forme :

element.addEventListener(event, handler, typePropagation);

Le deuxième est celui d’IE :

element.attachEvent(event, handler)

A noter que event s’écrit avec IE en incluant le ‘on’ et sans dans le dom w3c (ie:onclick, dom:click).

Un explication détaillée peut être trouvée ici

Problématique

Dans une utilisation basique, nous perdons :

  • la capacité d’envoyé à la fonction d’autre variable que l’élément source.
  • l’élément sur lequel est inscrit la fonction (sous IE il est impossible de retrouver de manière simple cet élément)

Cherchant une utilisation cross-Browser nous nous retrouvons avec très peu d’information une fois l’évènement enclenché.

Solution

Il peut s’averer utile de transmettre des variables, il est tout aussi utile de connaitre l’origine de l’évènement qui est souvent plus intéressant que la balise qui l’a déclenché*.

l’utilisation de la fontion eval s’avère une solution :

function addEvent(element, action, fct, bool){
	if (element.addEventListener) {
		element.addEventListener(action, function(){eval(fct)}, bool);
	} else if (element.attachEvent) {
		element.attachEvent("on"+action, function(){eval(fct)});
	}
}
addEvent(
    document.getElementById('test'),
    'click',
    'alert(\''+document.getElementById('test').getAttribute('id')+'\');alert(new Date())',
    false
)

Balise Test

Voilà, avec cette méthode vous pouvez transmettre tout paramètre à vos évènements.

A noter que cela est aussi utilisable pour les handlers présent dans settimeout ou dans setintervalle.

*En effet, sous ces deux navigateurs, un évènement intégré dans une balise de niveau n serait reconnu par les balise de niveau n+m, et c’est la balise finale qui enverrais son identification et non la balise portant l’évènement. Avec IE, il n’existe pas de variable simple afin de récupérer cette balise, avec le dom, event.currentTarget permet de la connaitre.

Author: Nicolas de Marqué - Fromentin Categories: javascript Tags: , ,

Inclusion javascript - include javascript

mars 5th, 2008
No comments 
function include(url){
	if ( document.all ){
		var xml = new ActiveXObject("Microsoft.XMLHTTP");
		xml.Open( "GET", url, false );
		xml.Send()
		document.writeln(xml.responseText);
	}else{
		if ((location.host=='' &amp;&amp; url.indexOf(location.protocol)==-1) || url.indexOf(location.host)==-1){
			netscape.security.PrivilegeManager.enablePrivilege("UniversalConnect");
		}
		var dest = new java.net.URL(url);
		var dis = new java.io.DataInputStream(dest.openStream());
		var res = "";
		while ((line = dis.readLine()) != null){
			res += line + java.lang.System.getProperty("line.separator");
		}
		dis.close();
		document.writeln(res);
		return res;
	}
}
Author: Nicolas de Marqué - Fromentin Categories: Web, javascript Tags: ,