res/imp/sort-toggle.html

<!--
  Copyright 2016 The LUCI Authors. All rights reserved.
  Use of this source code is governed under the Apache License, Version 2.0
  that can be found in the LICENSE file.

  This in an HTML Import-able file that contains the definition
  of the following elements:

    <sort-toggle>

  Sort-toggle is a small ui widget that can be tapped to change the way
  something is sorted.  The preferred way to use this is to have multipe
  of them created in dom-repeat.  The parent then listens to the
  sort_change event and sets the current property on all the sort-toggles
  to keep them up to date.

  Only one sort-toggle will be active in this way.

  Properties:
    // input
    current: Object, the current sort-toggle that should be active. Is
        The same format as the event.detail Object.
    name: String, the name of the thing being sorted. To be used in the
        fired event.

    // output
    direction: String, the direction of the sorting.  "asc", "", "desc" for
        ascending/nothing/descending.

  Methods:
    None.

  Events:
    sort_change: when a user has tapped this element.  The details includes
        name and direction.
-->

<link rel="import" href="/res/imp/bower_components/iron-icons/iron-icons.html">

<dom-module id="sort-toggle">
  <template>
    <style>
      :host {
        display: inline-block;
        position: relative;
        min-width: 20px;
        min-height: 16px;
        vertical-align: middle;
      }
      iron-icon {
        position: absolute;
        left: 0;
        cursor: pointer;
      }
      .hidden {
        visibility: hidden;
      }
    </style>

    <span on-click="toggle">
      <iron-icon
        style="top:0"
        class$="[[_hidden(direction,'asc')]]"
        icon="icons:arrow-drop-down">
      </iron-icon>
      <iron-icon
        style="bottom:0"
        class$="[[_hidden(direction,'desc')]]"
        icon="icons:arrow-drop-up">
      </iron-icon>
    </span>

  </template>
  <script>
    Polymer({
      is: "sort-toggle",

      properties: {
        current: {
          type: Object,
          observer: "_resetSort",
        },
        name: {
          type: String,
          observer: "_resetSort",
        },

        direction: {
          type: String,
          value: "",
          notify: true,
        },
      },

      toggle: function() {
        if (this.direction === "asc") {
          this.set("direction", "desc");
        } else {
          this.set("direction", "asc");
        }
        this.fire("sort_change", {direction: this.direction, name: this.name});
      },

      _hidden: function(num, compare) {
        if (num === compare) {
          return "hidden";
        }
        return "";
      },

      _resetSort: function() {
        // Because of how Polymer inserts and moves elements around, we need to
        // update the direction value if the name changes so the ascending sort
        // by "os" doesn't become the ascending sort by "gpu" if a column gets
        // added before "os", for example.  Additionally, this makes sure that
        // only one sort-toggle is active at a given time.
        if (this.current && this.current.name === this.name) {
          this.set("direction", this.current.direction);
        } else {
          this.set("direction", "");
        }
      },
    });
  </script>
</dom-module>