| 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 |