vaadin-grid-dynamic-columns-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 || {};
  window.Vaadin.Grid = window.Vaadin.Grid || {};

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

    ready() {
      super.ready();
      this._addNodeObserver();
    }

    _hasColumnGroups(columns) {
      for (let i = 0; i < columns.length; i++) {
        if (columns[i].localName === 'vaadin-grid-column-group') {
          return true;
        }
      }

      return false;
    }

    _getChildColumns(el) {
      // TODO: Drop legacy api
      return Polymer.dom(el).queryDistributedElements('*').filter(this._isColumnElement);
    }

    _flattenColumnGroups(columns) {
      return columns.map(col => {
        if (col.localName === 'vaadin-grid-column-group') {
          return this._getChildColumns(col);
        } else {
          return [col];
        }
      }).reduce((prev, curr) => {
        return prev.concat(curr);
      }, []);
    }

    _getColumnTree() {
      var rootColumns = this.queryAllEffectiveChildren('*').filter(this._isColumnElement);
      var _columnTree = [];

      for (var c = rootColumns; ;) {
        _columnTree.push(c);
        if (!this._hasColumnGroups(c)) {
          break;
        }
        c = this._flattenColumnGroups(c);
      }

      return _columnTree;
    }

    _updateColumnTree() {
      var columnTree = this._getColumnTree();
      if (!this._arrayEquals(columnTree, this._columnTree)) {
        this._columnTree = columnTree;
      }
    }

    _addNodeObserver() {
      this._observer = new Polymer.FlattenedNodesObserver(this, info => {
        if (info.addedNodes.filter(this._isColumnElement).length > 0 ||
          info.removedNodes.filter(this._isColumnElement).length > 0) {
          this._updateColumnTree();
        }

        // in native Shadow, tab order goes first through shadow root, then moves over
        // to light children. We need to make sure footer focus trap is always
        // the very last element that can be tabbed into.
        if (Polymer.Settings.useNativeShadow || Polymer.Settings.useShadow) {
          // Polymer.dom(this).appendChild(this.$.footerFocusTrap);
        }

        this._debouncerCheckImports = Polymer.Debouncer.debounce(
          this._debouncerCheckImports,
          Polymer.Async.timeOut.after(2000),
          this._checkImports.bind(this));
      });
    }

    _arrayEquals(arr1, arr2) {
      if (!arr1 || !arr2 || arr1.length != arr2.length) {
        return false;
      }

      for (var i = 0, l = arr1.length; i < l; i++) {
        // Check if we have nested arrays
        if (arr1[i] instanceof Array && arr2[i] instanceof Array) {
          // recurse into the nested arrays
          if (!this._arrayEquals(arr1[i], arr2[i])) {
            return false;
          }
        } else if (arr1[i] != arr2[i]) {
          return false;
        }
      }
      return true;
    }

    _checkImports() {
      [
        'vaadin-grid-column-group',
        'vaadin-grid-filter',
        'vaadin-grid-tree-toggle',
        'vaadin-grid-selection-column',
        'vaadin-grid-sorter'
      ].forEach(elementName => {
        var element = this.querySelector(elementName);
        if (element && !(element instanceof Polymer.Element)) {
          console.warn(`Make sure you have imported the required module for <${elementName}> element.`);
        }
      });
    }

    _updateLastColumn() {
      Array.from(this.shadowRoot.querySelectorAll('tr')).forEach(row => {
        Array.from(row.querySelectorAll('[part~="cell"]:not([part~="details-cell"])'))
          .sort((a, b) => {
            return a._column._order - b._column._order;
          }).forEach((cell, cellIndex, children) => {
            this._toggleAttribute('last-column', cellIndex === children.length - 1, cell);
          });
      });
    }

    _isColumnElement(node) {
      return node.nodeType === Node.ELEMENT_NODE && /\bcolumn\b/.test(node.localName);
    }
  };
</script>