[Polymer] hover sur étoile notation
Bonjour,
Je suis en train d'apprendre Polymer.
J'essaie de créer un guest book avec une notation par étoile.
Je bloque justement sur la partie notation.
Pour l'instant lorsqu'un hover est effectué sur une étoile je rajoute un attribut à la cinquième étoile. Et cette attribut à l'aide de css se remplit de couleur.
Mais se tout se fait par "pur" javascript.
Voici le code
Code:
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
| <dom-module id="stars-hover">
<template>
<style>
iron-icon {
fill: rgba(0, 0, 0, 0);
stroke: currentcolor;
}
iron-icon[pressed] {
fill: currentcolor;
}
</style>
<h1>Stars hover</h1>
<div on-mouseleave="unfill">
<iron-icon on-mouseenter='toggle' id="stars-hover-one" icon="[[toggleIcon]]"></iron-icon>
<iron-icon on-mouseenter="toggle" id="stars-hover-two" icon="[[toggleIcon]]"></iron-icon>
<iron-icon on-mouseenter="toggle" id="stars-hover-three" icon="[[toggleIcon]]"></iron-icon>
<iron-icon on-mouseenter="toggle" id="stars-hover-four" icon="[[toggleIcon]]"></iron-icon>
<iron-icon on-mouseenter="toggle" id="stars-hover-five" icon="[[toggleIcon]]"></iron-icon>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'stars-hover',
properties: {
toggleIcon: {
type: String,
value: "icons:star"
}
},
toggle: function (e) {
var index_five = "stars-hover-five");
index_five.setAttribute("pressed", "");
},
unfill: function () {
var index_five = document.getElementById("stars-hover-five");
index_five.removeAttribute("pressed");
}
});
</script> |
Dans le toggle j'utilise
Code:
document.getElementById(
. Et j'ai le sentiment que ce n'est pas dans la façon de faire de Polymer.
Je ne vois pas trop comment gérer ceci. Peut-être utiliser reflecToAttribute le "this.$" ?
Je ne suis absolument pas sûr et un peu d'aide serait la bienvenue.
En vous remerciant d'avance de votre aide.
