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

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

Issue 2984843003: MD Settings: Convert all usages of .bind(this) to use ES6 arrow function. (Closed)
Patch Set: Resolve conflicts. Created 3 years, 4 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 124 matching lines...) Expand 10 before | Expand all | Expand 10 after
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 143 animation.finished
144 .then( 144 .then(
145 function() { 145 () => {
146 this.classList.add('expanded'); 146 this.classList.add('expanded');
147 }.bind(this), 147 },
148 function() {}) 148 function() {})
149 .then(function() { 149 .then(() => {
150 // Unset these changes whether the animation finished or canceled. 150 // Unset these changes whether the animation finished or canceled.
151 this.classList.remove('expanding'); 151 this.classList.remove('expanding');
152 this.style.height = ''; 152 this.style.height = '';
153 }.bind(this)); 153 });
154 return animation; 154 return animation;
155 }, 155 },
156 156
157 /** 157 /**
158 * @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
159 * what the collapsed height should be. 159 * what the collapsed height should be.
160 */ 160 */
161 canAnimateCollapse: function() { 161 canAnimateCollapse: function() {
162 return this.classList.contains('expanded') && this.clientHeight > 0 && 162 return this.classList.contains('expanded') && this.clientHeight > 0 &&
163 !Number.isNaN(this.collapsedHeight_); 163 !Number.isNaN(this.collapsedHeight_);
(...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after
216 // Collapse this section, animate the card into place, and remove its 216 // Collapse this section, animate the card into place, and remove its
217 // other properties. 217 // other properties.
218 var animation = 218 var animation =
219 this.animateCard_('absolute', startTop, endTop, startHeight, endHeight); 219 this.animateCard_('absolute', startTop, endTop, startHeight, endHeight);
220 this.$.card.style.width = ''; 220 this.$.card.style.width = '';
221 this.$.card.style.height = ''; 221 this.$.card.style.height = '';
222 this.$.card.style.top = ''; 222 this.$.card.style.top = '';
223 223
224 animation.finished 224 animation.finished
225 .then( 225 .then(
226 function() { 226 () => {
227 this.classList.remove('expanded'); 227 this.classList.remove('expanded');
228 }.bind(this), 228 },
229 function() {}) 229 function() {})
230 .then(function() { 230 .then(() => {
231 // The card now determines the section's height automatically. 231 // The card now determines the section's height automatically.
232 this.style.height = ''; 232 this.style.height = '';
233 this.classList.remove('collapsing'); 233 this.classList.remove('collapsing');
234 }.bind(this)); 234 });
235 return animation; 235 return animation;
236 }, 236 },
237 237
238 /** 238 /**
239 * Helper function to animate the card's position and height. 239 * Helper function to animate the card's position and height.
240 * @param {string} position CSS position property. 240 * @param {string} position CSS position property.
241 * @param {string} startTop Initial top value. 241 * @param {string} startTop Initial top value.
242 * @param {string} endTop Target top value. 242 * @param {string} endTop Target top value.
243 * @param {string} startHeight Initial height value. 243 * @param {string} startHeight Initial height value.
244 * @param {string} endHeight Target height value. 244 * @param {string} endHeight Target height value.
(...skipping 20 matching lines...) Expand all
265 265
266 var options = /** @type {!KeyframeEffectOptions} */ ({ 266 var options = /** @type {!KeyframeEffectOptions} */ ({
267 duration: settings.animation.Timing.DURATION, 267 duration: settings.animation.Timing.DURATION,
268 easing: settings.animation.Timing.EASING, 268 easing: settings.animation.Timing.EASING,
269 }); 269 });
270 270
271 return new settings.animation.Animation( 271 return new settings.animation.Animation(
272 this.$.card, [startFrame, endFrame], options); 272 this.$.card, [startFrame, endFrame], options);
273 }, 273 },
274 }); 274 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698