popover_menus: Extract compose_popovers module.

Signed-off-by: Anders Kaseorg <anders@zulip.com>

tools/test-js-with-node

@@ -66,6 +66,7 @@ EXEMPT_FILES = make_set(
         "web/src/compose_banner.ts",
         "web/src/compose_closed_ui.js",
         "web/src/compose_fade.js",
+        "web/src/compose_popovers.js",
         "web/src/compose_recipient.js",
         "web/src/compose_state.js",
         "web/src/compose_textarea.ts",

web/src/compose_popovers.js

@@ -0,0 +1,138 @@
+import $ from "jquery";
+import {delegate} from "tippy.js";
+
+import render_compose_control_buttons_popover from "../templates/compose_control_buttons_popover.hbs";
+import render_compose_select_enter_behaviour_popover from "../templates/compose_select_enter_behaviour_popover.hbs";
+import render_mobile_message_buttons_popover_content from "../templates/mobile_message_buttons_popover_content.hbs";
+
+import * as channel from "./channel";
+import * as common from "./common";
+import * as compose_actions from "./compose_actions";
+import * as giphy from "./giphy";
+import * as narrow_state from "./narrow_state";
+import * as popover_menus from "./popover_menus";
+import * as popovers from "./popovers";
+import * as rows from "./rows";
+import {parse_html} from "./ui_util";
+import {user_settings} from "./user_settings";
+
+export function initialize() {
+    // compose box buttons popover shown on mobile widths.
+    // We want this click event to propagate and hide other popovers
+    // that could possibly obstruct user from using this popover.
+    delegate("body", {
+        ...popover_menus.default_popover_props,
+        // Attach the click event to `.mobile_button_container`, since
+        // the button (`.compose_mobile_button`) already has a hover
+        // action attached, for showing the keyboard shortcut,
+        // and Tippy cannot handle events that trigger two different
+        // actions
+        target: ".mobile_button_container",
+        placement: "top",
+        onShow(instance) {
+            popover_menus.popover_instances.compose_mobile_button = instance;
+            popover_menus.on_show_prep(instance);
+            instance.setContent(
+                parse_html(
+                    render_mobile_message_buttons_popover_content({
+                        is_in_private_narrow: narrow_state.narrowed_to_pms(),
+                    }),
+                ),
+            );
+        },
+        onMount(instance) {
+            const $popper = $(instance.popper);
+            $popper.one("click", ".compose_mobile_stream_button", (e) => {
+                compose_actions.start("stream", {trigger: "new topic button"});
+                e.stopPropagation();
+                instance.hide();
+            });
+            $popper.one("click", ".compose_mobile_private_button", (e) => {
+                compose_actions.start("private");
+                e.stopPropagation();
+                instance.hide();
+            });
+        },
+        onHidden(instance) {
+            // Destroy instance so that event handlers
+            // are destroyed too.
+            instance.destroy();
+            popover_menus.popover_instances.compose_mobile_button = undefined;
+        },
+    });
+
+    // Click event handlers for it are handled in `compose_ui` and
+    // we don't want to close this popover on click inside it but
+    // only if user clicked outside it.
+    popover_menus.register_popover_menu(".compose_control_menu_wrapper", {
+        placement: "top",
+        onShow(instance) {
+            const parent_row = rows.get_closest_row(instance.reference);
+            let preview_mode_on;
+            // If the popover is opened from a message edit form, we want to
+            // infer the preview mode from that row, else from the compose box.
+            if (parent_row.length) {
+                preview_mode_on = parent_row.hasClass("preview_mode");
+            } else {
+                preview_mode_on = $("#compose").hasClass("preview_mode");
+            }
+            instance.setContent(
+                parse_html(
+                    render_compose_control_buttons_popover({
+                        giphy_enabled: giphy.is_giphy_enabled(),
+                        preview_mode_on,
+                    }),
+                ),
+            );
+            popover_menus.popover_instances.compose_control_buttons = instance;
+            popovers.hide_all();
+        },
+        onHidden(instance) {
+            instance.destroy();
+            popover_menus.popover_instances.compose_control_buttons = undefined;
+        },
+    });
+
+    popover_menus.register_popover_menu(".open_enter_sends_dialog", {
+        placement: "top",
+        onShow(instance) {
+            popover_menus.on_show_prep(instance);
+            instance.setContent(
+                parse_html(
+                    render_compose_select_enter_behaviour_popover({
+                        enter_sends_true: user_settings.enter_sends,
+                    }),
+                ),
+            );
+        },
+        onMount(instance) {
+            popover_menus.popover_instances.compose_enter_sends = instance;
+            common.adjust_mac_kbd_tags(".enter_sends_choices kbd");
+
+            $(instance.popper).one("click", ".enter_sends_choice", (e) => {
+                let selected_behaviour = $(e.currentTarget)
+                    .find("input[type='radio']")
+                    .attr("value");
+                selected_behaviour = selected_behaviour === "true"; // Convert to bool
+                user_settings.enter_sends = selected_behaviour;
+                $(`.enter_sends_${!selected_behaviour}`).hide();
+                $(`.enter_sends_${selected_behaviour}`).show();
+
+                // Refocus in the content box so you can continue typing or
+                // press Enter to send.
+                $("#compose-textarea").trigger("focus");
+
+                channel.patch({
+                    url: "/json/settings",
+                    data: {enter_sends: selected_behaviour},
+                });
+                e.stopPropagation();
+                instance.hide();
+            });
+        },
+        onHidden(instance) {
+            instance.destroy();
+            popover_menus.popover_instances.compose_enter_sends = undefined;
+        },
+    });
+}

web/src/popover_menus.js

@@ -3,23 +3,11 @@
    popovers system in popovers.js. */
 
 import $ from "jquery";
-import tippy, {delegate} from "tippy.js";
+import tippy from "tippy.js";
-
-import render_compose_control_buttons_popover from "../templates/compose_control_buttons_popover.hbs";
-import render_compose_select_enter_behaviour_popover from "../templates/compose_select_enter_behaviour_popover.hbs";
-import render_mobile_message_buttons_popover_content from "../templates/mobile_message_buttons_popover_content.hbs";
 
 import * as blueslip from "./blueslip";
-import * as channel from "./channel";
-import * as common from "./common";
-import * as compose_actions from "./compose_actions";
-import * as giphy from "./giphy";
-import * as narrow_state from "./narrow_state";
 import * as overlays from "./overlays";
 import * as popovers from "./popovers";
-import * as rows from "./rows";
-import {parse_html} from "./ui_util";
-import {user_settings} from "./user_settings";
 
 // On mobile web, opening the keyboard can trigger a resize event
 // (which in turn can trigger a scroll event).  This will have the
@@ -266,125 +254,6 @@ export function register_popover_menu(target, popover_props) {
 }
 
 export function initialize() {
-    // compose box buttons popover shown on mobile widths.
-    // We want this click event to propagate and hide other popovers
-    // that could possibly obstruct user from using this popover.
-    delegate("body", {
-        ...default_popover_props,
-        // Attach the click event to `.mobile_button_container`, since
-        // the button (`.compose_mobile_button`) already has a hover
-        // action attached, for showing the keyboard shortcut,
-        // and Tippy cannot handle events that trigger two different
-        // actions
-        target: ".mobile_button_container",
-        placement: "top",
-        onShow(instance) {
-            popover_instances.compose_mobile_button = instance;
-            on_show_prep(instance);
-            instance.setContent(
-                parse_html(
-                    render_mobile_message_buttons_popover_content({
-                        is_in_private_narrow: narrow_state.narrowed_to_pms(),
-                    }),
-                ),
-            );
-        },
-        onMount(instance) {
-            const $popper = $(instance.popper);
-            $popper.one("click", ".compose_mobile_stream_button", (e) => {
-                compose_actions.start("stream", {trigger: "new topic button"});
-                e.stopPropagation();
-                instance.hide();
-            });
-            $popper.one("click", ".compose_mobile_private_button", (e) => {
-                compose_actions.start("private");
-                e.stopPropagation();
-                instance.hide();
-            });
-        },
-        onHidden(instance) {
-            // Destroy instance so that event handlers
-            // are destroyed too.
-            instance.destroy();
-            popover_instances.compose_mobile_button = undefined;
-        },
-    });
-
-    // Click event handlers for it are handled in `compose_ui` and
-    // we don't want to close this popover on click inside it but
-    // only if user clicked outside it.
-    register_popover_menu(".compose_control_menu_wrapper", {
-        placement: "top",
-        onShow(instance) {
-            const parent_row = rows.get_closest_row(instance.reference);
-            let preview_mode_on;
-            // If the popover is opened from a message edit form, we want to
-            // infer the preview mode from that row, else from the compose box.
-            if (parent_row.length) {
-                preview_mode_on = parent_row.hasClass("preview_mode");
-            } else {
-                preview_mode_on = $("#compose").hasClass("preview_mode");
-            }
-            instance.setContent(
-                parse_html(
-                    render_compose_control_buttons_popover({
-                        giphy_enabled: giphy.is_giphy_enabled(),
-                        preview_mode_on,
-                    }),
-                ),
-            );
-            popover_instances.compose_control_buttons = instance;
-            popovers.hide_all();
-        },
-        onHidden(instance) {
-            instance.destroy();
-            popover_instances.compose_control_buttons = undefined;
-        },
-    });
-
-    register_popover_menu(".open_enter_sends_dialog", {
-        placement: "top",
-        onShow(instance) {
-            on_show_prep(instance);
-            instance.setContent(
-                parse_html(
-                    render_compose_select_enter_behaviour_popover({
-                        enter_sends_true: user_settings.enter_sends,
-                    }),
-                ),
-            );
-        },
-        onMount(instance) {
-            popover_instances.compose_enter_sends = instance;
-            common.adjust_mac_kbd_tags(".enter_sends_choices kbd");
-
-            $(instance.popper).one("click", ".enter_sends_choice", (e) => {
-                let selected_behaviour = $(e.currentTarget)
-                    .find("input[type='radio']")
-                    .attr("value");
-                selected_behaviour = selected_behaviour === "true"; // Convert to bool
-                user_settings.enter_sends = selected_behaviour;
-                $(`.enter_sends_${!selected_behaviour}`).hide();
-                $(`.enter_sends_${selected_behaviour}`).show();
-
-                // Refocus in the content box so you can continue typing or
-                // press Enter to send.
-                $("#compose-textarea").trigger("focus");
-
-                channel.patch({
-                    url: "/json/settings",
-                    data: {enter_sends: selected_behaviour},
-                });
-                e.stopPropagation();
-                instance.hide();
-            });
-        },
-        onHidden(instance) {
-            instance.destroy();
-            popover_instances.compose_enter_sends = undefined;
-        },
-    });
-
     /* Configure popovers to hide when toggling overlays. */
     overlays.register_pre_open_hook(popovers.hide_all);
     overlays.register_pre_close_hook(popovers.hide_all);

web/src/ui_init.js

@@ -23,6 +23,7 @@ import * as common from "./common";
 import * as compose from "./compose";
 import * as compose_closed_ui from "./compose_closed_ui";
 import * as compose_pm_pill from "./compose_pm_pill";
+import * as compose_popovers from "./compose_popovers";
 import * as compose_recipient from "./compose_recipient";
 import * as compose_textarea from "./compose_textarea";
 import * as compose_tooltips from "./compose_tooltips";
@@ -530,6 +531,7 @@ export function initialize_everything() {
     // This populates data for scheduled messages.
     scheduled_messages.initialize(scheduled_messages_params);
     popover_menus.initialize();
+    compose_popovers.initialize();
     left_sidebar_navigation_area_popovers.initialize();
     user_topic_popover.initialize();
     topic_popover.initialize();