docs : add sorting doc

_includes/layout-change.js

@@ -1,24 +1,25 @@
-// change layout
-var isHorizontal = false;
-$('#layouts a').click(function(){
-  var mode = $(this).attr('href').slice(1);
-      wasHorizontal = isHorizontal;
-  isHorizontal = $(this).hasClass('horizontal');
 
-  if ( wasHorizontal !== isHorizontal ) {
+      // change layout
-    // need to do some clean up for transitions and sizes
+      var isHorizontal = false;
-    var style = isHorizontal ? 
+      $('#layouts a').click(function(){
-      { height: '80%', width: $demo.width() } : 
+        var mode = $(this).attr('href').slice(1);
-      { width: 'auto' };
+            wasHorizontal = isHorizontal;
-    $demo.addClass('no-transition').css( style );
+        isHorizontal = $(this).hasClass('horizontal');
-    setTimeout(function(){
-      $demo.removeClass('no-transition').isotope({ layoutMode : mode });
-    }, 100 )
-  } else {
-    // go ahead and apply new layout
-    $demo.isotope({ layoutMode : mode });
   
-  }
+        if ( wasHorizontal !== isHorizontal ) {
+          // need to do some clean up for transitions and sizes
+          var style = isHorizontal ? 
+            { height: '80%', width: $demo.width() } : 
+            { width: 'auto' };
+          $demo.addClass('no-transition').css( style );
+          setTimeout(function(){
+            $demo.removeClass('no-transition').isotope({ layoutMode : mode });
+          }, 100 )
+        } else {
+          // go ahead and apply new layout
+          $demo.isotope({ layoutMode : mode });
     
-  return false;
+        }
-});
+  
+        return false;
+      });

_includes/option-buttons.js

@@ -1,12 +1,14 @@
-$('#options').find('.option-set a').click(function(){
-  var $this = $(this);
 
-  // don't proceed if already selected
+      // switches selected class on buttons
-  if ( $this.hasClass('selected') ) {
+      $('#options').find('.option-set a').click(function(){
-    return;
+        var $this = $(this);
-  }
 
-  $this.parents('.option-set').find('.selected').removeClass('selected');
+        // don't proceed if already selected
-  $this.addClass('selected');
+        if ( $this.hasClass('selected') ) {
+          return;
+        }
 
-});
+        $this.parents('.option-set').find('.selected').removeClass('selected');
+        $this.addClass('selected');
+
+      });

_includes/sort-buttons.html

@@ -0,0 +1,24 @@
+<h3>Sort</h3>
+
+<ul id="sort" class="sort option-set">
+  <li>
+    <ul class="sort asc option-set floated clearfix">
+      <li><a href="#original-order" class="selected">original-order (asc)</a></li>
+      <li><a href="#name">name (asc)</a></li>
+      <li><a href="#symbol">symbol (asc)</a></li>
+      <li><a href="#number">number (asc)</a></li>
+      <li><a href="#weight">weight (asc)</a></li>
+      <li><a href="#category">category (asc)</a></li>
+    </ul>
+  </li>
+  <li>
+    <ul class="sort desc option-set floated clearfix">
+      <li><a href="#original-order">original-order (desc)</a></li>
+      <li><a href="#name">name (desc)</a></li>
+      <li><a href="#symbol">symbol (desc)</a></li>
+      <li><a href="#number">number (desc)</a></li>
+      <li><a href="#weight">weight (desc)</a></li>
+      <li><a href="#category">category (desc)</a></li>
+    </ul>
+  </li>
+</ul>

_includes/sort-buttons.js

@@ -0,0 +1,16 @@
+
+      // sorting
+      $('#sort a').click(function(){
+        // get href attribute, minus the #
+        var $this = $(this),
+            sortName = $this.attr('href').slice(1),
+            asc = $this.parents('.sort').hasClass('asc');
+        // var sortTest = 'sort ' + sortName + ' ' + direction;
+        // console.time( sortTest );
+        $demo.isotope({ 
+          sortBy : sortName,
+          sortAscending : asc
+        });
+        // console.timeEnd( sortTest );
+        return false;
+      });

_layouts/elements.html

@@ -31,34 +31,7 @@
       <li><a href="#noble-gas">noble-gas</a></li>
     </ul>
 
