From d9d23c3c9474070d8ea9c01bb03c9205b4896f96 Mon Sep 17 00:00:00 2001
From: David DeSandro <david@desandro.com>
Date: Thu, 30 Dec 2010 08:45:08 -0500
Subject: [PATCH] docs : add sorting doc

---
 _includes/layout-change.js                | 43 +++++++------
 _includes/option-buttons.js               | 26 ++++----
 _includes/sort-buttons.html               | 24 +++++++
 _includes/sort-buttons.js                 | 16 +++++
 _layouts/elements.html                    | 44 +------------
 _posts/demos/2010-12-29-layout-modes.html |  4 +-
 _posts/demos/2010-12-30-sorting.html      | 78 +++++++++++++++++++++++
 7 files changed, 157 insertions(+), 78 deletions(-)
 create mode 100644 _includes/sort-buttons.html
 create mode 100644 _includes/sort-buttons.js
 create mode 100644 _posts/demos/2010-12-30-sorting.html

diff --git a/_includes/layout-change.js b/_includes/layout-change.js
index 6a17718..ffb765c 100644
--- a/_includes/layout-change.js
+++ b/_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');
+
+      // 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 ) {
-    // 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 });
+        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;
-});
\ No newline at end of file
+        return false;
+      });
\ No newline at end of file
diff --git a/_includes/option-buttons.js b/_includes/option-buttons.js
index ea411d9..d710e07 100644
--- a/_includes/option-buttons.js
+++ b/_includes/option-buttons.js
@@ -1,12 +1,14 @@
-$('#options').find('.option-set a').click(function(){
-  var $this = $(this);
-  
-  // don't proceed if already selected
-  if ( $this.hasClass('selected') ) {
-    return;
-  }
-  
-  $this.parents('.option-set').find('.selected').removeClass('selected');
-  $this.addClass('selected');
-  
-});
+
+      // switches selected class on buttons
+      $('#options').find('.option-set a').click(function(){
+        var $this = $(this);
+
+        // don't proceed if already selected
+        if ( $this.hasClass('selected') ) {
+          return;
+        }
+
+        $this.parents('.option-set').find('.selected').removeClass('selected');
+        $this.addClass('selected');
+
+      });
diff --git a/_includes/sort-buttons.html b/_includes/sort-buttons.html
new file mode 100644
index 0000000..a7f06e2
--- /dev/null
+++ b/_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>
\ No newline at end of file
diff --git a/_includes/sort-buttons.js b/_includes/sort-buttons.js
new file mode 100644
index 0000000..ceafb6b
--- /dev/null
+++ b/_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;
+      });
\ No newline at end of file
diff --git a/_layouts/elements.html b/_layouts/elements.html
index 22fd264..6b85961 100644
--- a/_layouts/elements.html
+++ b/_layouts/elements.html
@@ -31,34 +31,7 @@
       <li><a href="#noble-gas">noble-gas</a></li>
     </ul>
 
-
-    <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 sort-buttons.html %}
 
 
     {% include layout-options.html %}
@@ -158,20 +131,7 @@
         return false;
       });
 
-      $('#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;
-      });
+      {% include sort-buttons.js %}
 
       // change size of clicked element
       $demo.find('.element').live('click', function(){
diff --git a/_posts/demos/2010-12-29-layout-modes.html b/_posts/demos/2010-12-29-layout-modes.html
index 5319683..4305a7c 100644
--- a/_posts/demos/2010-12-29-layout-modes.html
+++ b/_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'),
-          masonryLayout = true;
+      var $demo = $('#demo');
 
       // hacky way of adding random size classes
       $demo.find('.element').each(function(){
diff --git a/_posts/demos/2010-12-30-sorting.html b/_posts/demos/2010-12-30-sorting.html
new file mode 100644
index 0000000..5ea5e2a
--- /dev/null
+++ b/_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>
\ No newline at end of file