grafitto-sort

A polymer compatible reusable web element providing a solution for sorting a list of items before displaying them. This component also supports use of custom sort functions using the f property.

Install:

bower install --save grafitto/grafitto-sort

View the API and Demo Here

<div class="wrapper">
      <h3>grafitto-sort DEMO</h3>
        <paper-checkbox class="styled" id="i" raised>
          Case
          <span class="subtitle">
            Enable case sensitivity
          </span>
        </paper-checkbox>
        <paper-checkbox class="styled" id="order" raised>
          Order
          <span class="subtitle">
            Enable descending order
          </span>
        </paper-checkbox>
        <grafitto-sort by="name" as="vitu">
          <template>
            <iron-list items=[[vitu]] as="item">
              <template>
                <paper-item>
                  <paper-item-body two-line>
                    <div>{{item.name}}</div>
                    <div class="small" secondary>{{item.code}}</div>
                  </paper-item-body>
                </paper-item>
              </template>
            </iron-list>
          </template>
        </grafitto-sort>
    </div>
  </body>
  <script>
    var f = document.querySelector("grafitto-sort");
    f.items = ["one", "two", "three", "four", "five", "six", "seven"];

    //Set case sensitivity event handler
    document.getElementById("i").addEventListener("checked-changed", function(e){
      console.log("Setting case sensitivity to: ", e.detail.value?"True":"False");
      f.caseSensitive = e.detail.value;
    })
    document.getElementById("order").addEventListener("checked-changed", function(e){
      console.log("Setting descending to: ", e.detail.value?"True":"False");
      f.desc = e.detail.value;
    })
    //Listen for value changed
    //document.getElementById("like").addEventListener("value-changed", function(from, to){
    //  f.like = from.detail.value;
    //});
  </script>

array:

var array = ["one", "two", "three", "four", "five", "six", "seven"];

<grafitto-sort item=[[array]] as="vitu">
  <template>
    <iron-list items=[[vitu]] as="item">
      <template>
        <div>{{item}}</div>
      </template>
    </iron-list>
  </template> 
</grafitto-sort>

Items will be sorted to this order: "five","four","one","seven","six","three", "two" When a simple array is provided, a simple sort is done.

Arrays of Objects

data:

var data = [
  {
    name:"John",
    home: "Thika"
  },
  {
    name: "Doe",
    home: "Nairobi"
  }
]

Example:

<grafitto-sort items=[[data]] by="name" as="vitu">
  <template>
    <iron-list items=[[vitu]] as="item">
      <template>
        <div>{{item.name}} - {{grafitto.home}}</div>
      </template>
    </iron-list>
  </template>
</grafitto-sort>

Just incase you are wondering, vitu means items in Swahili :-)

Items are sorted using the by attribute

grafitto-sort also supports complex objects. consider:

var complexObj = [
  {
    name: {
      first: "Thomas",
      second: "Kimtu"
    },
    home: "Thika"
  },
  {
    name: {
      first: "John",
      second: "Doe"
    },
    home: "Othaya"
  },
  {
    name: {
      first: "Clement",
      second: "Wainaina"
    },
    home: "Nakuru"
  }
]

Here is an example using the complexObj object above

<grafitto-sort items=[[complexObj]] by="name.first" as="vitu">
  <template>
    <iron-list items=[[vitu]] as="item">
      <template>
        <div>{{item.name.first}} {{item.name.second}}, {{item.home}}</div>
      </template>
    </iron-list>
  </template>
</grafitto-sort>

You can also use your custom function to sort the items provided. The function receives a two instances of the items provided and should return a boolean

<dom-module id="your-element">
  <template>
    <grafitto-sort items=[[data]] id="filter" as="vitu">
      <template>
        <iron-list items=[[vitu]] as="item">
          <template>
            <div>{{item.name}}, {{item.home}}</div>
          </template>
        </iron-list>
      </template>
    </grafitto-sort>
    <script>
      Polymer({
        is: "your-element",
        properties: {
          data: {
            type: Array,
            value: [
                    {
                      "name":"John",
                      "home": "Thika"
                    },
                    {
                      "name": "Doe",
                      "home": "Nairobi"
                    }
                  ]
          }
        },
        ready: function(){
          this.$.filter.f = function(first, second){
            return first.localCompare(second);
          };
          //treat f as if it will be used as a parameter in sort() function, 
          //because it will :-)
        }
       //Then you can call sort() function to trigger sort
      })
    </script>
  </template>
</dom-module>