OLD | NEW |
1 <!-- | 1 <!-- |
2 @license | 2 @license |
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
7 Code distributed by Google as part of the polymer project is also | 7 Code distributed by Google as part of the polymer project is also |
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
9 --> | 9 --> |
10 | 10 |
(...skipping 25 matching lines...) Expand all Loading... |
36 border: 1px solid #dedede; | 36 border: 1px solid #dedede; |
37 } | 37 } |
38 </style> | 38 </style> |
39 | 39 |
40 <iron-collapse> | 40 <iron-collapse> |
41 <div class="collapse-content"> | 41 <div class="collapse-content"> |
42 <div>Content goes here...</div> | 42 <div>Content goes here...</div> |
43 </div> | 43 </div> |
44 </iron-collapse> | 44 </iron-collapse> |
45 | 45 |
46 @group Polymer Core Elements | 46 @group Iron Elements |
| 47 @hero hero.svg |
| 48 @demo demo/index.html |
47 @element iron-collapse | 49 @element iron-collapse |
48 --> | 50 --> |
49 | 51 |
50 <dom-module id="iron-collapse"> | 52 <dom-module id="iron-collapse"> |
51 | 53 |
52 <style> | 54 <style> |
53 | 55 |
54 :host { | 56 :host { |
55 display: block; | 57 display: block; |
56 transition-duration: 300ms; | 58 transition-duration: 300ms; |
(...skipping 22 matching lines...) Expand all Loading... |
79 Polymer({ | 81 Polymer({ |
80 | 82 |
81 is: 'iron-collapse', | 83 is: 'iron-collapse', |
82 | 84 |
83 properties: { | 85 properties: { |
84 | 86 |
85 /** | 87 /** |
86 * If true, the orientation is horizontal; otherwise is vertical. | 88 * If true, the orientation is horizontal; otherwise is vertical. |
87 * | 89 * |
88 * @attribute horizontal | 90 * @attribute horizontal |
89 * @type Boolean | |
90 * @default false | |
91 */ | 91 */ |
92 horizontal: { | 92 horizontal: { |
93 type: Boolean, | 93 type: Boolean, |
94 value: false, | 94 value: false, |
95 observer: 'horizontalChanged' | 95 observer: '_horizontalChanged' |
96 }, | 96 }, |
97 | 97 |
98 /** | 98 /** |
99 * Set opened to true to show the collapse element and to false to hide it
. | 99 * Set opened to true to show the collapse element and to false to hide it
. |
100 * | 100 * |
101 * @attribute opened | 101 * @attribute opened |
102 * @type Boolean | |
103 * @default false | |
104 */ | 102 */ |
105 opened: { | 103 opened: { |
106 type: Boolean, | 104 type: Boolean, |
107 value: false, | 105 value: false, |
108 notify: true, | 106 notify: true, |
109 observer: 'openedChanged' | 107 observer: '_openedChanged' |
110 } | 108 } |
111 | 109 |
112 }, | 110 }, |
113 | 111 |
| 112 hostAttributes: { |
| 113 role: 'group', |
| 114 'aria-expanded': 'false', |
| 115 tabindex: 0 |
| 116 }, |
| 117 |
114 listeners: { | 118 listeners: { |
115 transitionend: 'transitionEnd' | 119 transitionend: '_transitionEnd' |
116 }, | 120 }, |
117 | 121 |
118 ready: function() { | 122 ready: function() { |
119 // Avoid transition at the beginning e.g. page loads and enable | 123 // Avoid transition at the beginning e.g. page loads and enable |
120 // transitions only after the element is rendered and ready. | 124 // transitions only after the element is rendered and ready. |
121 this._enableTransition = true; | 125 this._enableTransition = true; |
122 }, | 126 }, |
123 | 127 |
124 horizontalChanged: function() { | |
125 this.dimension = this.horizontal ? 'width' : 'height'; | |
126 this.style.transitionProperty = this.dimension; | |
127 }, | |
128 | |
129 openedChanged: function() { | |
130 this[this.opened ? 'show' : 'hide'](); | |
131 }, | |
132 | |
133 /** | 128 /** |
134 * Toggle the opened state. | 129 * Toggle the opened state. |
135 * | 130 * |
136 * @method toggle | 131 * @method toggle |
137 */ | 132 */ |
138 toggle: function() { | 133 toggle: function() { |
139 this.opened = !this.opened; | 134 this.opened = !this.opened; |
140 }, | 135 }, |
141 | 136 |
142 show: function() { | 137 show: function() { |
143 this.toggleClass('iron-collapse-closed', false); | 138 this.toggleClass('iron-collapse-closed', false); |
144 this.updateSize('auto', false); | 139 this.updateSize('auto', false); |
145 var s = this.calcSize(); | 140 var s = this._calcSize(); |
146 this.updateSize('0px', false); | 141 this.updateSize('0px', false); |
147 // force layout to ensure transition will go | 142 // force layout to ensure transition will go |
148 this.offsetHeight; | 143 this.offsetHeight; |
149 this.updateSize(s, true); | 144 this.updateSize(s, true); |
150 }, | 145 }, |
151 | 146 |
152 hide: function() { | 147 hide: function() { |
153 this.toggleClass('iron-collapse-opened', false); | 148 this.toggleClass('iron-collapse-opened', false); |
154 this.updateSize(this.calcSize(), false); | 149 this.updateSize(this._calcSize(), false); |
155 // force layout to ensure transition will go | 150 // force layout to ensure transition will go |
156 this.offsetHeight; | 151 this.offsetHeight; |
157 this.updateSize('0px', true); | 152 this.updateSize('0px', true); |
158 }, | 153 }, |
159 | 154 |
160 updateSize: function(size, animated) { | 155 updateSize: function(size, animated) { |
161 this.enableTransition(animated); | 156 this.enableTransition(animated); |
162 var s = this.style; | 157 var s = this.style; |
163 var nochange = s[this.dimension] === size; | 158 var nochange = s[this.dimension] === size; |
164 s[this.dimension] = size; | 159 s[this.dimension] = size; |
165 if (animated && nochange) { | 160 if (animated && nochange) { |
166 this.transitionEnd(); | 161 this._transitionEnd(); |
167 } | 162 } |
168 }, | 163 }, |
169 | 164 |
170 calcSize: function() { | |
171 return this.getBoundingClientRect()[this.dimension] + 'px'; | |
172 }, | |
173 | |
174 enableTransition: function(enabled) { | 165 enableTransition: function(enabled) { |
175 this.style.transitionDuration = (enabled && this._enableTransition) ? '' :
'0s'; | 166 this.style.transitionDuration = (enabled && this._enableTransition) ? '' :
'0s'; |
176 }, | 167 }, |
177 | 168 |
178 transitionEnd: function() { | 169 _horizontalChanged: function() { |
| 170 this.dimension = this.horizontal ? 'width' : 'height'; |
| 171 this.style.transitionProperty = this.dimension; |
| 172 }, |
| 173 |
| 174 _openedChanged: function() { |
| 175 this[this.opened ? 'show' : 'hide'](); |
| 176 this.setAttribute('aria-expanded', this.opened ? 'true' : 'false'); |
| 177 |
| 178 }, |
| 179 |
| 180 _transitionEnd: function() { |
179 if (this.opened) { | 181 if (this.opened) { |
180 this.updateSize('auto', false); | 182 this.updateSize('auto', false); |
181 } | 183 } |
182 this.toggleClass('iron-collapse-closed', !this.opened); | 184 this.toggleClass('iron-collapse-closed', !this.opened); |
183 this.toggleClass('iron-collapse-opened', this.opened); | 185 this.toggleClass('iron-collapse-opened', this.opened); |
184 this.enableTransition(false); | 186 this.enableTransition(false); |
185 } | 187 }, |
| 188 |
| 189 _calcSize: function() { |
| 190 return this.getBoundingClientRect()[this.dimension] + 'px'; |
| 191 }, |
| 192 |
186 | 193 |
187 }); | 194 }); |
188 | 195 |
189 </script> | 196 </script> |
OLD | NEW |