basic-selection-scroll.html

<!--
Aspect which scrolls a container to keep the selected item visible.

@element basic-selection-scroll
-->

<link rel="import" href="../basic-aspect/basic-aspect.html">

<script>
window.Basic = window.Basic || {};

window.Basic.SelectionScroll = {

  contribute: {

    set selectedItem(item) {
      if (item) {
        // Keep the selected item in view.
        this.collective.scrollItemIntoView(item);
      }
    },

    /**
     * Scroll the given element completely into view, minimizing the degree of
     * scrolling performed.
     *
     * Blink has a scrollIntoViewIfNeeded() function that almost the same thing,
     * but unfortunately it's non-standard, and in any event often ends up
     * scrolling more than is absolutely necessary.
     *
     * @method scrollItemIntoView
     */
    scrollItemIntoView: function(item) {
      // Get the relative position of the item with respect to the top of the
      // list's scrollable canvas. An item at the top of the list will have a
      // elementTop of 0.
      var innermost = this.collective.innermostAttached;
      if (!innermost) {
        return;
      }

      var elementTop = item.offsetTop - innermost.offsetTop - innermost.clientTop;
      var elementBottom = elementTop + item.offsetHeight;
      // Determine the bottom of the scrollable canvas.
      var scrollBottom = innermost.scrollTop + innermost.clientHeight;
      if (elementBottom > scrollBottom) {
        // Scroll up until item is entirely visible.
        innermost.scrollTop += elementBottom - scrollBottom;
      }
      else if (elementTop < innermost.scrollTop) {
        // Scroll down until item is entirely visible.
        innermost.scrollTop = elementTop;
      }
    }
  },

  name: 'SelectionScroll'

};


Polymer({

  aspects: [Basic.SelectionScroll],

  behaviors: [Basic.Aspect],

  is: 'basic-selection-scroll',

  scrollItemIntoView: function(item) {
    this.collective.scrollItemIntoView(item);
  }

});
</script>