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

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: Fix i->j 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++) {
55 scrollable.addEventListener('scroll', this.updateScrollEvent_.bind(this)); 55 scrollableElements[i].addEventListener(
56 'scroll', this.updateScrollEvent_.bind(this));
57 }
56 }, 58 },
57 59
58 detached: function() { 60 detached: function() {
59 if (this.intervalId_ !== null) 61 if (this.intervalId_ !== null)
60 clearInterval(this.intervalId_); 62 clearInterval(this.intervalId_);
61 }, 63 },
62 64
63 /** 65 /**
64 * Called any time the contents of a scrollable container may have changed. 66 * Called any time the contents of a scrollable container may have changed.
65 * This ensures that the <iron-list> contents of dynamically sized 67 * This ensures that the <iron-list> contents of dynamically sized
66 * containers are resized correctly. 68 * containers are resized correctly.
67 */ 69 */
68 updateScrollableContents: function() { 70 updateScrollableContents: function() {
69 if (this.intervalId_ !== null) 71 if (this.intervalId_ !== null)
70 return; // notifyResize is arelady in progress. 72 return; // notifyResize is arelady in progress.
71 73
72 let nodeList = this.root.querySelectorAll('[scrollable] iron-list'); 74 var nodeList = this.root.querySelectorAll('[scrollable] iron-list');
73 // Use setInterval to avoid initial render / sizing issues. 75 // Use setInterval to avoid initial render / sizing issues.
74 this.intervalId_ = window.setInterval(function() { 76 this.intervalId_ = window.setInterval(function() {
75 let unreadyNodes = []; 77 var unreadyNodes = [];
76 for (let node of nodeList) { 78 for (var i = 0; i < nodeList.length; i++) {
79 var node = nodeList[i];
77 if (node.parentNode.scrollHeight == 0) { 80 if (node.parentNode.scrollHeight == 0) {
78 unreadyNodes.push(node); 81 unreadyNodes.push(node);
79 continue; 82 continue;
80 } 83 }
81 let ironList = /** @type {!IronListElement} */ (node); 84 var ironList = /** @type {!IronListElement} */ (node);
82 ironList.notifyResize(); 85 ironList.notifyResize();
83 } 86 }
84 if (unreadyNodes.length == 0) { 87 if (unreadyNodes.length == 0) {
85 window.clearInterval(this.intervalId_); 88 window.clearInterval(this.intervalId_);
86 this.intervalId_ = null; 89 this.intervalId_ = null;
87 } else { 90 } else {
88 nodeList = unreadyNodes; 91 nodeList = unreadyNodes;
89 } 92 }
90 }.bind(this), 10); 93 }.bind(this), 10);
91 }, 94 },
92 95
93 /** 96 /**
94 * Event wrapper for updateScroll_. 97 * Event wrapper for updateScroll_.
95 * @param {!Event} event 98 * @param {!Event} event
96 * @private 99 * @private
97 */ 100 */
98 updateScrollEvent_: function(event) { 101 updateScrollEvent_: function(event) {
99 let scrollable = /** @type {!HTMLElement} */ (event.target); 102 var scrollable = /** @type {!HTMLElement} */ (event.target);
100 this.updateScroll_(scrollable); 103 this.updateScroll_(scrollable);
101 }, 104 },
102 105
103 /** 106 /**
104 * This gets called once intially and any time a scrollable container scrolls. 107 * This gets called once intially and any time a scrollable container scrolls.
105 * @param {!HTMLElement} scrollable 108 * @param {!HTMLElement} scrollable
106 * @private 109 * @private
107 */ 110 */
108 updateScroll_: function(scrollable) { 111 updateScroll_: function(scrollable) {
109 scrollable.classList.toggle( 112 scrollable.classList.toggle(
110 'can-scroll', scrollable.clientHeight < scrollable.scrollHeight); 113 'can-scroll', scrollable.clientHeight < scrollable.scrollHeight);
111 scrollable.classList.toggle('is-scrolled', scrollable.scrollTop > 0); 114 scrollable.classList.toggle('is-scrolled', scrollable.scrollTop > 0);
112 scrollable.classList.toggle( 115 scrollable.classList.toggle(
113 'scrolled-to-bottom', scrollable.scrollTop + scrollable.clientHeight >= 116 'scrolled-to-bottom', scrollable.scrollTop + scrollable.clientHeight >=
114 scrollable.scrollHeight); 117 scrollable.scrollHeight);
115 }, 118 },
116 }; 119 };
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698