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

tippyjs: Extract compose_tooltips.js module.

This commit is contained in:
Lalit 2023-06-07 17:48:18 +05:30 committed by Tim Abbott
parent e7c012c850
commit 5744ed32e2
4 changed files with 115 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -68,6 +68,7 @@ EXEMPT_FILES = make_set(
"web/src/compose_recipient.js",
"web/src/compose_state.js",
"web/src/compose_textarea.ts",
"web/src/compose_tooltips.js",
"web/src/compose_ui.js",
"web/src/compose_validate.js",
"web/src/composebox_typeahead.js",

111
web/src/compose_tooltips.js Normal file
View File

@ -0,0 +1,111 @@
import $ from "jquery";
import _ from "lodash";
import {delegate} from "tippy.js";
import render_narrow_to_compose_recipients_tooltip from "../templates/narrow_to_compose_recipients_tooltip.hbs";
import * as compose_recipient from "./compose_recipient";
import * as compose_state from "./compose_state";
import {$t} from "./i18n";
import * as narrow_state from "./narrow_state";
import {EXTRA_LONG_HOVER_DELAY, LONG_HOVER_DELAY} from "./tippyjs";
import {parse_html} from "./ui_util";
import {user_settings} from "./user_settings";
export function initialize() {
delegate("body", {
target: [
// Ideally this would be `#compose_buttons .button`, but the
// reply button's actual area is its containing span.
"#compose_buttons > .reply_button_container",
"#left_bar_compose_mobile_button_big",
"#left_bar_compose_stream_button_big",
"#left_bar_compose_private_button_big",
],
delay: EXTRA_LONG_HOVER_DELAY,
appendTo: () => document.body,
onHidden(instance) {
instance.destroy();
},
});
delegate("body", {
target: ".compose_control_button",
// Add some additional delay when they open
// so that regular users don't have to see
// them unless they want to.
delay: LONG_HOVER_DELAY,
// By default, tippyjs uses a trigger value of "mouseenter focus",
// which means the tooltips can appear either when the element is
// hovered over or when it receives focus (e.g. by being clicked).
// However, we only want the tooltips to appear on hover, not on click.
// Therefore, we need to remove the "focus" trigger from the buttons,
// so that the tooltips don't appear when the buttons are clicked.
trigger: "mouseenter",
// This ensures that the upload files tooltip
// doesn't hide behind the left sidebar.
appendTo: () => document.body,
});
delegate("body", {
target: "#compose-send-button",
delay: EXTRA_LONG_HOVER_DELAY,
// By default, tippyjs uses a trigger value of "mouseenter focus",
// but by specifying "mouseenter", this will prevent showing the
// Send tooltip when tabbing to the Send button.
trigger: "mouseenter",
appendTo: () => document.body,
onShow(instance) {
if (user_settings.enter_sends) {
instance.setContent(parse_html($("#send-enter-tooltip-template").html()));
} else {
instance.setContent(parse_html($("#send-ctrl-enter-tooltip-template").html()));
}
},
});
delegate("body", {
target: ".narrow_to_compose_recipients",
delay: LONG_HOVER_DELAY,
appendTo: () => document.body,
content() {
const narrow_filter = narrow_state.filter();
let display_current_view;
if (narrow_state.is_message_feed_visible()) {
if (narrow_filter === undefined) {
display_current_view = $t({defaultMessage: "Currently viewing all messages."});
} else if (
_.isEqual(narrow_filter.sorted_term_types(), ["stream"]) &&
compose_state.get_message_type() === "stream" &&
narrow_filter.operands("stream")[0] === compose_state.stream_name()
) {
display_current_view = $t({
defaultMessage: "Currently viewing the entire stream.",
});
} else if (
_.isEqual(narrow_filter.sorted_term_types(), ["is-dm"]) &&
compose_state.get_message_type() === "private"
) {
display_current_view = $t({
defaultMessage: "Currently viewing all direct messages.",
});
}
}
return parse_html(render_narrow_to_compose_recipients_tooltip({display_current_view}));
},
onHidden(instance) {
instance.destroy();
},
});
delegate("body", {
target: [".disabled-compose-send-button-container"],
maxWidth: 350,
content: () => compose_recipient.get_posting_policy_error_message(),
appendTo: () => document.body,
onHidden(instance) {
instance.destroy();
},
});
}

105
web/src/tippyjs.js
View File

@ -1,17 +1,10 @@
import $ from "jquery";
import _ from "lodash";
import tippy, {delegate} from "tippy.js";
import render_narrow_to_compose_recipients_tooltip from "../templates/narrow_to_compose_recipients_tooltip.hbs";
import render_tooltip_templates from "../templates/tooltip_templates.hbs";
import * as compose_recipient from "./compose_recipient";
import * as compose_state from "./compose_state";
import {$t} from "./i18n";
import * as narrow_state from "./narrow_state";
import * as popover_menus from "./popover_menus";
import {parse_html} from "./ui_util";
import {user_settings} from "./user_settings";
// For tooltips without data-tippy-content, we use the HTML content of
// a <template> whose id is given by data-tooltip-template-id.
@ -37,7 +30,7 @@ export const LONG_HOVER_DELAY = [750, 20];
// text in the button, and the tooltip exists just to advertise a
// keyboard shortcut. For these tooltips, it's very important to avoid
// distracting users unnecessarily.
const EXTRA_LONG_HOVER_DELAY = [1500, 20];
export const EXTRA_LONG_HOVER_DELAY = [1500, 20];
// We override the defaults set by tippy library here,
// so make sure to check this too after checking tippyjs
@ -150,57 +143,6 @@ export function initialize() {
// below specify the target directly, elements using those should
// not have the tippy-zulip-tooltip class.
delegate("body", {
target: [
// Ideally this would be `#compose_buttons .button`, but the
// reply button's actual area is its containing span.
"#compose_buttons > .reply_button_container",
"#left_bar_compose_mobile_button_big",
"#left_bar_compose_stream_button_big",
"#left_bar_compose_private_button_big",
],
delay: EXTRA_LONG_HOVER_DELAY,
appendTo: () => document.body,
onHidden(instance) {
instance.destroy();
},
});
delegate("body", {
target: ".compose_control_button",
// Add some additional delay when they open
// so that regular users don't have to see
// them unless they want to.
delay: LONG_HOVER_DELAY,
// By default, tippyjs uses a trigger value of "mouseenter focus",
// which means the tooltips can appear either when the element is
// hovered over or when it receives focus (e.g. by being clicked).
// However, we only want the tooltips to appear on hover, not on click.
// Therefore, we need to remove the "focus" trigger from the buttons,
// so that the tooltips don't appear when the buttons are clicked.
trigger: "mouseenter",
// This ensures that the upload files tooltip
// doesn't hide behind the left sidebar.
appendTo: () => document.body,
});
delegate("body", {
target: "#compose-send-button",
delay: EXTRA_LONG_HOVER_DELAY,
// By default, tippyjs uses a trigger value of "mouseenter focus",
// but by specifying "mouseenter", this will prevent showing the
// Send tooltip when tabbing to the Send button.
trigger: "mouseenter",
appendTo: () => document.body,
onShow(instance) {
if (user_settings.enter_sends) {
instance.setContent(parse_html($("#send-enter-tooltip-template").html()));
} else {
instance.setContent(parse_html($("#send-ctrl-enter-tooltip-template").html()));
}
},
});
$("body").on("blur", ".message_control_button", (e) => {
// Remove tooltip when user is trying to tab through all the icons.
// If user tabs slowly, tooltips are displayed otherwise they are
@ -235,41 +177,6 @@ export function initialize() {
},
});
delegate("body", {
target: ".narrow_to_compose_recipients",
delay: LONG_HOVER_DELAY,
appendTo: () => document.body,
content() {
const narrow_filter = narrow_state.filter();
let display_current_view;
if (narrow_state.is_message_feed_visible()) {
if (narrow_filter === undefined) {
display_current_view = $t({defaultMessage: "Currently viewing all messages."});
} else if (
_.isEqual(narrow_filter.sorted_term_types(), ["stream"]) &&
compose_state.get_message_type() === "stream" &&
narrow_filter.operands("stream")[0] === compose_state.stream_name()
) {
display_current_view = $t({
defaultMessage: "Currently viewing the entire stream.",
});
} else if (
_.isEqual(narrow_filter.sorted_term_types(), ["is-dm"]) &&
compose_state.get_message_type() === "private"
) {
display_current_view = $t({
defaultMessage: "Currently viewing all direct messages.",
});
}
}
return parse_html(render_narrow_to_compose_recipients_tooltip({display_current_view}));
},
onHidden(instance) {
instance.destroy();
},
});
delegate("body", {
target: [".enter_sends_true", ".enter_sends_false"],
delay: LONG_HOVER_DELAY,
@ -426,16 +333,6 @@ export function initialize() {
appendTo: () => document.body,
});
delegate("body", {
target: [".disabled-compose-send-button-container"],
maxWidth: 350,
content: () => compose_recipient.get_posting_policy_error_message(),
appendTo: () => document.body,
onHidden(instance) {
instance.destroy();
},
});
delegate("body", {
target: ["#stream_creation_form .add_subscribers_disabled"],
content: $t({

2
web/src/ui_init.js
View File

@ -25,6 +25,7 @@ import * as compose_closed_ui from "./compose_closed_ui";
import * as compose_pm_pill from "./compose_pm_pill";
import * as compose_recipient from "./compose_recipient";
import * as compose_textarea from "./compose_textarea";
import * as compose_tooltips from "./compose_tooltips";
import * as composebox_typeahead from "./composebox_typeahead";
import * as condense from "./condense";
import * as copy_and_paste from "./copy_and_paste";
@ -616,6 +617,7 @@ export function initialize_everything() {
i18n.initialize(i18n_params);
tippyjs.initialize();
compose_tooltips.initialize();
message_list_tooltips.initialize();
// This populates data for scheduled messages.
scheduled_messages.initialize(scheduled_messages_params);