Vestride_Shuffle/docs/_includes/sorting.html

<h2>Sorting<a href="#sorting"></a></h2>

<p>You can order the elements with a function you supply. In the demo above, each item has a <code>data-date-created</code> and <code>data-title</code> attribute which are used for sorting.</p>

<div class="code-block">
  <pre rel="HTML"><code class="language-markup">&lt;figure class="col-4@sm picture-item" data-groups='["city"]' data-date-created="2016-06-09" data-title="Crossroads"&gt;&hellip;&lt;/figure&gt;</code></pre>
</div>

<div class="code-block">
  <pre rel="HTML"><code class="language-markup">&lt;select class="sort-options"&gt;
  &lt;option value=""&gt;Default&lt;/option&gt;
  &lt;option value="title"&gt;Title&lt;/option&gt;
  &lt;option value="date-created"&gt;Date Created&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>

<div class="code-block">
  <pre rel="JavaScript"><code class="language-javascript">addSorting() {
  document.querySelector('.sort-options').addEventListener('change', this._handleSortChange.bind(this));
};

_handleSortChange(evt) {
  var value = evt.target.value;

  function sortByDate(element) {
    return element.getAttribute('data-created');
  }

  function sortByTitle(element) {
    return element.getAttribute('data-title').toLowerCase();
  }

  var options;
  if (value === 'date-created') {
    options = {
      reverse: true,
      by: sortByDate,
    };
  } else if (value === 'title') {
    options = {
      by: sortByTitle,
    };
  } else {
    options = {};
  }

  this.shuffle.sort(options);
};</code>
</div>

<p>The <code>options</code> object can contain three properties:</p>
<ul>
  <li><code>reverse</code>: a boolean which will reverse the resulting order.</li>
  <li><code>by</code>: a function with an element as the parameter. Above, we&rsquo;re returning the value of the <code>data-date-created</code> or <code>data-title</code> attribute.</li>
  <li><code>randomize</code>: Make the order random.</li>
</ul>
<p>Returning <code>undefined</code> from the <code>by</code> function will reset the order to DOM order.</p>
<p>Calling sort with an empty object will reset the elements to DOM order.</p>
<p class="demo-link-container">Check out the <a href="#demo">demo</a>.</p>

<h3>Filter and sort</h3>
<p>You can filter and sort at the same time by passing a <a href="#sorting">sort object</a> as the second parameter.</p>

<div class="code-block">
  <pre rel="JavaScript"><code class="language-javascript">shuffleInstance.filter('space', {
  by: function (element) {
    return element.getAttribute('data-title').toLowerCase();
  },
});</code></pre>
</div>

<h3>Advanced sorting</h3>
<p>You can provide the entire sort compare function if you need more control.</p>
<p>The parameters (<code>a</code>, <code>b</code>) are <code>ShuffleItem</code> instances and you'll probably only use the <code>element</code> property. The <code>reverse</code> option still works with the <code>compare</code> function if you need it.</p>
<p>For example, if you wanted to sort by the first group in <code>data-groups</code>, then by <code>data-age</code>, you could do this:</p>

<div class="code-block">
  <pre rel="JavaScript"><code class="language-javascript">shuffleInstance.sort({
  compare: function (a, b) {
    // Sort by first group, then by age.
    var groupA = JSON.parse(a.element.getAttribute('data-groups'))[0];
    var groupB = JSON.parse(b.element.getAttribute('data-groups'))[0];
    if (groupA > groupB) {
      return 1;
    }
    if (groupA < groupB) {
      return -1;
    }

    // At this point, the group strings are the exact same. Test the age.
    var ageA = parseInt(a.element.getAttribute('data-age'), 10);
    var ageB = parseInt(b.element.getAttribute('data-age'), 10);
    return ageA - ageB;
  },
});</code></pre>
</div>