mirror of
https://github.com/len0rd/personal-website.git
synced 2025-03-01 03:51:57 -05:00
103 lines
3.6 KiB
Plaintext
103 lines
3.6 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<%- include('../partials/include' ) %>
|
|
<link rel="stylesheet" type="text/css" href="/css/projects.css">
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<%- include('../partials/nav') %>
|
|
</header>
|
|
|
|
<div class="container mt-5 topMargin">
|
|
<div class="row mb-3">
|
|
<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 list-group-flush" id="recipe-link-container">
|
|
<%- include('../partials/generated/recipe-links') %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%- include('../partials/post_html_include') %>
|
|
<script>
|
|
const TAG_ACTIVE_CLASS = "btn-primary";
|
|
|
|
/// 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() {
|
|
if ($(this).hasClass(TAG_ACTIVE_CLASS)){
|
|
activeTags.push($(this).text())
|
|
}
|
|
});
|
|
return activeTags;
|
|
}
|
|
|
|
/// 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;
|
|
}
|
|
|
|
function setActiveRecipes() {
|
|
const activeTags = getActiveTags();
|
|
const searchValue = $("#recipeSearch").val().toLowerCase();
|
|
|
|
$("#recipe-link-container a").filter(function() {
|
|
$(this).toggle(recipeHasCurrentSearchPhrase(searchValue, $(this)) && recipeHasAllActiveTags(activeTags, $(this)));
|
|
});
|
|
}
|
|
|
|
/// 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");
|
|
setActiveRecipes();
|
|
});
|
|
|
|
/// This method is responsible for filtering the recipe list based on the search bar
|
|
$(document).ready(function() {
|
|
$("#recipeSearch").on("keyup", function() {
|
|
setActiveRecipes();
|
|
});
|
|
});
|
|
|
|
// apply a tag on page load if specified in the url
|
|
$(document).ready(function() {
|
|
let searchParams = new URLSearchParams(window.location.search);
|
|
if (searchParams.has("tag")) {
|
|
const tagParam = searchParams.get("tag").toLowerCase().trim();
|
|
$(".btn-container button").filter(function() {
|
|
if (tagParam == $(this).text().toLowerCase().trim()) {
|
|
$(this).toggleClass("btn-light btn-primary");
|
|
setActiveRecipes();
|
|
return;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|