demos : use option-set-buttons.js where possible

_includes/add-buttons.js

@@ -1,3 +1,4 @@
+
       $('#insert a').click(function(){
         var $newEls = $( fakeElement.getGroup() );
         $container.isotope( 'insert', $newEls );
@@ -11,4 +12,3 @@
 
         return false;
       });
-      

_includes/layout-change.js

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

_includes/layout-options.html

@@ -1,12 +1,13 @@
-<h3>Layout modes</h3>
 
-<ul id="layouts" class="option-set floated clearfix">
+    <h3>Layout modes</h3>
-  <li><a href="#masonry" class="selected">masonry</a></li>
+
-  <li><a href="#fitRows">fitRows</a></li>
+    <ul id="layouts" class="option-set floated clearfix" data-option-key="layoutMode">
-  <li><a href="#cellsByRow">cellsByRow</a></li>
+      <li><a href="#masonry" data-option-value="masonry" class="selected">masonry</a></li>
-  <li><a href="#straightDown">straightDown</a></li>
+      <li><a href="#fitRows" data-option-value="fitRows">fitRows</a></li>
-  <li><a href="#masonryHorizontal" class="horizontal">masonryHorizontal</a></li>
+      <li><a href="#cellsByRow" data-option-value="cellsByRow">cellsByRow</a></li>
-  <li><a href="#fitColumns" class="horizontal">fitColumns</a></li>
+      <li><a href="#straightDown" data-option-value="straightDown">straightDown</a></li>
-  <li><a href="#cellsByColumn" class="horizontal">cellsByColumn</a></li>
+      <li><a href="#masonryHorizontal" data-option-value="masonryHorizontal" class="horizontal">masonryHorizontal</a></li>
-  <li><a href="#straightAcross" class="horizontal">straightAcross</a></li>
+      <li><a href="#fitColumns" data-option-value="fitColumns" class="horizontal">fitColumns</a></li>
-</ul>
+      <li><a href="#cellsByColumn" data-option-value="cellsByColumn" class="horizontal">cellsByColumn</a></li>
+      <li><a href="#straightAcross" data-option-value="straightAcross" class="horizontal">straightAcross</a></li>
+    </ul>

_includes/option-set-buttons.js

@@ -4,14 +4,11 @@
 
       $optionLinks.click(function(){
         var $this = $(this);
-
         // don't proceed if already selected
         if ( $this.hasClass('selected') ) {
-          return;
+          return false;
         }
-  
         var $optionSet = $this.parents('.option-set');
-  
         $optionSet.find('.selected').removeClass('selected');
         $this.addClass('selected');
   
@@ -22,8 +19,13 @@
         // parse 'false' as false boolean
         value = value === 'false' ? false : value;
         options[ key ] = value;
-  
+        if ( key === 'layoutMode' && changeLayoutMode ) {
-        $container.isotope( options );
+          // changes in layout modes need extra logic
+          changeLayoutMode( $this, options )
+        } else {
+          // otherwise, apply new options
+          $container.isotope( options );
+        }
         
         return false;
       });

_includes/sort-buttons.js

@@ -1,13 +0,0 @@
-
-      // 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');
-        $container.isotope({ 
-          sortBy : sortName,
-          sortAscending : asc
-        });
-        return false;
-      });

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

@@ -31,10 +31,6 @@ related: layouts
       
       {% include random-sizes.js %}
       
-      {% include layout-change.js %}
-
-      {% include option-buttons.js %}
-
       $container.isotope({
         itemSelector : '.element',
         masonry : {
@@ -53,6 +49,12 @@ related: layouts
         }
       });
       
+      {% include layout-change.js %}
+
+      {% include option-set-buttons.js %}
+
+
+      
     });
   </script>
   

_posts/tests/2011-03-27-flash01.html

@@ -29,13 +29,12 @@ category: tests
     
     <h3>Filters</h3>
 
