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 124 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
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 | 143 animation.finished |
144 .then( | 144 .then( |
145 function() { | 145 () => { |
146 this.classList.add('expanded'); | 146 this.classList.add('expanded'); |
147 }.bind(this), | 147 }, |
148 function() {}) | 148 function() {}) |
149 .then(function() { | 149 .then(() => { |
150 // Unset these changes whether the animation finished or canceled. | 150 // Unset these changes whether the animation finished or canceled. |
151 this.classList.remove('expanding'); | 151 this.classList.remove('expanding'); |
152 this.style.height = ''; | 152 this.style.height = ''; |
153 }.bind(this)); | 153 }); |
154 return animation; | 154 return animation; |
155 }, | 155 }, |
156 | 156 |
157 /** | 157 /** |
158 * @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 |
159 * what the collapsed height should be. | 159 * what the collapsed height should be. |
160 */ | 160 */ |
161 canAnimateCollapse: function() { | 161 canAnimateCollapse: function() { |
162 return this.classList.contains('expanded') && this.clientHeight > 0 && | 162 return this.classList.contains('expanded') && this.clientHeight > 0 && |
163 !Number.isNaN(this.collapsedHeight_); | 163 !Number.isNaN(this.collapsedHeight_); |
(...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
216 // Collapse this section, animate the card into place, and remove its | 216 // Collapse this section, animate the card into place, and remove its |
217 // other properties. | 217 // other properties. |
218 var animation = | 218 var animation = |
219 this.animateCard_('absolute', startTop, endTop, startHeight, endHeight); | 219 this.animateCard_('absolute', startTop, endTop, startHeight, endHeight); |
220 this.$.card.style.width = ''; | 220 this.$.card.style.width = ''; |
221 this.$.card.style.height = ''; | 221 this.$.card.style.height = ''; |
222 this.$.card.style.top = ''; | 222 this.$.card.style.top = ''; |
223 | 223 |
224 animation.finished | 224 animation.finished |
225 .then( | 225 .then( |
226 function() { | 226 () => { |
227 this.classList.remove('expanded'); | 227 this.classList.remove('expanded'); |
228 }.bind(this), | 228 }, |
229 function() {}) | 229 function() {}) |
230 .then(function() { | 230 .then(() => { |
231 // The card now determines the section's height automatically. | 231 // The card now determines the section's height automatically. |
232 this.style.height = ''; | 232 this.style.height = ''; |
233 this.classList.remove('collapsing'); | 233 this.classList.remove('collapsing'); |
234 }.bind(this)); | 234 }); |
235 return animation; | 235 return animation; |
236 }, | 236 }, |
237 | 237 |
238 /** | 238 /** |
239 * Helper function to animate the card's position and height. | 239 * Helper function to animate the card's position and height. |
240 * @param {string} position CSS position property. | 240 * @param {string} position CSS position property. |
241 * @param {string} startTop Initial top value. | 241 * @param {string} startTop Initial top value. |
242 * @param {string} endTop Target top value. | 242 * @param {string} endTop Target top value. |
243 * @param {string} startHeight Initial height value. | 243 * @param {string} startHeight Initial height value. |
244 * @param {string} endHeight Target height value. | 244 * @param {string} endHeight Target height value. |
(...skipping 20 matching lines...) Expand all Loading... |
265 | 265 |
266 var options = /** @type {!KeyframeEffectOptions} */ ({ | 266 var options = /** @type {!KeyframeEffectOptions} */ ({ |
267 duration: settings.animation.Timing.DURATION, | 267 duration: settings.animation.Timing.DURATION, |
268 easing: settings.animation.Timing.EASING, | 268 easing: settings.animation.Timing.EASING, |
269 }); | 269 }); |
270 | 270 |
271 return new settings.animation.Animation( | 271 return new settings.animation.Animation( |
272 this.$.card, [startFrame, endFrame], options); | 272 this.$.card, [startFrame, endFrame], options); |
273 }, | 273 }, |
274 }); | 274 }); |
OLD | NEW |