Isotope - left "corner stamp" and filtering

Re https://github.com/desandro/isotope/issues/131#issuecomment-3360630

by Reusablecode

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<ul id="filters">
  <li><a href="#" data-filter="*">show all</a></li>
  <li><a href="#" data-filter=".blue">blue</a></li>
  <li><a href="#" data-filter=".red">red</a></li>
  <li><a href="#" data-filter=".green">green</a></li>
  <li><a href="#" data-filter=".orange, .yellow">orange &amp; yellow</a></li>
</ul>

<div id="container">
  <div class="item corner-stamp"></div>
  <div class="item blue"></div>
  <div class="item red"></div>
  <div class="item orange"></div>
  <div class="item orange"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
  <div class="item blue"></div>
  <div class="item red"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
  <div class="item blue"></div>
  <div class="item red"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
  <div class="item orange"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
  <div class="item red"></div>
  <div class="item orange"></div>
  <div class="item blue"></div>
  <div class="item yellow"></div>
  <div class="item blue"></div>
  <div class="item red"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
  <div class="item orange"></div>
  <div class="item blue"></div>
  <div class="item red"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
  <div class="item orange"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
  <div class="item red"></div>
  <div class="item orange"></div>
  <div class="item blue"></div>
  <div class="item yellow"></div>
  <div class="item blue"></div>
  <div class="item red"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
  <div class="item orange"></div>
  <div class="item green"></div>
  <div class="item yellow"></div>
</div>

CSS

body { font-family: sans-serif; }

#filters { margin-bottom: 1.0em; }

#filters li {
  display: inline-block;
}

#filters li a {
  background: blue;
  color: white;
  padding: 2px;
  display: block;
}

#filters li a:hover {
  color: red;
  background: yellow;
}

#container {
  border: 2px solid;
  padding: 5px;
}

.item {
  float: left;
  width: 90px;
  height: 50px;
  margin: 5px;
}

.blue { background: blue; }
.red { background: red; }
.orange { background: orange; }
.green { background: green; }
.yellow { background: yellow; }

.corner-stamp {
  width: 190px;
  height: 80px;
  background: #888;
}

/* 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;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

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

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
       -o-transition-property:         top, left, 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;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */

JavaScript

$(function(){
  
  var $container = $('#container');
  
  $container.isotope({
    itemSelector: '.item',
    masonry: {
      columnWidth: 100
    }
  });

  $('#filters').on( 'click', 'a', function() {
    var selector = $(this).data('filter');
    if ( selector !== '*' ) {
      // include corner-stamp in filter
      // so it never gets filtered out
      selector = selector + ', .corner-stamp'
    }
    $container.isotope({ filter: selector });
  });

});