--- /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