From d474bf9ec01bf8b7190d9ba08a8f9eda4f160b43 Mon Sep 17 00:00:00 2001
From: Daniel Schadt <kingdread@gmx.de>
Date: Sat, 23 Jul 2022 20:53:22 +0200
Subject: allow tag addition and friend search with "Enter"

Previously, pressing enter in those text boxes triggered the form to be
submitted. This was rather unintuitive, therefore Enter now triggers the
correct action (add a tag or search for friends).
---
 fietsboek/static/fietsboek.js | 74 ++++++++++++++++++++++++++-----------------
 1 file changed, 45 insertions(+), 29 deletions(-)

diff --git a/fietsboek/static/fietsboek.js b/fietsboek/static/fietsboek.js
index 4a4eabf..d58da60 100644
--- a/fietsboek/static/fietsboek.js
+++ b/fietsboek/static/fietsboek.js
@@ -21,6 +21,44 @@ function tagClicked(event) {
 
 addHandler(".tag-badge", "click", tagClicked);
 
+/**
+ * Handler to add a new tag when the button is pressed.
+ */
+function addTag() {
+  const newTag = document.querySelector("#new-tag");
+  const node = document.createElement("span");
+  node.classList.add("tag-badge");
+  node.classList.add("badge");
+  node.classList.add("rounded-pill");
+  node.classList.add("bg-info");
+  node.classList.add("text-dark");
+  node.addEventListener("click", tagClicked);
+  const text = document.createTextNode(newTag.value);
+  node.appendChild(text);
+  const icon = document.createElement("i");
+  icon.classList.add("bi");
+  icon.classList.add("bi-x");
+  node.appendChild(icon);
+  const input = document.createElement("input");
+  input.hidden = true;
+  input.name = "tag[]";
+  input.value = newTag.value;
+  node.appendChild(input);
+  document.querySelector("#formTags").appendChild(node);
+  const space = document.createTextNode(" ");
+  document.querySelector("#formTags").appendChild(space);
+  newTag.value = "";
+}
+
+addHandler("#add-tag-btn", "click", addTag);
+// Also add a tag when enter is pressed
+addHandler("#new-tag", "keypress", (event) => {
+  if (event.keyCode == 13) {
+    event.preventDefault();
+    addTag();
+  }
+});
+
 /**
  * Function to check for password validity.
  *
@@ -105,6 +143,13 @@ function searchFriends() {
 }
 
 addHandler("#add-friend-btn", "click", () => searchFriends());
+// Also trigger the search on Enter keypress
+addHandler("#friendSearchQuery", "keypress", (event) => {
+  if (event.keyCode == 13) {
+    event.preventDefault();
+    searchFriends();
+  }
+});
 
 /**
  * Handler for when a "Remove friend" button is clicked.
@@ -244,35 +289,6 @@ addHandler(".archive-checkbox", "change", () => {
 
 document.addEventListener('DOMContentLoaded', function() {
   window.fietsboekImageIndex = 0;
-  /* Enable the "Add tag" button in the track edit page */
-  const $ = (selector) => document.querySelector(selector);
-  const button = $("#add-tag-btn");
-  if (button) {
-    button.addEventListener('click', function() {
-      const node = document.createElement("span");
-      node.classList.add("tag-badge");
-      node.classList.add("badge");
-      node.classList.add("rounded-pill");
-      node.classList.add("bg-info");
-      node.classList.add("text-dark");
-      node.addEventListener("click", tagClicked);
-      const text = document.createTextNode($("#new-tag").value);
-      node.appendChild(text);
-      const icon = document.createElement("i");
-      icon.classList.add("bi");
-      icon.classList.add("bi-x");
-      node.appendChild(icon);
-      const input = document.createElement("input");
-      input.hidden = true;
-      input.name = "tag[]";
-      input.value = $("#new-tag").value;
-      node.appendChild(input);
-      $("#formTags").appendChild(node);
-      const space = document.createTextNode(" ");
-      $("#formTags").appendChild(space);
-      $("#new-tag").value = "";
-    });
-  }
 
   /* Enable tooltips */
   const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
-- 
cgit v1.2.3