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

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

Issue 2649663002: WebUI: Undo some usages of ES6 features that break uglify. (Closed)
Patch Set: Use Set#forEach instead of converting to Array first. Created 3 years, 11 months 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
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 28 matching lines...) Expand all
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 };
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698