golden/frontend/res/imp/sort-control-sk.html

  <!-- The <sort-control-sk> custom element declaration.

  Custom element to select the sort order of fields. It displays the current
  sort selection and provides a drop down menu to choose a different one.
  It offers an ascending and desending option for every given field
  fires an event when the sort selection is changed.

  A selection is represented by an opbject with this format. e.g.
  {
      dir: "asc",        // direction of the sort order: asc, descending
      field: "count"     // field id
  }

  Attributes:
      selection - An object in the format of a selection defined above.
                  This will also reflect the current selection.
                  Setting this attribute will NOT fire an event.

      disabled - Boolean for disabling the control (input only).

    Events:
      sort-changed - Sent when the selection has changed. The event detail
                 will contain the sort selection in the format described above.

    Methods:
      setItems(fields) - Sets the options that are available for selection.
             of the element. 'fields' is an array of object like this:
               [
                {
                  field: "unique_field_id",
                  label: "Human readable label of this field",

                }
              ]

              For each field this will be expanded to contain an ascending and
              a descending option.
  -->
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="shared-styles.html">

<dom-module id="sort-control-sk">
  <template>
    <style include="shared-styles">
      #dropDown {
        margin-top: -12px;
      }

    </style>
    <paper-dropdown-menu id="dropDown" label="Sort By" disabled="{{disabled}}" horizontal-align="left">
      <paper-listbox id="itemMenu" class="dropdown-content" selected="{{_currSelection}}" attr-for-selected="value">
        <template is="dom-repeat" items="{{_items}}">
          <paper-item value="[[item.val]]">[[item.lab]]</paper-item>
        </template>
      </paper-listbox>
    </paper-dropdown-menu>
  </template>
  <script>
  (function() {
    Polymer({
      is: 'sort-control-sk',
      properties: {
        disabled: {
          type: Boolean,
          value: false
        },
        selection: {
          type: Object,
          notify: true,
          reflectToAttribute: true,
          observer: "_handleSelectionChanged"
        },
        _currSelection: {
          type:String,
        }
      },

      ready: function () {
        this.listen(this.$.itemMenu, 'iron-select', '_handleItemSelected');
      },

      setItems: function(items) {
        var exi = [];
        for(var i=0; i < items.length; i++) {
          var it = items[i];
          exi.push({val:gold.SORT_ASC + ":" + it.field, lab: it.label + ' ↑'});
          exi.push({val:gold.SORT_DESC + ":" + it.field, lab: it.label + ' ↓'});
        }
        this.set("_items", exi);
      },

      _handleSelectionChanged: function(sortOrder) {
        this._externalVal = sortOrder.dir+":"+sortOrder.field;
        this.set("_currSelection", this._externalVal);
      },

      _handleItemSelected: function(ev) {
        // Don't do anything if the value was just set.
        if (this._externalVal && this._externalVal === this._currSelection) {
          this._externalVal = null;
          return;
        }
        var sortOrder = this._currSelection.split(":");
        var detail = {dir: sortOrder[0], field: sortOrder.slice(1).join(':')};
        this.set('selection', detail);
        this.fire('sort-changed', detail);
      }
    });
  })();
  </script>
</dom-module>