Isotope - combination filters with dropdowns

re: https://github.com/desandro/isotope/issues/83

by Reusablecode

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div id="filters">
<select class="option-set clearfix"  data-filter-group="leuchtenart">
    <option value="*" data-filter-value="" class="selected">Alle Leuchtenarten</option>
    <option value="#filter-leuchtenart-canopy-leuchte" data-filter-value=".canopy-leuchte">Canopy Leuchte</option>
    <option value="#filter-leuchtenart-flutlicht" data-filter-value=".flutlicht">Flutlicht</option>
    <option value="#filter-leuchtenart-general-lights" data-filter-value=".general-lights">General Lights</option>
    <option value="#filter-leuchtenart-high-bay-leuchte" data-filter-value=".high-bay-leuchte">High Bay Leuchte</option>
    <option value="#filter-leuchtenart-rasterleuchte" data-filter-value=".rasterleuchte">Rasterleuchte</option>
    <option value="#filter-leuchtenart-strassenflaechen-leuchte" data-filter-value=".strassenflaechen-leuchte">Straßen/Flächen Leuchte</option>
    <option value="#filter-leuchtenart-tube" data-filter-value=".tube">Tube</option>
    <option value="#filter-leuchtenart-tunnelhallen" data-filter-value=".tunnelhallen">Tunnel/Hallen</option>
</select>

<select class="option-set clearfix"  data-filter-group="leistung">
    <option value="*" data-filter-value="" class="selected" >Alle Leistungen</option>
    <option value="#filter-leistung-w-100w" data-filter-value=".w-100w">5W-100W</option>
    <option value="#filter-leistung-02_101w-200w" data-filter-value=".02_101w-200w">101W-200W</option>
    <option value="#filter-leistung-03_201w-300w" data-filter-value=".03_201w-300w">201W-300W</option>
    <option value="#filter-leistung-04_ab-301w" data-filter-value=".04_ab-301w">ab 301W</option>
</select>

<select class="filter option-set clearfix"  data-filter-group="lichtfarbe">
    <option value="*" data-filter-value="" class="selected">Alle Lichtfarben</option>
    <option value="#filter-lichtfarbe-coolwhite" data-filter-value=".coolwhite">Coolwhite</option>
    <option...

CSS

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

#container {
    border: 1px solid;
    padding: 3px;
}

.produkt-element {
    width: 70px;
    height: 70px;
    margin: 3px;
    float: left;
}

.flutlicht { background: red; }
.w-100w { background: blue; }
.coolwhite { background: green; }
.warmwhite { background: yellow; }

.purewhite {border-radius: 30px}
.general-lights {border-radius: 10px}
.rasterleuchte {border-radius: 20px}
/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property:    -moz-transform, opacity;
    transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    transition-duration: 0s;
}

/* End: Recommended Isotope styles */

JavaScript

$(function(){
    
  var $container = $('#container'),
      filters = {};

  $container.isotope({
    itemSelector : '.produkt-element'
  });

  // filter buttons
  $('#filters select').change(function(){
    var $this = $(this);
    
    // store filter value in object
    // i.e. filters.color = 'red'
    var group = $this.attr('data-filter-group');
    filters[ group ] = $this.find(':selected').attr('data-filter-value');
    // console.log( $this.find(':selected') )
    // convert object into array
    var isoFilters = [];
    for ( var prop in filters ) {
      isoFilters.push( filters[ prop ] )
    }
    var selector = isoFilters.join('');
    $container.isotope({ filter: selector });
    return false;
  });

});