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