toolkit/exemples/relations/script.js
author Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
Fri, 18 Apr 2014 14:31:58 +0200
changeset 51 79833eaa394a
parent 47 c0b4a8b5a012
permissions -rw-r--r--
set up second level for navigation


// 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");
	});