Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 // Copyright 2016 The Chromium Authors. All rights reserved. | 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 | 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 // Fast out, slow in. | 5 // Fast out, slow in. |
| 6 var EASING_FUNCTION = 'cubic-bezier(0.4, 0, 0.2, 1)'; | 6 var EASING_FUNCTION = 'cubic-bezier(0.4, 0, 0.2, 1)'; |
| 7 var EXPAND_DURATION = 350; | 7 var EXPAND_DURATION = 350; |
| 8 | 8 |
| 9 /** | 9 /** |
| 10 * Workaround for scrolling an element into view when using Polymer. | 10 * Workaround for scrolling an element into view when using Polymer. |
|
michaelpg
2016/06/28 13:58:08
update comment
Dan Beam
2016/06/28 19:07:52
Done.
| |
| 11 * @param {function():Element} containerCallback Return parent of element. | 11 * @param {function():boolean} readyTest |
| 12 * @param {function():Element} elementCallback Return element to scroll to. | 12 * @param {!Function} readyCallback |
| 13 */ | 13 */ |
| 14 function scrollWhenReady(containerCallback, elementCallback) { | 14 function doWhenReady(readyTest, readyCallback) { |
| 15 // TODO(dschuyler): Determine whether this setTimeout can be removed. | 15 // TODO(dschuyler): Determine whether this hack can be removed. |
| 16 // See also: https://github.com/Polymer/polymer/issues/3629 | 16 // See also: https://github.com/Polymer/polymer/issues/3629 |
| 17 setTimeout(function pollForScrollHeight() { | 17 var intervalId = setInterval(function() { |
| 18 var container = containerCallback(); | 18 if (readyTest()) { |
| 19 if (!container || container.scrollHeight == 0) { | 19 clearInterval(intervalId); |
| 20 setTimeout(pollForScrollHeight.bind(this), 10); | 20 readyCallback(); |
| 21 return; | |
| 22 } | 21 } |
| 23 | 22 }, 10); |
| 24 elementCallback().scrollIntoView(); | |
| 25 }.bind(this)); | |
| 26 } | 23 } |
| 27 | 24 |
| 28 /** | 25 /** |
| 29 * Provides animations to expand and collapse individual sections in a page. | 26 * Provides animations to expand and collapse individual sections in a page. |
| 30 * Expanded sections take up the full height of the container. At most one | 27 * Expanded sections take up the full height of the container. At most one |
| 31 * section should be expanded at any given time. | 28 * section should be expanded at any given time. |
| 32 * @polymerBehavior Polymer.MainPageBehavior | 29 * @polymerBehavior Polymer.MainPageBehavior |
| 33 */ | 30 */ |
| 34 var MainPageBehaviorImpl = { | 31 var MainPageBehaviorImpl = { |
| 35 /** | 32 /** |
| (...skipping 326 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 362 /** Contains the current route. */ | 359 /** Contains the current route. */ |
| 363 currentRoute: { | 360 currentRoute: { |
| 364 type: Object, | 361 type: Object, |
| 365 notify: true, | 362 notify: true, |
| 366 observer: 'currentRouteChanged_', | 363 observer: 'currentRouteChanged_', |
| 367 }, | 364 }, |
| 368 }, | 365 }, |
| 369 | 366 |
| 370 /** @private */ | 367 /** @private */ |
| 371 scrollToSection_: function() { | 368 scrollToSection_: function() { |
| 372 scrollWhenReady( | 369 doWhenReady( |
| 373 function() { | 370 function() { |
| 374 return this; | 371 return this.scrollHeight > 0; |
| 375 }.bind(this), | 372 }.bind(this), |
| 376 function() { | 373 function() { |
| 377 // If the current section changes while we are waiting for the page to | 374 // If the current section changes while we are waiting for the page to |
| 378 // be ready, scroll to the newest requested section. | 375 // be ready, scroll to the newest requested section. |
| 379 return this.getSection_(this.currentRoute.section); | 376 this.getSection_(this.currentRoute.section).scrollIntoView(); |
| 380 }.bind(this)); | 377 }.bind(this)); |
| 381 }, | 378 }, |
| 382 | 379 |
| 383 /** @private */ | 380 /** @private */ |
| 384 currentRouteChanged_: function(newRoute, oldRoute) { | 381 currentRouteChanged_: function(newRoute, oldRoute) { |
| 385 var newRouteIsSubpage = newRoute && newRoute.subpage.length; | 382 var newRouteIsSubpage = newRoute && newRoute.subpage.length; |
| 386 var oldRouteIsSubpage = oldRoute && oldRoute.subpage.length; | 383 var oldRouteIsSubpage = oldRoute && oldRoute.subpage.length; |
| 387 | 384 |
| 388 if (!oldRoute && newRouteIsSubpage) { | 385 if (!oldRoute && newRouteIsSubpage) { |
| 389 // Allow the page to load before expanding the section. TODO(michaelpg): | 386 // Allow the page to load before expanding the section. TODO(michaelpg): |
| (...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 422 this.$$('[section=' + section + ']')); | 419 this.$$('[section=' + section + ']')); |
| 423 }, | 420 }, |
| 424 }; | 421 }; |
| 425 | 422 |
| 426 | 423 |
| 427 /** @polymerBehavior */ | 424 /** @polymerBehavior */ |
| 428 var RoutableBehavior = [ | 425 var RoutableBehavior = [ |
| 429 MainPageBehavior, | 426 MainPageBehavior, |
| 430 RoutableBehaviorImpl | 427 RoutableBehaviorImpl |
| 431 ]; | 428 ]; |
| OLD | NEW |