test : combo filter, sorting and hash history

_posts/tests/2012-08-11-combo-sort-history.html

@@ -0,0 +1,177 @@
+---
+title: Combo filters, sorting, AND hash history
+layout: default
+category: tests
+schema:
+  - name: color
+    filters: [ red, blue, yellow ]
+  - name: size
+    filters: [ small, wide, tall, big ]
+  - name: shape
+    filters : [ round, square ]
+---
+
+<section id="copy">
+  <p>Filters can be combined. In addition to filtering for just <code>.red</code> or <code>.tall</code>, you can pass in a filter selector of both: <code>.red.tall</code>.</p>
+</section>
+
+<section id="options" class="clearfix combo-filters">
+  <div class="clearfix">
+    <h3>Filters</h3>
+
+    {% for group in page.schema %}
+      <div class="option-combo {{ group.name }}">
+        <h4>{{ group.name }}</h4>
+        <ul class="filter option-set clearfix " data-filter-group="{{ group.name }}"> 
+          <li><a href="#filter-{{ group.name }}-any" data-filter-value="" class="selected">any</a>
+          {% for filter in group.filters %}
+            <li><a href="#filter-{{ group.name }}-{{ filter }}" data-filter-value=".{{ filter }}">{{ filter }}</a>
+          {% endfor %}
+        </ul>
+      </div>
+    {% endfor %}
+  </div>
+
+  <h3>Sort</h3>
+  
+    <ul id="sort-by" class="option-set clearfix" data-option-key="sortBy">
+      <li><a href="#sortBy=original-order" data-option-value="original-order" class="selected" data>original-order</a></li>
+      <li><a href="#sortBy=color" data-option-value="color">color</a></li>
+      <li><a href="#sortBy=size" data-option-value="size">size</a></li>
+      <li><a href="#sortBy=shape" data-option-value="shape">shape</a></li>
+    </ul>
+
+
+</section> <!-- #options -->
+
+<div id="container" class="clearfix">
+  {% for size in page.schema[1].filters %}
+    {% for shape in page.schema[2].filters %}
+      {% for color in page.schema[0].filters %}
+        <div class="color-shape {{ size }} {{ shape }} {{ color }}" data-size="{{ size }}" data-color="{{ color }}" data-shape="{{ shape }}"></div>
+      {% endfor %}
+    {% endfor %}
+  {% endfor %}
+  
+  
+  {% for color in page.schema[0].filters %}
+    {% for shape in page.schema[2].filters %}
+      {% for size in page.schema[1].filters %}
+        <div class="color-shape {{ size }} {{ shape }} {{ color }}" data-size="{{ size }}" data-color="{{ color }}" data-shape="{{ shape }}"></div>
+      {% endfor %}
+    {% endfor %}
+  {% endfor %}
+  
+</div> <!-- #container -->
+
+<script src="../js/jquery-1.7.1.min.js"></script>
+<script src="../js/jquery.ba-bbq.min.js"></script>
+<script src="../jquery.isotope.min.js"></script>
+<script>
+$(function(){
+    
+  var $container = $('#container');
+  var initialOptions = {
+    itemSelector : '.color-shape',
+    masonry: {
+      columnWidth: 80
+    },
+    getSortData: {
+      color: function( $elem ) {
+        return $elem.attr('data-color');
+      },
+      shape: function( $elem ) {
+        return $elem.attr('data-shape');
+      },
+      size: function( $elem ) {
+        return $elem.attr('data-size');
+      }
+    }
+  };
+  // build a hash for all our options
+  var options = {
+    // special hash for combination filters
+    comboFilters: {}
+  };
+
+
+  // filter buttons
+  $('.filter').on( 'click', 'a', function( event ) {
+    event.preventDefault();
+    var $this = $(this);
+    // don't proceed if already selected
+    if ( $this.hasClass('selected') ) {
+      return false;
+    }
+
+    // console.log('hello world');
+    var $optionSet = $this.parents('.option-set');
+    var group = $optionSet.attr('data-filter-group');
+    options.comboFilters[ group ] = $this.attr('data-filter-value');
+    $.bbq.pushState( options );
+  });
+
+  var $sortBy = $('#sort-by').on( 'click', 'a', function( event ) {
+    event.preventDefault();
+    var $this = $(this);
+    // don't proceed if already selected
+    if ( $this.hasClass('selected') ) {
+      return false;
+    }
+    options.sortBy = $this.attr('data-option-value');
+    // console.log( options );
+    $.bbq.pushState( options );
+  });
+
+  function selectLink( $link ) {
+    $link.parents('.option-set').find('.selected').removeClass('selected');
+    $link.addClass('selected')
+  }
+
+  var location = window.location;
+  var $comboFilterOptionSets = $('.combo-filters .option-set');
+
+
+  function getComboFilterSelector( comboFilters ) {
+    // build filter
+    var isoFilters = [];
+    var filterValue, $link, $optionSet;
+    for ( var prop in comboFilters ) {
+      filterValue = comboFilters[ prop ];
+      isoFilters.push( filterValue );
+      // change selected combo filter link
+      $optionSet = $comboFilterOptionSets.filter('[data-filter-group="' + prop + '"]');
+      $link = $optionSet.find('a[data-filter-value="' + filterValue + '"]');
+      selectLink( $link );
+    }
+    var selector = isoFilters.join('');
+    return selector;
+  }
+
+  $( window ).on( 'hashchange', function() {
+    // get options from hash
+    if ( location.hash ) {
+      $.extend( options, $.deparam.fragment( location.hash, true ) );
+    }
+    // build options from hash and initial options
+    var isoOptions = $.extend( {}, initialOptions, options );
+
+    if ( options.comboFilters ) {
+      isoOptions.filter = getComboFilterSelector( options.comboFilters );
+    }
+
+    // change selected link for sortBy
+    if ( options.sortBy ) {
+      var $link = $sortBy.find('a[data-option-value="' + options.sortBy + '"]');
+      selectLink( $link );
+    }
+
+    $container.isotope( isoOptions );
+  })
+    // trigger hashchange to capture initial hash options
+    .trigger( 'hashchange' );
+
+});
+  
+</script>
+