/ Published in: JavaScript
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
$(document).ready(function() { initFilters(); initPagingWithFilter(".paged", ".short", "ul.paging"); }); /***************************************************************************************/ function initFilters() { showAllItems(); hideEmptyDiv(); window.filters = new Array(); window.courseFilter = new Array(); window.ingredientFilter = new Array(); window.filteredIngredients = new Array(); window.filteredCourses = new Array(); window.filteredRecipes = new Array(); $("#receptenfilter input[type=checkbox]").click(function() { updateFilters($(this)); updateRecipeUI(); }); } function updateFilters(clicked) { filters = []; courseFilter = []; ingredientFilter = []; $("#receptenfilter .gang input[type=checkbox]:checked ").each(function() { if($(this).val() != "on") courseFilter.push($(this).val()); }); $("#receptenfilter .bestanddeel input[type=checkbox]:checked").each(function() { ingredientFilter.push($(this).val()); }); //bij allegangen de andere gangen afchecken if($(clicked).attr("id") == "allegangen") { $("#receptenfilter .gang input[type=checkbox]").each(function() { if($(this).attr("id") != "allegangen") $(this).removeAttr("checked"); }); }else{ var allegang = $("#receptenfilter #allegangen"); //allegang.checked = false; if(courseFilter.length > 0) allegang.removeAttr("checked"); } filteredCourses = new Array(); if(courseFilter.length > 0) { $("#recipes article").each(function() { var recipe = this; courseFilter.forEach(function(el) { if($(recipe).find("a[data-course=" + el + "]").length > 0) filteredCourses.push(recipe); }); }); } else if($("#receptenfilter #allegangen").attr("checked")) { $("#recipes article").each(function() { filteredCourses.push(this); }); } filteredRecipes = new Array(); if(ingredientFilter.length == 0) filteredRecipes = filteredCourses; else { filteredCourses.forEach(function(recipe) { ingredientFilter.forEach(function(ing) { if($(recipe).find("a[data-ingredient=" + ing + "]").length > 0) filteredRecipes.push(recipe); }); }); } /* console.log("courses filter: " + courseFilter.length); console.log("ing filter: " + ingredientFilter.length); console.log("filtered courses: " + filteredCourses.length); console.log("recipes: " + filteredRecipes.length); */ } function updateRecipeUI() { $("#recipes article").hide(); $("#recipes article").removeClass("visible"); hideEmptyDiv(); if(filteredRecipes.length == 0) { if( $("#receptenfilter #allegangen").attr("checked")) showAllItems(); else showEmptyDiv(); } else { filteredRecipes.forEach(function(recipe) { showItem(recipe); }); } initPagingWithFilter(".paged", ".short", "ul.paging"); } function showEmptyDiv(){ $("#pagingempty").show(); $(".paging").hide(); } function hideEmptyDiv(){ $("#pagingempty").hide(); $(".paging").show(); } function showItem(theItem){ $(theItem).show(); $(theItem).addClass("visible"); } function showAllItems(){ $("#recipes article").show(); $("#recipes article").addClass("visible"); } function initPagingWithFilter(container, item, nav){ var itemsPerPage = 5; var currentPage, totalPages; var container = $(container); var nav = $(nav); var items = $(container).children(".visible"); //console.log("items: " + $('.visible').length); totalPages = Math.ceil( $('.visible').length/itemsPerPage); nav.empty(); // back button var backButton = nav.append('<li><a class="backLink" href="#">«</a></li>'); for(var i = 0; i < totalPages; i++){ // populate nav with page links var pageItem = nav.append('<li><a class="pageLink" href="#" data-page="' + i + '">' + (i+1).toString() + "</a></li>"); } // next button var nextButton = nav.append('<li><a class="nextLink" href="#">»</a></li>'); $('li a', nav).click(function(evt){ evt.preventDefault(); if($(this).hasClass('pageLink')){ pageTo(parseInt($(this).attr('data-page'))); }else if($(this).hasClass('backLink')){ pageTo(currentPage - 1); }else if($(this).hasClass('nextLink')){ pageTo(currentPage + 1); } }); pageTo(0); function pageTo(newPage){ currentPage = newPage; // active page state $('li a', nav).removeClass('active'); $('li a[data-page=' + currentPage + ']').addClass('active'); // manage next & back button visibility if(currentPage == totalPages - 1){ $('li .nextLink', nav).hide(); }else{ $('li .nextLink', nav).show(); } if(currentPage == 0){ $('li .backLink', nav).hide(); }else{ $('li .backLink', nav).show(); } // show hide items.each(function(i){ if(i >= currentPage*itemsPerPage && i < currentPage*itemsPerPage+itemsPerPage){ $(this).fadeIn("slow"); }else{ $(this).hide(); } }); } } }