enmi12/glossaire/_posts/tests/2012-08-11-combo-sort-history.html
author ymh <ymh.work@gmail.com>
Wed, 06 Nov 2013 03:21:17 +0000
changeset 0 d970ebf37754
permissions -rwxr-xr-x
first import
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
0
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
     1
---
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
     2
title: Combo filters, sorting, AND hash history
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
     3
layout: default
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
     4
category: tests
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
     5
schema:
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
     6
  - name: color
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
     7
    filters: [ red, blue, yellow ]
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
     8
  - name: size
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
     9
    filters: [ small, wide, tall, big ]
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    10
  - name: shape
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    11
    filters : [ round, square ]
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    12
---
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    13
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    14
<section id="copy">
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    15
  <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>
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    16
</section>
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    17
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    18
<section id="options" class="clearfix combo-filters">
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    19
  <div class="clearfix">
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    20
    <h3>Filters</h3>
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    21
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    22
    {% for group in page.schema %}
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    23
      <div class="option-combo {{ group.name }}">
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    24
        <h4>{{ group.name }}</h4>
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    25
        <ul class="filter option-set clearfix " data-filter-group="{{ group.name }}"> 
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    26
          <li><a href="#filter-{{ group.name }}-any" data-filter-value="" class="selected">any</a>
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    27
          {% for filter in group.filters %}
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    28
            <li><a href="#filter-{{ group.name }}-{{ filter }}" data-filter-value=".{{ filter }}">{{ filter }}</a>
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    29
          {% endfor %}
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    30
        </ul>
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    31
      </div>
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    32
    {% endfor %}
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    33
  </div>
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    34
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    35
  <h3>Sort</h3>
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    36
  
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    37
    <ul id="sort-by" class="option-set clearfix" data-option-key="sortBy">
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    38
      <li><a href="#sortBy=original-order" data-option-value="original-order" class="selected" data>original-order</a></li>
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    39
      <li><a href="#sortBy=color" data-option-value="color">color</a></li>
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    40
      <li><a href="#sortBy=size" data-option-value="size">size</a></li>
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    41
      <li><a href="#sortBy=shape" data-option-value="shape">shape</a></li>
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    42
    </ul>
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    43
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    44
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    45
</section> <!-- #options -->
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    46
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    47
<div id="container" class="clearfix">
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    48
  {% for size in page.schema[1].filters %}
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    49
    {% for shape in page.schema[2].filters %}
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    50
      {% for color in page.schema[0].filters %}
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    51
        <div class="color-shape {{ size }} {{ shape }} {{ color }}" data-size="{{ size }}" data-color="{{ color }}" data-shape="{{ shape }}"></div>
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    52
      {% endfor %}
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    53
    {% endfor %}
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    54
  {% endfor %}
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    55
  
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    56
  
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    57
  {% for color in page.schema[0].filters %}
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    58
    {% for shape in page.schema[2].filters %}
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    59
      {% for size in page.schema[1].filters %}
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    60
        <div class="color-shape {{ size }} {{ shape }} {{ color }}" data-size="{{ size }}" data-color="{{ color }}" data-shape="{{ shape }}"></div>
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    61
      {% endfor %}
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    62
    {% endfor %}
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    63
  {% endfor %}
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    64
  
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    65
</div> <!-- #container -->
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    66
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    67
<script src="../js/jquery-1.7.1.min.js"></script>
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    68
<script src="../js/jquery.ba-bbq.min.js"></script>
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    69
<script src="../jquery.isotope.min.js"></script>
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    70
<script>
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    71
$(function(){
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    72
    
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    73
  var $container = $('#container');
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    74
  var initialOptions = {
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    75
    itemSelector : '.color-shape',
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    76
    masonry: {
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    77
      columnWidth: 80
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    78
    },
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    79
    getSortData: {
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    80
      color: function( $elem ) {
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    81
        return $elem.attr('data-color');
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    82
      },
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    83
      shape: function( $elem ) {
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    84
        return $elem.attr('data-shape');
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    85
      },
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    86
      size: function( $elem ) {
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    87
        return $elem.attr('data-size');
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    88
      }
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    89
    }
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    90
  };
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    91
  // build a hash for all our options
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    92
  var options = {
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    93
    // special hash for combination filters
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    94
    comboFilters: {}
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    95
  };
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    96
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    97
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    98
  // filter buttons
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
    99
  $('.filter').on( 'click', 'a', function( event ) {
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   100
    event.preventDefault();
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   101
    var $this = $(this);
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   102
    // don't proceed if already selected
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   103
    if ( $this.hasClass('selected') ) {
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   104
      return false;
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   105
    }
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   106
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   107
    // console.log('hello world');
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   108
    var $optionSet = $this.parents('.option-set');
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   109
    var group = $optionSet.attr('data-filter-group');
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   110
    options.comboFilters[ group ] = $this.attr('data-filter-value');
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   111
    $.bbq.pushState( options );
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   112
  });
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   113
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   114
  var $sortBy = $('#sort-by').on( 'click', 'a', function( event ) {
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   115
    event.preventDefault();
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   116
    var $this = $(this);
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   117
    // don't proceed if already selected
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   118
    if ( $this.hasClass('selected') ) {
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   119
      return false;
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   120
    }
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   121
    options.sortBy = $this.attr('data-option-value');
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   122
    // console.log( options );
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   123
    $.bbq.pushState( options );
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   124
  });
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   125
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   126
  function selectLink( $link ) {
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   127
    $link.parents('.option-set').find('.selected').removeClass('selected');
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   128
    $link.addClass('selected')
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   129
  }
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   130
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   131
  var location = window.location;
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   132
  var $comboFilterOptionSets = $('.combo-filters .option-set');
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   133
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   134
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   135
  function getComboFilterSelector( comboFilters ) {
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   136
    // build filter
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   137
    var isoFilters = [];
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   138
    var filterValue, $link, $optionSet;
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   139
    for ( var prop in comboFilters ) {
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   140
      filterValue = comboFilters[ prop ];
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   141
      isoFilters.push( filterValue );
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   142
      // change selected combo filter link
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   143
      $optionSet = $comboFilterOptionSets.filter('[data-filter-group="' + prop + '"]');
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   144
      $link = $optionSet.find('a[data-filter-value="' + filterValue + '"]');
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   145
      selectLink( $link );
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   146
    }
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   147
    var selector = isoFilters.join('');
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   148
    return selector;
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   149
  }
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   150
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   151
  $( window ).on( 'hashchange', function() {
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   152
    // get options from hash
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   153
    if ( location.hash ) {
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   154
      $.extend( options, $.deparam.fragment( location.hash, true ) );
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   155
    }
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   156
    // build options from hash and initial options
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   157
    var isoOptions = $.extend( {}, initialOptions, options );
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   158
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   159
    if ( options.comboFilters ) {
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   160
      isoOptions.filter = getComboFilterSelector( options.comboFilters );
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   161
    }
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   162
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   163
    // change selected link for sortBy
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   164
    if ( options.sortBy ) {
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   165
      var $link = $sortBy.find('a[data-option-value="' + options.sortBy + '"]');
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   166
      selectLink( $link );
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   167
    }
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   168
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   169
    $container.isotope( isoOptions );
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   170
  })
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   171
    // trigger hashchange to capture initial hash options
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   172
    .trigger( 'hashchange' );
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   173
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   174
});
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   175
  
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   176
</script>
d970ebf37754 first import
ymh <ymh.work@gmail.com>
parents:
diff changeset
   177