From 96ea438c2ed61b1ffcada0852d2e932b01527858 Mon Sep 17 00:00:00 2001
From: len0rd <len0rd@users.noreply.github.com>
Date: Wed, 22 Jun 2022 18:29:33 -0400
Subject: [PATCH] support for tags in recipes linking back to a filtered list
 in recipe_navigator

---
 prestart.js                      |  2 +-
 views/pages/recipe_navigator.ejs | 40 ++++++++++++++++++++++----------
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/prestart.js b/prestart.js
index c13bb94..14e2b9b 100644
--- a/prestart.js
+++ b/prestart.js
@@ -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>'; }
diff --git a/views/pages/recipe_navigator.ejs b/views/pages/recipe_navigator.ejs
index 1c83bff..a92c9db 100644
--- a/views/pages/recipe_navigator.ejs
+++ b/views/pages/recipe_navigator.ejs
@@ -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,29 +58,44 @@
             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");
+        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(){
+        $(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>