Sort
Magnet can change the order of items based on their data.
HTML
Items can be ordered using several values, obtained from data attributes or elements:
<div class="grid">
<div class="grid-item nonmetal" data-category="nonmetal">
<p class="name">Hydrogenium</p>
<p class="number">1</p>
<p class="symbol">H</p>
<p class="weight">1.008</p>
</div>
<div class="grid-item noble-gas" data-category="noble-gas">
<p class="name">Helium</p>
<p class="number">2</p>
<p class="symbol">He</p>
<p class="weight">4.002</p>
</div>
...
</div>
Additionally, you can use any element to sort items with the data attribute. In this case, <button> and data-sort-by:
<div class="button-group filter-group">
<button data-sort-by="original">Original Order</button>
<button data-sort-by="category">Category</button>
<button data-sort-by="name">Name</button>
<button data-sort-by="number">Number</button>
<button data-sort-by="symbol">Symbol</button>
<button data-sort-by="weight">Weight</button>
</div>
jQuery
Order items with the sortBy option. This option requires to have previously obtained data from the HTML with the sortData option object.
//Get sort data, then sort by name
$('.grid').magnet({
sortData: {
category: '[data-category]',
name: '.name',
number: '.number',
symbol: '.symbol',
weight: '.weight'
},
sortBy: 'name'
});
//Get sort data on initialization,
//sort items later
$('.grid').magnet({
sortData: {
category: '[data-category]',
name: '.name',
number: '.number',
symbol: '.symbol',
weight: '.weight'
}
});
//Sort items by name after initialization
$('.grid').magnet({sortBy: 'name'});
//Sort items by name, then by number
$('.grid').magnet({sortBy: ['name', 'number']});
To sort items when a button is clicked, use the value in data-sort-by attribute for the sortBy option.
//Filter items on button click
$('.filter-group').click(function() {
var filter = $(this).data('filter');
$('.grid').magnet({filter: filter});
});
Get data from the HTML with the sortData option object. Object’s keys, are used as keywords to sort by. Object’s values, are a string or a function to retrieve data.
A string set as value, will be used as a query selector to get the text of child elements for each item.
$('.grid').magnet({
sortData: {
//Use text of '.name' selector
name: '.name',
//Use text of '.symbol' selector
symbol: '.symbol'
}
});
Any string wrapped in brackets, like [attribute], will be used to get the value of an attribute.
$('.grid').magnet({
sortData: {
//Use the value of the data-category attribute
category: '[data-category]'
}
});
Numeric values should be parsed to get a correct order. Add parser keywords to the keyword string to parse values.
$('.grid').magnet({
sortData: {
//Parse value as an integer
number: '.number parseInt',
//Parse value as a float
weight: '.weight parseFloat'
}
});
A function can be used as a value. This function is used to get data from each item. The function requires a parameter elem, which is the item element selector, and must return the data.
sortData: {
weight: function(elem) {
//Get text from .weight element
var weight = $(elem).find('.weight').text();
//Remove parenthesis and parse value as a float
return parseFloat(weight.replace(/[()]/g, ''));
}
}