diff -r efd9c589177a -r c0b4a8b5a012 toolkit/exemples/relations/script.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/exemples/relations/script.js	Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,99 @@
+
+// Création de l'objet Relations
+var annuaire = new Relations();
+
+// Premier exemple : Coloriage
+
+var tableDessin = d3.select("#dessin tbody");
+var i = 0, j = 0, ligs = 1;
+
+function focus(objet) {
+	objet.style("opacity", 0.5);
+}
+
+function blur(objet) {
+	objet.style("opacity", 1);
+}
+
+var cell = null, ligne = tableDessin.select("tr");
+function ajouterCouleur(couleur) {
+	if (i==ligs) {
+		if (j==0) {
+			ligne = tableDessin.append("tr");
+		}
+
+		cell = ligne.append("td");
+		
+		if (++j==ligs) {
+			j = 0;
+			i = 0;
+			++ligs;
+		}
+	}
+	else {
+		tableDessin.selectAll("tr").each(function(d, index) {
+			if (index==i) {
+				cell = d3.select(this).append("td");
+			}
+		});
+		++i;
+	}
+
+	cell.style("background-color", couleur);
+	// on ajoute des actions en plus sur les boutons de couleur 
+	annuaire.add("cellule" + (ligs*ligs + i + j), cell)
+		.bindTo("mouseover", "bouton."+couleur, focus)
+		.bindTo("mouseout", "bouton."+couleur, blur);
+	//console.log("i : "+i+"; j : "+j+"; ligs : "+ligs);
+}
+
+// on enregistre les boutons de couleurs avec des actions pour ajouter une case
+// de couleur au tableau
+annuaire.add("bouton.red", d3.select("#couleurs .rouge"))
+	.click(function() { ajouterCouleur("red"); });
+annuaire.add("bouton.green", d3.select("#couleurs .vert"))
+	.click(function() { ajouterCouleur("green"); });
+annuaire.add("bouton.blue", d3.select("#couleurs .bleu"))
+	.click(function() { ajouterCouleur("blue"); });
+
+
+
+// Deuxième exemple : Piano
+
+// fonction pour colorier les touches
+function toucheAppuyee(touche) {
+	if (touche.classed("enfonce")) {
+		touche.classed("enfonce", false);
+	}
+	else {
+		touche.classed("enfonce", true);
+	}
+}
+
+// On enregistre les touches du piano (li) et on leur associe sur elles-mêmes
+// une action
+d3.selectAll("#piano li").each(function(datum, index) {
+	var item = d3.select(this);
+	annuaire.add("touche" + (index + 1), item).click(toucheAppuyee);
+});
+
+// On conditionne un bouton reset pour remettre en blanc toutes
+// les touches grâce à la méthode each
+var message = "";
+function resetBouton(objet, details) {
+	if (objet.classed("enfonce")) {
+		objet.classed("enfonce", false);
+		if (""!=message) {
+			message+= ",";
+		}
+		message+= details[1];
+	}
+}
+
+// On parcourt par une boucle each toutes les touches du piano
+annuaire.add("bouton.reset", d3.select("#piano button"))
+	.click(function() {
+		message = "";
+		annuaire.each("touche[[digit]]", resetBouton, true);
+		alert("les touches "+message+ " ont été relevées");
+	});
\ No newline at end of file