Add combination filters with functions

Based on https://codepen.io/desandro/pen/owAyG/

_includes/components/filters/isotope.html

@@ -1,14 +1,32 @@
-{% for filter in page.filters %}
-  <h5>{{ filter.title }}</h5>
-  <div class="btn-group btn-group-toggle btn-group-vertical filters-button-group" role="group" data-toggle="buttons">
-    <button type="button" class="btn btn-light text-decoration-none btn-sm text-left" data-toggle="button" data-filter="*">Todas</button>
-    {% for option in filter.options %}
-      <button type="button" class="btn btn-light text-decoration-none btn-sm text-left" data-toggle="button" data-filter=".{{ option | downcase }}">{{ option }}</button>
-    {% endfor %}
-    <button type="button" class="btn btn-light text-decoration-none btn-sm text-left" data-toggle="button" data-filter=".pv, .iridium">PV & Iridium</button>
-    <button type="button" class="btn btn-light text-decoration-none btn-sm text-left active" data-toggle="button" data-filter=":not(.iridium)" active>No Iridium</button>
-    <button type="button" class="btn btn-light text-decoration-none btn-sm text-left" data-toggle="button" data-filter=".iridium:not(.smn20850)">Si Iridium pero no SMN20850</button>
-    <button type="button" class="btn btn-light text-decoration-none btn-sm text-left" data-toggle="button" data-filter="priceGreaterThan3000">Precio mayor de 3000</button>
-    <button type="button" class="btn btn-light text-decoration-none btn-sm text-left" data-toggle="button" data-filter="ium">La descripcion cotiene 'Telefono'</button>
-  </div>
-{% endfor %}
+<script type="text/javascript">
+  // Initialize filter functions variable
+  var filterFns = {};
+</script>
+
+<div id="filters">
+  {% for filter in page.filters %}
+    <div class="ui-group mb-3">
+      <h5>{{ filter.title }}</h5>
+      <div class="btn-group-vertical w-100" role="group" data-filter-group="{{ filter.title }}">
+        <button type="button" class="btn btn-light text-decoration-none btn-sm text-left active" data-filter="">{{ filter.genre }}</button>
+        {% for option in filter.options %}
+          {% capture filter_name %}
+            {{ filter.title | replace: ' ', '_' }}_{{ option.title | replace: ' ', '_' }}
+          {% endcapture%}
+          <button type="button" class="btn btn-light text-decoration-none btn-sm text-left" data-filter="{% if option.filter.rule %}{{ filter_name | strip }}{% else %}{{ option.filter }}{% endif %}">{{ option.title }}</button>
+          {% if option.filter.rule %}
+            <script type="text/javascript">
+              var newItem = {
+                {{ filter_name | strip }}: function() {
+                  var target = $(this).{{ option.filter.target }};
+                  return {{ option.filter.rule }};
+                }
+              }
+              Object.assign(filterFns, newItem);
+            </script>
+          {% endif %}
+        {% endfor %}
+      </div>
+    </div>
+  {% endfor %}
+</div>

_includes/components/filters/isotope.js

@@ -1,34 +1,47 @@
+// store filter for each group
+var filters = {};
+
 // init Isotope
