| 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 111 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 122 | 122 |
| 123 // Target position is the container's top edge in the viewport. | 123 // Target position is the container's top edge in the viewport. |
| 124 var containerTop = container.getBoundingClientRect().top; | 124 var containerTop = container.getBoundingClientRect().top; |
| 125 var endTop = containerTop + 'px'; | 125 var endTop = containerTop + 'px'; |
| 126 // The card should stretch from the bottom of the toolbar to the bottom of | 126 // The card should stretch from the bottom of the toolbar to the bottom of |
| 127 // the page. calc(100% - top) lets the card resize if the window resizes. | 127 // the page. calc(100% - top) lets the card resize if the window resizes. |
| 128 var endHeight = 'calc(100% - ' + containerTop + 'px)'; | 128 var endHeight = 'calc(100% - ' + containerTop + 'px)'; |
| 129 | 129 |
| 130 var animation = | 130 var animation = |
| 131 this.animateCard_('fixed', startTop, endTop, startHeight, endHeight); | 131 this.animateCard_('fixed', startTop, endTop, startHeight, endHeight); |
| 132 animation.finished.then(function() { | 132 animation.finished |
| 133 this.classList.add('expanded'); | 133 .then( |
| 134 }.bind(this), function() {}).then(function() { | 134 function() { |
| 135 // Unset these changes whether the animation finished or canceled. | 135 this.classList.add('expanded'); |
| 136 this.classList.remove('expanding'); | 136 }.bind(this), |
| 137 this.style.height = ''; | 137 function() {}) |
| 138 }.bind(this)); | 138 .then(function() { |
| 139 // Unset these changes whether the animation finished or canceled. |
| 140 this.classList.remove('expanding'); |
| 141 this.style.height = ''; |
| 142 }.bind(this)); |
| 139 return animation; | 143 return animation; |
| 140 }, | 144 }, |
| 141 | 145 |
| 142 /** | 146 /** |
| 143 * @return {boolean} True if the section is currently expanded and we know | 147 * @return {boolean} True if the section is currently expanded and we know |
| 144 * what the collapsed height should be. | 148 * what the collapsed height should be. |
| 145 */ | 149 */ |
| 146 canAnimateCollapse: function() { | 150 canAnimateCollapse: function() { |
| 147 return this.classList.contains('expanded') && this.clientHeight > 0 && | 151 return this.classList.contains('expanded') && this.clientHeight > 0 && |
| 148 !Number.isNaN(this.collapsedHeight_); | 152 !Number.isNaN(this.collapsedHeight_); |
| (...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 199 this.$.card.style.position = ''; | 203 this.$.card.style.position = ''; |
| 200 | 204 |
| 201 // Collapse this section, animate the card into place, and remove its | 205 // Collapse this section, animate the card into place, and remove its |
| 202 // other properties. | 206 // other properties. |
| 203 var animation = | 207 var animation = |
| 204 this.animateCard_('absolute', startTop, endTop, startHeight, endHeight); | 208 this.animateCard_('absolute', startTop, endTop, startHeight, endHeight); |
| 205 this.$.card.style.width = ''; | 209 this.$.card.style.width = ''; |
| 206 this.$.card.style.height = ''; | 210 this.$.card.style.height = ''; |
| 207 this.$.card.style.top = ''; | 211 this.$.card.style.top = ''; |
| 208 | 212 |
| 209 animation.finished.then(function() { | 213 animation.finished |
| 210 this.classList.remove('expanded'); | 214 .then( |
| 211 }.bind(this), function() {}).then(function() { | 215 function() { |
| 212 // The card now determines the section's height automatically. | 216 this.classList.remove('expanded'); |
| 213 this.style.height = ''; | 217 }.bind(this), |
| 214 this.classList.remove('collapsing'); | 218 function() {}) |
| 215 }.bind(this)); | 219 .then(function() { |
| 220 // The card now determines the section's height automatically. |
| 221 this.style.height = ''; |
| 222 this.classList.remove('collapsing'); |
| 223 }.bind(this)); |
| 216 return animation; | 224 return animation; |
| 217 }, | 225 }, |
| 218 | 226 |
| 219 /** | 227 /** |
| 220 * Helper function to animate the card's position and height. | 228 * Helper function to animate the card's position and height. |
| 221 * @param {string} position CSS position property. | 229 * @param {string} position CSS position property. |
| 222 * @param {string} startTop Initial top value. | 230 * @param {string} startTop Initial top value. |
| 223 * @param {string} endTop Target top value. | 231 * @param {string} endTop Target top value. |
| 224 * @param {string} startHeight Initial height value. | 232 * @param {string} startHeight Initial height value. |
| 225 * @param {string} endHeight Target height value. | 233 * @param {string} endHeight Target height value. |
| (...skipping 11 matching lines...) Expand all Loading... |
| 237 height: startHeight, | 245 height: startHeight, |
| 238 }; | 246 }; |
| 239 | 247 |
| 240 var endFrame = { | 248 var endFrame = { |
| 241 position: position, | 249 position: position, |
| 242 width: width, | 250 width: width, |
| 243 top: endTop, | 251 top: endTop, |
| 244 height: endHeight, | 252 height: endHeight, |
| 245 }; | 253 }; |
| 246 | 254 |
| 247 var options = /** @type {!KeyframeEffectOptions} */({ | 255 var options = /** @type {!KeyframeEffectOptions} */ ({ |
| 248 duration: settings.animation.Timing.DURATION, | 256 duration: settings.animation.Timing.DURATION, |
| 249 easing: settings.animation.Timing.EASING, | 257 easing: settings.animation.Timing.EASING, |
| 250 }); | 258 }); |
| 251 | 259 |
| 252 return new settings.animation.Animation( | 260 return new settings.animation.Animation( |
| 253 this.$.card, [startFrame, endFrame], options); | 261 this.$.card, [startFrame, endFrame], options); |
| 254 }, | 262 }, |
| 255 }); | 263 }); |
| OLD | NEW |