OLD | NEW |
1 <!-- | 1 <!-- |
2 | 2 |
3 This file contains definitions for both the summary-sk and details-sk | 3 This file contains definitions for both the summary-sk and details-sk |
4 elements. These elements operate just like the HTML 5 'details' and 'summary' | 4 elements. These elements operate just like the HTML 5 'details' and 'summary' |
5 elements, but these will work in all browsers, not just the browsers | 5 elements, but these will work in all browsers, not just the browsers |
6 that have decided to implement details/summary. See: | 6 that have decided to implement details/summary. See: |
7 | 7 |
8 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details | 8 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details |
9 | 9 |
10 --> | 10 --> |
(...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
66 <script> | 66 <script> |
67 Polymer({ | 67 Polymer({ |
68 is: "details-sk", | 68 is: "details-sk", |
69 | 69 |
70 properties: { | 70 properties: { |
71 open: { | 71 open: { |
72 type: Boolean, | 72 type: Boolean, |
73 value: false, | 73 value: false, |
74 reflectToAttribute: true, | 74 reflectToAttribute: true, |
75 observer: "_openChanged", | 75 observer: "_openChanged", |
| 76 notify:true, |
76 }, | 77 }, |
77 }, | 78 }, |
78 | 79 |
79 _openChanged: function() { | 80 _openChanged: function() { |
80 if (this.open) { | 81 if (this.open) { |
81 this.$.details.classList.remove("hidden"); | 82 this.$.details.classList.remove("hidden"); |
82 this.$.toggle.icon = "unfold-less"; | 83 this.$.toggle.icon = "unfold-less"; |
83 } else { | 84 } else { |
84 this.$.details.classList.add("hidden"); | 85 this.$.details.classList.add("hidden"); |
85 this.$.toggle.icon = "unfold-more"; | 86 this.$.toggle.icon = "unfold-more"; |
86 } | 87 } |
87 }, | 88 }, |
88 | 89 |
89 _toggle: function() { | 90 _toggle: function() { |
90 this.open = !this.open; | 91 this.open = !this.open; |
91 }, | 92 }, |
92 | 93 |
93 }); | 94 }); |
94 </script> | 95 </script> |
OLD | NEW |