Extract info_overlay.js.

There are several ways we open help for keyboard shortcuts,
markdown help, and search operators.

    - from the gear menu
    - from the compose box
    - from the search box
    - hitting ? for keyboard help
    - arrowing/clicking through the tabs

This just moves the relevant code into a module and changes a
bunch of one-line calls in various places.

.eslintrc.json

@@ -33,6 +33,7 @@
         "server_events": false,
         "server_events_dispatch": false,
         "message_scroll": false,
+        "info_overlay": false,
         "ui": false,
         "ui_report": false,
         "night_mode": false,

frontend_tests/node_tests/hotkey.js

@@ -215,7 +215,7 @@ function stubbing(func_name_to_stub, test_function) {
     test_normal_typing();
     overlays.is_active = return_false;
 
-    assert_mapping('?', 'ui.maybe_show_keyboard_shortcuts');
+    assert_mapping('?', 'info_overlay.maybe_show_keyboard_shortcuts');
     assert_mapping('/', 'search.initiate_search');
     assert_mapping('w', 'activity.initiate_search');
     assert_mapping('q', 'stream_list.initiate_search');

static/js/click_handlers.js

@@ -457,7 +457,8 @@ $(function () {
     });
 
     $("body").on("click", "[data-overlay-trigger]", function () {
-        ui.show_info_overlay($(this).attr("data-overlay-trigger"));
+        var target = $(this).attr("data-overlay-trigger");
+        info_overlay.show(target);
     });
 
     function handle_compose_click(e) {

static/js/hashchange.js

@@ -152,13 +152,13 @@ function do_hashchange(from_reload) {
         ui_util.change_tab_to("#streams");
         break;
     case "#keyboard-shortcuts":
-        ui.show_info_overlay("keyboard-shortcuts");
+        info_overlay.show("keyboard-shortcuts");
         break;
     case "#markdown-help":
-        ui.show_info_overlay("markdown-help");
+        info_overlay.show("markdown-help");
         break;
     case "#search-operators":
-        ui.show_info_overlay("search-operators");
+        info_overlay.show("search-operators");
         break;
     case "#drafts":
         ui_util.change_tab_to("#drafts");

static/js/hotkey.js

@@ -622,7 +622,7 @@ exports.process_hotkey = function (e, hotkey) {
             gear_menu.open();
             return true;
         case 'show_shortcuts': // Show keyboard shortcuts page
-            ui.maybe_show_keyboard_shortcuts();
+            info_overlay.maybe_show_keyboard_shortcuts();
             return true;
         case 'stream_cycle_backward':
             narrow.stream_cycle_backward();

static/js/info_overlay.js

@@ -0,0 +1,85 @@
+var info_overlay = (function () {
+
+var exports = {};
+
+function adjust_mac_shortcuts() {
+    var keys_map = [
+        ['Backspace', 'Delete'],
+        ['Enter', 'Return'],
+        ['Home', 'Fn + Left'],
+        ['End', 'Fn + Right'],
+        ['PgUp', 'Fn + Up'],
+        ['PgDn', 'Fn + Down'],
+    ];
+
+    $(".hotkeys_table").each(function () {
+        var html = $(this).html();
+        keys_map.forEach(function (pair) {
+            html = html.replace(new RegExp(pair[0]), pair[1]);
+        });
+        $(this).html(html);
+    });
+}
+
+function _setup_info_overlay() {
+    var info_overlay_toggle = components.toggle({
+        name: "info-overlay-toggle",
+        selected: 0,
+        values: [
+            { label: i18n.t("Keyboard shortcuts"), key: "keyboard-shortcuts" },
+            { label: i18n.t("Message formatting"), key: "markdown-help" },
+            { label: i18n.t("Search operators"), key: "search-operators" },
+        ],
+        callback: function (name, key) {
+            $(".overlay-modal").hide();
+            $("#" + key).show();
+            $("#" + key).find(".modal-body").focus();
+        },
+    }).get();
+
+    $(".informational-overlays .overlay-tabs")
+        .append($(info_overlay_toggle).addClass("large"));
+
+    if (/Mac/i.test(navigator.userAgent)) {
+        adjust_mac_shortcuts();
+    }
+}
+
+exports.show = function (target) {
+    var overlay = $(".informational-overlays");
+
+    if (!overlay.hasClass("show")) {
+        overlays.open_overlay({
+            name:  'informationalOverlays',
+            overlay: overlay,
+            on_close: function () {
+                hashchange.changehash("");
+            },
+        });
+    }
+
+    if (target) {
+        components.toggle.lookup("info-overlay-toggle").goto(target);
+    }
+};
+
+exports.maybe_show_keyboard_shortcuts = function () {
+    if (overlays.is_active()) {
+        return;
+    }
+    if (popovers.any_active()) {
+        return;
+    }
+    exports.show("keyboard-shortcuts");
+};
+
+exports.initialize = function () {
+    i18n.ensure_i18n(_setup_info_overlay);
+};
+
+return exports;
+}());
+
+if (typeof module !== 'undefined') {
+    module.exports = info_overlay;
+}

static/js/ui.js

@@ -122,77 +122,6 @@ exports.show_failed_message_success = function (message_id) {
     });
 };
 
-function adjust_mac_shortcuts() {
-    var keys_map = [
-        ['Backspace', 'Delete'],
-        ['Enter', 'Return'],
-        ['Home', 'Fn + Left'],
-        ['End', 'Fn + Right'],
-        ['PgUp', 'Fn + Up'],
-        ['PgDn', 'Fn + Down'],
-    ];
-
-    $(".hotkeys_table").each(function () {
-        var html = $(this).html();
-        keys_map.forEach(function (pair) {
-            html = html.replace(new RegExp(pair[0]), pair[1]);
-        });
-        $(this).html(html);
-    });
-}
-
-function _setup_info_overlay() {
-    var info_overlay_toggle = components.toggle({
-        name: "info-overlay-toggle",
-        selected: 0,
-        values: [
-            { label: i18n.t("Keyboard shortcuts"), key: "keyboard-shortcuts" },
-            { label: i18n.t("Message formatting"), key: "markdown-help" },
-            { label: i18n.t("Search operators"), key: "search-operators" },
-        ],
-        callback: function (name, key) {
-            $(".overlay-modal").hide();
-            $("#" + key).show();
-            $("#" + key).find(".modal-body").focus();
-        },
-    }).get();
-
-    $(".informational-overlays .overlay-tabs")
-        .append($(info_overlay_toggle).addClass("large"));
-
-    if (/Mac/i.test(navigator.userAgent)) {
-        adjust_mac_shortcuts();
-    }
-}
-
-exports.show_info_overlay = function (target) {
-    var overlay = $(".informational-overlays");
-
-    if (!overlay.hasClass("show")) {
-        overlays.open_overlay({
-            name:  'informationalOverlays',
-            overlay: overlay,
-            on_close: function () {
-                hashchange.changehash("");
-            },
-        });
-    }
-
-    if (target) {
-        components.toggle.lookup("info-overlay-toggle").goto(target);
-    }
-};
-
-exports.maybe_show_keyboard_shortcuts = function () {
-    if (overlays.is_active()) {
-        return;
-    }
-    if (popovers.any_active()) {
-        return;
-    }
-    ui.show_info_overlay("keyboard-shortcuts");
-};
-
 /* EXPERIMENTS */
 
 /* This method allows an advanced user to use the console
@@ -245,7 +174,6 @@ $(function () {
 });
 
 exports.initialize = function () {
-    i18n.ensure_i18n(_setup_info_overlay);
     exports.show_error_for_unsupported_platform();
 
     if (page_params.night_mode) {

static/js/ui_init.js

@@ -281,6 +281,7 @@ $(function () {
     drafts.initialize();
     sent_messages.initialize();
     hotspots.initialize();
+    info_overlay.initialize();
     ui.initialize();
     panels.initialize();
     typing.initialize();

zproject/settings.py

@@ -1077,6 +1077,7 @@ JS_SPECS = {
             'js/lightbox.js',
             'js/ui_report.js',
             'js/message_scroll.js',
+            'js/info_overlay.js',
             'js/ui.js',
             'js/night_mode.js',
             'js/ui_util.js',