brainy-th.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-ripple/paper-ripple.html">
<link rel="import" href="brainy-table-cell-behavior.html">
<link rel="import" href="brainy-table-cell-shared-styles.html">

<dom-module id="brainy-th">
  <template>
    <style include="brainy-table-cell-shared-styles">
      :host {
        position: relative;
        overflow: hidden;
        font: 600 12px/1.1 Roboto, sans-serif;
        color: rgba(0, 0, 0, 0.54);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      :host([sort-by]) {
        cursor: pointer;
      }

      :host ::content iron-icon[sort-trigger] {
        position: relative;
        width: 0;
        height: 16px;
        fill: rgba(0, 0, 0, 0.87);
        transition: transform 0.25s linear, width 0.2s linear, color 0.2s linear;
      }

      /* show icon upon hover, or if column sorting is enabled */
      :host([sort-by]:hover) ::content iron-icon[sort-trigger],
      :host([direction]) ::content iron-icon[sort-trigger] {
        width: 16px;
      }

      :host([sort-by]) .icon {
        width: 16px;
        flex: 0 0 16px;
      }

      .inner {
        display: flex;
        align-items: center;
      }

      :host([direction]) .inner {
        color: rgba(0, 0, 0, 0.87);
      }

      :host(:not([direction])) ::content iron-icon[sort-trigger] {
        fill: rgba(0, 0, 0, 0.38);
      }

      :host([direction='desc']) ::content iron-icon[sort-trigger] {
        transform: rotate(-180deg);
      }

      :host ::content iron-icon[sort-trigger][hidden] {
        display: none;
      }

      :host(:not([align-right])) ::content iron-icon[sort-trigger] {
        left: -20px;
      }

      :host([align-right]) ::content iron-icon[sort-trigger] {
        left: -4px;
      }

      :host([sort-by]:not([align-right])) .inner {
        position: relative;
        left: -16px;
      }
    </style>
    <paper-ripple id="ripple" noink></paper-ripple>
    <div class="icon">
      <content select="iron-icon"></content>
    </div>
    <div class="inner">
      <content></content>
    </div>
  </template>
  <script>
    (function() {
      'use strict';

      Polymer({
        is: 'brainy-th',

        behaviors: [
          Brainy.TableCellBehavior
        ],

        properties: {
          currentSortPath: String,
          currentSortDirection: String,
          direction: {
            type: String,
            reflectToAttribute: true
          },
          defaultSortPath: {
            type: String
          },
          noResetSort: {
            type: Boolean
          },
          headerHeight: {
            type: Number
          },
          sortBy: {
            type: String,
            value: null,
            reflectToAttribute: true
          }
        },

        listeners: {
          tap: '_onTap'
        },

        observers: [
          '_sortChanged(currentSortPath, currentSortDirection)',
          '_headerHeightChanged(headerHeight)'
        ],

        _sortChanged: function(path, direction) {
          // reset when sorting by other column
          if (path === this.sortBy) {
            this.direction = direction;
          } else {
            this.direction = null;
          }
        },

        _headerHeightChanged: function(headerHeight) {
          this.style.height = Number(headerHeight) + 'px';
        },

        _onTap: function(event) {
          // prevent sorting when click on filter input etc.
          var target = Polymer.dom(event).rootTarget;
          if (this.sortBy && (target === this || target.hasAttribute('sort-trigger'))) {
            this._sort();
          }
        },

        _sort: function() {
          switch (this.direction) {
            case 'asc':
              this.direction = 'desc';
              break;

            case 'desc':
              this.direction = this.defaultSortPath === this.sortBy && !this.noResetSort ? 'asc' : null;
              break;

            default:
              this.direction = 'asc';
              break;
          }

          this.fire('sort-direction-changed', {
            path: this.sortBy,
            direction: this.direction
          });

          this.$.ripple.simulatedRipple();
        }
      });
    })();
  </script>
</dom-module>