added filters to food_page

application-bootstrap_lab/js/main.js

@@ -296,3 +296,107 @@
 
 
 })(jQuery);
 })(jQuery);
 
 
+
+
+
+
+
+
+var reg;
+
+var iso = new Isotope( '.grid', {
+  itemSelector: '.grid-item',
+  layoutMode: 'fitRows'
+});
+
+// filter functions
+var filterFns = {
+  search: function( itemGrid ) {
+    var elem = itemGrid.querySelector('a').textContent;
+    return elem.match(reg);
+  }
+};
+
+// bind filter button click
+var filtersElem = document.querySelector('header');
+filtersElem.addEventListener( 'click', function( event ) {
+  if ( !matchesSelector( event.target, 'span' ) ) {
+    return;
+  }
+  var filterValue = event.target.getAttribute('data-filter');
+  filterValue = filterFns[ filterValue ] || filterValue;
+  iso.arrange({ filter: filterValue });
+});
+
+// change is-checked class on buttons
+var buttonGroups = document.querySelectorAll('header');
+for ( var i=0, len = buttonGroups.length; i < len; i++ ) {
+  var buttonGroup = buttonGroups[i];
+  radioButtonGroup( buttonGroup );
+}
+function radioButtonGroup( buttonGroup ) {
+  buttonGroup.addEventListener( 'click', function( event ) {
+    // only work with links
+    if ( !matchesSelector( event.target, 'span' ) ) {
+      return;
+    }
+    buttonGroup.querySelector('.is-checked').classList.remove('is-checked');
+    event.target.classList.add('is-checked');
+  });
+}
+
+// kleuren koppelen aan de divs dmv data-attribuut
+// hashtags extracten uit de classes-informatie van de grid-items
+var gridItems = document.querySelectorAll('.grid-item');
+for ( var i=0, len = gridItems.length; i < len; i++ ) {
+  var gridItem = gridItems[i];
+  gridItem.style.backgroundColor = gridItem.getAttribute('data-color');
+  gridItem.style.color = gridItem.getAttribute('data-text-color');
+  var categories = gridItem.classList;
+  var innerDiv = document.createElement("div");
+  gridItem.appendChild(innerDiv); 
+  for ( var j=1, k = categories.length; j < k; j++ ) {
+    var category = categories[j];
+    var link = document.createElement("a");
+    link.setAttribute("href", "#");
+    link.innerHTML = "#" + category;
+    link.setAttribute("data-filter", "." + category);
+    link.addEventListener( 'click', function( event ) { 
+        document.getElementsByClassName("is-checked")[0].classList.remove('is-checked');
+        var filterValue = this.getAttribute('data-filter');
+        filterValue = filterFns[ filterValue ] || filterValue;
+        iso.arrange({ filter: filterValue });
+        var knoppen = document.getElementsByTagName("header")[0].getElementsByTagName("span");
+        for ( var l=0, m = knoppen.length; l < m; l++ ) {
+        var knop = knoppen[l];
+          if (knop.getAttribute("data-filter") === this.getAttribute('data-filter')) {
+            knop.classList.add('is-checked');
+          }
+        }    
+    }); 
+    innerDiv.appendChild(link);   
+  }
+  if (gridItem.getAttribute('data-image')) { 
+      gridItem.style.backgroundImage = "url('" + gridItem.getAttribute('data-image') + "')";
+      var links = gridItem.getElementsByTagName("a");
+      for ( var n=0, o = links.length; n < o; n++ ) {
+        var link = links[n];
+        if (gridItem.getAttribute('data-trans-color')) {
+          link.style.backgroundColor = gridItem.getAttribute('data-trans-color');
+        }
+        else {
+          link.style.backgroundColor = "rgba(255,255,255,0.75)";
+        }
+        link.style.padding = "3px 4px";
+      }    
+  }
+  
+}
+
+document.getElementsByClassName("zoekbox")[0].onkeyup = function() {
+  reg = new RegExp(this.value,'gi');
+  var filterValue = event.target.getAttribute('data-filter');
+  filterValue = filterFns[ filterValue ] || filterValue;
+  iso.arrange({ filter: filterValue });
+};
+