|
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
|
|
|
|
<title>combination filters</title>
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="sandbox.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/dist/jquery.js"></script>
|
|
|
|
|
|
|
|
|
|
<script src="../bower_components/ev-emitter/ev-emitter.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/desandro-matches-selector/matches-selector.js"></script>
|
|
|
|
|
<script src="../bower_components/fizzy-ui-utils/utils.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( event ) {
|
|
|
|
|
$buttonGroup.find('.is-checked').removeClass('is-checked');
|
|
|
|
|
$( event.currentTarget ).addClass('is-checked');
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
