Isotope - sort selected first

by Reusablecode

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div id="container">
  <div class="item selected">
     <h2>header 1</h2>
Content 1 clickable <a href="#">link 1</a>

  </div>
  <div class="item">
     <h2>header 2</h2>
Content 2 clickable <a href="#">link 2</a>

  </div>
  <div class="item">c</div>
  <div class="item">d</div>
  <div class="item">e</div>
  <div class="item">f</div>
  <div class="item">g</div>
  <div class="item">h</div>
  <div class="item">i</div>
  <div class="item">j</div>
  <div class="item">k</div>
  <div class="item">l</div>
  <div class="item">m</div>
  <div class="item">n</div>
  <div class="item">o</div>
  <div class="item">p</div>
  </p>

CSS

.item {
  padding: 5px;
  width: 80px;
  height: 80px;
  background: #AAA;
  margin: 5px;
  float: left;
}
.item.selected {
  width: 280px;
  height: 280px;
  background: red;
}
/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/
 .isotope-item {
  z-index: 2;
}
.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}
/**** Isotope CSS3 transitions ****/
 .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;
}
/**** disabling Isotope CSS3 transitions ****/
 .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  transition-duration: 0s;
}
/* End: Recommended Isotope styles */

JavaScript

var $container = $('#container'),
  $items = $('.item');

$container.isotope({
  itemSelector: '.item',
  masonry: {
    columnWidth: 100
  },
  getSortData: {
    selected: function ($item) {
      // sort by selected first, then by original order
      return ($item.hasClass('selected') ? -500 : 0) + $item.index();
    }
  },
  sortBy: 'selected'
})

$items.click(function () {
  var $this = $(this);
  // don't proceed if already selected
  var $previousSelected = $('.selected');
  if (!$this.hasClass('selected')) {
    $this.addClass('selected');
  }

  $previousSelected.removeClass('selected');

  // update sortData for new items size
  $container.isotope('updateSortData', $this)
    .isotope('updateSortData', $previousSelected)
    .isotope();

});
$('.item a').click(function(event){
  event.stopPropagation();
});