2022-06-20 21:55:50 -04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
<head>
|
|
|
|
<%- include('../partials/include' ) %>
|
2022-06-22 12:27:14 -04:00
|
|
|
<link rel="stylesheet" type="text/css" href="/css/projects.css">
|
2022-06-20 21:55:50 -04:00
|
|
|
</head>
|
|
|
|
|
|
|
|
<body>
|
|
|
|
<header>
|
|
|
|
<%- include('../partials/nav') %>
|
|
|
|
</header>
|
|
|
|
|
2022-06-21 21:02:32 -04:00
|
|
|
<div class="container mt-5 topMargin">
|
|
|
|
<h1>Recipes</h1>
|
2022-06-22 12:27:14 -04:00
|
|
|
<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">
|
|
|
|
<%- include('../partials/generated/recipe-links') %>
|
|
|
|
</div>
|
2022-06-20 21:55:50 -04:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<%- include('../partials/post_html_include') %>
|
2022-06-22 12:27:14 -04:00
|
|
|
<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();
|
|
|
|
var activeTags = [];
|
|
|
|
// create a list of currently active tags
|
|
|
|
$(".btn-container button").filter(function() {
|
|
|
|
if ($(this).hasClass("btn-primary")){
|
|
|
|
activeTags.push($(this).text())
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
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)
|
|
|
|
});
|
|
|
|
}
|
|
|
|
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>
|
2022-06-20 21:55:50 -04:00
|
|
|
</body>
|
|
|
|
|
|
|
|
</html>
|