-var $grid = $('[data-layout="grid"]').isotope({
-  // options
+var $grid = $('[data-layout="grid"] .grid').isotope({
   itemSelector: '[data-component="product-cards/progressive"]',
-  layoutMode: 'fitRows'
-});
-// filter functions
-var filterFns = {
-  // show if number is greater than 50
-  priceGreaterThan3000: function() {
-    var number = $(this).find('.product-price').text().replace('$ ','').replace(' USD','');
-    return parseInt( number, 10 ) > 3000;
-  },
-  // show if name ends with -ium
-  ium: function() {
-    var name = $(this).find('.description').text();
-    return name.match( /Telefono/ );
+  filter: function() {
+
+    var isMatched = true;
+    var $this = $(this);
+
+    for ( var prop in filters ) {
+      var filter = filters[ prop ];
+      // use function if it matches
+      filter = filterFns[ filter ] || filter;
+      // test each filter
+      if ( filter ) {
+        isMatched = isMatched && $(this).is( filter );
+      }
+      // break if not matched
+      if ( !isMatched ) {
+        break;
+      }
+    }
+    return isMatched;
   }
-};
-// bind filter button click
-$('.filters-button-group').on( 'click', 'button', function() {
-  var filterValue = $( this ).attr('data-filter');
-  // use filterFn if matches value
-  filterValue = filterFns[ filterValue ] || filterValue;
-  $grid.isotope({ filter: filterValue });
 });
+
+$('#filters').on( 'click', '.btn', function() {
+  var $this = $(this);
+  // get group key
+  var $buttonGroup = $this.parents('.btn-group-vertical');
+  var filterGroup = $buttonGroup.attr('data-filter-group');
+  // set filter for group
+  filters[ filterGroup ] = $this.attr('data-filter');
+  // arrange, and use filter fn
+  $grid.isotope();
+});
+
 // change is-checked class on buttons
-$('.button-group').each( function( i, buttonGroup ) {
+$('.btn-group-vertical').each( function( i, buttonGroup ) {
   var $buttonGroup = $( buttonGroup );
   $buttonGroup.on( 'click', 'button', function() {
-    $buttonGroup.find('.is-checked').removeClass('is-checked');
-    $( this ).addClass('is-checked');
+    $buttonGroup.find('.active').removeClass('active');
+    $( this ).addClass('active');
   });
 });

_includes/components/product-cards/progressive.html

@@ -1,4 +1,4 @@
-<div class="col-12 col-sm-6 col-md-4 col-lg-3 {{ doc.brand | downcase }} {{ doc.title | downcase }}" data-component="product-cards/progressive">
+<div class="col-12 col-md-6 col-lg-4 col-xl-3 {{ doc.brand | downcase }} {{ doc.commercial | downcase }}" data-component="product-cards/progressive">
 
   <div class="p-2 m-0" style="border: 1px solid #eee; border-radius: 15px; -moz-border-radius: 15px;">
     <a {% if doc.menu-name or collection.products.detail or doc.menu-name %}{{ doc.url | prepend: 'href="' | append: '"' }}{% endif %}>
@@ -10,7 +10,7 @@
     </a>
 
     <div class="text-center font-weight-bold small mt-2">
-      {{ doc.brand }} {{ doc.commercial }}
+      {{ doc.brand }} <span class="commercial">{{ doc.commercial }}</span>
     </div>
 
     <div id="{{ i18n-id }}" class="description text-secondary text-center small line-clamp-2 mx-1 mt-2">

_includes/components/topbars/progressive.html

@@ -15,11 +15,11 @@
       <span id="sign-in">
         <span id="sign-in-welcome" class="d-none d-md-inline"></span>
         <strong id="sign-in-name"></strong>
-        <a id="login-button" class="btn btn-sm btn-outline-primary text-white border-0 d-none" href="/">
+        <a id="login-button" class="btn btn-sm btn-primary text-white border-0 d-none" href="/">
           <i class="fas fa-sign-in-alt fa-lg" data-fa-transform="left-3"></i>
           <span style="font-size:12px">{{ site.data.i18n.common.firebase[site.lang].login.title }}</span>
         </a>
-        <button id="logout-button" class="btn btn-sm btn-outline-primary text-white border-0 d-none">
+        <button id="logout-button" class="btn btn-sm btn-primary text-white border-0 d-none">
           <i class="fas fa-sign-out-alt fa-lg" data-fa-transform="left-3"></i>
           <span style="font-size:12px">{{ site.data.i18n.common.firebase[site.lang].logout.title }}</span>
         </button>

_layouts/grid.html

@@ -6,12 +6,12 @@
 <div class="container-fluid" data-layout="grid">
   <div class="row">
 
-    <div class="col-2">
+    <div class="col-4 col-md-3 col-xl-2">
       {% include components/filters/isotope.html %}
     </div>
 
-    <div class="col-10">
-      <div class="row">
+    <div class="col-8 col-md-9 col-xl-10">
+      <div class="row grid">
         {% assign collections = site.collections | where: "label", page.collection %}
         {% for collection in collections %}
           {% assign docs = collection.docs | where: "menu-father", page.menu-name %}