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