[Home] Rework the search form to use the extra buttons (#881)

app/javascript/src/javascripts/home.js

@@ -0,0 +1,46 @@
+import Page from "./utility/page";
+
+const Home = {};
+
+Home.init = function () {
+
+  const $form = $("#home-search-form");
+  const $tags = $("#tags");
+  console.log("init");
+
+  let isEmpty = !$tags.val();
+  let wasEmpty = isEmpty;
+  if (isEmpty) $form.addClass("empty");
+  console.log("input", isEmpty, wasEmpty);
+
+  $tags.on("input", () => {
+    wasEmpty = isEmpty;
+    isEmpty = !$tags.val();
+    console.log("input", isEmpty, wasEmpty);
+
+    if (isEmpty && !wasEmpty) $form.addClass("empty");
+    else if (!isEmpty && wasEmpty) $form.removeClass("empty");
+  });
+
+  $(".home-buttons a").on("click", (event) => {
+    if (isEmpty) return; // Act like regular links
+
+    event.preventDefault();
+    const extraTags = $(event.currentTarget).attr("tags");
+    if (extraTags) {
+      $tags.val((index, value) => {
+        return value + " " + extraTags;
+      });
+    }
+
+    $form.trigger("submit");
+    return false;
+  });
+};
+
+$(() => {
+  if (!Page.matches("static", "home")) return;
+  Home.init();
+});
+
+export default Home;

app/javascript/src/styles/specific/home.scss

@@ -75,6 +75,10 @@ body.c-static.a-home {
     }
   }
 
+  #home-search-form:not(.empty) .home-buttons a span::before {
+    content: "Search ";
+  }
+
 
   // Footer
   .home-footer-top {

app/views/static/home.html.erb

@@ -4,21 +4,26 @@
   <% end -%>
 
   <section class="home-section">
-    <%= form_tag(posts_path, method: "get", class: "home-search") do %>
-      <%= text_field_tag("tags", "", autofocus: "autofocus", placeholder: "Search posts by tag", data: { shortcut: "q", autocomplete: "tag-query" }) %>
-      <%= tag.button(tag.i(class: "fa-solid fa-magnifying-glass"), type: "submit") %>
-    <% end %>
+    <%= form_tag(posts_path, method: "get", id: "home-search-form") do %>
 
-    <div class="home-buttons">
-      <a href="/posts">
-        <i class="fas fa-splotch"></i>
-        Latest
-      </a>
-      <a href="/popular">
-        <i class="fas fa-fire-alt"></i>
-        Popular
-      </a>
-    </div>
+      <!-- Primary Searchbar -->
+      <div class="home-search">
+        <%= text_field_tag("tags", "", autofocus: "autofocus", placeholder: "Search posts by tag", data: { shortcut: "q", autocomplete: "tag-query" }) %>
+        <%= tag.button(tag.i(class: "fa-solid fa-magnifying-glass"), type: "submit") %>
+      </div>
+
+      <!-- Secondary search buttons -->
+      <div class="home-buttons">
+        <a href="<%= posts_path %>" tags="">
+          <i class="fas fa-splotch"></i>
+          <span>Latest</span>
+        </a>
+        <a href="<%= posts_path(tags: "order:rank") %>" tags="order:rank">
+          <i class="fas fa-fire-alt"></i>
+          <span>Popular</span>
+        </a>
+      </div>
+    <% end %>
   </section>
 
   <% if news_update = NewsUpdate.recent %>