Sorts are functions, that are used to sort inserted items set with any used insert function. Sort function structure:
var grid = new Gridifier(demoGrid, {
// Without sort parameter, 'default' sort will be used.
// (By original items order in domCollection array)
sort: function(first, second, sort) {
// Sort(3-rd param) is a special object with sort helper functions.
// Return sort comparator result here.
}
});
var grid = new Gridifier(demoGrid, {
sort: {
// Without "selected" param "default" sort will be selected by default
byColorAsc: function(first, second, sort) {
return sort.byDataInt(first, second, "data-color-index"/* by data attr */);
},
byColorDesc: function(first, second, sort) {
return sort.byDataInt(first, second, "data-color-index", true/* desc param */);
},
byNumberAsc: function(first, second, sort) {
return sort.byContentInt(first, second/* by innerHTML */);
},
byNumberDesc: function(first, second, sort) {
return sort.byContentInt(first, second, true/* desc param */);
}
}
});
// To resort all grid after each insert use onInsert event
grid.onInsert(function() { if(/* check if 'sort,append' button is enabled */) grid.resort(); });
TouchClickEvent.listen(selectSortByColorButton, function() {
grid.sort((/* checks, if select by asc sort */) ? "byColorAsc" : "byColorDesc");
// By default, sort will be applied only to inserted items.
// So, you should call resort() if you want to resort all grid items.
if(/* check if 'sort' button is enabled */) grid.resort();
});
// ... Similar code per selectSortByNumberButton and default sort
var grid = new Gridifier(targetGrid, {/* Pass sorts here or build custom version */});
grid.sort('sortName');
var grid = new Gridifier(targetGrid, {
// Sort also can be passed as single function
// (Will be enabled by default and available with name "userfn")
sort: function(firstItem, secondItem, sort) { /* Return sort comparator result */ }
});
grid.sort("default");
grid.sort("userfn"); // You can select it later by "userfn" name
var grid = new Gridifier(targetGrid, {
// Sort can be passed as object with function name/function pairs
sort: {
// You can set initial used function with 'selected' param
selected: "firstSort", // ('default' sort(by array order) will be enabled by default)
// Sort(3-rd param) is a special object with sort helpers
firstSort: function(first, second, sort) { /* Return sort comparator result */ },
secondSort: function(first, second, sort) { /* Return sort comparator result */ },
// ... More functions
}
});
grid.sort("secondSort"); // You can switch sorts later
// Extend src/api/settings.js class and build custom version with Grunt
var Settings = function() {
this._settings = {
// ...
sort: {
// Define your custom sort fn inside sort object
customSort: function(first, second, sort) {
// return comparator result here
}
},
// ...
};
};
var grid = new Gridifier(targetGrid, {sort: "customSort"});
By default, Gridifier will sort only inserted items collection. To resort all grid items after inserts/sort calls use resort() function.
Notice.
Don't call resort function inside onReposition/onGridResize events, if you want resort
all grid items after inserts. This will cause endless loop. For this purpose use onInsert event.
var grid = new Gridifier(targetGrid, {sort: function(first, second, sort) {
// If you aren't using sort helpers, never return 0 from comparator.
// (most of browsers uses unstable sorts and equal items will 'jump' around)
return sort.byOriginalPos(first, second); // Use this helper instead of returning 0(stable)
// Sort by "data-sort-attr" attributes(desc) after replacing "#" chars with "" and applying parseInt(value, 10)
return sort.byDataInt(first, second, "data-sort-attr", true, [["#", ""]]);
// Sort by innerHTML values(asc) after applying parseFloat(value)
return sort.byContentFloat(first, second);
// Sort by query first result innerHTML(asc)
return sort.byContent(first, second, ".childElement");
});
To sort first by one value, than by second value in each group of equal elements from first sort you can pass array of parameters to byDataInt and byContent sort helpers. For more complex cases you can write custom comparator.
var grid = new Gridifier(demoGrid, {
sort: {
selected: "byColorAscThenByNumberAsc",
byColorAscThenByNumberAsc: function(first, second, sort) {
return sort.byDataInt(first, second, ["data-color-index", "data-position-index"]);
},
byColorDescThenByNumberAsc: function(first, second, sort) {
return sort.byDataInt(first, second, ["data-color-index|desc", "data-position-index"]);
},
byColorAscThenByNumberDesc: function(first, second, sort) {
return sort.byDataInt(first, second, ["data-color-index", "data-position-index|desc"]);
},
byColorDescThenByNumberDesc: function(first, second, sort) {
return sort.byDataInt(first, second, ["data-color-index|desc", "data-position-index|desc"]);
}
}
});
// ... Sort selects are similar to first sorts demo example on this page