diff --git a/static/js/popover_menus.js b/static/js/popover_menus.js new file mode 100644 index 0000000000..560679c962 --- /dev/null +++ b/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; + }, + }); +} diff --git a/static/js/popovers.js b/static/js/popovers.js index a158af0dc7..4eeab7a359 100644 --- a/static/js/popovers.js +++ b/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() || - tippyjs.is_compose_mobile_button_popover_displayed() || + popover_menus.is_left_sidebar_stream_setting_popover_displayed() || + popover_menus.is_compose_mobile_button_popover_displayed() || actions_popped() || user_sidebar_popped() || stream_popover.stream_popped() || diff --git a/static/js/tippyjs.js b/static/js/tippyjs.js index b24d810640..b16246378a 100644 --- a/static/js/tippyjs.js +++ b/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; - }, - }); } diff --git a/static/js/ui_init.js b/static/js/ui_init.js index 0b4610de37..c5ac0e3aea 100644 --- a/static/js/ui_init.js +++ b/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 diff --git a/tools/test-js-with-node b/tools/test-js-with-node index ade291d806..67352d6a6d 100755 --- a/tools/test-js-with-node +++ b/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",