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) {
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>'; }

40
views/pages/recipe_navigator.ejs
View file

@ -34,13 +34,14 @@
<%- 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("btn-primary")){
if ($(this).hasClass(TAG_ACTIVE_CLASS)){
activeTags.push($(this).text())
}
});
@ -57,28 +58,43 @@
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");
const activeTags = getActiveTags();
const searchValue = $("#recipeSearch").val().toLowerCase();
$("#recipe-link-container a").filter(function() {
$(this).toggle(recipeHasCurrentSearchPhrase(searchValue, $(this)) && recipeHasAllActiveTags(activeTags, $(this)));
});
setActiveRecipes();
});
/// This method is responsible for filtering the recipe list based on the search bar
$(document).ready(function(){
$(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)));
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>