MD Settings: Save and restore scroll position in iron-list

ui/webui/resources/cr_elements/cr_scrollable_behavior.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview Behavior for scrollable containers with <iron-list>.
  *
  * Any containers with the 'scrollable' attribute set will have the following
  * classes toggled appropriately: can-scroll, is-scrolled, scrolled-to-bottom.
  * These classes are used to style the container div and list elements
@@ skipping 18 matching lines @@
  *   </template>
  * </dom-module>
  *
  * NOTE: If 'container' is not fixed size, it is important to call
  * updateScrollableContents() when [[items]] changes, otherwise the container
  * will not be sized correctly.
  */
 
 /** @polymerBehavior */
 var CrScrollableBehavior = {
-  properties: {
-    /** @private {number|null} */
-    intervalId_: {type: Number, value: null}
-  },
+
+  /** @private {number|null} */
+  intervalId_: null,
+
+  /**
+   * A dictionary of integer arrays, one entry per scrollable contianer id.
+   * Each array keeps a queue of scroll positions. This ensures that multiple
+   * calls to save/restore scroll do not interfere with each other.
+   * @private {!Object<!Array<number>>}
+   */
+  saveScrollTop_: {},
 
   ready: function() {
     var scrollableElements = this.root.querySelectorAll('[scrollable]');
 
     // Setup the intial scrolling related classes for each scrollable container.
     requestAnimationFrame(function() {
       for (var i = 0; i < scrollableElements.length; i++)
         this.updateScroll_(scrollableElements[i]);
     }.bind(this));
 
@@ skipping 33 matching lines @@
       }
       if (unreadyNodes.length == 0) {
         window.clearInterval(this.intervalId_);
         this.intervalId_ = null;
       } else {
         nodeList = unreadyNodes;
       }
     }.bind(this), 10);
   },
 
+  /** @param {!IronListElement} list */
+  saveScroll: function(list) {
+    let target = list.scrollTarget;

[Dan Beam, 2017/02/01 06:13:17]

no let until we vulcanize

[stevenjb, 2017/02/02 01:17:47]

Oops, missed that. Will vulcanize be part of the build step so that these will
eventually be caught?

[Dan Beam, 2017/02/02 04:18:00]

yes

+    this.saveScrollTop_[target.id] = this.saveScrollTop_[target.id] || [];

[Dan Beam, 2017/02/01 06:13:17]

just save on the list itself, i.e.

list.prevScrollTops_ = list.prevScrollTops_ || [];
list.prevScrollTops_.push(list.scrollTarget.scrollTop);

list.scroll(0, list.prevScrollTops_.pop());

also, do we really need an array?  why?

[stevenjb, 2017/02/02 01:17:47]

The C++ programmer in me cringes at decorating another class with it's own
cruft, but yeah, that works too, and I guess is more Javascripty? It does
certainly simplify the code.

We need a fifo here because we may get multiple updates in a single frame, so we
want to apply the last non zero update. It is also important that we don't apply
a stale update, so we can't just always use the latest non-zero value since we
wouldn't know when to clear it. I'll add a comment.

+    this.saveScrollTop_[target.id].push(target.scrollTop);
+  },
+
+  /** @param {!IronListElement} list */
+  restoreScroll: function(list) {
+    let target = list.scrollTarget;
+    this.async(function() {
+      let scrollTop = this.saveScrollTop_[target.id].shift();
+      // Ignore scrollTop of 0 in case it was intermittent (we do not need to
+      // explicity scroll to 0).
+      if (scrollTop != 0)
+        list.scroll(0, scrollTop);
+    });
+  },
+
   /**
    * Event wrapper for updateScroll_.
    * @param {!Event} event
    * @private
    */
   updateScrollEvent_: function(event) {
     var scrollable = /** @type {!HTMLElement} */ (event.target);
     this.updateScroll_(scrollable);
   },
 
   /**
    * This gets called once intially and any time a scrollable container scrolls.
    * @param {!HTMLElement} scrollable
    * @private
    */
   updateScroll_: function(scrollable) {
     scrollable.classList.toggle(
         'can-scroll', scrollable.clientHeight < scrollable.scrollHeight);
     scrollable.classList.toggle('is-scrolled', scrollable.scrollTop > 0);
     scrollable.classList.toggle(
         'scrolled-to-bottom',
         scrollable.scrollTop + scrollable.clientHeight >=
             scrollable.scrollHeight);
   },
 };