OLD | NEW |
1 | 1 |
2 | 2 |
3 Polymer('paper-checkbox', { | 3 Polymer('paper-checkbox', { |
4 | 4 |
5 /** | 5 /** |
6 * Fired when the checked state changes due to user interaction. | 6 * Fired when the checked state changes due to user interaction. |
7 * | 7 * |
8 * @event change | 8 * @event change |
9 */ | 9 */ |
10 | 10 |
11 /** | 11 /** |
12 * Fired when the checked state changes. | 12 * Fired when the checked state changes. |
13 * | 13 * |
14 * @event core-change | 14 * @event core-change |
15 */ | 15 */ |
16 | 16 |
17 toggles: true, | 17 toggles: true, |
18 | 18 |
19 checkedChanged: function() { | 19 checkedChanged: function() { |
20 var cl = this.$.checkbox.classList; | 20 this.$.checkbox.classList.toggle('checked', this.checked); |
21 cl.toggle('checked', this.checked); | |
22 cl.toggle('unchecked', !this.checked); | |
23 cl.toggle('checkmark', !this.checked); | |
24 cl.toggle('box', this.checked); | |
25 this.setAttribute('aria-checked', this.checked ? 'true': 'false'); | 21 this.setAttribute('aria-checked', this.checked ? 'true': 'false'); |
| 22 this.$.checkmark.classList.toggle('hidden', !this.checked); |
26 this.fire('core-change'); | 23 this.fire('core-change'); |
27 }, | 24 }, |
28 | 25 |
29 checkboxAnimationEnd: function() { | 26 checkboxAnimationEnd: function() { |
30 var cl = this.$.checkbox.classList; | 27 var cl = this.$.checkmark.classList; |
31 cl.toggle('checkmark', this.checked && !cl.contains('checkmark')); | 28 cl.toggle('hidden', !this.checked && cl.contains('hidden')); |
32 cl.toggle('box', !this.checked && !cl.contains('box')); | |
33 } | 29 } |
34 | 30 |
35 }); | 31 }); |
36 | 32 |
OLD | NEW |