Discussion :

[Arnaud F.]

Bonjour,

j'ai une question somme toute assez bête mais je suis sûr que vous avez une meilleure vue sur le JS, l'API prototype et ses possibilités que moi.

Je souhaiterai implémenter un simili-pattern 'Observateur'.

Pour ceux qui ne le connaissent pas, il s'agit d'observer un évènement et d'agir en conséquence s'il est déclenché.

Pour base, j'ai un tableau de couleurs :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

colors = $A('#000000', '#C0C0C0', '#FFFFFF');

Dans mon code, j'ai des tables, chacune de ces cellules utilisent des couleurs initialisées dans le tableau 'colors'.

(en rajoutant un attribut personnalisé à l'élément cellule).

Est-il possible de mettre automatiquement à jour ces cellules si l'un des couleurs du tableau color change?

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<table>
<tr>
	<td id='cell1'>&nbsp;</td>
	<td id='cell2'>&nbsp;</td>
	<td id='cell3'>&nbsp;</td>
</tr>
</table>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
//
$('cell1').idcolor = 0;
$('cell2').idcolor = 1;
$('cell3').idcolor = 2;
 
$$('td').each(function(td) {
	td.setStyle('background-color', colors[td.idcolor]);
});
 
// Si je fais :
colors[0] = '#FFFFFF';

Sur ma dernière instruction, je voudrais donc que 'cell1' se mette automatiquement à jour.

C'est possible (avec un addEventListener) ou autre ?


Autre question, faire l'inverse, c'est possible? A savoir, si je change l'ID, la cellule repointe automatiquement vers la bonne couleur?

[gwyohm]

Salut,

Tu peux effectivement lancer tes propres événements (element.fire), mais je doute que tu parviennes à tes fins...
Je pense qu'il va falloir que tu passes par des méthodes : créer une classe qui stocke des valeurs, forcer à passer par une méthode pour changer une valeur, et passer par une méthode pour "abonner" un element à un index de valeur...
ex:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<script type="text/javascript">
// Class générique
var BaseValueHolder = Class.create( {
  initialize : function(valuesArray) {
    this.values = valuesArray;
    this.registered = [];
    for(var i=0;i<this.values.length; i++) {
    	this.registered[i] = [];
    }
  },
 
  getEventName : function(index) {
    return "custom:" + typeof(this) + index
  },
 
  setValue : function(index, newValue) {
    this.values[index] = newValue;
    this.registered[index].each( function(elem) {
    	this.updateValue(elem, this.values[index]);
    }, this);
  },
 
  registerElement : function(element, index, setValue) {
  	setValue = setValue !== false;
	if(setValue) {
		this.updateValue(element, this.values[index]);
	}
	this.registered[index].push(element)
  }
} );
 
// Class qui gère le background-color
var BgColorValueHolder = Class.create(BaseValueHolder, {
	updateValue : function(elem, val) {
		elem.setStyle({backgroundColor: val});
	}
});
 
// Class qui gère la couleur
var ColorValueHolder = Class.create(BaseValueHolder, {
	updateValue : function(elem, val) {
		elem.setStyle({color: val});
	}
});
</script>
 
<div style="width:100px;height:100px;margin:10px;float:left" id="elem1">
elem1
</div>
<div style="width:100px;height:100px;margin:10px;float:left" id="elem2">
elem2
</div>
<div style="width:100px;height:100px;margin:10px;float:left" id="elem3">
elem3
</div>
<div style="width:100px;height:100px;margin:10px;float:left" id="elem4">
elem4
</div>
<script type="text/javascript">
	var _bgcolor = new BgColorValueHolder(["#ff0000","#00ff00","#0000ff"]);
	var _color = new ColorValueHolder(["#ff0000","#00ff00","#0000ff"]);
	_bgcolor.registerElement($("elem1"), 0);
	_bgcolor.registerElement($("elem2"), 1);
	_bgcolor.registerElement($("elem3"), 2);
	_bgcolor.registerElement($("elem4"), 0, false);
 
 
$("elem1").observe("click", function() {
	_bgcolor.setValue(0, "#ff00ff");
});
</script>

Après tu peux étendre Element, pour ajouter une méthode qui enregistre, ca te permet de chainer tes actions :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
Element.addMethods( {
	registerToValueHandler : function(element, valueHandler, index, donNotApply) {
		element = $(element);
		valueHandler.registerElement(element, index, donNotApply);
		return element;
	}
});
$("elem1").registerToValueHandler(_color, 1);
$("elem2").registerToValueHandler(_color, 2);
$("elem3").registerToValueHandler(_color, 0);
$("elem4").registerToValueHandler(_color, 1, false);
 
$("elem2").observe("click", function() {
	_color.setValue(1, "gold");
});
 
</script>

[Arnaud F.]

Salut,

merci de ta réponse.

Pourquoi ne penses-tu pas que element.fire fasse l'affaire?

[gwyohm]

Seuls Element et document peuvent envoyer des éléments via fire.
Danbs ton cas, c'est plutot l'objet qui contient la couleur qui devrait le faire. Alors il faudrai que l'evenement passe par le document, mais dans ce cas, l'événement ne va pas remonter jusqu'à l'element...

Est-ce que je suis clair ?

[Arnaud F.]

Oui c'est clair, c'est le tableau de couleur qui devrait faire le "fire", pour signaler que son contenu a changer, mais vu que ce n'est ni un élément, ni un document, ça n'est pas possible.

Par contre, pour la seconde partie de ma question, à savoir l'inverse est-il possible?

Si je change mon attribut idcolor, qu'il recherche "automatiquement" la couleur associée au nouvel ID, c'est possible ça?

[gwyohm]

Si tu utilises mon code exemple, il faut que tu ajoutes quelques méthodes dont une qui serait :
changeElementValueHandler, qui se chargerait de retrouver l'element dans la liste où il se trouve, de le supprimer et de le réinscrire dans la nouvelle.

Si tu es resté sur ton principe initial, le plus simple est de passer par une méthode pour définir la propriété idcolor. Tu pourras ainsi jouer plus de code.

[Arnaud F.]

Je vais réfléchir à tout ça ce WE