exmg-thead.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../polymer/lib/mixins/gesture-event-listeners.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

<dom-module id="exmg-thead">
  <template>
    <style>
      :host {
        width: 100%;
        font-weight: 500;
        border-bottom: 1px solid #dbdbdb;
        user-select: none;
        color: rgba(0,0,0,.64);
      }

      .tr {
        @apply --layout;
        box-sizing: border-box;
        border-bottom: 1px solid #dbdbdb;

        @apply --exmg-thead-tr;
      }

      .th {
        @apply --layout;
        @apply --layout-center;
        height: 36px;
        box-sizing: border-box;
        background-color: #f5f5f5;
        overflow: hidden;
        text-align: left;
        padding: 0px 6px;
        position: relative;
        @apply --exmg-thead-th;
      }

      .th > span {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        pointer-events: none;
      }

      .th:first-child {
        padding-left: 24px;
      }

      .th:last-child {
        padding-right: 24px;
      }

      .flex {
        @apply --layout-flex;
      }

      .flex-auto {
        /* stretch and squish */
        @apply --layout-flex-auto;
      }

      .flex-none {
        /* fixed width */
        @apply --layout-flex-none;
      }

      .flex-right {
        @apply --layout;
        @apply --layout-end-justified;
        padding-right: 24px;
        padding-left: 6px !important;
      }

      .collapsable {
        display: none;
      }

      @media(min-width: 600px) {
        .collapsable {
          @apply --layout;
        }
      }

      .th[sorted] {
        color: rgba(0,0,0,.78);
      }

      .th[sortable]:hover{
        cursor: pointer;
        color: rgba(0,0,0,.87);
      }

      .th[sortable]::after {
        display: block;
        content: "";
        background-image: url('arrow-downward.svg');
        background-size: 12px 12px;
        height: 12px;
        width: 12px;
        margin: 0 0 0 4px;
        opacity: 0;
      }

      .th[sortable]:hover::after,
      .th[sorted]::after {
        opacity: 1;
      }

      .th[sorted]::after {
        transition: transform .1s linear;
        transform: rotate(0deg);
      }

      :host([sort-direction='DESC']) .th[sorted]::after {
        transform: rotate(180deg);
      }

      .th.flex-right[sortable]::after,
      .th.flex-right[sorted]::after {
        position: absolute;
        right: 8px;
        top: 50%;
        margin-top: -6px;
      }

    </style>
    <slot></slot>
  </template>

  <script>
    /**
     * `exmg-thead`
     * Datatable
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class ExmgThead extends Polymer.mixinBehaviors([Polymer.Templatizer], Polymer.GestureEventListeners(Polymer.Element))  {
      static get is() { return 'exmg-thead'; }
      static get properties() {
        return {
          /**
          * An string containing the column sort key
          */
          sorted: {
            type: String,
            reflectToAttribute: true,
            notify: true
          },
          /**
          * An string containing 'ASC' or 'DESC' to indicate the sorting direction
          */
          sortDirection: {
            type: String,
            notify: true,
            reflectToAttribute: true,
            value: 'ASC'
          }
        };
      }
      static get observers() {
        return [
          '_sortedByChanged(sorted)',
        ]
      }

      ready() {
        super.ready();

        let templ = this.querySelector('template');

        if(!templ) {
          console.error('Error: exmg-thead template not found!');
          return;
        }
        this.templatize(templ);
        this.shadowRoot.appendChild(this.stamp(null).root);
      }

      connectedCallback() {
        super.connectedCallback();
        Polymer.Gestures.addListener(this, 'tap', this._handleTap);
      }

      disconnectedCallback() {
        super.disconnectedCallback();
        Polymer.Gestures.removeListener(this, 'tap', this._handleTap);
      }

      /*
      * Triggered on column change when sorting
      */
      _sortedByChanged(sorted) {
        let headerColumns = this.shadowRoot.querySelectorAll('.th');
        this._resetOldSorting();
        headerColumns.forEach((el) => {
          if(el.getAttribute('sortable') === sorted) {
            el.setAttribute('sorted','');
            this.set('sortDirection', 'ASC');
          }
        });
      }

      /*
      * Handle column header tap
      */
      _handleTap(e) {
        let sortField = e.path[0].getAttribute("sortable");
        if(e.path[0].classList.contains('th') && sortField){
          if(this.sorted === sortField){
            this.set('sortDirection', this.sortDirection === 'ASC' ? 'DESC' : 'ASC');
          } else {
            this._resetOldSorting();
            this.set('sorted', sortField);
          }
        }
      }

      /*
      * Reset old column sorting attributes
      */
      _resetOldSorting(tr) {
        let rowChildren = this.shadowRoot.querySelectorAll('.th[sorted]');
        rowChildren.forEach(el => el.removeAttribute('sorted'));
      }
    }

    window.customElements.define(ExmgThead.is, ExmgThead);
  </script>
</dom-module>