len0rd/personal-website
1
0
Fork 0
mirror of https://github.com/len0rd/personal-website.git synced 2025-03-01 03:51:57 -05:00
Code Issues 1 Packages Projects 1 Releases Wiki Activity

add search bar to recipe list and filter in addition to current tag filters

Browse source
This commit is contained in:
len0rd 2022-06-22 18:05:27 -04:00
parent 1e1ba15118
commit d0049fa839
1 changed files with 45 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
views/pages/recipe_navigator.ejs
View file

@ -12,14 +12,21 @@
</header>
<div class="container mt-5 topMargin">
<h1>Recipes</h1>
<div class="row">
<div class="col">
<h1 class="display-1">Recipes</h1>
</div>
<div class="col-4 align-self-end">
<input class="form-control" id="recipeSearch" type="text" placeholder="search..">
</div>
</div>
<div class="row mb-2">
<div class="col btn-container">
<%- include('../partials/generated/recipe-tags') %>
</div>
</div>
<div class="row">
<div class="list-group" id="recipe-link-container">
<div class="list-group list-group-flush" id="recipe-link-container">
<%- include('../partials/generated/recipe-links') %>
</div>
</div>
@ -27,12 +34,9 @@
<%- include('../partials/post_html_include') %>
<script>
/// This script is responsible for filtering the recipe list
/// based on enabled/disabled hashtags. I'm certain theres more
/// efficient ways to do this but /shrug
$(".btn-container").on("click", "button", function() {
$(this).toggleClass("btn-light btn-primary");
var tag = $(this).text();
/// Returns a list of the current recipe hashtags that are enabled (enabled filters)
function getActiveTags() {
var activeTags = [];
// create a list of currently active tags
$(".btn-container button").filter(function() {
@ -40,29 +44,41 @@
activeTags.push($(this).text())
}
});
return activeTags;
}
if ($(this).hasClass("btn-primary")) {
// if tag is active, activate its filter
$("#recipe-link-container a:visible").filter(function() {
$(this).toggle($(this).attr("tags").toLowerCase().indexOf(tag) > -1)
/// check if the given recipe item all the currently selected hashtag filters (an 'AND' search)
function recipeHasAllActiveTags(activeTags, recipe) {
const recipeTags = recipe.attr("tags").toLowerCase().split(",");
return activeTags.every(elem => recipeTags.includes(elem));
}
function recipeHasCurrentSearchPhrase(searchValue, recipe) {
return !searchValue || recipe.text().toLowerCase().indexOf(searchValue) > -1;
}
/// This script is responsible for filtering the recipe list
/// based on enabled/disabled hashtags. I'm certain theres more
/// efficient ways to do this but /shrug
$(".btn-container").on("click", "button", function() {
$(this).toggleClass("btn-light btn-primary");
const activeTags = getActiveTags();
const searchValue = $("#recipeSearch").val().toLowerCase();
$("#recipe-link-container a").filter(function() {
$(this).toggle(recipeHasCurrentSearchPhrase(searchValue, $(this)) && recipeHasAllActiveTags(activeTags, $(this)));
});
});
/// This method is responsible for filtering the recipe list based on the search bar
$(document).ready(function(){
$("#recipeSearch").on("keyup", function() {
const searchValue = $("#recipeSearch").val().toLowerCase();
const activeTags = getActiveTags();
$("#recipe-link-container a").filter(function() {
$(this).toggle(recipeHasCurrentSearchPhrase(searchValue, $(this)) && recipeHasAllActiveTags(activeTags, $(this)));
});
}
else if ($(this).hasClass("btn-light")) {
// tag has been toggled off. re-add any thing that is hidden but shouldnt be
$("#recipe-link-container a:hidden").filter(function() {
const elemTagList = $(this).attr("tags").toLowerCase();
hasActiveTags = true;
for (const activeTag of activeTags) {
if (elemTagList.indexOf(activeTag) == -1) {
hasActiveTags = false;
break;
}
}
if (hasActiveTags) {
$(this).toggle(true);
}
});
}
});
});
</script>
</body>