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