layout with isotope

music.html

@@ -21,16 +21,65 @@ image: /assets/img/world.svg
   
   
 </div>
+
+<div class="button-group filters-button-group">
+
+  <button class="button is-checked" data-filter="*">show all</button>
+
+  <!-- create categories array-->
+  {% assign categories_array = "" | split:"|" %}
+
+  <!--Add each unique 'my_collection' category to the array-->
+  {% for post in site.tracks %}
+  {% for category in post.categories %}
+  {% assign categories_array = categories_array | push: category | uniq %}
+  {% endfor %}
+  {% endfor %}
+
+  <!--Output the categories-->
+  {% for category in categories_array %}
+
+  <button class="button" data-filter=".{{ category }}">{{ category }}</button>
+  {% endfor %}
+</div>
+
 <div class="musiflex">
 
   {% for track in site.tracks reversed %}
-  <div id="{{ track.uid }}" class="trackcontainer">
+  <div id="{{ track.uid }}" style="min-width:300px;" class="element-item trackcontainer {% for key in track.categories %}{{ key }} {% endfor %}">
     <a href="{{ track.url }}">
       <div class="track" style="background-image:url({{ track.image }});"></div>
       <h3>{{ track.title }}</h3>
     </a>
-    <p>{{ track.tags }}</p>
+    <p>{% for c in track.categories %}{{ c }}{% unless forloop.last %},&nbsp;{% endunless %}{% endfor %}</p>
   </div>
   {% endfor %}
   <div>{% include cookiemonster.html %}</div>
 </div>
+
+<script>
+  // external js: isotope.pkgd.js
+
+  // init Isotope
+  var $grid = $('.musiflex').isotope({
+    itemSelector: '.element-item',
+    layoutMode: 'fitRows'
+  });
+  // filter functions
+
+  // bind filter button click
+  $('.filters-button-group').on('click', 'button', function () {
+    var filterValue = $(this).attr('data-filter');
+    // use filterFn if matches value
+
+    $grid.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>