| 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 20 matching lines...) Expand all Loading... |
| 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 properties: { |
| 40 /** @private {number|null} */ | 40 /** @private {number|null} */ |
| 41 intervalId_: { | 41 intervalId_: {type: Number, value: null} |
| 42 type: Number, | |
| 43 value: null | |
| 44 } | |
| 45 }, | 42 }, |
| 46 | 43 |
| 47 ready: function() { | 44 ready: function() { |
| 48 var scrollableElements = this.root.querySelectorAll('[scrollable]'); | 45 var scrollableElements = this.root.querySelectorAll('[scrollable]'); |
| 49 | 46 |
| 50 // Setup the intial scrolling related classes for each scrollable container. | 47 // Setup the intial scrolling related classes for each scrollable container. |
| 51 requestAnimationFrame(function() { | 48 requestAnimationFrame(function() { |
| 52 for (let scrollable of scrollableElements) | 49 for (let scrollable of scrollableElements) |
| 53 this.updateScroll_(scrollable); | 50 this.updateScroll_(scrollable); |
| 54 }.bind(this)); | 51 }.bind(this)); |
| (...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 110 */ | 107 */ |
| 111 updateScroll_: function(scrollable) { | 108 updateScroll_: function(scrollable) { |
| 112 scrollable.classList.toggle( | 109 scrollable.classList.toggle( |
| 113 'can-scroll', scrollable.clientHeight < scrollable.scrollHeight); | 110 'can-scroll', scrollable.clientHeight < scrollable.scrollHeight); |
| 114 scrollable.classList.toggle('is-scrolled', scrollable.scrollTop > 0); | 111 scrollable.classList.toggle('is-scrolled', scrollable.scrollTop > 0); |
| 115 scrollable.classList.toggle( | 112 scrollable.classList.toggle( |
| 116 'scrolled-to-bottom', scrollable.scrollTop + scrollable.clientHeight >= | 113 'scrolled-to-bottom', scrollable.scrollTop + scrollable.clientHeight >= |
| 117 scrollable.scrollHeight); | 114 scrollable.scrollHeight); |
| 118 }, | 115 }, |
| 119 }; | 116 }; |
| OLD | NEW |