From 4bbd73a9a2622fa4257af1c555974e6dc62ad4ee Mon Sep 17 00:00:00 2001 From: Steve Howell Date: Tue, 4 Apr 2017 09:14:27 -0700 Subject: [PATCH] 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 | 1 + frontend_tests/node_tests/hotkey.js | 10 +++++++++- static/js/hotkey.js | 31 ++++------------------------- static/js/list_util.js | 29 +++++++++++++++++++++++++++ zproject/settings.py | 1 + 5 files changed, 44 insertions(+), 28 deletions(-) create mode 100644 static/js/list_util.js diff --git a/.eslintrc.json b/.eslintrc.json index 8fd87e4043..4f59653b43 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -85,6 +85,7 @@ "narrow_state": false, "admin": false, "stream_data": false, + "list_util": false, "muting": false, "Dict": false, "unread": false, diff --git a/frontend_tests/node_tests/hotkey.js b/frontend_tests/node_tests/hotkey.js index 61900eb742..9ec0bf6dd5 100644 --- a/frontend_tests/node_tests/hotkey.js +++ b/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'); diff --git a/static/js/hotkey.js b/static/js/hotkey.js index 92e19ef0d6..09178a73ef 100644 --- a/static/js/hotkey.js +++ b/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 (tab_list.flag) { - tab_list.prev().focus(); + if (list_util.inside_list(e)) { + list_util.go_up(e); return true; } } if (event_name === "down_arrow") { - tab_list = exports.tab_up_down(e); - if (tab_list.flag) { - tab_list.next().focus(); + if (list_util.inside_list(e)) { + list_util.go_down(e); return true; } } diff --git a/static/js/list_util.js b/static/js/list_util.js new file mode 100644 index 0000000000..88edc83366 --- /dev/null +++ b/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; +} diff --git a/zproject/settings.py b/zproject/settings.py index a5c9897042..b1ea04a99d 100644 --- a/zproject/settings.py +++ b/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',