Browse Source

test : combo filter, sorting and hash history

pull/269/head
David DeSandro 12 years ago
parent
commit
75ead417af
  1. 177
      _posts/tests/2012-08-11-combo-sort-history.html

177
_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>
Loading…
Cancel
Save