OLD | NEW |
1 // Copyright 2015 The Chromium Authors. All rights reserved. | 1 // Copyright 2015 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 /** | 5 /** |
6 * @fileoverview | 6 * @fileoverview |
7 * 'settings-section' shows a paper material themed section with a header | 7 * 'settings-section' shows a paper material themed section with a header |
8 * which shows its page title. | 8 * which shows its page title. |
9 * | 9 * |
10 * The section can expand vertically to fill its container's padding edge. | 10 * The section can expand vertically to fill its container's padding edge. |
(...skipping 122 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
133 | 133 |
134 // Target position is the container's top edge in the viewport. | 134 // Target position is the container's top edge in the viewport. |
135 var containerTop = container.getBoundingClientRect().top; | 135 var containerTop = container.getBoundingClientRect().top; |
136 var endTop = containerTop + 'px'; | 136 var endTop = containerTop + 'px'; |
137 // The card should stretch from the bottom of the toolbar to the bottom of | 137 // The card should stretch from the bottom of the toolbar to the bottom of |
138 // the page. calc(100% - top) lets the card resize if the window resizes. | 138 // the page. calc(100% - top) lets the card resize if the window resizes. |
139 var endHeight = 'calc(100% - ' + containerTop + 'px)'; | 139 var endHeight = 'calc(100% - ' + containerTop + 'px)'; |
140 | 140 |
141 var animation = | 141 var animation = |
142 this.animateCard_('fixed', startTop, endTop, startHeight, endHeight); | 142 this.animateCard_('fixed', startTop, endTop, startHeight, endHeight); |
143 animation.finished.then(function() { | 143 animation.finished |
144 this.classList.add('expanded'); | 144 .then( |
145 }.bind(this), function() {}).then(function() { | 145 function() { |
146 // Unset these changes whether the animation finished or canceled. | 146 this.classList.add('expanded'); |
147 this.classList.remove('expanding'); | 147 }.bind(this), |
148 this.style.height = ''; | 148 function() {}) |
149 }.bind(this)); | 149 .then(function() { |
| 150 // Unset these changes whether the animation finished or canceled. |
| 151 this.classList.remove('expanding'); |
| 152 this.style.height = ''; |
| 153 }.bind(this)); |
150 return animation; | 154 return animation; |
151 }, | 155 }, |
152 | 156 |
153 /** | 157 /** |
154 * @return {boolean} True if the section is currently expanded and we know | 158 * @return {boolean} True if the section is currently expanded and we know |
155 * what the collapsed height should be. | 159 * what the collapsed height should be. |
156 */ | 160 */ |
157 canAnimateCollapse: function() { | 161 canAnimateCollapse: function() { |
158 return this.classList.contains('expanded') && this.clientHeight > 0 && | 162 return this.classList.contains('expanded') && this.clientHeight > 0 && |
159 !Number.isNaN(this.collapsedHeight_); | 163 !Number.isNaN(this.collapsedHeight_); |
(...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
210 this.$.card.style.position = ''; | 214 this.$.card.style.position = ''; |
211 | 215 |
212 // Collapse this section, animate the card into place, and remove its | 216 // Collapse this section, animate the card into place, and remove its |
213 // other properties. | 217 // other properties. |
214 var animation = | 218 var animation = |
215 this.animateCard_('absolute', startTop, endTop, startHeight, endHeight); | 219 this.animateCard_('absolute', startTop, endTop, startHeight, endHeight); |
216 this.$.card.style.width = ''; | 220 this.$.card.style.width = ''; |
217 this.$.card.style.height = ''; | 221 this.$.card.style.height = ''; |
218 this.$.card.style.top = ''; | 222 this.$.card.style.top = ''; |
219 | 223 |
220 animation.finished.then(function() { | 224 animation.finished |
221 this.classList.remove('expanded'); | 225 .then( |
222 }.bind(this), function() {}).then(function() { | 226 function() { |
223 // The card now determines the section's height automatically. | 227 this.classList.remove('expanded'); |
224 this.style.height = ''; | 228 }.bind(this), |
225 this.classList.remove('collapsing'); | 229 function() {}) |
226 }.bind(this)); | 230 .then(function() { |
| 231 // The card now determines the section's height automatically. |
| 232 this.style.height = ''; |
| 233 this.classList.remove('collapsing'); |
| 234 }.bind(this)); |
227 return animation; | 235 return animation; |
228 }, | 236 }, |
229 | 237 |
230 /** | 238 /** |
231 * Helper function to animate the card's position and height. | 239 * Helper function to animate the card's position and height. |
232 * @param {string} position CSS position property. | 240 * @param {string} position CSS position property. |
233 * @param {string} startTop Initial top value. | 241 * @param {string} startTop Initial top value. |
234 * @param {string} endTop Target top value. | 242 * @param {string} endTop Target top value. |
235 * @param {string} startHeight Initial height value. | 243 * @param {string} startHeight Initial height value. |
236 * @param {string} endHeight Target height value. | 244 * @param {string} endHeight Target height value. |
(...skipping 11 matching lines...) Expand all Loading... |
248 height: startHeight, | 256 height: startHeight, |
249 }; | 257 }; |
250 | 258 |
251 var endFrame = { | 259 var endFrame = { |
252 position: position, | 260 position: position, |
253 width: width, | 261 width: width, |
254 top: endTop, | 262 top: endTop, |
255 height: endHeight, | 263 height: endHeight, |
256 }; | 264 }; |
257 | 265 |
258 var options = /** @type {!KeyframeEffectOptions} */({ | 266 var options = /** @type {!KeyframeEffectOptions} */ ({ |
259 duration: settings.animation.Timing.DURATION, | 267 duration: settings.animation.Timing.DURATION, |
260 easing: settings.animation.Timing.EASING, | 268 easing: settings.animation.Timing.EASING, |
261 }); | 269 }); |
262 | 270 |
263 return new settings.animation.Animation( | 271 return new settings.animation.Animation( |
264 this.$.card, [startFrame, endFrame], options); | 272 this.$.card, [startFrame, endFrame], options); |
265 }, | 273 }, |
266 }); | 274 }); |
OLD | NEW |