Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(196)

Side by Side Diff: chrome/browser/resources/settings/settings_page/settings_section.js

Issue 2617663002: WIP: run clang-format-js on lots of things (Closed)
Patch Set: merge Created 3 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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
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 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698