popover_menus: Extract popovers using tippy in a separate module.

static/js/popover_menus.js

@@ -0,0 +1,85 @@
+import $ from "jquery";
+import {delegate} from "tippy.js";
+
+import render_left_sidebar_stream_setting_popover from "../templates/left_sidebar_stream_setting_popover.hbs";
+import render_mobile_message_buttons_popover_content from "../templates/mobile_message_buttons_popover_content.hbs";
+
+import * as compose_actions from "./compose_actions";
+import * as narrow_state from "./narrow_state";
+import * as popovers from "./popovers";
+import * as settings_data from "./settings_data";
+
+let left_sidebar_stream_setting_popover_displayed = false;
+let compose_mobile_button_popover_displayed = false;
+
+export function is_left_sidebar_stream_setting_popover_displayed() {
+    return left_sidebar_stream_setting_popover_displayed;
+}
+
+export function is_compose_mobile_button_popover_displayed() {
+    return compose_mobile_button_popover_displayed;
+}
+
+export function initialize() {
+    delegate("body", {
+        delay: 0,
+        target: "#streams_inline_cog",
+        onShow(instance) {
+            popovers.hide_all_except_sidebars(instance);
+            instance.setContent(
+                render_left_sidebar_stream_setting_popover({
+                    can_create_streams: settings_data.user_can_create_streams(),
+                }),
+            );
+            left_sidebar_stream_setting_popover_displayed = true;
+            $(instance.popper).one("click", instance.hide);
+        },
+        appendTo: () => document.body,
+        trigger: "click",
+        allowHTML: true,
+        interactive: true,
+        hideOnClick: true,
+        theme: "light-border",
+        touch: true,
+        onHidden() {
+            left_sidebar_stream_setting_popover_displayed = false;
+        },
+    });
+
+    // compose box buttons popover shown on mobile widths.
+    delegate("body", {
+        target: ".compose_mobile_button",
+        placement: "top",
+        onShow(instance) {
+            popovers.hide_all_except_sidebars(instance);
+            instance.setContent(
+                render_mobile_message_buttons_popover_content({
+                    is_in_private_narrow: narrow_state.narrowed_to_pms(),
+                }),
+            );
+            compose_mobile_button_popover_displayed = true;
+
+            const $popper = $(instance.popper);
+            $popper.one("click", instance.hide);
+            $popper.one("click", ".compose_mobile_stream_button", () => {
+                compose_actions.start("stream", {trigger: "new topic button"});
+            });
+            $popper.one("click", ".compose_mobile_private_button", () => {
+                compose_actions.start("private");
+            });
+        },
+        appendTo: () => document.body,
+        trigger: "click",
+        allowHTML: true,
+        interactive: true,
+        hideOnClick: true,
+        theme: "light-border",
+        touch: true,
+        onHidden(instance) {
+            // Destroy instance so that event handlers
+            // are destroyed too.
+            instance.destroy();
+            compose_mobile_button_popover_displayed = false;
+        },
+    });
+}

static/js/popovers.js

@@ -40,6 +40,7 @@ import * as narrow_state from "./narrow_state";
 import * as overlays from "./overlays";
 import {page_params} from "./page_params";
 import * as people from "./people";
+import * as popover_menus from "./popover_menus";
 import * as realm_playground from "./realm_playground";
 import * as reminder from "./reminder";
 import * as resize from "./resize";
@@ -49,7 +50,6 @@ import * as settings_data from "./settings_data";
 import * as settings_profile_fields from "./settings_profile_fields";
 import * as stream_data from "./stream_data";
 import * as stream_popover from "./stream_popover";
-import * as tippyjs from "./tippyjs";
 import * as user_groups from "./user_groups";
 import * as user_status from "./user_status";
 import * as user_status_ui from "./user_status_ui";
