Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(116)

Side by Side Diff: ui/webui/resources/cr_elements/cr_scrollable_behavior.js

Issue 2477693005: MD Settings: Close edit startup URL dialog, if underlying URL list changes. (Closed)
Patch Set: Add missing dependency to iron-list.html Created 4 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « chrome/test/data/webui/settings/startup_urls_page_test.js ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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
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 };
OLDNEW
« no previous file with comments | « chrome/test/data/webui/settings/startup_urls_page_test.js ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698