| 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 /** | 5 /** |
| 6 * @fileoverview Behavior for scrollable containers with <iron-list>. | 6 * @fileoverview Behavior for scrollable containers with <iron-list>. |
| 7 * | 7 * |
| 8 * Any containers with the 'scrollable' attribute set will have the following | 8 * Any containers with the 'scrollable' attribute set will have the following |
| 9 * classes toggled appropriately: can-scroll, is-scrolled, scrolled-to-bottom. | 9 * classes toggled appropriately: can-scroll, is-scrolled, scrolled-to-bottom. |
| 10 * These classes are used to style the container div and list elements | 10 * These classes are used to style the container div and list elements |
| (...skipping 18 matching lines...) Expand all Loading... |
| 29 * </template> | 29 * </template> |
| 30 * </dom-module> | 30 * </dom-module> |
| 31 * | 31 * |
| 32 * NOTE: If 'container' is not fixed size, it is important to call | 32 * NOTE: If 'container' is not fixed size, it is important to call |
| 33 * updateScrollableContents() when [[items]] changes, otherwise the container | 33 * updateScrollableContents() when [[items]] changes, otherwise the container |
| 34 * will not be sized correctly. | 34 * will not be sized correctly. |
| 35 */ | 35 */ |
| 36 | 36 |
| 37 /** @polymerBehavior */ | 37 /** @polymerBehavior */ |
| 38 var CrScrollableBehavior = { | 38 var CrScrollableBehavior = { |
| 39 properties: { | 39 |
| 40 /** @private {number|null} */ | 40 /** @private {number|null} */ |
| 41 intervalId_: {type: Number, value: null} | 41 intervalId_: null, |
| 42 }, | |
| 43 | 42 |
| 44 ready: function() { | 43 ready: function() { |
| 45 var scrollableElements = this.root.querySelectorAll('[scrollable]'); | 44 var scrollableElements = this.root.querySelectorAll('[scrollable]'); |
| 46 | 45 |
| 47 // Setup the intial scrolling related classes for each scrollable container. | 46 // Setup the intial scrolling related classes for each scrollable container. |
| 48 requestAnimationFrame(function() { | 47 requestAnimationFrame(function() { |
| 49 for (var i = 0; i < scrollableElements.length; i++) | 48 for (var i = 0; i < scrollableElements.length; i++) |
| 50 this.updateScroll_(scrollableElements[i]); | 49 this.updateScroll_(scrollableElements[i]); |
| 51 }.bind(this)); | 50 }.bind(this)); |
| 52 | 51 |
| (...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 86 } | 85 } |
| 87 if (unreadyNodes.length == 0) { | 86 if (unreadyNodes.length == 0) { |
| 88 window.clearInterval(this.intervalId_); | 87 window.clearInterval(this.intervalId_); |
| 89 this.intervalId_ = null; | 88 this.intervalId_ = null; |
| 90 } else { | 89 } else { |
| 91 nodeList = unreadyNodes; | 90 nodeList = unreadyNodes; |
| 92 } | 91 } |
| 93 }.bind(this), 10); | 92 }.bind(this), 10); |
| 94 }, | 93 }, |
| 95 | 94 |
| 95 /** @param {!IronListElement} list */ |
| 96 saveScroll: function(list) { |
| 97 // Store a FIFO of saved scroll positions so that multiple updates in a |
| 98 // frame are applied correctly. Specifically we need to track when '0' is |
| 99 // saved (but not apply it), and still handle patterns like [30, 0, 32]. |
| 100 list.savedScrollTops = list.savedScrollTops || []; |
| 101 list.savedScrollTops.push(list.scrollTarget.scrollTop); |
| 102 }, |
| 103 |
| 104 /** @param {!IronListElement} list */ |
| 105 restoreScroll: function(list) { |
| 106 this.async(function() { |
| 107 var scrollTop = list.savedScrollTops.shift(); |
| 108 // Ignore scrollTop of 0 in case it was intermittent (we do not need to |
| 109 // explicity scroll to 0). |
| 110 if (scrollTop != 0) |
| 111 list.scroll(0, scrollTop); |
| 112 }); |
| 113 }, |
| 114 |
| 96 /** | 115 /** |
| 97 * Event wrapper for updateScroll_. | 116 * Event wrapper for updateScroll_. |
| 98 * @param {!Event} event | 117 * @param {!Event} event |
| 99 * @private | 118 * @private |
| 100 */ | 119 */ |
| 101 updateScrollEvent_: function(event) { | 120 updateScrollEvent_: function(event) { |
| 102 var scrollable = /** @type {!HTMLElement} */ (event.target); | 121 var scrollable = /** @type {!HTMLElement} */ (event.target); |
| 103 this.updateScroll_(scrollable); | 122 this.updateScroll_(scrollable); |
| 104 }, | 123 }, |
| 105 | 124 |
| 106 /** | 125 /** |
| 107 * This gets called once intially and any time a scrollable container scrolls. | 126 * This gets called once intially and any time a scrollable container scrolls. |
| 108 * @param {!HTMLElement} scrollable | 127 * @param {!HTMLElement} scrollable |
| 109 * @private | 128 * @private |
| 110 */ | 129 */ |
| 111 updateScroll_: function(scrollable) { | 130 updateScroll_: function(scrollable) { |
| 112 scrollable.classList.toggle( | 131 scrollable.classList.toggle( |
| 113 'can-scroll', scrollable.clientHeight < scrollable.scrollHeight); | 132 'can-scroll', scrollable.clientHeight < scrollable.scrollHeight); |
| 114 scrollable.classList.toggle('is-scrolled', scrollable.scrollTop > 0); | 133 scrollable.classList.toggle('is-scrolled', scrollable.scrollTop > 0); |
| 115 scrollable.classList.toggle( | 134 scrollable.classList.toggle( |
| 116 'scrolled-to-bottom', scrollable.scrollTop + scrollable.clientHeight >= | 135 'scrolled-to-bottom', scrollable.scrollTop + scrollable.clientHeight >= |
| 117 scrollable.scrollHeight); | 136 scrollable.scrollHeight); |
| 118 }, | 137 }, |
| 119 }; | 138 }; |
| OLD | NEW |