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 |