Extract list_util.js for navigating lists.

The code here used to live in hotkey.js.  Its complicated calling
protocol made it difficult to unit test.  We are also trying to
slim down hotkey.js.

Our arrow navigation for things like `#stream_filters` has always
been kind of awkward, since it's difficult to get the focus to
their list items.  This commit does nothing to fix that yet.

.eslintrc.json

@@ -85,6 +85,7 @@
         "narrow_state": false,
         "admin": false,
         "stream_data": false,
+        "list_util": false,
         "muting": false,
         "Dict": false,
         "unread": false,

frontend_tests/node_tests/hotkey.js

@@ -33,6 +33,9 @@ set_global('document', {
 
 var hotkey = require('js/hotkey.js');
 
+set_global('list_util', {
+});
+
 set_global('current_msg_list', {
     selected_id: function () {
         return 42;
@@ -276,7 +279,7 @@ function stubbing(func_name_to_stub, test_function) {
         });
     }
 
-    hotkey.tab_up_down = function () { return {flag: false}; };
+    list_util.inside_list = return_false;
     global.current_msg_list.empty = return_true;
     hotkey.is_settings_page = return_false;
     hotkey.is_subs = return_false;
@@ -289,6 +292,11 @@ function stubbing(func_name_to_stub, test_function) {
     assert_unmapped('spacebar');
     assert_unmapped('up_arrow');
 
+    global.list_util.inside_list = return_true;
+    assert_mapping('up_arrow', 'list_util.go_up');
+    assert_mapping('down_arrow', 'list_util.go_down');
+    list_util.inside_list = return_false;
+
     global.current_msg_list.empty = return_false;
     assert_mapping('down_arrow', 'navigate.down');
     assert_mapping('end', 'navigate.to_end');

static/js/hotkey.js

@@ -123,25 +123,6 @@ var keypress_mappings = {
     119: {name: 'query_streams', message_view_only: false}, // 'w'
 };
 
-exports.tab_up_down = (function () {
-    var list = ["#group-pm-list", "#stream_filters", "#global_filters", "#user_presences"];
-
-    return function (e) {
-        var $target = $(e.target);
-        var flag = $target.closest(list.join(", ")).length > 0;
-
-        return {
-            flag: flag,
-            next: function () {
-                return $target.closest("li").next().find("a");
-            },
-            prev: function () {
-                return $target.closest("li").prev().find("a");
-            },
-        };
-    };
-}());
-
 exports.get_keydown_hotkey = function (e) {
     if (e.metaKey || e.altKey) {
         return;
@@ -469,20 +450,16 @@ exports.process_hotkey = function (e, hotkey) {
         return false;
     }
 
-    var tab_list;
-
     if (event_name === "up_arrow") {
-        tab_list = exports.tab_up_down(e);
+        if (list_util.inside_list(e)) {
-        if (tab_list.flag) {
+            list_util.go_up(e);
-            tab_list.prev().focus();
             return true;
         }
     }
 
     if (event_name === "down_arrow") {
-        tab_list = exports.tab_up_down(e);
+        if (list_util.inside_list(e)) {
-        if (tab_list.flag) {
+            list_util.go_down(e);
-            tab_list.next().focus();
             return true;
         }
     }

static/js/list_util.js

@@ -0,0 +1,29 @@
+var list_util = (function () {
+
+var exports = {};
+
+var list_selectors = ["#group-pm-list", "#stream_filters", "#global_filters", "#user_presences"];
+
+exports.inside_list = function (e) {
+    var $target = $(e.target);
+    var in_list = $target.closest(list_selectors.join(", ")).length > 0;
+    return in_list;
+};
+
+exports.go_down = function (e) {
+    var $target = $(e.target);
+    $target.closest("li").next().find("a").focus();
+};
+
+exports.go_up = function (e) {
+    var $target = $(e.target);
+    $target.closest("li").prev().find("a").focus();
+};
+
+return exports;
+
+}());
+
+if (typeof module !== 'undefined') {
+    module.exports = list_util;
+}

zproject/settings.py

@@ -877,6 +877,7 @@ JS_SPECS = {
             'js/search.js',
             'js/composebox_typeahead.js',
             'js/navigate.js',
+            'js/list_util.js',
             'js/hotkey.js',
             'js/favicon.js',
             'js/notifications.js',