res/imp/sort.html

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

  Allows sorting the members of the indicated element by the values of the
  data attributes.

  Add children to <sort-sk> that generate click events and that have child
  content, such as button or paper-button elements.  Add a data-key
  attribute to each child element that indicates which data-* attribute the
  children should be sorted on.

  Note that all sorting is done numerically, unless a data-alpha attribute is
  present, in which case the sorting is done alphabetically.

  Additionally a single child element can have a data-default attribute with a
  value of "up" or "down" to indicate the default sorting that already exists
  in the data.

  An example usage, that will present two buttons to sort the contents of
  div#stuffToBeSorted.

    <sort-sk target=stuffToBeSorted>
      <paper-button data-key="clustersize"
        data-default=down>Cluster Size </paper-button>
      <paper-button data-key="stepsize">Step Size </paper-button>
    </sort-sk>

    <div id=stuffToBeSorted>
      <div data-clustersize=10 data-stepsize=0.5></div>
      <div data-clustersize=50 data-stepsize=1.2></div>
      ...
    </div>

  Attributes:
    target - The id of the container element whose children are to be sorted.

    node_name - The type of elements that are being sorted. All other elements
        will remain unchanged. If the empty string then all child elments are
        sorted.

  Methods:
    None.

  Events:
    None.
-->

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

<dom-module id="sort-sk">
  <template>
    <content></content>
  </template>
</dom-module>

<script>
  (function () {
    // The states to move each button through on a click.
    var toggle = {
      '': 'icons:arrow-drop-down',
      'icons:arrow-drop-down': 'icons:arrow-drop-up',
      'icons:arrow-drop-up': 'icons:arrow-drop-down'
    };

    Polymer({
      is: 'sort-sk',

      properties: {
        target: {
          type: String,
          value: "",
        },
        node_name: {
          type: String,
          value: "",
        }
      },

      ready: function () {
        // Start by appending a iron-icon to each clickable child and
        // registering for the click event.
        $$('[data-key]', this).forEach(function (ele) {
          var ico = document.createElement('iron-icon');
          ico.icon = 'icons:arrow-drop-down';
          ico.style.visibility = 'hidden';
          Polymer.dom(ele).appendChild(ico);
          ele.addEventListener('click', this.clickHandler.bind(this));
        }.bind(this));

        // Handle a default value if one has been set.
        var def = $$$('[data-default]', this);
        if (def) {
          var defIcon = $$$('iron-icon', def);
          defIcon.style.visibility = 'initial';
          defIcon.icon = 'icons:arrow-drop-' + def.dataset.default;
        }
      },

      clickHandler: function (e) {
        var ele = e.target;
        if (ele.nodeName === 'IRON-ICON') {
          ele = ele.parentElement;
        }
        var ico = $$$('iron-icon', ele);

        // Set the children elements icons to reflect the new sorting order.
        ico.icon = toggle[ico.icon || ''];
        ico.style.visibility = 'initial';
        $$('[data-key]', this).forEach(function (innerEle) {
          if (innerEle.dataset.key !== ele.dataset.key) {
            $$$('iron-icon', innerEle).style.visibility = 'hidden';
          }
        });

        // Remember the direction we are sorting in.
        var up = ico.icon.indexOf('-up') > -1;

        // Are we sorting alphabetically or numerically.
        var alpha = ele.dataset.alpha != undefined;

        // Sort the children of the element at #target.
        var sortBy = ele.dataset.key;
        var container = $$$('#' + this.target, this.parentElement);
        var elements = [];
        var children = container.children;
        for (var i = 0; i < children.length; i++) {
          var ele = children[i];
          if (this.node_name != "" && ele.nodeName != this.node_name) {
            continue;
          }
          var value = ele.dataset[sortBy];
          if (!alpha) {
            value = +value;
          }
          elements.push({
            value: value,
            node: ele
          });
        }
        if (alpha) {
          elements.sort(function (x, y) {
            if (!up) {
              var tmp = x;
              x = y;
              y = tmp;
            }
            return x.value == y.value ? 0 : x.value > y.value ? 1 : -1;
          });
        } else {
          elements.sort(function (x, y) {
            if (up) {
              return x.value - y.value;
            } else {
              return y.value - x.value;
            }
          });
        }
        elements.forEach(function (i) {
          container.appendChild(i.node);
        });
      }
    });
  }());
</script>