From bcc08862c7af8b0272106c2256d91a343c0cf009 Mon Sep 17 00:00:00 2001
From: David DeSandro <desandrocodes@gmail.com>
Date: Tue, 15 Jul 2014 22:14:35 -0400
Subject: [PATCH] combo filters examples

---
 examples/combination-filters-inclusive.html | 257 ++++++++++++++++++++
 examples/combination-filters.html           | 257 ++++++++++++++++++++
 2 files changed, 514 insertions(+)
 create mode 100644 examples/combination-filters-inclusive.html
 create mode 100644 examples/combination-filters.html
diff --git a/examples/combination-filters-inclusive.html b/examples/combination-filters-inclusive.html
new file mode 100644
index 0000000..0fdcf1a
--- /dev/null
+++ b/examples/combination-filters-inclusive.html
@@ -0,0 +1,257 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <title>combination filters inclusive</title>
+
+  <link rel="stylesheet" href="examples.css" />
+  <style>
+  * {
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+            box-sizing: border-box;
+  }
+
+  body {
+    font-family: sans-serif;
+  }
+
+  /* ---- button ---- */
+
+  .button {
+    display: inline-block;
+    padding: 0.5em 1.0em;
+    background: #EEE;
+    border: none;
+    border-radius: 7px;
+    background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
+    color: #222;
+    font-family: sans-serif;
+    font-size: 16px;
+    text-shadow: 0 1px white;
+    cursor: pointer;
+  }
+
+  .button:hover {
+    background-color: #8CF;
+    text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
+    color: #222;
+  }
+
+  .button:active,
+  .button.is-checked {
+    background-color: #28F;
+  }
+
+  .button.is-checked {
+    color: white;
+    text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
+  }
+
+  .button:active {
+    box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
+  }
+
+  /* ---- button-group ---- */
+
+  .button-group:after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+
+  .button-group .button {
+    float: left;
+    border-radius: 0;
+    margin-left: 0;
+    margin-right: 1px;
+  }
+
+  .button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
+  .button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }
+
+  /* ---- isotope ---- */
+
+  .isotope {
+    background: #DDD;
+    max-width: 1200px;
+  }
+
+  /* clear fix */
+  .isotope:after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+
+  /* ui group */
+
+  .ui-group {
+    display: inline-block;
+  }
+
+  .ui-group h3 {
+    display: inline-block;
+    vertical-align: top;
+    line-height: 32px;
+    margin-right: 0.2em;
+    font-size: 16px;
+  }
+
+  .ui-group .button-group {
+    display: inline-block;
+    margin-right: 20px;
+  }
+
+  /* color-shape */
+
+  .color-shape {
+    width: 70px;
+    height: 70px;
+    margin: 5px;
+    float: left;
+  }
+ 
+  .color-shape.round {
+    border-radius: 35px;
+  }
+ 
+  .color-shape.big.round {
+    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; }
+  </style>
+
+</head>
+<body>
+
+  <h1>combination filters</h1>
+
+<div id="filters">
+
+  <div class="ui-group">
+    <h3>Color</h3>
+    <div class="button-group js-radio-button-group" data-filter-group="color">
+      <button class="button is-checked" data-filter="">any</button>
+      <button class="button" data-filter=".red">red</button>
+      <button class="button" data-filter=".blue">blue</button>
+      <button class="button" data-filter=".yellow">yellow</button>
+    </div>
+  </div>
+
+  <div class="ui-group">
+    <h3>Size</h3>
+    <div class="button-group js-radio-button-group" data-filter-group="size">
+      <button class="button is-checked" data-filter="">any</button>
+      <button class="button" data-filter=".small">small</button>
+      <button class="button" data-filter=".wide">wide</button>
+      <button class="button" data-filter=".big">big</button>
+      <button class="button" data-filter=".tall">tall</button>
+    </div>
+  </div>
+
+  <div class="ui-group">
+    <h3>Shape</h3>
+    <div class="button-group js-radio-button-group" data-filter-group="shape">
+      <button class="button is-checked" data-filter="">any</button>
+      <button class="button" data-filter=".round">round</button>
+      <button class="button" data-filter=".square">square</button>
+    </div>
+  </div>
+
+</div>
+
+<div class="isotope">
+  <div class="color-shape small round red"></div>
+  <div class="color-shape small round blue"></div>
+  <div class="color-shape small round yellow"></div>
+  <div class="color-shape small square red"></div>
+  <div class="color-shape small square blue"></div>
+  <div class="color-shape small square yellow"></div>
+  <div class="color-shape wide round red"></div>
+  <div class="color-shape wide round blue"></div>
+  <div class="color-shape wide round yellow"></div>
+  <div class="color-shape wide square red"></div>
+  <div class="color-shape wide square blue"></div>
+  <div class="color-shape wide square yellow"></div>
+  <div class="color-shape big round red"></div>
+  <div class="color-shape big round blue"></div>
+  <div class="color-shape big round yellow"></div>
+  <div class="color-shape big square red"></div>
+  <div class="color-shape big square blue"></div>
+  <div class="color-shape big square yellow"></div>
+  <div class="color-shape tall round red"></div>
+  <div class="color-shape tall round blue"></div>
+  <div class="color-shape tall round yellow"></div>
+  <div class="color-shape tall square red"></div>
+  <div class="color-shape tall square blue"></div>
+  <div class="color-shape tall square yellow"></div>
+</div>
+
+
+<script src="../bower_components/jquery/jquery.js"></script>
+<script src="../bower_components/eventEmitter/EventEmitter.js"></script>
+<script src="../bower_components/eventie/eventie.js"></script>
+<script src="../bower_components/doc-ready/doc-ready.js"></script>
+<script src="../bower_components/get-style-property/get-style-property.js"></script>
+<script src="../bower_components/get-size/get-size.js"></script>
+<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script>
+<script src="../bower_components/matches-selector/matches-selector.js"></script>
+<script src="../bower_components/outlayer/item.js"></script>
+<script src="../bower_components/outlayer/outlayer.js"></script>
+<script src="../bower_components/masonry/masonry.js"></script>
+
+<script src="../js/item.js"></script>
+<script src="../js/layout-mode.js"></script>
+<script src="../js/isotope.js"></script>
+<script src="../js/layout-modes/masonry.js"></script>
+<script src="../js/layout-modes/fit-rows.js"></script>
+
+<script>
+$( function() {
+  // init Isotope
+  var $container = $('.isotope').isotope({
+    itemSelector: '.color-shape'
+  });
+
+  // store filter for each group
+  var filters = {};
+
+  $('#filters').on( 'click', '.button', function() {
+    var $this = $(this);
+    // get group key
+    var $buttonGroup = $this.parents('.button-group');
+    var filterGroup = $buttonGroup.attr('data-filter-group');
+    // set filter for group
+    filters[ filterGroup ] = $this.attr('data-filter');
+    // combine filters
+    var filterValue = '';
+    for ( var prop in filters ) {
+      filterValue += filters[ prop ];
+    }
+    // set filter for Isotope
+    $container.isotope({ filter: filterValue });
+  });
+
+  // change is-checked class on buttons
+  $('.button-group').each( function( i, buttonGroup ) {
+    var $buttonGroup = $( buttonGroup );
+    $buttonGroup.on( 'click', 'button', function() {
+      // $buttonGroup.find('.is-checked').removeClass('is-checked');
+      $( this ).toggleClass('is-checked');
+    });
+  });
+  
+});
+
+</script>
+
+</body>
+</html>
diff --git a/examples/combination-filters.html b/examples/combination-filters.html
new file mode 100644
index 0000000..8c35039
--- /dev/null
+++ b/examples/combination-filters.html
@@ -0,0 +1,257 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <title>masonry</title>
+
+  <link rel="stylesheet" href="examples.css" />
+  <style>
+  * {
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+            box-sizing: border-box;
+  }
+
+  body {
+    font-family: sans-serif;
+  }
+
+  /* ---- button ---- */
+
+  .button {
+    display: inline-block;
+    padding: 0.5em 1.0em;
+    background: #EEE;
+    border: none;
+    border-radius: 7px;
+    background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
+    color: #222;
+    font-family: sans-serif;
+    font-size: 16px;
+    text-shadow: 0 1px white;
+    cursor: pointer;
+  }
+
+  .button:hover {
+    background-color: #8CF;
+    text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
+    color: #222;
+  }
+
+  .button:active,
+  .button.is-checked {
+    background-color: #28F;
+  }
+
+  .button.is-checked {
+    color: white;
+    text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
+  }
+
+  .button:active {
+    box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
+  }
+
+  /* ---- button-group ---- */
+
+  .button-group:after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+
+  .button-group .button {
+    float: left;
+    border-radius: 0;
+    margin-left: 0;
+    margin-right: 1px;
+  }
+
+  .button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
+  .button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }
+
+  /* ---- isotope ---- */
+
+  .isotope {
+    background: #DDD;
+    max-width: 1200px;
+  }
+
+  /* clear fix */
+  .isotope:after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+
+  /* ui group */
+
+  .ui-group {
+    display: inline-block;
+  }
+
+  .ui-group h3 {
+    display: inline-block;
+    vertical-align: top;
+    line-height: 32px;
+    margin-right: 0.2em;
+    font-size: 16px;
+  }
+
+  .ui-group .button-group {
+    display: inline-block;
+    margin-right: 20px;
+  }
+
+  /* color-shape */
+
+  .color-shape {
+    width: 70px;
+    height: 70px;
+    margin: 5px;
+    float: left;
+  }
+ 
+  .color-shape.round {
+    border-radius: 35px;
+  }
+ 
+  .color-shape.big.round {
+    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; }
+  </style>
+
+</head>
+<body>
+
+  <h1>combination filters</h1>
+
+<div id="filters">
+
+  <div class="ui-group">
+    <h3>Color</h3>
+    <div class="button-group js-radio-button-group" data-filter-group="color">
+      <button class="button is-checked" data-filter="">any</button>
+      <button class="button" data-filter=".red">red</button>
+      <button class="button" data-filter=".blue">blue</button>
+      <button class="button" data-filter=".yellow">yellow</button>
+    </div>
+  </div>
+
+  <div class="ui-group">
+    <h3>Size</h3>
+    <div class="button-group js-radio-button-group" data-filter-group="size">
+      <button class="button is-checked" data-filter="">any</button>
+      <button class="button" data-filter=".small">small</button>
+      <button class="button" data-filter=".wide">wide</button>
+      <button class="button" data-filter=".big">big</button>
+      <button class="button" data-filter=".tall">tall</button>
+    </div>
+  </div>
+
+  <div class="ui-group">
+    <h3>Shape</h3>
+    <div class="button-group js-radio-button-group" data-filter-group="shape">
+      <button class="button is-checked" data-filter="">any</button>
+      <button class="button" data-filter=".round">round</button>
+      <button class="button" data-filter=".square">square</button>
+    </div>
+  </div>
+
+</div>
+
+<div class="isotope">
+  <div class="color-shape small round red"></div>
+  <div class="color-shape small round blue"></div>
+  <div class="color-shape small round yellow"></div>
+  <div class="color-shape small square red"></div>
+  <div class="color-shape small square blue"></div>
+  <div class="color-shape small square yellow"></div>
+  <div class="color-shape wide round red"></div>
+  <div class="color-shape wide round blue"></div>
+  <div class="color-shape wide round yellow"></div>
+  <div class="color-shape wide square red"></div>
+  <div class="color-shape wide square blue"></div>
+  <div class="color-shape wide square yellow"></div>
+  <div class="color-shape big round red"></div>
+  <div class="color-shape big round blue"></div>
+  <div class="color-shape big round yellow"></div>
+  <div class="color-shape big square red"></div>
+  <div class="color-shape big square blue"></div>
+  <div class="color-shape big square yellow"></div>
+  <div class="color-shape tall round red"></div>
+  <div class="color-shape tall round blue"></div>
+  <div class="color-shape tall round yellow"></div>
+  <div class="color-shape tall square red"></div>
+  <div class="color-shape tall square blue"></div>
+  <div class="color-shape tall square yellow"></div>
+</div>
+
+
+<script src="../bower_components/jquery/jquery.js"></script>
+<script src="../bower_components/eventEmitter/EventEmitter.js"></script>
+<script src="../bower_components/eventie/eventie.js"></script>
+<script src="../bower_components/doc-ready/doc-ready.js"></script>
+<script src="../bower_components/get-style-property/get-style-property.js"></script>
+<script src="../bower_components/get-size/get-size.js"></script>
+<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script>
+<script src="../bower_components/matches-selector/matches-selector.js"></script>
+<script src="../bower_components/outlayer/item.js"></script>
+<script src="../bower_components/outlayer/outlayer.js"></script>
+<script src="../bower_components/masonry/masonry.js"></script>
+
+<script src="../js/item.js"></script>
+<script src="../js/layout-mode.js"></script>
+<script src="../js/isotope.js"></script>
+<script src="../js/layout-modes/masonry.js"></script>
+<script src="../js/layout-modes/fit-rows.js"></script>
+
+<script>
+$( function() {
+  // init Isotope
+  var $container = $('.isotope').isotope({
+    itemSelector: '.color-shape'
+  });
+
+  // store filter for each group
+  var filters = {};
+
+  $('#filters').on( 'click', '.button', function() {
+    var $this = $(this);
+    // get group key
+    var $buttonGroup = $this.parents('.button-group');
+    var filterGroup = $buttonGroup.attr('data-filter-group');
+    // set filter for group
+    filters[ filterGroup ] = $this.attr('data-filter');
+    // combine filters
+    var filterValue = '';
+    for ( var prop in filters ) {
+      filterValue += filters[ prop ];
+    }
+    // set filter for Isotope
+    $container.isotope({ filter: filterValue });
+  });
+
+  // change is-checked class on buttons
+  $('.button-group').each( function( i, buttonGroup ) {
+    var $buttonGroup = $( buttonGroup );
+    $buttonGroup.on( 'click', 'button', function() {
+      $buttonGroup.find('.is-checked').removeClass('is-checked');
+      $( this ).addClass('is-checked');
+    });
+  });
+  
+});
+
+</script>
+
+</body>
+</html>