-    <ul id="filters" class="option-set floated clearfix">
+    <ul id="filters" class="option-set floated clearfix" data-option-key="filter">
-      <li><a href="#filter" data-filter="*" class="selected">show all</a></li>
+      <li><a href="#filter-show-all" data-option-value="*" class="selected">show all</a></li>
-      
+      <li><a href="#filter-link" data-option-value=".link">link</a></li>
-      <li><a href="#filter-link" data-filter=".link">link</a></li>
+      <li><a href="#filter-audio" data-option-value=".audio">audio</a></li>
-      <li><a href="#filter-audio" data-filter=".audio">audio</a></li>
+      <li><a href="#filter-video" data-option-value=".video">video</a></li>
-      <li><a href="#filter-video" data-filter=".video">video</a></li>
+      <li><a href="#filter-photo" data-option-value=".photo">photo</a></li>
-      <li><a href="#filter-photo" data-filter=".photo">photo</a></li>
     </ul>
 
   </section> <!-- #options -->
@@ -113,24 +112,6 @@ category: tests
       
       var $container = $('#container');
       
-      $('#filters a').click(function(){
-        var filterName = $(this).attr('data-filter');
-        $container.isotope({ filter : filterName });
-        return false;
-      });
-
-      // 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') ) {
-          $this.parents('.option-set').find('.selected').removeClass('selected');
-          $this.addClass('selected');
-        }
-
-      });
-      
       $container.imagesLoaded(function(){
         $container.isotope({
           transformsEnabled: false,
@@ -141,5 +122,7 @@ category: tests
         });
       });
       
+      {% include option-set-buttons.js %}
+      
     });
   </script>

_posts/tests/2011-04-26-item-position-data01.html

@@ -36,7 +36,7 @@ category: tests
       
       {% include random-sizes.js %}
       
-      {% include sort-buttons.js %}
+      {% include option-set-buttons.js %}
 
       // toggle variable sizes of all elements
       $('#toggle-sizes').find('a').click(function(){

_posts/tests/2011-05-13-jquery-animation01.html

@@ -19,24 +19,8 @@ category: tests
 
 <section id="options" class="clearfix">
 
-  <h3>Filters</h3>
+
-
+  {% include filter-buttons.html %}
-  <ul id="filters" class="option-set floated clearfix">
-    <li><a href="#show-all" class="selected">show all</a></li>
-    <li><a href="#metalloid">metalloid</a></li>
-    <li><a href="#metal">metal</a></li>
-    <li><a href="#alkali">alkali</a></li>
-    <li><a href="#alkaline-earth">alkaline-earth</a></li>
-    <li><a href="#inner-transition">inner-transition</a></li>
-    <li><a href="#lanthanoid">lanthanoid</a></li>
-    <li><a href="#actinoid">actinoid</a></li>
-    <li><a href="#transition">transition</a></li>
-    <li><a href="#post-transition">post-transition</a></li>
-    <li><a href="#nonmetal">nonmetal</a></li>
-    <li><a href="#other">other</a></li>
-    <li><a href="#halogen">halogen</a></li>
-    <li><a href="#noble-gas">noble-gas</a></li>
-  </ul>
 
   {% include sort-buttons.html %}
 
@@ -63,32 +47,6 @@ category: tests
     
     {% include random-sizes.js %}
     
-    {% include sort-buttons.js %}
-
-    $('#filters').find('a').click(function(){
-      // get href attribute, minus the #, plus a . to make it a class
-      var filterName = '.' + $(this).attr('href').slice(1);
-      filterName = filterName === '.show-all' ? '*' : filterName;
-      $container.isotope({ filter: filterName })
-      return false;
-    });
-    
-    {% include option-buttons.js %}
-
-    // change size of clicked element
-    $container.find('.element').live('click', function(){
-      $(this).toggleClass('large');
-      $container.isotope('reLayout');
-    });
-    
-    // toggle variable sizes of all elements
-    $('#toggle-sizes').find('a').click(function(){
-      $container
-        .toggleClass('variable-sizes')
-        .isotope('reLayout');
-      return false;
-    });
-  
     $container.isotope({
       itemSelector: '.element',
       transformsEnabled: false,
@@ -115,5 +73,21 @@ category: tests
       }
     });
     
+    {% include option-set-buttons.js %}
+
+    // change size of clicked element
+    $container.find('.element').live('click', function(){
+      $(this).toggleClass('large');
+      $container.isotope('reLayout');
+    });
+    
+    // toggle variable sizes of all elements
+    $('#toggle-sizes').find('a').click(function(){
+      $container
+        .toggleClass('variable-sizes')
+        .isotope('reLayout');
+      return false;
+    });
+  
   });
 </script>

