isotope sorting poc

by austegard

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div class="content-wrap">
  <div class="main">
    <div class="container" id="layout-main">
      <!-- Main hero unit for a primary marketing message or call to action -->

      <div class="row">
        <!-- Create a span of 3 and 9 if there is content in the AsideFirst zone or AsideSecond zone, or 3-6-3 if both, otherwise create a span of 12 -->
        <!-- Place messages above Content -->

        <div class="span6 zone zone-content" id="content">
          <article class="content-item page">
            <header>
              <h1>Clients</h1>

              <ul class="option-set clearfix" data-option-key="sortBy" id=
              "sort-by">
                <li><a class="selected" data-option-value="original-order"
                href="#sortBy=original-order">original-order</a></li>

                <li><a data-option-value="name" href=
                "#sortBy=name">name</a></li>

                <li><a data-option-value="industry" href=
                "#sortBy=industry">industry</a></li>

                <li><a data-option-value="desc" href=
                "#sortBy=desc">description</a></li>
              </ul>
            </header>

            <div id="clientList">
              <div id="our-work">
                <article class="content-item projection-page">
                  <article class="content-item client">
                    <header>
                      <h1><a href="/Contents/Item/Display/232">Client
                      1</a></h1>
                    </header>

                    <p>Vel Letalis Gemino Vulputate Humo<br>
                    Acsi Cogo Huic Indoles Ex Vereor<br>
                    Gilvus At Foras Distineo Dolor<br>
                    EpulaeIn Nulla</p>

                    <p class="link-field link-field-client-s-website">
                    <span class="value"><a href=
                   ...

CSS

li {display: inline-block; margin-left: 10px;}
article {border: solid 1px silver; margin: 10px;}

/**** Isotope CSS3 transitions ****/

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

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

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, 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;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */

JavaScript

$('article.projection-page').isotope({
    getSortData: {
        name: function($elem) {
            return $elem.find('header>h1>a').text();
        },
        industry: function($elem) {
            return $elem.find('.enumeration-field-industry>span.value').text();
        },
        desc: function($elem) {
            return $elem.find('p').first().text();
        }
    }
});

$('#sort-by a').click(function(){

    var val = $(this).data('option-value');
    $('article.projection-page').isotope({sortBy: val});

});