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

popover_menus: Extract compose_popovers module. 

Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg 2023-10-03 10:32:19 -07:00 committed by Tim Abbott
parent d01db0f5a0
commit d4a93aa05a
4 changed files with 142 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

138
web/src/compose_popovers.js Normal file
View File

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

133
web/src/popover_menus.js
View File

@ -3,23 +3,11 @@
popovers system in popovers.js. */
import $ from "jquery";
import tippy, {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 tippy from "tippy.js";
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);

2
web/src/ui_init.js
View File

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