---

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>