From 9c6cae7177f188dd7cae425fadcfdc1675329e32 Mon Sep 17 00:00:00 2001
From: Ethan Dalool <git@voussoir.net>
Date: Sat, 24 Feb 2018 00:24:38 -0800
Subject: [PATCH] Use event listeners instead of setting onkeyup manually.

---
 README.md                                     |  1 -
 frontends/etiquette_flask/static/common.js    | 78 +++++++++----------
 .../etiquette_flask/templates/search.html     |  8 +-
 frontends/etiquette_flask/templates/tags.html |  3 +-
 4 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/README.md b/README.md
index 3e2b414..552f09b 100644
--- a/README.md
+++ b/README.md
@@ -84,7 +84,6 @@ If you are interested in helping, please raise an issue before making any pull r
 - Fix album size cache when photo reload metadata and generally improve that validation.
 - Better bookmark url validation.
 - Create a textbox which gives autocomplete tag names.
-- Clean up the textbox hooks & handlers and make them more like stackable decorators (entry with history + bind box to button).
 
 ### To do list: User permissions
 Here are some thoughts about the kinds of features that need to exist within the permission system. I don't know how I'll actually manage it just yet. Possibly a `permissions` table in the database with `user_id | permission` where `permission` is some reliably-formatted string.
diff --git a/frontends/etiquette_flask/static/common.js b/frontends/etiquette_flask/static/common.js
index 1aa9e43..4674bf5 100644
--- a/frontends/etiquette_flask/static/common.js
+++ b/frontends/etiquette_flask/static/common.js
@@ -270,22 +270,6 @@ function post(url, data, callback)
     request.send(data);
 }
 
-function bind_box_to_button(box, button, ctrl_enter)
-{
-    box.onkeydown=function()
-    {
-        // Thanks Yaroslav Yakovlev
-        // http://stackoverflow.com/a/9343095
-        if (
-            (event.keyCode == 13 || event.keyCode == 10) &&
-            ((ctrl_enter && event.ctrlKey) || (!ctrl_enter))
-        )
-        {
-            button.click();
-        }
-    };
-}
-
 function create_album_and_follow(parent)
 {
     var url = "/albums/create_album";
@@ -316,38 +300,54 @@ function delete_all_children(element)
     }
 }
 
-function entry_with_history_hook(box, button)
+function bind_box_to_button(box, button, ctrl_enter)
 {
-    //console.log(event.keyCode);
-    if (box.entry_history === undefined)
-    {box.entry_history = [];}
-    if (box.entry_history_pos === undefined)
-    {box.entry_history_pos = -1;}
-    if (event.keyCode == 13)
-    {
-        /* Enter */
-        box.entry_history.push(box.value);
-        button.click();
-        box.value = "";
-    }
-    else if (event.keyCode == 38)
+    // Thanks Yaroslav Yakovlev
+    // http://stackoverflow.com/a/9343095
+    var bound_box_hook = function(event)
     {
+        if (event.key !== "Enter")
+            {return;}
 
-        /* Up arrow */
+        ctrl_success = !ctrl_enter || (event.ctrlKey)
+
+        if (! ctrl_success)
+            {return;}
+
+        button.click();
+    }
+    box.addEventListener("keyup", bound_box_hook);
+}
+
+function entry_with_history_hook(event)
+{
+    //console.log(event);
+    var box = event.target;
+
+    if (box.entry_history === undefined)
+        {box.entry_history = [];}
+
+    if (box.entry_history_pos === undefined)
+        {box.entry_history_pos = -1;}
+
+    if (event.key === "Enter")
+    {
+        box.entry_history.push(box.value);
+    }
+    else if (event.key === "ArrowUp")
+    {
         if (box.entry_history.length == 0)
-        {return}
+            {return}
+
         if (box.entry_history_pos == -1)
-        {
-            box.entry_history_pos = box.entry_history.length - 1;
-        }
+            {box.entry_history_pos = box.entry_history.length - 1;}
         else if (box.entry_history_pos > 0)
-        {
-            box.entry_history_pos -= 1;
-        }
+            {box.entry_history_pos -= 1;}
+
         box.value = box.entry_history[box.entry_history_pos];
         setTimeout(function(){box.selectionStart = box.value.length;}, 0);
     }
-    else if (event.keyCode == 27)
+    else if (event.key === "Escape")
     {
         box.value = "";
     }
diff --git a/frontends/etiquette_flask/templates/search.html b/frontends/etiquette_flask/templates/search.html
index 5a4fc37..dc88a82 100644
--- a/frontends/etiquette_flask/templates/search.html
+++ b/frontends/etiquette_flask/templates/search.html
@@ -589,9 +589,9 @@ for (var index = 0; index < found_on_page.length; index += 1)
     
 }
 
-input_musts.onkeydown = function(){tag_input_hook(this, inputted_musts, "search_builder_musts_inputted")};
-input_mays.onkeydown = function(){tag_input_hook(this, inputted_mays, "search_builder_mays_inputted")};
-input_forbids.onkeydown = function(){tag_input_hook(this, inputted_forbids, "search_builder_forbids_inputted")};
+input_musts.addEventListener("keyup", function(){tag_input_hook(this, inputted_musts, "search_builder_musts_inputted")});
+input_mays.addEventListener("keyup", function(){tag_input_hook(this, inputted_mays, "search_builder_mays_inputted")});
+input_forbids.addEventListener("keyup", function(){tag_input_hook(this, inputted_forbids, "search_builder_forbids_inputted")});
 bind_box_to_button(input_expression, document.getElementById("search_go_button"));
 </script>
-</html>
\ No newline at end of file
+</html>
diff --git a/frontends/etiquette_flask/templates/tags.html b/frontends/etiquette_flask/templates/tags.html
index 292fbd1..6560510 100644
--- a/frontends/etiquette_flask/templates/tags.html
+++ b/frontends/etiquette_flask/templates/tags.html
@@ -147,7 +147,8 @@ body
 var box = document.getElementById('add_tag_textbox');
 var button = document.getElementById('add_tag_button');
 var message_area = document.getElementById('message_area');
-box.onkeydown = function(){entry_with_history_hook(box, button)};
+box.addEventListener("keyup", entry_with_history_hook);
+bind_box_to_button(box, button, false);
 
 function submit_tag(callback)
 {