-
+    {% include sort-buttons.html %}
-    <h3>Sort</h3>
-    
-    <ul id="sort" class="sort option-set">
-      <li>
-        <ul class="sort asc option-set floated clearfix">
-          <li><a href="#original-order" class="selected">original-order (asc)</a></li>
-          <li><a href="#name">name (asc)</a></li>
-          <li><a href="#symbol">symbol (asc)</a></li>
-          <li><a href="#number">number (asc)</a></li>
-          <li><a href="#weight">weight (asc)</a></li>
-          <li><a href="#category">category (asc)</a></li>
-        </ul>
-      </li>
-      <li>
-        <ul class="sort desc option-set floated clearfix">
-          <li><a href="#original-order">original-order (desc)</a></li>
-          <li><a href="#name">name (desc)</a></li>
-          <li><a href="#symbol">symbol (desc)</a></li>
-          <li><a href="#number">number (desc)</a></li>
-          <li><a href="#weight">weight (desc)</a></li>
-          <li><a href="#category">category (desc)</a></li>
-        </ul>
-      </li>
-    </ul>
-
-
-
 
 
     {% include layout-options.html %}
@@ -158,20 +131,7 @@
         return false;
       });
 
-      $('#sort a').click(function(){
+      {% include sort-buttons.js %}
-        // get href attribute, minus the #
-        var $this = $(this),
-            sortName = $this.attr('href').slice(1),
-            asc = $this.parents('.sort').hasClass('asc');
-        // var sortTest = 'sort ' + sortName + ' ' + direction;
-        // console.time( sortTest );
-        $demo.isotope({ 
-          sortBy : sortName,
-          sortAscending : asc
-        });
-        // console.timeEnd( sortTest );
-        return false;
-      });
 
       // change size of clicked element
       $demo.find('.element').live('click', function(){

_posts/demos/2010-12-29-layout-modes.html

@@ -40,12 +40,10 @@ category: demos
   <script src="../src/jquery.smartresize.js"></script>
   <script src="../src/jquery.isotope.js"></script>
   <script src="../src/jquery.ui.widget.js"></script>
-  <script src="../js/fake-element.js"></script>
   <script>
     $(function(){
       
-      var $demo = $('#demo'),
+      var $demo = $('#demo');
-          masonryLayout = true;
 
       // hacky way of adding random size classes
       $demo.find('.element').each(function(){

_posts/demos/2010-12-30-sorting.html

@@ -0,0 +1,78 @@
+---
+layout: nil
+title: Sorting
+category: demos
+---
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>{{ page.title }}</title>
+  
+  <link rel="stylesheet" href="../css/style.css" type="text/css" media="screen" />
+
+</head>
+<body>
+
+  <h1>{{ page.title }}</h1>
+  
+  <section id="copy">
+    
+    
+  </section>
+  
+  <section id="options" class="clearfix">
+    
+    {% include sort-buttons.html %}
+
+  </section> <!-- #options -->
+  
+  <div id="demo" class="iso-container variable-sizes">
+    {% for element in site.elements_best_of %}
+      {% include element-partial.html %}
+    {% endfor %}
+  </div> <!-- #demo -->
+  
+  <script src="../js/jquery-1.4.4.min.js"></script>
+  <script src="../src/mini-modernizr.js"></script>
+  <script src="../src/jquery.opto-transform.js"></script>
+  <script src="../src/jquery.smartresize.js"></script>
+  <script src="../src/jquery.isotope.js"></script>
+  <script src="../src/jquery.ui.widget.js"></script>
+  <script>
+    $(function(){
+      
+      var $demo = $('#demo');
+
+      
+      $demo.isotope({
+        itemSelector : '.element',
+        animationEngine : $.browser.opera ? 'jquery' : 'best-available',
+        getSortData : {
+          symbol : function( $elem ) {
+            return $elem.attr('data-symbol');
+          },
+          category : function( $elem ) {
+            return $elem.attr('data-category');
+          },
+          number : function( $elem ) {
+            return parseInt( $elem.find('.number').text(), 10 );
+          },
+          weight : function( $elem ) {
+            return parseInt( $elem.find('.weight').text().replace( /[\(\)]/g, ''), 10 );
+          },
+          name : function ( $elem ) {
+            return $elem.find('.name').text();
+          }
+        }
+      });
+      
+      {% include sort-buttons.js %}
+      
+      {% include option-buttons.js %}
+      
+    });
+  </script>
+  
+</body>
+</html>