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 83 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
94 | 94 |
95 /** | 95 /** |
96 * Setup the intial scrolling related classes for each scrollable container. | 96 * Setup the intial scrolling related classes for each scrollable container. |
97 * Called from ready() and updateScrollableContents(). May also be called | 97 * Called from ready() and updateScrollableContents(). May also be called |
98 * directly when the contents change (e.g. when not using iron-list). | 98 * directly when the contents change (e.g. when not using iron-list). |
99 */ | 99 */ |
100 requestUpdateScroll: function() { | 100 requestUpdateScroll: function() { |
101 requestAnimationFrame(function() { | 101 requestAnimationFrame(function() { |
102 var scrollableElements = this.root.querySelectorAll('[scrollable]'); | 102 var scrollableElements = this.root.querySelectorAll('[scrollable]'); |
103 for (var i = 0; i < scrollableElements.length; i++) | 103 for (var i = 0; i < scrollableElements.length; i++) |
104 this.updateScroll_(/** @type {!HTMLElement} */(scrollableElements[i])); | 104 this.updateScroll_(/** @type {!HTMLElement} */ (scrollableElements[i])); |
105 }.bind(this)); | 105 }.bind(this)); |
106 }, | 106 }, |
107 | 107 |
108 /** @param {!IronListElement} list */ | 108 /** @param {!IronListElement} list */ |
109 saveScroll: function(list) { | 109 saveScroll: function(list) { |
110 // Store a FIFO of saved scroll positions so that multiple updates in a | 110 // Store a FIFO of saved scroll positions so that multiple updates in a |
111 // frame are applied correctly. Specifically we need to track when '0' is | 111 // frame are applied correctly. Specifically we need to track when '0' is |
112 // saved (but not apply it), and still handle patterns like [30, 0, 32]. | 112 // saved (but not apply it), and still handle patterns like [30, 0, 32]. |
113 list.savedScrollTops = list.savedScrollTops || []; | 113 list.savedScrollTops = list.savedScrollTops || []; |
114 list.savedScrollTops.push(list.scrollTarget.scrollTop); | 114 list.savedScrollTops.push(list.scrollTarget.scrollTop); |
(...skipping 23 matching lines...) Expand all Loading... |
138 /** | 138 /** |
139 * This gets called once intially and any time a scrollable container scrolls. | 139 * This gets called once intially and any time a scrollable container scrolls. |
140 * @param {!HTMLElement} scrollable | 140 * @param {!HTMLElement} scrollable |
141 * @private | 141 * @private |
142 */ | 142 */ |
143 updateScroll_: function(scrollable) { | 143 updateScroll_: function(scrollable) { |
144 scrollable.classList.toggle( | 144 scrollable.classList.toggle( |
145 'can-scroll', scrollable.clientHeight < scrollable.scrollHeight); | 145 'can-scroll', scrollable.clientHeight < scrollable.scrollHeight); |
146 scrollable.classList.toggle('is-scrolled', scrollable.scrollTop > 0); | 146 scrollable.classList.toggle('is-scrolled', scrollable.scrollTop > 0); |
147 scrollable.classList.toggle( | 147 scrollable.classList.toggle( |
148 'scrolled-to-bottom', scrollable.scrollTop + scrollable.clientHeight >= | 148 'scrolled-to-bottom', |
| 149 scrollable.scrollTop + scrollable.clientHeight >= |
149 scrollable.scrollHeight); | 150 scrollable.scrollHeight); |
150 }, | 151 }, |
151 }; | 152 }; |
OLD | NEW |