_posts/tests/2011-05-18-centered-masonry.html

@@ -16,24 +16,7 @@ category: tests
 
 <section id="options" class="clearfix">
 
-  <h3>Filters</h3>
+  {% include filter-buttons.html %}
-
-  <ul id="filters" class="option-set floated clearfix">
-    <li><a href="#show-all" class="selected">show all</a></li>
-    <li><a href="#metalloid">metalloid</a></li>
-    <li><a href="#metal">metal</a></li>
-    <li><a href="#alkali">alkali</a></li>
-    <li><a href="#alkaline-earth">alkaline-earth</a></li>
-    <li><a href="#inner-transition">inner-transition</a></li>
-    <li><a href="#lanthanoid">lanthanoid</a></li>
-    <li><a href="#actinoid">actinoid</a></li>
-    <li><a href="#transition">transition</a></li>
-    <li><a href="#post-transition">post-transition</a></li>
-    <li><a href="#nonmetal">nonmetal</a></li>
-    <li><a href="#other">other</a></li>
-    <li><a href="#halogen">halogen</a></li>
-    <li><a href="#noble-gas">noble-gas</a></li>
-  </ul>
 
   {% include sort-buttons.html %}
 
@@ -124,6 +107,7 @@ category: tests
     
     var $container = $('#container');
     
+    {% include random-sizes.js %}
     
     $container.isotope({
       itemSelector : '.element',
@@ -150,18 +134,7 @@ category: tests
       }
     });
     
-    
+    {% include option-set-buttons.js %}
-    {% include random-sizes.js %}
-    
-    {% include sort-buttons.js %}
-    
-    $('#filters').find('a').click(function(){
-      // get href attribute, minus the #, plus a . to make it a class
-      var filterName = '.' + $(this).attr('href').slice(1);
-      filterName = filterName === '.show-all' ? '*' : filterName;
-      $container.isotope({ filter: filterName })
-      return false;
-    });
     
     // change size of clicked element
     $container.find('.element').live('click', function(){
@@ -184,7 +157,7 @@ category: tests
       return false;
     });
 
-    {% include option-buttons.js %}
+
     
 
   });

_posts/tests/2011-05-24-elements-complete-test.html

@@ -10,24 +10,7 @@ category: tests
 
 <section id="options" class="clearfix">
 
-  <h3>Filters</h3>
+  {% include filter-buttons.html %}
-
-  <ul id="filters" class="option-set floated clearfix">
-    <li><a href="#show-all" class="selected">show all</a></li>
-    <li><a href="#metalloid">metalloid</a></li>
-    <li><a href="#metal">metal</a></li>
-    <li><a href="#alkali">alkali</a></li>
-    <li><a href="#alkaline-earth">alkaline-earth</a></li>
-    <li><a href="#inner-transition">inner-transition</a></li>
-    <li><a href="#lanthanoid">lanthanoid</a></li>
-    <li><a href="#actinoid">actinoid</a></li>
-    <li><a href="#transition">transition</a></li>
-    <li><a href="#post-transition">post-transition</a></li>
-    <li><a href="#nonmetal">nonmetal</a></li>
-    <li><a href="#other">other</a></li>
-    <li><a href="#halogen">halogen</a></li>
-    <li><a href="#noble-gas">noble-gas</a></li>
-  </ul>
 
   {% include sort-buttons.html %}