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

---
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>