Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

popover_menus: Extract popovers using tippy in a separate module.

This commit is contained in:
Aman Agrawal 2021-06-17 17:05:34 +00:00 committed by Tim Abbott
parent 563f8aba1e
commit 182f47b7c6
5 changed files with 91 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
static/js/popover_menus.js Normal file
View File

@ -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;
},
});
}

6
static/js/popovers.js
View File

@ -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() ||

82
static/js/tippyjs.js
View File

@ -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;
},
});
}

2
static/js/ui_init.js
View File

@ -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

1
tools/test-js-with-node
View File

@ -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",