You can order the elements with a function you supply. In the demo above, each item has a data-date-created and data-title attribute which are used for sorting.
<figure class="col-4@sm picture-item" data-groups='["city"]' data-date-created="2016-06-09" data-title="Crossroads">…</figure>
<select class="sort-options">
<option value="">Default</option>
<option value="title">Title</option>
<option value="date-created">Date Created</option>
</select>
Demo.prototype.addSorting = function () {
document.querySelector('.sort-options').addEventListener('change', this._handleSortChange.bind(this));
};
Demo.prototype._handleSortChange = function (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);
};
The options object can contain three properties:
reverse: a boolean which will reverse the resulting order.by: a function with an element as the parameter. Above, we’re returning the value of the data-date-created or data-title attribute.randomize: Make the order random.Returning undefined from the by function will reset the order to DOM order.
Calling sort with an empty object will reset the elements to DOM order.
Check out the demo.
You can filter and sort at the same time by passing a sort object as the second parameter.
shuffleInstance.filter('space', {
by: function (element) {
return element.getAttribute('data-title').toLowerCase();
},
});
You can provide the entire sort compare function if you need more control.
The parameters (a, b) are ShuffleItem instances and you'll probably only use the element property. The reverse option still works with the compare function if you need it.
For example, if you wanted to sort by the first group in data-groups, then by data-age, you could do this:
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;
},
});