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

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

Issue 2946563002: Run clang-format on .js files in c/b/r/settings (Closed)
Patch Set: dschuyler@ review Created 3 years, 6 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 122 matching lines...) Expand 10 before | Expand all | Expand 10 after
133 133
134 // Target position is the container's top edge in the viewport. 134 // Target position is the container's top edge in the viewport.
135 var containerTop = container.getBoundingClientRect().top; 135 var containerTop = container.getBoundingClientRect().top;
136 var endTop = containerTop + 'px'; 136 var endTop = containerTop + 'px';
137 // The card should stretch from the bottom of the toolbar to the bottom of 137 // The card should stretch from the bottom of the toolbar to the bottom of
138 // the page. calc(100% - top) lets the card resize if the window resizes. 138 // the page. calc(100% - top) lets the card resize if the window resizes.
139 var endHeight = 'calc(100% - ' + containerTop + 'px)'; 139 var endHeight = 'calc(100% - ' + containerTop + 'px)';
140 140
141 var animation = 141 var animation =
142 this.animateCard_('fixed', startTop, endTop, startHeight, endHeight); 142 this.animateCard_('fixed', startTop, endTop, startHeight, endHeight);
143 animation.finished.then(function() { 143 animation.finished
144 this.classList.add('expanded'); 144 .then(
145 }.bind(this), function() {}).then(function() { 145 function() {
146 // Unset these changes whether the animation finished or canceled. 146 this.classList.add('expanded');
147 this.classList.remove('expanding'); 147 }.bind(this),
148 this.style.height = ''; 148 function() {})
149 }.bind(this)); 149 .then(function() {
150 // Unset these changes whether the animation finished or canceled.
151 this.classList.remove('expanding');
152 this.style.height = '';
153 }.bind(this));
150 return animation; 154 return animation;
151 }, 155 },
152 156
153 /** 157 /**
154 * @return {boolean} True if the section is currently expanded and we know 158 * @return {boolean} True if the section is currently expanded and we know
155 * what the collapsed height should be. 159 * what the collapsed height should be.
156 */ 160 */
157 canAnimateCollapse: function() { 161 canAnimateCollapse: function() {
158 return this.classList.contains('expanded') && this.clientHeight > 0 && 162 return this.classList.contains('expanded') && this.clientHeight > 0 &&
159 !Number.isNaN(this.collapsedHeight_); 163 !Number.isNaN(this.collapsedHeight_);
(...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after
210 this.$.card.style.position = ''; 214 this.$.card.style.position = '';
211 215
212 // Collapse this section, animate the card into place, and remove its 216 // Collapse this section, animate the card into place, and remove its
213 // other properties. 217 // other properties.
214 var animation = 218 var animation =
215 this.animateCard_('absolute', startTop, endTop, startHeight, endHeight); 219 this.animateCard_('absolute', startTop, endTop, startHeight, endHeight);
216 this.$.card.style.width = ''; 220 this.$.card.style.width = '';
217 this.$.card.style.height = ''; 221 this.$.card.style.height = '';
218 this.$.card.style.top = ''; 222 this.$.card.style.top = '';
219 223
220 animation.finished.then(function() { 224 animation.finished
221 this.classList.remove('expanded'); 225 .then(
222 }.bind(this), function() {}).then(function() { 226 function() {
223 // The card now determines the section's height automatically. 227 this.classList.remove('expanded');
224 this.style.height = ''; 228 }.bind(this),
225 this.classList.remove('collapsing'); 229 function() {})
226 }.bind(this)); 230 .then(function() {
231 // The card now determines the section's height automatically.
232 this.style.height = '';
233 this.classList.remove('collapsing');
234 }.bind(this));
227 return animation; 235 return animation;
228 }, 236 },
229 237
230 /** 238 /**
231 * Helper function to animate the card's position and height. 239 * Helper function to animate the card's position and height.
232 * @param {string} position CSS position property. 240 * @param {string} position CSS position property.
233 * @param {string} startTop Initial top value. 241 * @param {string} startTop Initial top value.
234 * @param {string} endTop Target top value. 242 * @param {string} endTop Target top value.
235 * @param {string} startHeight Initial height value. 243 * @param {string} startHeight Initial height value.
236 * @param {string} endHeight Target height value. 244 * @param {string} endHeight Target height value.
(...skipping 11 matching lines...) Expand all
248 height: startHeight, 256 height: startHeight,
249 }; 257 };
250 258
251 var endFrame = { 259 var endFrame = {
252 position: position, 260 position: position,
253 width: width, 261 width: width,
254 top: endTop, 262 top: endTop,
255 height: endHeight, 263 height: endHeight,
256 }; 264 };
257 265
258 var options = /** @type {!KeyframeEffectOptions} */({ 266 var options = /** @type {!KeyframeEffectOptions} */ ({
259 duration: settings.animation.Timing.DURATION, 267 duration: settings.animation.Timing.DURATION,
260 easing: settings.animation.Timing.EASING, 268 easing: settings.animation.Timing.EASING,
261 }); 269 });
262 270
263 return new settings.animation.Animation( 271 return new settings.animation.Animation(
264 this.$.card, [startFrame, endFrame], options); 272 this.$.card, [startFrame, endFrame], options);
265 }, 273 },
266 }); 274 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698