data-table-column.html

<link rel="import" href="data-table-column-filter.html">

<dom-module id="data-table-column">
  <template>
    <template id="header">
      <data-table-column-filter label="[[column.name]]" value="{{column.filterValue}}" hidden$="[[!column.filterBy]]"></data-table-column-filter>
      <div hidden$="[[column.filterBy]]">[[column.name]]</div>
    </template>
  </template>
  <script>
    Polymer({
      is: 'data-table-column',

      behaviors: [
        Polymer.Templatizer,
      ],

      properties: {
        /**
         * If `true`, cell contents will be aligned on the right
         */
        alignRight: {
          type: Boolean,
          value: false
        },

        /**
         * Name of the column. This value is displayed in the header cell of the column
         */
        name: {
          type: String,
          notify: true,
          value: ''
        },

        /**
         * Path to a property that will be filtered by this column. If set, a filter input
         * will be automaticelly placed on the header cell of the column.
         */
        filterBy: String,

        /**
         * Filter value that will be used to filter the items using the property defined
         * in `filterBy` property.
         */
        filterValue: String,

        /**
         * Minimum width of the column
         */
        width: {
          type: String,
          notify: true,
          value: "100px"
        },

        /**
         * Ratio of how the extra space between columns is distributed. If every cell
         * has the same `flex` value, the space will be distributed evenly.
         */
        flex: {
          type: Number,
          notify: true,
          value: 1
        },

        /**
         * If `true`, the cells of this column will be hidden.
         */
        hidden: {
          type: Boolean,
          notify: true,
          value: false
        },

        /**
         * Display order of the column in relation with the other columns.
         */
        order: {
          type: Number,
          notify: true
        },

        /**
         * Path to a property that will be sorted by this column. If set, a sorting
         * indicator will be automatically placed in the header cell of this column.
         */
        sortBy: {
          type: String
        },

        /**
         * Template for the header cell
         */
        headerTemplate: {
          type: Object,
          readOnly: true,
          value: function() {
            var custom = Polymer.dom(this).querySelector('template[is=header]');

            if (custom) {
              return custom;
            }

            return Polymer.dom(this.root).querySelector('#header');
          }
        },

        /**
         * Template for the row item cell
         */
        template: {
          type: Object,
          readOnly: true,
          value: function() {
            return Polymer.dom(this).querySelector('template:not([is=header])');
          }
        },

        _templateInstances: {
          type: Array,
          value: function() {
            return [];
          }
        },

        _forwardedParentProps: {
          type: Object,
          value: function() {
            return {};
          }
        },

        templatizeRow: {
          type: Object,
          notify: true,
          value: function() {
           return function(parentElement) {
             return this._templatize(this.template, parentElement);
           }.bind(this)
          }
        },

        templatizeHeader: {
          type: Object,
          notify: true,
          value: function() {
           return function(parentElement) {
             return this._templatize(this.headerTemplate, parentElement);
           }.bind(this);
          }
        }
      },

      observers: ['_forwardedParentPropsChanged(_forwardedParentProps.*)',
        '_templateInstancesChanged(_templateInstances.splices)',
        '_filterValueChanged(filterValue, filterBy)',
        '_filterByChanged(filterBy)',
        '_nameChanged(name)',
        '_sortByChanged(sortBy)'
      ],

      _nameChanged: function(name) {
        this._updateTemplateProperty('column.name', name);
      },

      _sortByChanged: function(sortBy) {
        // column.sortBy is currently used iron-data-table so we need to notify
        // it for changes.
        var table = Polymer.dom(this).parentNode;
        if (table.columns) {
          var index = table.columns.indexOf(this);
          table.notifyPath('columns.' + index + '.sortBy', sortBy);
        }

        // someone might be binding to sortBy in the header template so let's
        // update that just in case.
        this._updateTemplateProperty('column.sortBy', sortBy);
      },

      _filterByChanged: function(filterBy) {
        this._updateTemplateProperty('column.filterBy', filterBy);
      },

      _filterValueChanged: function(filterValue, filterBy) {
        this._updateTemplateProperty('column.filterValue', filterValue);
        this.fire('column-filter-changed', {value: filterValue, filterBy: filterBy});
      },

      _forwardParentProp: function(prop, value) {
        //TODO: Bug in Templatizer forwards also [[item]] etc. instance properties
        // through this function when Shadow DOM is on AND iron-data-table is nested inside
        // another Polymer element. Inside a dom-bind template everything seems to work...
        if (prop.indexOf('item') === -1 &&
            prop.indexOf('selected') === -1 &&
            prop.indexOf('index') === -1 &&
            prop.indexOf('column') === -1 &&
            prop.indexOf('expanded') === -1) {
          this.set('_forwardedParentProps.' + prop, value);
        }
      },

      _updateTemplateProperty: function(prop, value) {
        if (this._templateInstances) {
          var changeRecord = {base: {}};
          changeRecord.base[prop] = value;
          this._forwardedParentPropsChanged(changeRecord);
        }
      },

      _forwardedParentPropsChanged: function(changeRecord) {
        // TODO: need to make sure this works with nested paths also. [[foo.bar]] etc.
        for (var prop in changeRecord.base) {
          this._templateInstances.forEach(function(t) {
            t.set(prop, changeRecord.base[prop]);
          });
        }
      },

      _forwardInstanceProp: function(inst, prop, value) {
        if (prop === 'expanded' && inst.item && inst.__expanded__ !== value) {
          var table = Polymer.dom(this).parentNode;

          table.fire(value ? 'item-expanded' : 'item-collapsed', {item: inst.item});
        }
      },

      _forwardInstancePath: function(inst, path, value) {
        // prevent propagating column specific values to other columns.
        if (path.indexOf('column') === 0) {
          return;
        }
        var table = Polymer.dom(this).parentNode;
        var columns = table.columns;

        for (var c = 0; c < columns.length; c++) {
          var instances = columns[c]._templateInstances;

          for (var i = 0; i < instances.length; i++) {
            var instance = instances[i];
            if (instance.index == inst.index) {
              instance.notifyPath(path, value);
            }
          }
        }

        if (path.indexOf('item') === 0) {
          // instance.notifyPath above will call _forwardInstancePath recursively,
          // so need to debounce to avoid firing the same event multiple times.
          table.debounce('item-changed', function() {
            // stripping 'item.' from path.
            table.fire('item-changed', {item: inst.item, path: path.substring(5), value: value});
          }.bind(this));
        }
      },

      _templateInstancesChanged: function(changeRecord) {
        // TODO: (Saulis) make sure _templateInstances length is correct. Earlier testing seems producing weird results.
        if (changeRecord && changeRecord.indexSplices) {

          changeRecord.indexSplices.forEach(function(s) {
            var addedInstance = s.object[s.index];

            for (var prop in this._forwardedParentProps) {
              addedInstance[prop] = this._forwardedParentProps[prop];
            }
          }.bind(this));
        }
      },

      ready: function() {
        // we need to templatize all user-provided templates asap to prevent [[item...]] from being
        // bound to a parent dom-bind template or a parent web component.
        // Note (Saulis): if the internal templates have something else than [[item..]] they will get screwed when setting properi
        this._instanceProps = {
          item: true,
          index: true,
          selected: true,
          column: true,
          expanded: true
        };

        this.templatize(this.headerTemplate);

        // template not present in angular 2 at this point.
        if (this.template) {
          this.templatize(this.template);
        }
      },

      _templatize: function(template, parentElement) {
        this.templatize(template);
        var instance = this.stamp();

        this.push('_templateInstances', instance);
        Polymer.dom(parentElement).insertBefore(instance.root, Polymer.dom(parentElement).firstElementChild);

        return {
          bind: function(data) {
            for (var prop in data) {
              instance[prop] = data[prop];
            }
          }
        };
      }
    });
  </script>
</dom-module>