vaadin-grid-scroll-mixin.html

<!--
@license
Copyright (c) 2017 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-->

<script>
  window.Vaadin = window.Vaadin || {};
  Vaadin.Grid = Vaadin.Grid || {};

  /**
   * @polymerMixin
   */
  Vaadin.Grid.ScrollMixin = superClass => class ScrollMixin extends superClass {

    static get properties() {
      return {

        // Cached array of frozen cells
        _frozenCells: {
          type: Array,
          value: function() {
            return [];
          },
        },

        _scrollbarWidth: {
          type: Number,
          value: function() {
            // Create the measurement node
            var scrollDiv = document.createElement('div');
            scrollDiv.style.width = '100px';
            scrollDiv.style.height = '100px';
            scrollDiv.style.overflow = 'scroll';
            scrollDiv.style.position = 'absolute';
            scrollDiv.style.top = '-9999px';
            document.body.appendChild(scrollDiv);
            // Get the scrollbar width
            var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
            // Delete the DIV
            document.body.removeChild(scrollDiv);
            return scrollbarWidth;
          }
        },

        _rowWithFocusedElement: Element

      };
    }

    static get observers() {
      return [
        '_scrollHeightUpdated(_estScrollHeight)'
      ];
    }

    ready() {
      super.ready();
      this.scrollTarget = this.$.table;
      this.addEventListener('wheel', this._onWheel.bind(this));

      this.$.items.addEventListener('focusin', (e) => {
        const itemsIndex = e.composedPath().indexOf(this.$.items);
        this._rowWithFocusedElement = e.composedPath()[itemsIndex - 1];
      });
      this.$.items.addEventListener('focusout', () => this._rowWithFocusedElement = undefined);
    }

    _onWheel(e) {
      if (e.ctrlKey || this._hasScrolledAncestor(e.target, e.deltaX, e.deltaY)) {
        return;
      }

      var table = this.$.table;

      var deltaY = e.deltaY;
      if (e.deltaMode === 1) {
        // Mode 1 == scrolling by lines instead of pixels
        deltaY *= this._physicalAverage;
      }

      var momentum = Math.abs(e.deltaX) + Math.abs(deltaY);

      if (this._canScroll(table, e.deltaX, deltaY)) {
        e.preventDefault();
        table.scrollTop += deltaY;
        table.scrollLeft += e.deltaX;
        this._scrollHandler();
        this._hasResidualMomentum = true;

        this._ignoreNewWheel = true;
        this._debouncerIgnoreNewWheel = Polymer.Debouncer.debounce(this._debouncerIgnoreNewWheel,
            Polymer.Async.timeOut.after(500),
            () => this._ignoreNewWheel = false);
      } else if (this._hasResidualMomentum && momentum <= this._previousMomentum || this._ignoreNewWheel) {
        e.preventDefault();
      } else if (momentum > this._previousMomentum) {
        this._hasResidualMomentum = false;
      }
      this._previousMomentum = momentum;
    }

    /**
     * Determines if the element has an ancestor prior to this
     * cell content that handles the scroll delta
     */
    _hasScrolledAncestor(el, deltaX, deltaY) {
      if (this._canScroll(el, deltaX, deltaY)) {
        return true;
      } else if (el.localName !== 'vaadin-grid-cell-content' && el !== this && el.parentElement) {
        return this._hasScrolledAncestor(el.parentElement, deltaX, deltaY);
      }
    }

    /**
     * Determines if the the given scroll deltas can be applied to the element
     * (fully or partially)
     */
    _canScroll(el, deltaX, deltaY) {
      return (deltaY > 0 && el.scrollTop < el.scrollHeight - el.offsetHeight) ||
      (deltaY < 0 && el.scrollTop > 0) ||
      (deltaX > 0 && el.scrollLeft < el.scrollWidth - el.offsetWidth) ||
      (deltaX < 0 && el.scrollLeft > 0);
    }

    /**
     * Update the models, the position of the
     * items in the viewport and recycle tiles as needed.
     */
    _afterScroll(e) {
      // this._adjustVirtualIndexOffset(delta);

      this._translateStationaryElements();

      if (!this.hasAttribute('reordering')) {
        this._toggleAttribute('scrolling', true, this.$.scroller);
        this._toggleAttribute('scroll-period', true, this.$.scroller);
      }

      this._debounceScrolling = Polymer.Debouncer.debounce(this._debounceScrolling,
          Polymer.Async.timeOut.after(100),
          () => {
            this._toggleAttribute('scrolling', false, this.$.scroller);
            if (!this.$.outerscroller.outerScrolling) {
              this._reorderRows();
            }
          });

      this._debounceScrollPeriod = Polymer.Debouncer.debounce(this._debounceScrollPeriod,
          Polymer.Async.timeOut.after(1000),
          () => {
            this._toggleAttribute('scroll-period', false, this.$.scroller);
          });

      this.$.outerscroller.syncOuterScroller();
    }

    // correct order needed for preserving correct tab order between cell contents.
    _reorderRows() {
      var body = this.$.items;
      var items = body.querySelectorAll('tr');
      if (!items.length) {
        return;
      }

      var _adjustedVirtualStart = this._virtualStart + this._vidxOffset;

      // Which row to use as a target?
      const targetRow = this._rowWithFocusedElement || items[0];

      // Where the target row should be?
      const targetPhysicalIndex = targetRow.index - _adjustedVirtualStart;

      // Reodrer the DOM elements to keep the target row at the target physical index
      const delta = Array.from(items).indexOf(targetRow) - targetPhysicalIndex;
      if (delta > 0) {
        for (let i = 0; i < delta; i++) {
          body.appendChild(items[i]);
        }
      } else if (delta < 0) {
        for (let i = items.length + delta; i < items.length; i++) {
          body.insertBefore(items[i], items[0]);
        }
      }
    }

    _frozenCellsChanged() {
      this._debouncerCacheElements = Polymer.Debouncer.debounce(this._debouncerCacheElements,
          Polymer.Async.microTask,
          () => {
            Array.from(this.root.querySelectorAll('[part~="cell"]')).forEach(function(cell) {
              cell.style.transform = '';
            });
            this._frozenCells = Array.prototype.slice.call(this.root.querySelectorAll('[frozen]'));
            this._translateStationaryElements();
          });
      this._updateLastFrozen();
    }

    _updateLastFrozen() {
      if (!this._columnTree) {
        return;
      }

      const columnsRow = this._columnTree[this._columnTree.length - 1].slice(0);
      columnsRow.sort((a, b) => {
        return a._order - b._order;
      });
      const lastFrozen = columnsRow.reduce((prev, col, index) => {
        col._lastFrozen = false;
        return col.frozen && !col.hidden ? index : prev;
      }, undefined);
      if (lastFrozen !== undefined) {
        columnsRow[lastFrozen]._lastFrozen = true;
      }
    }

    _translateStationaryElements() {
      if (this._edge && !this._scrollbarWidth) {
        // Fixed mode (Tablet Edge)
        this.$.items.style.transform =
        this._getTranslate(-this._scrollLeft || 0, -this._scrollTop || 0);

        this.$.footer.style.transform = this.$.header.style.transform =
        this._getTranslate(-this._scrollLeft || 0, 0);
      } else {
        this.$.footer.style.transform = this.$.header.style.transform = this._getTranslate(0, this._scrollTop);
      }

      var frozenCellTransform = this._getTranslate(this._scrollLeft, 0);
      for (var i = 0; i < this._frozenCells.length; i++) {
        this._frozenCells[i].style.transform = frozenCellTransform;
      }
    }

    _getTranslate(x, y) {
      return 'translate(' + x + 'px,' + y + 'px)';
    }

    _scrollHeightUpdated(_estScrollHeight) {
      this.$.outersizer.style.top = this.$.fixedsizer.style.top = _estScrollHeight + 'px';
    }

  };
</script>