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

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

Issue 2825203003: MD Settings: Remove subpage animation when landing directly on it. (Closed)
Patch Set: nits 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 81 matching lines...) Expand 10 before | Expand all | Expand 10 after
92 92
93 /** 93 /**
94 * @return {boolean} True if the section is currently rendered and not 94 * @return {boolean} True if the section is currently rendered and not
95 * already expanded or transitioning. 95 * already expanded or transitioning.
96 */ 96 */
97 canAnimateExpand: function() { 97 canAnimateExpand: function() {
98 return !this.classList.contains('expanding') && 98 return !this.classList.contains('expanding') &&
99 !this.classList.contains('expanded') && this.$.card.clientHeight > 0; 99 !this.classList.contains('expanded') && this.$.card.clientHeight > 0;
100 }, 100 },
101 101
102 immediateExpand: function(container) {
103 // Target position is the container's top edge in the viewport.
104 var containerTop = container.getBoundingClientRect().top;
105
106 this.$.card.position = 'fixed';
107 this.$.card.top = containerTop + 'px';
108 this.$.card.height = 'calc(100% - ' + containerTop + 'px)';
109
110 this.classList.add('expanded');
111 },
112
102 /** 113 /**
103 * Animates the section expanding to fill the container. The section is fixed 114 * Animates the section expanding to fill the container. The section is fixed
104 * in the viewport during the animation, making it safe to adjust the rest of 115 * in the viewport during the animation, making it safe to adjust the rest of
105 * the DOM after calling this. The section adds the "expanding" class while 116 * the DOM after calling this. The section adds the "expanding" class while
106 * the animation plays and "expanded" after it finishes. 117 * the animation plays and "expanded" after it finishes.
107 * 118 *
108 * @param {!HTMLElement} container The scrolling container to fill. 119 * @param {!HTMLElement} container The scrolling container to fill.
109 * @return {!settings.animation.Animation} 120 * @return {!settings.animation.Animation}
110 */ 121 */
111 animateExpand: function(container) { 122 animateExpand: function(container) {
(...skipping 134 matching lines...) Expand 10 before | Expand all | Expand 10 after
246 257
247 var options = /** @type {!KeyframeEffectOptions} */({ 258 var options = /** @type {!KeyframeEffectOptions} */({
248 duration: settings.animation.Timing.DURATION, 259 duration: settings.animation.Timing.DURATION,
249 easing: settings.animation.Timing.EASING, 260 easing: settings.animation.Timing.EASING,
250 }); 261 });
251 262
252 return new settings.animation.Animation( 263 return new settings.animation.Animation(
253 this.$.card, [startFrame, endFrame], options); 264 this.$.card, [startFrame, endFrame], options);
254 }, 265 },
255 }); 266 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698