tests : revise for option-set-buttons.js

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

@@ -40,62 +40,11 @@ category: tests
 <script src="../{{ site.isotope_js }}"></script>
 <script src="../js/fake-element.js"></script>
 <script>
+  $(function(){
     
     var $container = $('#container');
 
-  $('#filters').find('a').click(function(){
+    {% include random-sizes.js %}
-    console.time('filter');
-    // 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 })
-    
-    console.timeEnd('filter');
-    return false;
-  });
-
-  // sorting
-  $('#sort a').click(function(){
-    console.time('sort');
-    // 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
-    });
-    console.timeEnd('sort');
-    return false;
-  });
-
-  // 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;
-  });
-
-  {% include layout-change.js %}
-
-  {% include add-buttons.js %}
-
-  $('#shuffle a').click(function(){
-    $container.isotope('shuffle');
-    return false;
-  });
-
-  {% include option-buttons.js %}
-  
-
-  $(function(){
 
     console.time('init');
     $container.isotope({
@@ -138,6 +87,67 @@ category: tests
     
     console.timeEnd('init');
 
+    var $optionSets = $('#options .option-set'),
+        $optionLinks = $optionSets.find('a');
+
+    $optionLinks.click(function(){
+      var $this = $(this);
+      // don't proceed if already selected
+      if ( $this.hasClass('selected') ) {
+        return false;
+      }
+      var $optionSet = $this.parents('.option-set');
+      $optionSet.find('.selected').removeClass('selected');
+      $this.addClass('selected');
+
+      // make option object dynamically, i.e. { filter: '.my-filter-class' }
+      var options = {},
+          key = $optionSet.attr('data-option-key'),
+          value = $this.attr('data-option-value');
+      // parse 'false' as false boolean
+      value = value === 'false' ? false : value;
+      options[ key ] = value;
+
+      console.time( key );
+      if ( key === 'layoutMode' && changeLayoutMode ) {
+        // changes in layout modes need extra logic
+        changeLayoutMode( $this, options )
+      } else {
+        // otherwise, apply new options
+        $container.isotope( options );
+      }
+      console.timeEnd( key );
+
+      return false;
+    });
+
+
+    {% include layout-change.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;
+    });
+
+
+    {% include add-buttons.js %}
+
+    $('#shuffle a').click(function(){
+      $container.isotope('shuffle');
+      return false;
+    });
+
+    {% include option-buttons.js %}
+
 
   });
 </script>

_posts/tests/2011-05-31-tiny-text.html

@@ -28,10 +28,10 @@ lorem: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 
   <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="#show-all" class="selected">show all</a></li>
+    <li><a href="#show-all" data-option-value="*" class="selected">show all</a></li>
-    <li><a href="#red">red</a></li>
+    <li><a href="#red" data-option-value=".red">red</a></li>
-    <li><a href="#blue">blue</a></li>
+    <li><a href="#blue" data-option-value=".blue">blue</a></li>
   </ul>
 
 </section> <!-- #options -->
@@ -56,30 +56,15 @@ lorem: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 
 <script src="../{{ site.jquery_js }}"></script>
 <script src="../{{ site.isotope_js }}"></script>
-<script src="../js/fake-element.js"></script>
 <script>
-
-
   $(function(){
 
     var $container = $('#container');
 
-    
-
     $container.isotope({
     });
     
-    $('#filters').find('a').click(function(){
+    {% include option-set-buttons.js %}
-      // 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 %}
-    
-
 
   });
 </script>