From bd591424e2ff5de3a07d4c1be7ca72e14cd1ab17 Mon Sep 17 00:00:00 2001
From: Steve Howell <showell@zulipchat.com>
Date: Wed, 4 Apr 2018 10:36:49 -0400
Subject: [PATCH] Add keydown_util.js module.

This is a pretty thin abstraction to prevent having to put
magic numbers in code, doing the which/keyCode hack, and remembering
to all preventDefault.

Hopefully we'll expand it to handle things like shift/alt keys
for components that want their own keyboard handlers (vs. going
through hotkey.js).
---
 .eslintrc.json                          |  1 +
 frontend_tests/node_tests/components.js |  7 ++--
 static/js/components.js                 | 16 ++++-----
 static/js/keydown_util.js               | 43 +++++++++++++++++++++++++
 zproject/settings.py                    |  1 +
 5 files changed, 58 insertions(+), 10 deletions(-)
 create mode 100644 static/js/keydown_util.js

diff --git a/.eslintrc.json b/.eslintrc.json
index c0cd70bd4a..b72b85966e 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -33,6 +33,7 @@
         "server_events": false,
         "server_events_dispatch": false,
         "message_scroll": false,
+        "keydown_util": false,
         "info_overlay": false,
         "ui": false,
         "ui_report": false,
diff --git a/frontend_tests/node_tests/components.js b/frontend_tests/node_tests/components.js
index 0e47527ad8..6cdd06e1d9 100644
--- a/frontend_tests/node_tests/components.js
+++ b/frontend_tests/node_tests/components.js
@@ -1,9 +1,12 @@
 set_global('i18n', global.stub_i18n);
 
+zrequire('keydown_util');
 zrequire('components');
 
-var LEFT_KEY = { which: 37 };
-var RIGHT_KEY = { which: 39 };
+var noop = function () {};
+
+var LEFT_KEY = { which: 37, preventDefault: noop };
+var RIGHT_KEY = { which: 39, preventDefault: noop };
 
 (function test_basics() {
     var keydown_f;
diff --git a/static/js/components.js b/static/js/components.js
index 48efb4b078..89722bfec3 100644
--- a/static/js/components.js
+++ b/static/js/components.js
@@ -68,12 +68,14 @@ exports.toggle = (function () {
         function maybe_go_left() {
             if (meta.idx > 0) {
                 select_tab(meta.idx - 1);
+                return true;
             }
         }
 
         function maybe_go_right() {
             if (meta.idx < opts.values.length - 1) {
                 select_tab(meta.idx + 1);
+                return true;
             }
         }
 
@@ -83,14 +85,12 @@ exports.toggle = (function () {
                 select_tab(idx);
             });
 
-            meta.$ind_tab.keydown(function (e) {
-                var key = e.which || e.keyCode;
-
-                if (key === 37) {
-                    maybe_go_left();
-                } else if (key === 39) {
-                    maybe_go_right();
-                }
+            keydown_util.handle({
+                elem: meta.$ind_tab,
+                handlers: {
+                    left_arrow: maybe_go_left,
+                    right_arrow: maybe_go_right,
+                },
             });
 
             if (typeof opts.selected === "number") {
diff --git a/static/js/keydown_util.js b/static/js/keydown_util.js
new file mode 100644
index 0000000000..1bccf68c8d
--- /dev/null
+++ b/static/js/keydown_util.js
@@ -0,0 +1,43 @@
+var keydown_util = (function () {
+
+var exports = {};
+
+/*
+    See hotkey.js for handlers that are more app-wide.
+*/
+
+var keys = {
+    37: 'left_arrow',
+    38: 'up_arrow',
+    39: 'right_arrow',
+    40: 'down_arrow',
+};
+
+exports.handle = function (opts) {
+    opts.elem.keydown(function (e) {
+        var key = e.which || e.keyCode;
+
+        var key_name = keys[key];
+
+        if (!key_name) {
+            return;
+        }
+
+        if (!opts.handlers[key_name]) {
+            return;
+        }
+
+        var handled = opts.handlers[key_name]();
+
+        if (handled) {
+            e.preventDefault();
+        }
+    });
+};
+
+return exports;
+}());
+
+if (typeof module !== 'undefined') {
+    module.exports = keydown_util;
+}
diff --git a/zproject/settings.py b/zproject/settings.py
index 29a8cc7f47..2552dc1757 100644
--- a/zproject/settings.py
+++ b/zproject/settings.py
@@ -1023,6 +1023,7 @@ JS_SPECS = {
             'js/loading.js',
             'js/util.js',
             'js/dynamic_text.js',
+            'js/keydown_util.js',
             'js/lightbox_canvas.js',
             'js/rtl.js',
             'js/dict.js',