Sort

Magnet can change the order of items based on their data.

Sort by:
Hydrogenium 1 H 1.008
Helium 2 He 4.002
Lithium 3 Li 6.94
Beryllium 4 Be 9.012
Borium 5 B 10.81
Carbonium 6 C 12.011
Nitrogenium 7 N 14.007
Oxygenium 8 O 15.999
Fluorum 9 F 18.998
Neon 10 Ne 20.179
Natrium 11 Na 22.989
Magnesium 12 Mg 24.305
Aluminium 13 Al 26.981
Silicium 14 Si 28.085
Phosphorus 15 P 30.973
Sulphur 16 S 32.06
Chlorum 17 Cl 35.45
Argon 18 Ar 39.948
Kalium 19 K 39.098
Calcium 20 Ca 40.078
Scandium 21 Sc 44.955
Titanium 22 Ti 47.867
Vanadium 23 V 50.941
Chromium 24 Cr 51.996
Manganum 25 Mn 54.938
Ferrum 26 Fe 55.845
Cobaltum 27 Co 58.933
Niccolum 28 Ni 58.693
Cuprum 29 Cu 63.546
Zincum 30 Zn 65.38
Gallium 31 Ga 69.723
Germanium 32 Ge 72.63
Arsenicum 33 As 74.921
Selenium 34 Se 78.971
Bromum 35 Br 79.904
Krypton 36 Kr 83.798
Rubidium 37 Rb 85.467
Strontium 38 Sr 87.62
Yttrium 39 Y 88.905
Zirconium 40 Zr 91.224
Niobium 41 Nb 92.906
Molybdenum 42 Mo 95.95
Technetium 43 Tc (98)
Ruthenium 44 Ru 101.07
Rhodium 45 Rh 102.905
Palladium 46 Pd 106.42
Argentum 47 Ag 107.868
Cadmium 48 Cd 112.414
Indium 49 In 114.818
Stannum 50 Sn 118.710
Stibium 51 Sb 121.760
Tellurium 52 Te 127.60
Iodum 53 I 126.904
Xenon 54 Xe 131.293
Caesium 55 Cs 132.905
Barium 56 Ba 137.327
Hafnium 72 Hf 178.49
Tantalum 73 Ta 180.947
Wolframium 74 W 183.84
Rhenium 75 Re 186.207
Osmium 76 Os 190.23
Iridium 77 Ir 192.217
Platinum 78 Pt 195.084
Aurum 79 Au 196.966
Hydrargyrum 80 Hg 200.59
Thallium 81 Tl 204.38
Plumbum 82 Pb 207.2
Bisemutum 83 Bi 208.980
Polonium 84 Po (209)
Astatum 85 At (210)
Radon 86 Rn (222)
Francium 87 Fr (223)
Radium 88 Ra (226)
Rutherfordium 104 Rf (267)
Dubnium 105 Db (268)
Seaborgium 106 Sg (271)
Bohrium 107 Bh (272)
Hassium 108 Hs (270)
Meitnerium 109 Mt (276)
Darmstadtium 110 Ds (281)
Roentgenium 111 Rg (280)
Copernicium 112 Cn (285)
Nihonium 113 Nh (284)
Flerovium 114 Fl (289)
Moscovium 115 Mc (288)
Livermorium 116 Lv (293)
Tennessine 117 Ts (294)
Oganesson 118 Og (294)
Lanthanum 57 La 138.905
Cerium 58 Ce 140.116
Praseodymium 59 Pr 140.907
Neodymium 60 Nd 144.242
Promethium 61 Pm (145)
Samarium 62 Sm 150.36
Europium 63 Eu 151.964
Gadolinium 64 Gd 157.25
Terbium 65 Tb 158.925
Dysprosium 66 Dy 162.500
Holmium 67 Ho 164.930
Erbium 68 Er 167.259
Thulium 69 Tm 168.934
Ytterbium 70 Yb 173.054
Lutetium 71 Lu 174.966
Actinium 89 Ac (227)
Thorium 90 Th 232.037
Protactinium 91 Pa 231.035
Uranium 92 U 238.028
Neptunium 93 Np (237)
Plutonium 94 Pu (244)
Americium 95 Am (243)
Curium 96 Cm (247)
Berkelium 97 Bk (247)
Californium 98 Cf (251)
Einsteinium 99 Es (252)
Fermium 100 Fm (257)
Mendelevium 101 Md (258)
Nobelium 102 No (259)
Lawrencium 103 Lr (262)

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 sort-by-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.

//Sort items on button click
$('.sort-by-group').click(function() {
  var sortBy = $(this).data('sort-by');
  $('.grid').magnet({sortBy: sortBy});
});

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.

$('.grid').magnet({
  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, ''));
    }
  }
});

Sort items with sortBy option for every property set in sortData. The value of sortBy must match a key in sortData.

$('.grid').magnet({
  sortData: {
    name: '.name'
  },
  sortBy: 'name'
});

There are two built-in sortBy options.

//Original order
$('.grid').magnet({
  sortBy: 'original'
});
//Random order
$('.grid').magnet({
  sortBy: 'random'
});

To sort by multiple properties, set sortBy to an array. Items will be sort by the first property, then by the next.

//Sort by category, then by symbol
$('.grid').magnet({
  sortBy: ['category', 'symbol']
});

By default, items are sort ascendengly. To sort descendingly, set sortAscending: false.

//Sort by number, from highest to lowest
$('.grid').magnet({
  sortBy: 'number',
  sortAscending: false
});

//Set to an object to set sort direction for each property
$('.grid').magnet({
  sortAscending: {
    name: true,
    number: false,
    symbol: true,
    weight: false,
    category: true
  }
});