Chromium Code Reviews| 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 28 matching lines...) Expand all Loading... | |
| 39 properties: { | 39 properties: { |
| 40 /** @private {number|null} */ | 40 /** @private {number|null} */ |
| 41 intervalId_: {type: Number, value: null} | 41 intervalId_: {type: Number, value: null} |
| 42 }, | 42 }, |
| 43 | 43 |
| 44 ready: function() { | 44 ready: function() { |
| 45 var scrollableElements = this.root.querySelectorAll('[scrollable]'); | 45 var scrollableElements = this.root.querySelectorAll('[scrollable]'); |
| 46 | 46 |
| 47 // Setup the intial scrolling related classes for each scrollable container. | 47 // Setup the intial scrolling related classes for each scrollable container. |
| 48 requestAnimationFrame(function() { | 48 requestAnimationFrame(function() { |
| 49 for (let scrollable of scrollableElements) | 49 for (var i = 0; i < scrollableElements.length; i++) |
| 50 this.updateScroll_(scrollable); | 50 this.updateScroll_(scrollableElements[i]); |
| 51 }.bind(this)); | 51 }.bind(this)); |
| 52 | 52 |
| 53 // Listen to the 'scroll' event for each scrollable container. | 53 // Listen to the 'scroll' event for each scrollable container. |
| 54 for (let scrollable of scrollableElements) | 54 for (var i = 0; i < scrollableElements.length; i++) |
|
Dan Beam
2017/01/21 01:05:49
nit: curlies
dpapad
2017/01/21 01:10:53
Done.
| |
| 55 scrollable.addEventListener('scroll', this.updateScrollEvent_.bind(this)); | 55 scrollableElements[i].addEventListener( |
| 56 'scroll', this.updateScrollEvent_.bind(this)); | |
| 56 }, | 57 }, |
| 57 | 58 |
| 58 detached: function() { | 59 detached: function() { |
| 59 if (this.intervalId_ !== null) | 60 if (this.intervalId_ !== null) |
| 60 clearInterval(this.intervalId_); | 61 clearInterval(this.intervalId_); |
| 61 }, | 62 }, |
| 62 | 63 |
| 63 /** | 64 /** |
| 64 * Called any time the contents of a scrollable container may have changed. | 65 * Called any time the contents of a scrollable container may have changed. |
| 65 * This ensures that the <iron-list> contents of dynamically sized | 66 * This ensures that the <iron-list> contents of dynamically sized |
| 66 * containers are resized correctly. | 67 * containers are resized correctly. |
| 67 */ | 68 */ |
| 68 updateScrollableContents: function() { | 69 updateScrollableContents: function() { |
| 69 if (this.intervalId_ !== null) | 70 if (this.intervalId_ !== null) |
| 70 return; // notifyResize is arelady in progress. | 71 return; // notifyResize is arelady in progress. |
| 71 | 72 |
| 72 let nodeList = this.root.querySelectorAll('[scrollable] iron-list'); | 73 var nodeList = this.root.querySelectorAll('[scrollable] iron-list'); |
| 73 // Use setInterval to avoid initial render / sizing issues. | 74 // Use setInterval to avoid initial render / sizing issues. |
| 74 this.intervalId_ = window.setInterval(function() { | 75 this.intervalId_ = window.setInterval(function() { |
| 75 let unreadyNodes = []; | 76 var unreadyNodes = []; |
| 76 for (let node of nodeList) { | 77 for (var i = 0; i < nodeList.length; i++) { |
| 78 var node = nodeList[i]; | |
| 77 if (node.parentNode.scrollHeight == 0) { | 79 if (node.parentNode.scrollHeight == 0) { |
| 78 unreadyNodes.push(node); | 80 unreadyNodes.push(node); |
| 79 continue; | 81 continue; |
| 80 } | 82 } |
| 81 let ironList = /** @type {!IronListElement} */ (node); | 83 var ironList = /** @type {!IronListElement} */ (node); |
| 82 ironList.notifyResize(); | 84 ironList.notifyResize(); |
| 83 } | 85 } |
| 84 if (unreadyNodes.length == 0) { | 86 if (unreadyNodes.length == 0) { |
| 85 window.clearInterval(this.intervalId_); | 87 window.clearInterval(this.intervalId_); |
| 86 this.intervalId_ = null; | 88 this.intervalId_ = null; |
| 87 } else { | 89 } else { |
| 88 nodeList = unreadyNodes; | 90 nodeList = unreadyNodes; |
| 89 } | 91 } |
| 90 }.bind(this), 10); | 92 }.bind(this), 10); |
| 91 }, | 93 }, |
| 92 | 94 |
| 93 /** | 95 /** |
| 94 * Event wrapper for updateScroll_. | 96 * Event wrapper for updateScroll_. |
| 95 * @param {!Event} event | 97 * @param {!Event} event |
| 96 * @private | 98 * @private |
| 97 */ | 99 */ |
| 98 updateScrollEvent_: function(event) { | 100 updateScrollEvent_: function(event) { |
| 99 let scrollable = /** @type {!HTMLElement} */ (event.target); | 101 var scrollable = /** @type {!HTMLElement} */ (event.target); |
| 100 this.updateScroll_(scrollable); | 102 this.updateScroll_(scrollable); |
| 101 }, | 103 }, |
| 102 | 104 |
| 103 /** | 105 /** |
| 104 * This gets called once intially and any time a scrollable container scrolls. | 106 * This gets called once intially and any time a scrollable container scrolls. |
| 105 * @param {!HTMLElement} scrollable | 107 * @param {!HTMLElement} scrollable |
| 106 * @private | 108 * @private |
| 107 */ | 109 */ |
| 108 updateScroll_: function(scrollable) { | 110 updateScroll_: function(scrollable) { |
| 109 scrollable.classList.toggle( | 111 scrollable.classList.toggle( |
| 110 'can-scroll', scrollable.clientHeight < scrollable.scrollHeight); | 112 'can-scroll', scrollable.clientHeight < scrollable.scrollHeight); |
| 111 scrollable.classList.toggle('is-scrolled', scrollable.scrollTop > 0); | 113 scrollable.classList.toggle('is-scrolled', scrollable.scrollTop > 0); |
| 112 scrollable.classList.toggle( | 114 scrollable.classList.toggle( |
| 113 'scrolled-to-bottom', scrollable.scrollTop + scrollable.clientHeight >= | 115 'scrolled-to-bottom', scrollable.scrollTop + scrollable.clientHeight >= |
| 114 scrollable.scrollHeight); | 116 scrollable.scrollHeight); |
| 115 }, | 117 }, |
| 116 }; | 118 }; |
| OLD | NEW |