Isotope - target first / last item sorting

by Daniel Pegues

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<ul id="sorts">
  <li><a href="#original-order" data-sort="original-order" class="selected">original order</a></li>
  <li><a href="#name" data-sort="name">name</a></li>
  <li><a href="#symbol" data-sort="symbol">symbol</a></li>
  <li><a href="#number" data-sort="number">number</a></li>
  <li><a href="#score" data-sort="score">score</a></li>
</ul>

<div id="container" class="clearfix"> 
  <div class="element first">
    <p class="number">80</p> 
    <h3 class="symbol">Hg</h3> 
    <h2 class="name">Mercury</h2> 
    <p class="score">18</p> 
  </div> 
  <div class="element">
    <p class="number">52</p> 
    <h3 class="symbol">Te</h3> 
    <h2 class="name">Tellurium</h2> 
    <p class="score">62</p> 
  </div> 
  <div class="element">
    <p class="number">83</p> 
    <h3 class="symbol">Bi</h3> 
    <h2 class="name">Bismuth</h2> 
    <p class="score">5</p> 
  </div> 
  <div class="element">
    <p class="number">48</p> 
    <h3 class="symbol">Cd</h3> 
    <h2 class="name">Cadmium</h2> 
    <p class="score">43</p> 
  </div> 
  <div class="element">
    <p class="number">20</p> 
    <h3 class="symbol">Ca</h3> 
    <h2 class="name">Calcium</h2> 
    <p class="score">40</p> 
  </div> 
  <div class="element">
    <p class="number">75</p> 
    <h3 class="symbol">Re</h3> 
    <h2 class="name">Rhenium</h2> 
    <p class="score">92</p> 
  </div> 
  <div class="element">
    <p class="number">81</p> 
    <h3 class="symbol">Tl</h3> 
    <h2 class="name">Thallium</h2> 
    <p class="score">76</p> 
  </div> 
  <div class="element">
    <p class="number">51</p> 
    <h3 class="symbol">Sb</h3> 
    <h2 class="name">Antimony</h2> 
    <p class="score">51</p> 
  </div> 
  <div class="element">
    <p class="number">27</p> 
    <h3 class="symbol">Co</h3> 
    <h2 class="name">Cobalt</h2> 
    <p class="score">88</p> 
  </div> 
  <div class="element">
    <p class="number">71</p> 
    <h3 class="symbol">Lu</h3> 
...

CSS

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.element {
  width: 65px;
  height: 65px;
  background: #666;
  color: white;
  font-weight: bold;
  float: left;
  margin: 3px;
  padding: 3px;
  font-size: 12px;
}

.element.first { background: red; }
.element.last { background: blue; }

.selected {
  background: yellow;
}

#sorts li { display: inline-block; }

/* isotope transition styles */

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

JavaScript

$(function(){
  
  var $container = $('#container');
  
  $container.isotope({
    itemSelector : '.element',
    getSortData : {
      symbol : function( $elem ) {
        return $elem.find('.symbol').text();
      },
      number : function( $elem ) {
        return parseInt( $elem.find('.number').text(), 10 );
      },
      score : function( $elem ) {
        return parseInt( $elem.find('.score').text(), 10 );
      },
      name : function ( $elem ) {
        return $elem.find('.name').text();
      }
    }
  });
  
  var $sortedItems = $container.data('isotope').$filteredAtoms;
  
  // sorting
  $('#sorts a').click(function(){
    // get href attribute, minus the #
    var $this = $(this),
        sortName = $this.data('sort');
    $container.isotope({ 
      sortBy : sortName
    });
    
    // highlight first item
    $container.find('.first').removeClass('first');
    $sortedItems.first().addClass('first');
    
    // highlight last item
    $container.find('.last').removeClass('last');
    $sortedItems.last().addClass('last');
    
    // switches selected class on buttons
    // don't proceed if already selected
    if ( !$this.hasClass('selected') ) {
      $this.parents('#sorts').find('.selected').removeClass('selected');
      $this.addClass('selected');
    }
    return false;
  });
  
});