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

support for tags in recipes linking back to a filtered list in recipe_navigator

Browse source
This commit is contained in:
len0rd 2022-06-22 18:29:33 -04:00
parent d0049fa839
commit 96ea438c2e
2 changed files with 29 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
prestart.js
View file

@ -84,7 +84,7 @@ function convertRecipeMarkdown(inputDir, outputDir) {
md.renderer.rules.hashtag_open = function (tokens, idx) { md.renderer.rules.hashtag_open = function (tokens, idx) {
var tagName = tokens[idx].content.toLowerCase(); var tagName = tokens[idx].content.toLowerCase();
return '<a href="/tags/' + tagName + '"><span class="badge bg-secondary">'; return '<a href="/recipe_navigator?tag=' + tagName + '"><span class="badge bg-secondary">';
} }
md.renderer.rules.hashtag_close = function () { return '</span></a>'; } md.renderer.rules.hashtag_close = function () { return '</span></a>'; }

38
views/pages/recipe_navigator.ejs
View file

@ -34,13 +34,14 @@
<%- include('../partials/post_html_include') %> <%- include('../partials/post_html_include') %>
<script> <script>
const TAG_ACTIVE_CLASS = "btn-primary";
/// Returns a list of the current recipe hashtags that are enabled (enabled filters) /// Returns a list of the current recipe hashtags that are enabled (enabled filters)
function getActiveTags() { function getActiveTags() {
var activeTags = []; var activeTags = [];
// create a list of currently active tags // create a list of currently active tags
$(".btn-container button").filter(function() { $(".btn-container button").filter(function() {
if ($(this).hasClass("btn-primary")){ if ($(this).hasClass(TAG_ACTIVE_CLASS)){
activeTags.push($(this).text()) activeTags.push($(this).text())
} }
}); });
@ -57,28 +58,43 @@
return !searchValue || recipe.text().toLowerCase().indexOf(searchValue) > -1; 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 /// This script is responsible for filtering the recipe list
/// based on enabled/disabled hashtags. I'm certain theres more /// based on enabled/disabled hashtags. I'm certain theres more
/// efficient ways to do this but /shrug /// efficient ways to do this but /shrug
$(".btn-container").on("click", "button", function() { $(".btn-container").on("click", "button", function() {
$(this).toggleClass("btn-light btn-primary"); $(this).toggleClass("btn-light btn-primary");
const activeTags = getActiveTags(); setActiveRecipes();
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 /// This method is responsible for filtering the recipe list based on the search bar
$(document).ready(function() { $(document).ready(function() {
$("#recipeSearch").on("keyup", function() { $("#recipeSearch").on("keyup", function() {
const searchValue = $("#recipeSearch").val().toLowerCase(); setActiveRecipes();
const activeTags = getActiveTags();
$("#recipe-link-container a").filter(function() {
$(this).toggle(recipeHasCurrentSearchPhrase(searchValue, $(this)) && recipeHasAllActiveTags(activeTags, $(this)));
}); });
}); });
// 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> </script>
</body> </body>