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 | |
dschuyler
2016/06/30 01:24:04
It kinda looks like most of this file
should be in
michaelpg
2016/07/07 05:27:43
Done.
| |
7 /** | |
8 * Expands a card to fill its container's client height, so it covers the | |
9 * container from the top padding edge to the bottom padding edge. | |
10 * @see https://www.w3.org/TR/cssom-view-1/#terminology | |
11 * @constructor | |
12 * @extends {settings.animation.Transition} | |
13 * @param {!HTMLElement} card Card to expand. | |
14 * @param {!HTMLElement} container Container whose height the card will span. | |
15 */ | |
16 function ExpandCardTransition(card, container) { | |
17 this.card = card; | |
18 this.container = container; | |
19 | |
20 /** @type {?settings.animation.Animation} */ | |
21 this.animation_ = null; | |
22 } | |
23 | |
24 ExpandCardTransition.prototype = { | |
25 __proto__: settings.animation.Transition.prototype, | |
26 | |
27 /** @override */ | |
28 play: function() { | |
29 // If we're running this transition before anything else, we won't have the | |
30 // information we need, so just expand immediately and finish. | |
31 if (typeof this.card.origHeight_ == 'undefined' || | |
32 this.card.style.top == '' || this.card.style.height == '') { | |
33 this.finished = Promise.resolve(); | |
34 return this.finished; | |
35 } | |
36 | |
37 // Align the card with the container's padding edge. | |
38 var startingTop = this.card.getBoundingClientRect().top; | |
39 | |
40 // Target position is the container's top edge in the viewport. | |
41 var targetTop = this.container.getBoundingClientRect().top; | |
42 | |
43 // The target height shouldn't use the container's current height, because | |
44 // the container may resize when the window resizes. And height: 100% | |
45 // wouldn't use the container's height because we're position: fixed. | |
46 // | |
47 // Instead, find the part of the window height *not* used by the container | |
48 // (e.g., for a toolbar) and calc the height dynamically. This assumes the | |
49 // excluded height stays constant. | |
50 var excludedHeight = window.innerHeight - this.container.clientHeight; | |
51 var targetHeight = 'calc(100% - ' + excludedHeight + 'px)'; | |
52 | |
53 // Expand the card. The card's height must be 100% of the container's height | |
54 // or taller, so we use minHeight rather than height. | |
55 var keyframes = [{ | |
56 top: startingTop + 'px', | |
57 minHeight: this.card.style.height, | |
58 easing: settings.animation.Timing.EASING, | |
59 }, { | |
60 top: targetTop + 'px', | |
61 minHeight: 'calc(100% - ' + targetTop + 'px)', | |
62 }]; | |
63 var options = /** @type {!KeyframeEffectOptions} */({ | |
64 duration: settings.animation.Timing.DURATION, | |
65 }); | |
66 | |
67 this.animation_ = | |
68 new settings.animation.Animation(this.card, keyframes, options); | |
69 this.finished = this.animation_.finished; | |
70 return this.finished; | |
71 }, | |
72 | |
73 /** @override */ | |
74 finish: function() { | |
75 if (!this.animation_) | |
76 return; | |
77 this.animation_.finish(); | |
78 this.animation_ = null; | |
79 }, | |
80 | |
81 /** @override */ | |
82 cancel: function() { | |
83 if (!this.animation_) | |
84 return; | |
85 this.animation_.cancel(); | |
86 this.animation_ = null; | |
87 }, | |
88 }; | |
89 | |
90 /** | |
91 * Collapses an expanded card back into its original section. | |
92 * @constructor | |
93 * @extends {settings.animation.Transition} | |
94 * @param {!SettingsSectionElement} section Section that contains the card. | |
95 * @param {!HTMLElement} container Container the card currently spans. | |
96 */ | |
97 function CollapseCardTransition(section, container) { | |
98 /** @type {!HTMLElement} */ | |
99 this.card = section.$['card']; | |
100 /** @type {!SettingsSectionElement} */ | |
101 this.section = section; | |
102 this.container = container; | |
103 | |
104 /** @type {?settings.animation.Animation} */ | |
105 this.animation_ = null; | |
106 } | |
107 | |
108 CollapseCardTransition.prototype = { | |
109 __proto__: settings.animation.Transition.prototype, | |
110 | |
111 /** Sets up the transition before other page content has been unhidden. */ | |
112 setUp: function() { | |
113 this.card.style.width = this.card.clientWidth + 'px'; | |
114 this.card.style.height = this.card.clientHeight + 'px'; | |
115 }, | |
116 | |
117 /** @override */ | |
118 play: function() { | |
119 var startingTop = this.container.getBoundingClientRect().top; | |
120 | |
121 // The card is unpositioned, so use its position as the ending state, | |
122 // but account for scroll. | |
123 var targetTop = this.card.getBoundingClientRect().top - | |
124 this.container.scrollTop; | |
125 | |
126 // Account for the section header. | |
127 var headerStyle = getComputedStyle(this.section.$['header']); | |
128 targetTop += this.section.$['header'].offsetHeight + | |
129 parseInt(headerStyle.marginBottom, 10) + | |
130 parseInt(headerStyle.marginTop, 10); | |
dschuyler
2016/06/30 01:24:04
I believe these may be floats. Consider
parseFloat
michaelpg
2016/07/07 05:27:43
Done.
| |
131 | |
132 var keyframes = [{ | |
133 top: startingTop + 'px', | |
134 minHeight: this.card.style.height, | |
135 easing: settings.animation.Timing.EASING, | |
136 }, { | |
137 top: targetTop + 'px', | |
138 minHeight: | |
139 /** @type {{origHeight_: number}} */(this.card).origHeight_ + 'px', | |
140 }]; | |
141 var options = /** @type {!KeyframeEffectOptions} */({ | |
142 duration: settings.animation.Timing.DURATION, | |
143 }); | |
144 | |
145 this.card.style.height = ''; | |
146 this.animation_ = | |
147 new settings.animation.Animation(this.card, keyframes, options); | |
148 this.finished = this.animation_.finished; | |
149 // Clean up after the animation finishes or cancels. | |
150 this.finished.catch(function() {}).then(function() { | |
michaelpg
2016/06/28 23:45:16
Is this idiom OK? The alternative is to pass two f
| |
151 this.card.style.width = ''; | |
152 }.bind(this)); | |
153 return this.finished; | |
154 }, | |
155 | |
156 /** @override */ | |
157 finish: function() { | |
158 if (!this.animation_) | |
159 return; | |
160 this.animation_.finish(); | |
161 this.animation_ = null; | |
162 }, | |
163 | |
164 /** @override */ | |
165 cancel: function() { | |
166 if (!this.animation_) | |
167 return; | |
168 this.animation_.cancel(); | |
169 this.animation_ = null; | |
170 }, | |
171 }; | |
172 | |
173 return { | |
174 CollapseCardTransition: CollapseCardTransition, | |
175 ExpandCardTransition: ExpandCardTransition, | |
176 }; | |
177 | |
178 }); | |
OLD | NEW |