@@ -1427,8 +1427,8 @@ export function any_active() {
     // True if any popover (that this module manages) is currently shown.
     // Expanded sidebars on mobile view count as popovers as well.
     return (
-        tippyjs.is_left_sidebar_stream_setting_popover_displayed() ||
+        popover_menus.is_left_sidebar_stream_setting_popover_displayed() ||
-        tippyjs.is_compose_mobile_button_popover_displayed() ||
+        popover_menus.is_compose_mobile_button_popover_displayed() ||
         actions_popped() ||
         user_sidebar_popped() ||
         stream_popover.stream_popped() ||

static/js/tippyjs.js

@@ -1,15 +1,8 @@
 import $ from "jquery";
 import tippy, {delegate} from "tippy.js";
 
-import render_left_sidebar_stream_setting_popover from "../templates/left_sidebar_stream_setting_popover.hbs";
-import render_mobile_message_buttons_popover_content from "../templates/mobile_message_buttons_popover_content.hbs";
-
-import * as compose_actions from "./compose_actions";
-import * as narrow_state from "./narrow_state";
-import * as popovers from "./popovers";
 import * as reactions from "./reactions";
 import * as rows from "./rows";
-import * as settings_data from "./settings_data";
 
 // We override the defaults set by tippy library here,
 // so make sure to check this too after checking tippyjs
@@ -42,17 +35,6 @@ tippy.setDefaultProps({
     // in the tag or a parameter.
 });
 
-let left_sidebar_stream_setting_popover_displayed = false;
-let compose_mobile_button_popover_displayed = false;
-
-export function is_left_sidebar_stream_setting_popover_displayed() {
-    return left_sidebar_stream_setting_popover_displayed;
-}
-
-export function is_compose_mobile_button_popover_displayed() {
-    return compose_mobile_button_popover_displayed;
-}
-
 export function initialize() {
     delegate("body", {
         // Add elements here which are not displayed on
@@ -152,68 +134,4 @@ export function initialize() {
             return true;
         },
     });
-
-    // ------------------ Popovers ----------------------------------------------
-
-    delegate("body", {
-        delay: 0,
-        target: "#streams_inline_cog",
-        onShow(instance) {
-            popovers.hide_all_except_sidebars(instance);
-            instance.setContent(
-                render_left_sidebar_stream_setting_popover({
-                    can_create_streams: settings_data.user_can_create_streams(),
-                }),
-            );
-            left_sidebar_stream_setting_popover_displayed = true;
-            $(instance.popper).one("click", instance.hide);
-        },
-        appendTo: () => document.body,
-        trigger: "click",
-        allowHTML: true,
-        interactive: true,
-        hideOnClick: true,
-        theme: "light-border",
-        touch: true,
-        onHidden() {
-            left_sidebar_stream_setting_popover_displayed = false;
-        },
-    });
-
-    // compose box buttons popover shown on mobile widths.
-    delegate("body", {
-        target: ".compose_mobile_button",
-        placement: "top",
-        onShow(instance) {
-            popovers.hide_all_except_sidebars(instance);
-            instance.setContent(
-                render_mobile_message_buttons_popover_content({
-                    is_in_private_narrow: narrow_state.narrowed_to_pms(),
-                }),
-            );
-            compose_mobile_button_popover_displayed = true;
-
-            const $popper = $(instance.popper);
-            $popper.one("click", instance.hide);
-            $popper.one("click", ".compose_mobile_stream_button", () => {
-                compose_actions.start("stream", {trigger: "new topic button"});
-            });
-            $popper.one("click", ".compose_mobile_private_button", () => {
-                compose_actions.start("private");
-            });
-        },
-        appendTo: () => document.body,
-        trigger: "click",
-        allowHTML: true,
-        interactive: true,
-        hideOnClick: true,
-        theme: "light-border",
-        touch: true,
-        onHidden(instance) {
-            // Destroy instance so that event handlers
-            // are destroyed too.
-            instance.destroy();
-            compose_mobile_button_popover_displayed = false;
-        },
-    });
 }

static/js/ui_init.js

@@ -48,6 +48,7 @@ import * as overlays from "./overlays";
 import {page_params} from "./page_params";
 import * as people from "./people";
 import * as pm_conversations from "./pm_conversations";
+import * as popover_menus from "./popover_menus";
 import * as presence from "./presence";
 import * as realm_playground from "./realm_playground";
 import * as recent_topics_util from "./recent_topics_util";
@@ -470,6 +471,7 @@ export function initialize_everything() {
 
     i18n.initialize(i18n_params);
     tippyjs.initialize();
+    popover_menus.initialize();
     // We need to initialize compose early, because other modules'
     // initialization expects `#compose` to be already present in the
     // DOM, dating from when the compose area was part of the backend

tools/test-js-with-node

@@ -104,6 +104,7 @@ EXEMPT_FILES = {
     "static/js/pm_list_dom.js",
     "static/js/poll_widget.js",
     "static/js/popovers.js",
+    "static/js/popover_menus.js",
     "static/js/ready.js",
     "static/js/realm_icon.js",
     "static/js/realm_logo.js",