OLD | NEW |
(Empty) | |
| 1 // Copyright 2016 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. |
| 4 |
| 5 cr.define('settings', function() { |
| 6 'use strict'; |
| 7 |
| 8 /** |
| 9 * Opens a section by hiding other sections and expanding the section's card |
| 10 * to fill the screen vertically. |
| 11 * @constructor |
| 12 * @implements {settings.animation.AnimationGroup} |
| 13 * @param {!SettingsSectionElement} section |
| 14 * @param {!HTMLElement} container Scrolling container of sections. |
| 15 */ |
| 16 function OpenSectionTransition(section, container) { |
| 17 this.section = section; |
| 18 /** @private */ this.container_ = container; |
| 19 } |
| 20 |
| 21 OpenSectionTransition.prototype = { |
| 22 __proto__: settings.animation.AnimationGroup.prototype, |
| 23 |
| 24 /** @override */ |
| 25 play: function() { |
| 26 var finished; |
| 27 // If we're running this transition before anything else, or coming from |
| 28 // a different page, don't animate. |
| 29 if (!this.section.canAnimateExpand()) { |
| 30 finished = Promise.resolve(true); |
| 31 } else { |
| 32 this.animation_ = this.section.animateExpand(this.container_); |
| 33 finished = this.animation_.finished; |
| 34 } |
| 35 |
| 36 return this.finished = finished.then(function() { |
| 37 this.cleanUp_(true); |
| 38 return true; |
| 39 }.bind(this), function() { |
| 40 this.cleanUp_(false); |
| 41 return false; |
| 42 }.bind(this)); |
| 43 }, |
| 44 |
| 45 /** @override */ |
| 46 finish: function() { |
| 47 if (this.animation_) |
| 48 this.animation_.finish(); |
| 49 this.animation_ = null; |
| 50 }, |
| 51 |
| 52 /** @override */ |
| 53 cancel: function() { |
| 54 if (this.animation_) |
| 55 this.animation_.cancel(); |
| 56 this.animation_ = null; |
| 57 }, |
| 58 |
| 59 /** @override */ |
| 60 finished: null, |
| 61 |
| 62 /** |
| 63 * @param {boolean} finished Whether the animation finished. |
| 64 * @private |
| 65 */ |
| 66 cleanUp_: function(finished) { |
| 67 this.animation_ = null; |
| 68 this.section.classList.toggle('expanded', finished); |
| 69 }, |
| 70 }; |
| 71 |
| 72 /** |
| 73 * Closes a section by collapsing it back into place and restoring the card. |
| 74 * @constructor |
| 75 * @implements {settings.animation.AnimationGroup} |
| 76 * @param {!SettingsSectionElement} section |
| 77 * @param {!HTMLElement} container Scrolling container of sections. |
| 78 */ |
| 79 function CloseSectionTransition(section, container) { |
| 80 this.section = section; |
| 81 /** @private */ this.container_ = container; |
| 82 } |
| 83 |
| 84 CloseSectionTransition.prototype = { |
| 85 __proto__: settings.animation.AnimationGroup.prototype, |
| 86 |
| 87 /** Prepares the transitions. */ |
| 88 setUp: function() { |
| 89 // If we navigated here directly, we don't know the original height of the |
| 90 // section, so we skip the animation. |
| 91 /** @private */ this.canCollapse_ = this.section.canAnimateCollapse(); |
| 92 if (this.canCollapse_) |
| 93 this.section.setUpAnimateCollapse(this.container_); |
| 94 this.section.classList.remove('expanded'); |
| 95 }, |
| 96 |
| 97 /** @override */ |
| 98 play: function() { |
| 99 if (!this.canCollapse_) { |
| 100 this.finished = Promise.resolve(true); |
| 101 } else { |
| 102 this.animation_ = this.section.animateCollapse(this.container_); |
| 103 this.finished = this.animation_.finished; |
| 104 } |
| 105 |
| 106 this.finished = this.finished.then(function() { |
| 107 return true; |
| 108 }, function() { |
| 109 this.section.classList.add('expanded'); |
| 110 return false; |
| 111 }.bind(this)); |
| 112 return this.finished; |
| 113 }, |
| 114 |
| 115 /** @override */ |
| 116 finish: function() { |
| 117 if (this.animation_) |
| 118 this.animation_.finish(); |
| 119 this.animation_ = null; |
| 120 }, |
| 121 |
| 122 /** @override */ |
| 123 cancel: function() { |
| 124 if (this.animation_) |
| 125 this.animation_.cancel(); |
| 126 this.animation_ = null; |
| 127 }, |
| 128 |
| 129 /** @override */ |
| 130 finished: null, |
| 131 }; |
| 132 |
| 133 return { |
| 134 CloseSectionTransition: CloseSectionTransition, |
| 135 OpenSectionTransition: OpenSectionTransition, |
| 136 }; |
| 137 }); |
OLD | NEW |