| 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 81 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 92 | 92 |
| 93 /** | 93 /** |
| 94 * @return {boolean} True if the section is currently rendered and not | 94 * @return {boolean} True if the section is currently rendered and not |
| 95 * already expanded or transitioning. | 95 * already expanded or transitioning. |
| 96 */ | 96 */ |
| 97 canAnimateExpand: function() { | 97 canAnimateExpand: function() { |
| 98 return !this.classList.contains('expanding') && | 98 return !this.classList.contains('expanding') && |
| 99 !this.classList.contains('expanded') && this.$.card.clientHeight > 0; | 99 !this.classList.contains('expanded') && this.$.card.clientHeight > 0; |
| 100 }, | 100 }, |
| 101 | 101 |
| 102 immediateExpand: function(container) { |
| 103 // Target position is the container's top edge in the viewport. |
| 104 var containerTop = container.getBoundingClientRect().top; |
| 105 |
| 106 this.$.card.position = 'fixed'; |
| 107 this.$.card.top = containerTop + 'px'; |
| 108 this.$.card.height = 'calc(100% - ' + containerTop + 'px)'; |
| 109 |
| 110 this.classList.add('expanded'); |
| 111 }, |
| 112 |
| 102 /** | 113 /** |
| 103 * Animates the section expanding to fill the container. The section is fixed | 114 * Animates the section expanding to fill the container. The section is fixed |
| 104 * in the viewport during the animation, making it safe to adjust the rest of | 115 * in the viewport during the animation, making it safe to adjust the rest of |
| 105 * the DOM after calling this. The section adds the "expanding" class while | 116 * the DOM after calling this. The section adds the "expanding" class while |
| 106 * the animation plays and "expanded" after it finishes. | 117 * the animation plays and "expanded" after it finishes. |
| 107 * | 118 * |
| 108 * @param {!HTMLElement} container The scrolling container to fill. | 119 * @param {!HTMLElement} container The scrolling container to fill. |
| 109 * @return {!settings.animation.Animation} | 120 * @return {!settings.animation.Animation} |
| 110 */ | 121 */ |
| 111 animateExpand: function(container) { | 122 animateExpand: function(container) { |
| (...skipping 134 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 246 | 257 |
| 247 var options = /** @type {!KeyframeEffectOptions} */({ | 258 var options = /** @type {!KeyframeEffectOptions} */({ |
| 248 duration: settings.animation.Timing.DURATION, | 259 duration: settings.animation.Timing.DURATION, |
| 249 easing: settings.animation.Timing.EASING, | 260 easing: settings.animation.Timing.EASING, |
| 250 }); | 261 }); |
| 251 | 262 |
| 252 return new settings.animation.Animation( | 263 return new settings.animation.Animation( |
| 253 this.$.card, [startFrame, endFrame], options); | 264 this.$.card, [startFrame, endFrame], options); |
| 254 }, | 265 }, |
| 255 }); | 266 }); |
| OLD | NEW |