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

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

Issue 2627373002: MD Settings: Save and restore scroll position in iron-list (Closed)
Patch Set: Nits Created 3 years, 10 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 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: { 39
40 /** @private {number|null} */ 40 /** @private {number|null} */
41 intervalId_: {type: Number, value: null} 41 intervalId_: null,
42 },
43 42
44 ready: function() { 43 ready: function() {
45 var scrollableElements = this.root.querySelectorAll('[scrollable]'); 44 var scrollableElements = this.root.querySelectorAll('[scrollable]');
46 45
47 // Setup the intial scrolling related classes for each scrollable container. 46 // Setup the intial scrolling related classes for each scrollable container.
48 requestAnimationFrame(function() { 47 requestAnimationFrame(function() {
49 for (var i = 0; i < scrollableElements.length; i++) 48 for (var i = 0; i < scrollableElements.length; i++)
50 this.updateScroll_(scrollableElements[i]); 49 this.updateScroll_(scrollableElements[i]);
51 }.bind(this)); 50 }.bind(this));
52 51
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after
86 } 85 }
87 if (unreadyNodes.length == 0) { 86 if (unreadyNodes.length == 0) {
88 window.clearInterval(this.intervalId_); 87 window.clearInterval(this.intervalId_);
89 this.intervalId_ = null; 88 this.intervalId_ = null;
90 } else { 89 } else {
91 nodeList = unreadyNodes; 90 nodeList = unreadyNodes;
92 } 91 }
93 }.bind(this), 10); 92 }.bind(this), 10);
94 }, 93 },
95 94
95 /** @param {!IronListElement} list */
96 saveScroll: function(list) {
97 // Store a FIFO of saved scroll positions so that multiple updates in a
98 // frame are applied correctly. Specifically we need to track when '0' is
99 // saved (but not apply it), and still handle patterns like [30, 0, 32].
100 list.savedScrollTops = list.savedScrollTops || [];
101 list.savedScrollTops.push(list.scrollTarget.scrollTop);
102 },
103
104 /** @param {!IronListElement} list */
105 restoreScroll: function(list) {
106 this.async(function() {
107 var scrollTop = list.savedScrollTops.shift();
108 // Ignore scrollTop of 0 in case it was intermittent (we do not need to
109 // explicity scroll to 0).
110 if (scrollTop != 0)
111 list.scroll(0, scrollTop);
112 });
113 },
114
96 /** 115 /**
97 * Event wrapper for updateScroll_. 116 * Event wrapper for updateScroll_.
98 * @param {!Event} event 117 * @param {!Event} event
99 * @private 118 * @private
100 */ 119 */
101 updateScrollEvent_: function(event) { 120 updateScrollEvent_: function(event) {
102 var scrollable = /** @type {!HTMLElement} */ (event.target); 121 var scrollable = /** @type {!HTMLElement} */ (event.target);
103 this.updateScroll_(scrollable); 122 this.updateScroll_(scrollable);
104 }, 123 },
105 124
106 /** 125 /**
107 * This gets called once intially and any time a scrollable container scrolls. 126 * This gets called once intially and any time a scrollable container scrolls.
108 * @param {!HTMLElement} scrollable 127 * @param {!HTMLElement} scrollable
109 * @private 128 * @private
110 */ 129 */
111 updateScroll_: function(scrollable) { 130 updateScroll_: function(scrollable) {
112 scrollable.classList.toggle( 131 scrollable.classList.toggle(
113 'can-scroll', scrollable.clientHeight < scrollable.scrollHeight); 132 'can-scroll', scrollable.clientHeight < scrollable.scrollHeight);
114 scrollable.classList.toggle('is-scrolled', scrollable.scrollTop > 0); 133 scrollable.classList.toggle('is-scrolled', scrollable.scrollTop > 0);
115 scrollable.classList.toggle( 134 scrollable.classList.toggle(
116 'scrolled-to-bottom', scrollable.scrollTop + scrollable.clientHeight >= 135 'scrolled-to-bottom', scrollable.scrollTop + scrollable.clientHeight >=
117 scrollable.scrollHeight); 136 scrollable.scrollHeight);
118 }, 137 },
119 }; 138 };
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698