Merge branch 'master' into gh-pages

_posts/demos/2011-03-29-combination-filters.html

@@ -0,0 +1,94 @@
+---
+title: Combination filters
+layout: demo
+category: demos
+related: filtering
+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">
+  
+  <h3>Filters</h3>
+
+  {% for group in page.schema %}
+    <div class="option-combo {{ group.name }}">
+      <h4>{{ group.name }}</h4>
+      <ul class="filter option-set floated clearfix "> 
+        <li><a href="#filter-{{ group.name }}-any" data-filter="" data-group="{{ group.name }}" class="selected">any</a>
+        {% for filter in group.filters %}
+          <li><a href="#filter-{{ group.name }}-{{ filter }}" data-group="{{ group.name }}" data-filter=".{{ filter }}">{{ filter }}</a>
+        {% endfor %}
+      </ul>
+    </div>
+  {% endfor %}
+
+</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 }}"></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 }}"></div>
+      {% endfor %}
+    {% endfor %}
+  {% endfor %}
+  
+</div> <!-- #container -->
+
+<script src="../{{ site.jquery_js }}"></script>
+<script src="../{{ site.isotope_js }}"></script>
+<script>
+
+  var $container = $('#container'),
+      filters = {};
+
+  // filter buttons
+  $('.filter a').click(function(){
+    var $this = $(this),
+        isoFilters = [],
+        prop, selector;
+    // store filter value in object
+    // i.e. filters.color = 'red'
+    filters[ $this.data('group') ] = $this.data('filter');
+    
+    for ( prop in filters ) {
+      isoFilters.push( filters[ prop ] )
+    }
+    selector = isoFilters.join('');
+    $container.isotope({ filter: selector });
+
+    return false;
+  });
+  
+  {% include option-buttons.js %}
+
+  $(function(){
+
+    $container.isotope({
+      itemSelector : '.color-shape',
+      masonry: {
+        columnWidth: 80
+      }
+    });
+    
+  });
+</script>

css/style.css

@@ -247,6 +247,11 @@ body {
 
 #options h3 {
   margin-bottom: 0.2em;
+  font-size: 15px;
+}
+
+#options h4 { 
+  font-weight: bold;
 }
 
 #options ul {
@@ -312,6 +317,58 @@ body {
   color: white;
 }
 
+/* Combination filter options*/
+
+#options .option-combo {
+  display: inline-block;
+  float: left;
+  margin-right: 10px;
+}
+
+#options .option-combo ul {
+  margin-right: 20px;
+  display: inline-block;
+}
+
+#options .option-combo h2,
+#options .option-combo h4 {
+  line-height: 34px;
+  margin-bottom: 0;
+  margin-right: 5px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+/* Color shapes */
+
+.color-shape {
+  width: 70px;
+  height: 70px;
+  margin: 5px;
+  float: left;
+}
+ 
+.color-shape.round {
+  -webkit-border-radius: 35px;
+     -moz-border-radius: 35px;
+          border-radius: 35px;
+}
+ 
+.color-shape.big.round {
+  -webkit-border-radius: 75px;
+     -moz-border-radius: 75px;
+          border-radius: 75px;
+}
+ 
+.color-shape.red { background: red; }
+.color-shape.blue { background: blue; }
+.color-shape.yellow { background: yellow; }
+ 
+.color-shape.wide, .color-shape.big { width: 150px; }
+.color-shape.tall, .color-shape.big { height: 150px; }
+
+
+
 /**** Horizontal ****/
 
 .horizontal #container {

index.html

@@ -11,31 +11,6 @@ layout: nil
   <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
   
   <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
-
-  <style media="screen">
-    #options > * {
-      float: left;
-      margin-right: 10px;
-    }
-    
-    #options .option-combo {
-      display: inline-block;
-      
-    }
-    
-    #options h2 {
-      line-height: 34px;
-      margin-bottom: 0;
-      margin-right: 5px;
-      display: inline-block;
-      vertical-align: top;
-    }
-    
-    #options ul {
-      margin-right: 20px;
-      display: inline-block;
-    }
-  </style>
   
 </head>
 <body>