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

tippy: Use namespace import for tippy.js. 

Names like “delegate”, “Instance”, “Placement”, “Props”, and
“ReferenceElement” are much too generic to make sense as named
imports.

The downside is that we now need to write tippy.default(…) instead of
tippy(…) (because ES module namespace objects cannot be callable), but
that cost is worthwhile.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg 2024-05-30 12:51:29 -07:00 committed by Tim Abbott
parent 87d36d24c9
commit 9b711cda20
24 changed files with 131 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/add_stream_options_popover.ts
View File

@ -1,6 +1,6 @@
import $ from "jquery";
import assert from "minimalistic-assert";
import type {ReferenceElement} from "tippy.js";
import type * as tippy from "tippy.js";
import render_left_sidebar_stream_setting_popover from "../templates/popovers/left_sidebar/left_sidebar_stream_setting_popover.hbs";
@ -33,14 +33,14 @@ export function initialize(): void {
// When showing the popover menu, we want the
// "Add channels" and the "Filter channels" tooltip
// to appear below the "Add channels" icon.
const add_streams_tooltip: ReferenceElement | undefined =
const add_streams_tooltip: tippy.ReferenceElement | undefined =
$("#add_streams_tooltip").get(0);
assert(add_streams_tooltip !== undefined);
add_streams_tooltip._tippy?.setProps({
placement: "bottom",
});
const filter_streams_tooltip: (ReferenceElement & HTMLElement) | undefined =
const filter_streams_tooltip: (tippy.ReferenceElement & HTMLElement) | undefined =
$("#filter_streams_tooltip").get(0);
// If `filter_streams_tooltip` is not triggered yet, this will set its initial placement.
assert(filter_streams_tooltip !== undefined);
@ -58,14 +58,14 @@ export function initialize(): void {
// "Add channels" and the "Filter channels" tooltip
// to appear at it's original position that is
// above the "Add channels" icon.
const add_streams_tooltip: ReferenceElement | undefined =
const add_streams_tooltip: tippy.ReferenceElement | undefined =
$("#add_streams_tooltip").get(0);
assert(add_streams_tooltip !== undefined);
add_streams_tooltip._tippy?.setProps({
placement: "top",
});
const filter_streams_tooltip: (ReferenceElement & HTMLElement) | undefined =
const filter_streams_tooltip: (tippy.ReferenceElement & HTMLElement) | undefined =
$("#filter_streams_tooltip").get(0);
assert(filter_streams_tooltip !== undefined);
filter_streams_tooltip.dataset.tippyPlacement = "top";

4
web/src/admin.js
View File

@ -1,5 +1,5 @@
import $ from "jquery";
import tippy from "tippy.js";
import * as tippy from "tippy.js";
import render_admin_tab from "../templates/settings/admin_tab.hbs";
import render_settings_organization_settings_tip from "../templates/settings/organization_settings_tip.hbs";
@ -272,7 +272,7 @@ export function build_page() {
}),
};
tippy($("#realm_can_access_all_users_group_widget_container")[0], opts);
tippy.default($("#realm_can_access_all_users_group_widget_container")[0], opts);
}
}

7
web/src/bootstrap_typeahead.ts
View File

@ -138,8 +138,7 @@
import $ from "jquery";
import assert from "minimalistic-assert";
import {insertTextIntoField} from "text-field-edit";
import type {Instance} from "tippy.js";
import tippy from "tippy.js";
import * as tippy from "tippy.js";
import {get_string_diff} from "./util";
@ -234,7 +233,7 @@ export class Typeahead<ItemType extends string | object> {
advanceKeyCodes: number[];
non_tippy_parent_element: string | undefined;
values: WeakMap<HTMLElement, ItemType>;
instance: Instance | undefined;
instance: tippy.Instance | undefined;
constructor(input_element: TypeaheadInputElement, options: TypeaheadOptions<ItemType>) {
this.input_element = input_element;
@ -341,7 +340,7 @@ export class Typeahead<ItemType extends string | object> {
// We don't need tippy to position typeaheads which already know where they should be.
return this;
}
this.instance = tippy(this.input_element.$element[0], {
this.instance = tippy.default(this.input_element.$element[0], {
// Lets typeahead take the width needed to fit the content
// and wraps it if it overflows the visible container.
maxWidth: "none",

4
web/src/buddy_list.ts
View File

@ -1,6 +1,6 @@
import $ from "jquery";
import assert from "minimalistic-assert";
import tippy from "tippy.js";
import * as tippy from "tippy.js";
import render_section_header from "../templates/buddy_list/section_header.hbs";
import render_view_all_subscribers from "../templates/buddy_list/view_all_subscribers.hbs";
@ -166,7 +166,7 @@ export class BuddyList extends BuddyListConf {
// This will default to "bottom" placement for this tooltip.
placement = "auto";
}
tippy($elem[0], {
tippy.default($elem[0], {
// Because the buddy list subheadings are potential click targets
// for purposes having nothing to do with the subscriber count
// (collapsing/expanding), we delay showing the tooltip until the

4
web/src/click_handlers.js
View File

@ -1,6 +1,6 @@
import $ from "jquery";
import assert from "minimalistic-assert";
import tippy from "tippy.js";
import * as tippy from "tippy.js";
// You won't find every click handler here, but it's a good place to start!
@ -519,7 +519,7 @@ export function initialize() {
// This will default to "bottom" placement for this tooltip.
placement = "auto";
}
tippy($elem[0], {
tippy.default($elem[0], {
// Quickly display and hide right sidebar tooltips
// so that they don't stick and overlap with
// each other.

7
web/src/common.ts
View File

@ -1,6 +1,5 @@
import $ from "jquery";
import type {ReferenceElement} from "tippy.js";
import tippy from "tippy.js";
import * as tippy from "tippy.js";
import {$t} from "./i18n";
@ -123,8 +122,8 @@ function set_password_toggle_label(
): void {
$(password_selector).attr("aria-label", label);
if (tippy_tooltips) {
const element: ReferenceElement = $(password_selector)[0];
const tippy_instance = element._tippy ?? tippy(element);
const element: tippy.ReferenceElement = $(password_selector)[0];
const tippy_instance = element._tippy ?? tippy.default(element);
tippy_instance.setContent(label);
} else {
$(password_selector).attr("title", label);

4
web/src/compose_popovers.js
View File

@ -1,5 +1,5 @@
import $ from "jquery";
import {delegate} from "tippy.js";
import * as tippy from "tippy.js";
import render_compose_control_buttons_popover from "../templates/popovers/compose_control_buttons/compose_control_buttons_popover.hbs";
import render_mobile_message_buttons_popover from "../templates/popovers/mobile_message_buttons_popover.hbs";
@ -16,7 +16,7 @@ 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", {
tippy.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

8
web/src/compose_recipient.ts
View File

@ -3,7 +3,7 @@
import $ from "jquery";
import _, {isNumber} from "lodash";
import assert from "minimalistic-assert";
import type {Instance, Placement} from "tippy.js";
import type * as tippy from "tippy.js";
import render_inline_decorated_stream_name from "../templates/inline_decorated_stream_name.hbs";
@ -238,7 +238,7 @@ export function possibly_update_stream_name_in_compose(stream_id: number): void
}
}
function item_click_callback(event: JQuery.ClickEvent, dropdown: Instance): void {
function item_click_callback(event: JQuery.ClickEvent, dropdown: tippy.Instance): void {
const recipient_id_str = $(event.currentTarget).attr("data-unique-id");
assert(recipient_id_str !== undefined);
let recipient_id: string | number = recipient_id_str;
@ -273,7 +273,7 @@ function get_options_for_recipient_widget(): Option[] {
return options;
}
function compose_recipient_dropdown_on_show(dropdown: Instance): void {
function compose_recipient_dropdown_on_show(dropdown: tippy.Instance): void {
// Offset to display dropdown above compose.
let top_offset = 5;
const window_height = window.innerHeight;
@ -285,7 +285,7 @@ function compose_recipient_dropdown_on_show(dropdown: Instance): void {
// pixels below compose starting from top of compose box.
const bottom_space = window_height - recipient_input_top - search_box_and_padding_height;
// Show dropdown on top / bottom based on available space.
let placement: Placement = "top-start";
let placement: tippy.Placement = "top-start";
if (bottom_space > top_space) {
placement = "bottom-start";
top_offset = -30;

4
web/src/compose_send_menu_popover.js
View File

@ -1,5 +1,5 @@
import $ from "jquery";
import {delegate} from "tippy.js";
import * as tippy from "tippy.js";
import render_send_later_popover from "../templates/popovers/send_later_popover.hbs";
import render_send_later_modal from "../templates/send_later_modal.hbs";
@ -142,7 +142,7 @@ export function toggle() {
}
export function initialize() {
delegate("body", {
tippy.delegate("body", {
...popover_menus.default_popover_props,
target: "#send_later i",
onUntrigger() {

18
web/src/compose_tooltips.ts
View File

@ -1,7 +1,7 @@
import $ from "jquery";
import _ from "lodash";
import assert from "minimalistic-assert";
import {delegate} from "tippy.js";
import * as tippy from "tippy.js";
import render_drafts_tooltip from "../templates/drafts_tooltip.hbs";
import render_narrow_to_compose_recipients_tooltip from "../templates/narrow_to_compose_recipients_tooltip.hbs";
@ -17,7 +17,7 @@ import {parse_html} from "./ui_util";
import {user_settings} from "./user_settings";
export function initialize(): void {
delegate("body", {
tippy.delegate("body", {
target: [
// Ideally this would be `#compose_buttons .button`, but the
// reply button's actual area is its containing span.
@ -34,7 +34,7 @@ export function initialize(): void {
instance.destroy();
},
});
delegate("body", {
tippy.delegate("body", {
target: "#compose_buttons .compose-reply-button-wrapper",
delay: EXTRA_LONG_HOVER_DELAY,
// Only show on mouseenter since for spectators, clicking on these
@ -81,7 +81,7 @@ export function initialize(): void {
},
});
delegate("body", {
tippy.delegate("body", {
target: "#new_conversation_button",
delay: EXTRA_LONG_HOVER_DELAY,
// Only show on mouseenter since for spectators, clicking on these
@ -115,7 +115,7 @@ export function initialize(): void {
},
});
delegate("body", {
tippy.delegate("body", {
// Only display Tippy content on classes accompanied by a `data-` attribute.
target: `
.compose_control_button[data-tooltip-template-id],
@ -149,7 +149,7 @@ export function initialize(): void {
},
});
delegate("body", {
tippy.delegate("body", {
target: ".send-control-button",
delay: LONG_HOVER_DELAY,
placement: "top",
@ -176,7 +176,7 @@ export function initialize(): void {
appendTo: () => document.body,
});
delegate("body", {
tippy.delegate("body", {
target: "#compose-send-button",
delay: EXTRA_LONG_HOVER_DELAY,
// By default, tippyjs uses a trigger value of "mouseenter focus",
@ -198,7 +198,7 @@ export function initialize(): void {
},
});
delegate("body", {
tippy.delegate("body", {
target: ".narrow_to_compose_recipients",
delay: LONG_HOVER_DELAY,
appendTo: () => document.body,
@ -236,7 +236,7 @@ export function initialize(): void {
},
});
delegate("body", {
tippy.delegate("body", {
// TODO: Might need to target just the Send button itself
// in the new design
target: ".disabled-message-send-controls",

4
web/src/copied_tooltip.ts
View File

@ -1,4 +1,4 @@
import tippy from "tippy.js";
import * as tippy from "tippy.js";
import {$t} from "./i18n";
@ -8,7 +8,7 @@ export function show_copied_confirmation(
timeout_in_ms = 1000,
): void {
// Display a tooltip to notify the user the message or code was copied.
const instance = tippy(copy_button, {
const instance = tippy.default(copy_button, {
placement: "top",
appendTo: () => document.body,
onUntrigger() {

4
web/src/drafts.ts
View File

@ -2,7 +2,7 @@ import {subDays} from "date-fns";
import $ from "jquery";
import _ from "lodash";
import assert from "minimalistic-assert";
import tippy from "tippy.js";
import * as tippy from "tippy.js";
import {z} from "zod";
import render_confirm_delete_all_drafts from "../templates/confirm_dialog/confirm_delete_all_drafts.hbs";
@ -364,7 +364,7 @@ export function restore_message(draft: LocalStorageDraft): ComposeArguments {
function draft_notify(): void {
// Display a tooltip to notify the user about the saved draft.
const instance = tippy(".top_left_drafts .unread_count", {
const instance = tippy.default(".top_left_drafts .unread_count", {
content: $t({defaultMessage: "Saved as draft"}),
arrow: true,
placement: "right",

9
web/src/integration_url_modal.ts
View File

@ -1,6 +1,6 @@
import ClipboardJS from "clipboard";
import $ from "jquery";
import type {Instance} from "tippy.js";
import type * as tippy from "tippy.js";
import render_generate_integration_url_modal from "../templates/settings/generate_integration_url_modal.hbs";
import render_integration_events from "../templates/settings/integration_events.hbs";
@ -177,7 +177,7 @@ export function show_generate_integration_url_modal(api_key: string): void {
function integration_item_click_callback(
event: JQuery.ClickEvent,
dropdown: Instance,
dropdown: tippy.Instance,
): void {
integration_input_dropdown_widget.render();
$(".integration-url-name-wrapper").trigger("input");
@ -214,7 +214,10 @@ export function show_generate_integration_url_modal(api_key: string): void {
return options;
}
function stream_item_click_callback(event: JQuery.ClickEvent, dropdown: Instance): void {
function stream_item_click_callback(
event: JQuery.ClickEvent,
dropdown: tippy.Instance,
): void {
stream_input_dropdown_widget.render();
$(".integration-url-stream-wrapper").trigger("input");
const user_selected_option = stream_input_dropdown_widget.value();

5
web/src/message_list_tooltips.ts
View File

@ -1,7 +1,6 @@
import $ from "jquery";
import assert from "minimalistic-assert";
import {delegate} from "tippy.js";
import type * as tippy from "tippy.js";
import * as tippy from "tippy.js";
import render_change_visibility_policy_button_tooltip from "../templates/change_visibility_policy_button_tooltip.hbs";
import render_message_edit_notice_tooltip from "../templates/message_edit_notice_tooltip.hbs";
@ -44,7 +43,7 @@ const store_message_list_instances_plugin = {
function message_list_tooltip(target: string, props: Partial<tippy.Props> = {}): void {
const {onShow, ...other_props} = props;
delegate("body", {
tippy.delegate("body", {
target,
appendTo: () => document.body,
plugins: [store_message_list_instances_plugin],

4
web/src/personal_menu_popover.js
View File

@ -1,5 +1,5 @@
import $ from "jquery";
import tippy from "tippy.js";
import * as tippy from "tippy.js";
import render_navbar_personal_menu_popover from "../templates/popovers/navbar/navbar_personal_menu_popover.hbs";
@ -37,7 +37,7 @@ export function initialize() {
const $popper = $(instance.popper);
popover_menus.popover_instances.personal_menu = instance;
tippy(".personal-menu-clear-status", {
tippy.default(".personal-menu-clear-status", {
placement: "top",
appendTo: document.body,
});

6
web/src/playground_links_popover.ts
View File

@ -1,5 +1,5 @@
import $ from "jquery";
import type {Instance as PopoverInstance, ReferenceElement} from "tippy.js";
import type * as tippy from "tippy.js";
import url_template_lib from "url-template";
import render_playground_links_popover from "../templates/popovers/playground_links_popover.hbs";
@ -12,13 +12,13 @@ import * as ui_util from "./ui_util";
type RealmPlaygroundWithURL = RealmPlayground & {playground_url: string};
let playground_links_popover_instance: PopoverInstance;
let playground_links_popover_instance: tippy.Instance;
// Playground_store contains all the data we need to generate a popover of
// playground links for each code block. The element is the target element
// to pop off of.
function toggle_playground_links_popover(
element: ReferenceElement,
element: tippy.ReferenceElement,
playground_store: Map<number, RealmPlaygroundWithURL>,
): void {
if (is_open()) {

46
web/src/popover_menus.ts
View File

@ -3,8 +3,7 @@
popovers system in popovers.js. */
import $ from "jquery";
import type {Instance as PopoverInstance, Props as PopoverProps, ReferenceElement} from "tippy.js";
import tippy from "tippy.js";
import * as tippy from "tippy.js";
import * as blueslip from "./blueslip";
import {media_breakpoints_num} from "./css_variables";
@ -31,7 +30,7 @@ type PopoverName =
| "gear_menu"
| "help_menu";
export const popover_instances: Record<PopoverName, PopoverInstance | null> = {
export const popover_instances: Record<PopoverName, tippy.Instance | null> = {
compose_control_buttons: null,
starred_messages: null,
drafts: null,
@ -85,23 +84,20 @@ export function focus_first_popover_item($items: JQuery, index = 0): void {
$items.eq(index).expectOne().trigger("focus");
}
export function sidebar_menu_instance_handle_keyboard(
instance: PopoverInstance,
key: string,
): void {
export function sidebar_menu_instance_handle_keyboard(instance: tippy.Instance, key: string): void {
const items = get_popover_items_for_instance(instance);
popover_items_handle_keyboard(key, items);
}
export function get_visible_instance(): PopoverInstance | null | undefined {
export function get_visible_instance(): tippy.Instance | null | undefined {
return Object.values(popover_instances).find(Boolean);
}
export function get_topic_menu_popover(): PopoverInstance | null {
export function get_topic_menu_popover(): tippy.Instance | null {
return popover_instances.topics_menu;
}
export function get_scheduled_messages_popover(): PopoverInstance | null {
export function get_scheduled_messages_popover(): tippy.Instance | null {
return popover_instances.send_later;
}
@ -109,11 +105,11 @@ export function is_scheduled_messages_popover_displayed(): boolean | undefined {
return popover_instances.send_later?.state.isVisible;
}
export function get_compose_control_buttons_popover(): PopoverInstance | null {
export function get_compose_control_buttons_popover(): tippy.Instance | null {
return popover_instances.compose_control_buttons;
}
export function get_starred_messages_popover(): PopoverInstance | null {
export function get_starred_messages_popover(): tippy.Instance | null {
return popover_instances.starred_messages;
}
@ -125,7 +121,7 @@ export function is_gear_menu_popover_displayed(): boolean | undefined {
return popover_instances.gear_menu?.state.isVisible;
}
export function get_gear_menu_instance(): PopoverInstance | null {
export function get_gear_menu_instance(): tippy.Instance | null {
return popover_instances.gear_menu;
}
@ -137,7 +133,7 @@ export function is_message_actions_popover_displayed(): boolean | undefined {
return popover_instances.message_actions?.state.isVisible;
}
function get_popover_items_for_instance(instance: PopoverInstance): JQuery | undefined {
function get_popover_items_for_instance(instance: tippy.Instance): JQuery | undefined {
const $current_elem = $(instance.popper);
const class_name = $current_elem.attr("class");
@ -149,7 +145,7 @@ function get_popover_items_for_instance(instance: PopoverInstance): JQuery | und
return $current_elem.find("a, [tabindex='0']").filter(":visible");
}
export function hide_current_popover_if_visible(instance: PopoverInstance | null): void {
export function hide_current_popover_if_visible(instance: tippy.Instance | null): void {
// Call this function instead of `instance.hide` to avoid tippy
// logging about the possibility of already hidden instances,
// which can occur when a click handler does a hide_all().
@ -158,7 +154,7 @@ export function hide_current_popover_if_visible(instance: PopoverInstance | null
}
}
export const default_popover_props: Partial<PopoverProps> = {
export const default_popover_props: Partial<tippy.Props> = {
delay: 0,
appendTo: () => document.body,
trigger: "click",
@ -186,7 +182,7 @@ export const default_popover_props: Partial<PopoverProps> = {
requires: ["$$tippy"],
fn({state}) {
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
const instance = (state.elements.reference as ReferenceElement)._tippy!;
const instance = (state.elements.reference as tippy.ReferenceElement)._tippy!;
const $popover = $(state.elements.popper);
const $tippy_box = $popover.find(".tippy-box");
if ($tippy_box.hasClass("show-when-reference-hidden")) {
@ -281,7 +277,7 @@ export const left_sidebar_tippy_options = {
},
};
export function on_show_prep(instance: PopoverInstance): void {
export function on_show_prep(instance: tippy.Instance): void {
$(instance.popper).on("click", (e) => {
// Popover is not hidden on click inside it unless the click handler for the
// element explicitly hides the popover when handling the event.
@ -297,8 +293,8 @@ export function on_show_prep(instance: PopoverInstance): void {
}
function get_props_for_popover_centering(
popover_props: Partial<PopoverProps>,
): Partial<PopoverProps> {
popover_props: Partial<tippy.Props>,
): Partial<tippy.Props> {
return {
arrow: false,
getReferenceClientRect: () => new DOMRect(0, 0, 0, 0),
@ -364,10 +360,10 @@ function get_props_for_popover_centering(
// Toggles a popover menu directly; intended for use in keyboard
// shortcuts and similar alternative ways to open a popover menu.
export function toggle_popover_menu(
target: ReferenceElement,
popover_props: Partial<PopoverProps>,
target: tippy.ReferenceElement,
popover_props: Partial<tippy.Props>,
options?: {show_as_overlay_on_mobile: boolean},
): PopoverInstance {
): tippy.Instance {
const instance = target._tippy;
if (instance) {
hide_current_popover_if_visible(instance);
@ -391,7 +387,7 @@ export function toggle_popover_menu(
];
}
return tippy(target, {
return tippy.default(target, {
...default_popover_props,
showOnCreate: true,
...popover_props,
@ -401,7 +397,7 @@ export function toggle_popover_menu(
// Main function to define a popover menu, opened via clicking on the
// target selector.
export function register_popover_menu(target: string, popover_props: Partial<PopoverProps>): void {
export function register_popover_menu(target: string, popover_props: Partial<tippy.Props>): void {
// For some elements, such as the click target to open the message
// actions menu, we want to avoid propagating the click event to
// parent elements. Tippy's built-in `delegate` method does not

6
web/src/portico/help.js
View File

@ -1,7 +1,7 @@
import ClipboardJS from "clipboard";
import $ from "jquery";
import SimpleBar from "simplebar";
import tippy from "tippy.js";
import * as tippy from "tippy.js";
import copy_to_clipboard_svg from "../../templates/copy_to_clipboard_svg.hbs";
import * as common from "../common";
@ -46,14 +46,14 @@ function add_copy_to_clipboard_element($codehilite) {
});
// Show a tippy tooltip when the button is hovered
const tooltip_copy = tippy($copy_button[0], {
const tooltip_copy = tippy.default($copy_button[0], {
content: "Copy code",
trigger: "mouseenter",
placement: "top",
});
// Show a tippy tooltip when the code is copied
const tooltip_copied = tippy($copy_button[0], {
const tooltip_copied = tippy.default($copy_button[0], {
content: "Copied!",
trigger: "manual",
placement: "top",

4
web/src/portico/tippyjs.ts
View File

@ -1,8 +1,8 @@
import $ from "jquery";
import tippy from "tippy.js";
import * as tippy from "tippy.js";
function initialize(): void {
tippy("[data-tippy-content]", {
tippy.default("[data-tippy-content]", {
// Same defaults as set in web app tippyjs module.
maxWidth: 300,
delay: [100, 20],

15
web/src/settings_components.ts
View File

@ -1,7 +1,6 @@
import $ from "jquery";
import assert from "minimalistic-assert";
import type {PopperElement, Props} from "tippy.js";
import tippy from "tippy.js";
import * as tippy from "tippy.js";
import {z} from "zod";
import render_compose_banner from "../templates/compose_banner/compose_banner.hbs";
@ -1158,12 +1157,14 @@ function enable_or_disable_save_button($subsection_elem: JQuery): void {
disable_save_btn = should_disable_save_button_for_time_limit_settings(time_limit_settings);
} else if ($subsection_elem.attr("id") === "org-other-settings") {
disable_save_btn = should_disable_save_button_for_jitsi_server_url_setting();
const $button_wrapper = $subsection_elem.find<PopperElement>(".subsection-changes-save");
const $button_wrapper = $subsection_elem.find<tippy.PopperElement>(
".subsection-changes-save",
);
const tippy_instance = $button_wrapper[0]._tippy;
if (disable_save_btn) {
// avoid duplication of tippy
if (!tippy_instance) {
const opts: Partial<Props> = {placement: "top"};
const opts: Partial<tippy.Props> = {placement: "top"};
initialize_disable_btn_hint_popover(
$button_wrapper,
$t({defaultMessage: "Cannot save invalid Jitsi server URL."}),
@ -1183,9 +1184,9 @@ function enable_or_disable_save_button($subsection_elem: JQuery): void {
export function initialize_disable_btn_hint_popover(
$btn_wrapper: JQuery,
hint_text: string | undefined,
opts: Partial<Props>,
opts: Partial<tippy.Props>,
): void {
const tippy_opts: Partial<Props> = {
const tippy_opts: Partial<tippy.Props> = {
animation: false,
hideOnClick: false,
placement: "bottom",
@ -1197,5 +1198,5 @@ export function initialize_disable_btn_hint_popover(
if (hint_text !== undefined) {
tippy_opts.content = hint_text;
}
tippy($btn_wrapper[0], tippy_opts);
tippy.default($btn_wrapper[0], tippy_opts);
}

4
web/src/stats/stats.ts
View File

@ -3,7 +3,7 @@ import assert from "minimalistic-assert";
import PlotlyBar from "plotly.js/lib/bar";
import Plotly from "plotly.js/lib/core";
import PlotlyPie from "plotly.js/lib/pie";
import tippy from "tippy.js";
import * as tippy from "tippy.js";
import {z} from "zod";
import * as blueslip from "../blueslip";
@ -224,7 +224,7 @@ function update_last_full_update(end_times: number[]): void {
}
$(() => {
tippy(".last_update_tooltip", {
tippy.default(".last_update_tooltip", {
// Same defaults as set in our tippyjs module.
maxWidth: 300,
delay: [100, 20],

79
web/src/tippyjs.ts
View File

@ -1,7 +1,6 @@
import $ from "jquery";
import assert from "minimalistic-assert";
import type {ReferenceElement} from "tippy.js";
import tippy, {delegate} from "tippy.js";
import * as tippy from "tippy.js";
import render_buddy_list_title_tooltip from "../templates/buddy_list/title_tooltip.hbs";
import render_org_logo_tooltip from "../templates/org_logo_tooltip.hbs";
@ -52,7 +51,7 @@ export const EXTRA_LONG_HOVER_DELAY: [number, number] = [1500, 20];
// We override the defaults set by tippy library here,
// so make sure to check this too after checking tippyjs
// documentation for default properties.
tippy.setDefaultProps({
tippy.default.setDefaultProps({
// Tooltips shouldn't take more space than mobile widths.
maxWidth: 300,
delay: INSTANT_HOVER_DELAY,
@ -85,14 +84,14 @@ export function initialize(): void {
// * Set `data-tippy-content="{{t 'Tooltip content' }}"`, often
// replacing a `title` attribute on an element that had both.
// * Set placement; we typically use `data-tippy-placement="top"`.
delegate("body", {
tippy.delegate("body", {
target: ".tippy-zulip-tooltip",
});
// variant of tippy-zulip-tooltip above having delay=LONG_HOVER_DELAY,
// default placement="top" with fallback placement="bottom",
// and appended to body
delegate("body", {
tippy.delegate("body", {
target: ".tippy-zulip-delayed-tooltip",
// Disable trigger on focus, to avoid displaying on-click.
trigger: "mouseenter",
@ -110,7 +109,7 @@ export function initialize(): void {
},
});
delegate("body", {
tippy.delegate("body", {
target: ".toggle-subscription-tooltip",
trigger: "mouseenter",
delay: EXTRA_LONG_HOVER_DELAY,
@ -118,7 +117,7 @@ export function initialize(): void {
placement: "bottom",
});
delegate("body", {
tippy.delegate("body", {
target: ".tippy-left-sidebar-tooltip",
placement: "right",
delay: EXTRA_LONG_HOVER_DELAY,
@ -139,7 +138,7 @@ export function initialize(): void {
// this element doesn't have an always visible label, and
// thus hovering it is a way to find out what it does, give
// it the faster LONG_HOVER_DELAY.
delegate("body", {
tippy.delegate("body", {
target: "#show_all_private_messages",
placement: "right",
delay: LONG_HOVER_DELAY,
@ -158,7 +157,7 @@ export function initialize(): void {
// Variant of .tippy-left-sidebar-tooltip configuration. Here
// we need to dynamically check which view is the home view.
delegate("body", {
tippy.delegate("body", {
target: ".tippy-views-tooltip",
placement: "right",
delay: EXTRA_LONG_HOVER_DELAY,
@ -189,7 +188,7 @@ export function initialize(): void {
// below specify the target directly, elements using those should
// not have the tippy-zulip-tooltip class.
delegate("body", {
tippy.delegate("body", {
target: ".draft-selection-tooltip",
delay: LONG_HOVER_DELAY,
appendTo: () => document.body,
@ -203,7 +202,7 @@ export function initialize(): void {
},
});
delegate("body", {
tippy.delegate("body", {
target: ".delete-selected-drafts-button-container",
appendTo: () => document.body,
onShow(instance) {
@ -216,7 +215,7 @@ export function initialize(): void {
},
});
delegate("body", {
tippy.delegate("body", {
target: "#add-poll-modal .dialog_submit_button_container",
appendTo: () => document.body,
onShow(instance) {
@ -235,7 +234,7 @@ export function initialize(): void {
$("body").on(
"blur",
".message_control_button, .delete-selected-drafts-button-container",
function (this: ReferenceElement) {
function (this: tippy.ReferenceElement) {
// Remove tooltip when user is trying to tab through all the icons.
// If user tabs slowly, tooltips are displayed otherwise they are
// destroyed before they can be displayed.
@ -243,7 +242,7 @@ export function initialize(): void {
},
);
delegate("body", {
tippy.delegate("body", {
target: [
"#streams_header .streams-tooltip-target",
"#scroll-to-bottom-button-clickable-area",
@ -258,7 +257,7 @@ export function initialize(): void {
appendTo: () => document.body,
});
delegate("body", {
tippy.delegate("body", {
target: [
"#compose_top_right [data-tippy-content]",
"#compose_top_right [data-tooltip-template-id]",
@ -270,7 +269,7 @@ export function initialize(): void {
},
});
delegate("body", {
tippy.delegate("body", {
target: ".media-info-wrapper > .media-description > .title",
appendTo: () => document.body,
onShow(instance) {
@ -294,7 +293,7 @@ export function initialize(): void {
},
});
delegate("body", {
tippy.delegate("body", {
// Configure tooltips for the stream_sorter_toggle buttons.
// TODO: Ideally, we'd extend this to be a common mechanism for
@ -309,7 +308,7 @@ export function initialize(): void {
appendTo: () => document.body,
});
delegate("body", {
tippy.delegate("body", {
// This tooltip appears on the "Summary" checkboxes in
// settings > custom profile fields, when at the limit of 2
// fields with display_in_profile_summary enabled.
@ -331,7 +330,7 @@ export function initialize(): void {
},
});
delegate("body", {
tippy.delegate("body", {
target: "#full_name_input_container.disabled_setting_tooltip",
content: $t({
defaultMessage:
@ -343,7 +342,7 @@ export function initialize(): void {
},
});
delegate("body", {
tippy.delegate("body", {
target: "#change_email_button_container.disabled_setting_tooltip",
content: $t({defaultMessage: "Email address changes are disabled in this organization."}),
appendTo: () => document.body,
@ -352,7 +351,7 @@ export function initialize(): void {
},
});
delegate("body", {
tippy.delegate("body", {
target: [
"#deactivate_account_container.disabled_setting_tooltip",
"#edit-user-form .deactivate_user_button_tooltip",
@ -367,7 +366,7 @@ export function initialize(): void {
},
});
delegate("body", {
tippy.delegate("body", {
target: "#deactivate_realm_button_container.disabled_setting_tooltip",
content: $t({
defaultMessage: "Only organization owners may deactivate an organization.",
@ -378,7 +377,7 @@ export function initialize(): void {
},
});
delegate("body", {
tippy.delegate("body", {
target: ".settings-radio-input-parent.default_stream_private_tooltip",
content: $t({
defaultMessage: "Default channels for new users cannot be made private.",
@ -389,7 +388,7 @@ export function initialize(): void {
},
});
delegate("body", {
tippy.delegate("body", {
target: ".default-stream.default_stream_private_tooltip",
content: $t({
defaultMessage: "Private channels cannot be default channels for new users.",
@ -400,7 +399,7 @@ export function initialize(): void {
},
});
delegate("body", {
tippy.delegate("body", {
target: "[data-tab-key='invite-link-tab'].disabled",
content: $t({
defaultMessage:
@ -412,7 +411,7 @@ export function initialize(): void {
},
});
delegate("body", {
tippy.delegate("body", {
target: [
"#api_key_button_container.disabled_setting_tooltip",
"#user_email_address_dropdown_container.disabled_setting_tooltip",
@ -426,7 +425,7 @@ export function initialize(): void {
},
});
delegate("body", {
tippy.delegate("body", {
target: "[data-tab-key='invite-email-tab'].disabled",
content: $t({
defaultMessage:
@ -438,7 +437,7 @@ export function initialize(): void {
},
});
delegate("body", {
tippy.delegate("body", {
target: ".views-tooltip-target",
onShow(instance) {
if ($("#toggle-top-left-navigation-area-icon").hasClass("fa-caret-down")) {
@ -455,7 +454,7 @@ export function initialize(): void {
appendTo: () => document.body,
});
delegate("body", {
tippy.delegate("body", {
target: ".dm-tooltip-target",
onShow(instance) {
if ($(".direct-messages-container").hasClass("zoom-in")) {
@ -477,7 +476,7 @@ export function initialize(): void {
appendTo: () => document.body,
});
delegate("body", {
tippy.delegate("body", {
target: "#stream_creation_form .add_subscribers_disabled",
content: $t({
defaultMessage:
@ -489,7 +488,7 @@ export function initialize(): void {
},
});
delegate("body", {
tippy.delegate("body", {
target: ".user_row .actions button",
trigger: "mouseenter",
onShow(instance) {
@ -506,12 +505,12 @@ export function initialize(): void {
appendTo: () => document.body,
});
delegate("body", {
tippy.delegate("body", {
target: ".user-card-status-area .status-emoji",
appendTo: () => document.body,
});
delegate("body", {
tippy.delegate("body", {
target: ".status-emoji-name",
placement: "top",
delay: INSTANT_HOVER_DELAY,
@ -534,7 +533,7 @@ export function initialize(): void {
},
});
delegate("body", {
tippy.delegate("body", {
/*
The tooltip for new user group button (+) icon button on #groups
overlay was not mounted correctly as its sibling element (search bar)
@ -549,7 +548,7 @@ export function initialize(): void {
appendTo: () => document.body,
});
delegate("body", {
tippy.delegate("body", {
target: "#move_topic_to_stream_widget_wrapper",
onShow(instance) {
if ($("#move_topic_to_stream_widget").prop("disabled")) {
@ -566,7 +565,7 @@ export function initialize(): void {
appendTo: () => document.body,
});
delegate("body", {
tippy.delegate("body", {
target: "#userlist-header",
placement: "top",
appendTo: () => document.body,
@ -578,7 +577,7 @@ export function initialize(): void {
},
});
delegate("body", {
tippy.delegate("body", {
target: "#userlist-toggle",
delay: LONG_HOVER_DELAY,
placement: "bottom",
@ -596,7 +595,7 @@ export function initialize(): void {
},
});
delegate("body", {
tippy.delegate("body", {
target: "#realm-logo",
placement: "right",
appendTo: () => document.body,
@ -612,7 +611,7 @@ export function initialize(): void {
},
});
delegate("body", {
tippy.delegate("body", {
target: ".custom-user-field-label-wrapper.required-field-wrapper",
content: $t({
defaultMessage: "This profile field is required.",
@ -623,7 +622,7 @@ export function initialize(): void {
},
});
delegate("body", {
tippy.delegate("body", {
target: ".popover-contains-shift-hotkey",
trigger: "mouseenter",
placement: "top",

4
web/src/user_card_popover.js
View File

@ -2,7 +2,7 @@ import ClipboardJS from "clipboard";
import {parseISO} from "date-fns";
import $ from "jquery";
import assert from "minimalistic-assert";
import tippy from "tippy.js";
import * as tippy from "tippy.js";
import render_confirm_mute_user from "../templates/confirm_dialog/confirm_mute_user.hbs";
import render_user_card_popover from "../templates/popovers/user_card/user_card_popover.hbs";
@ -455,7 +455,7 @@ function init_email_tooltip(user) {
$(".user_popover_email").each(function () {
if (this.clientWidth < this.scrollWidth) {
tippy(this, {
tippy.default(this, {
placement: "bottom",
content: people.get_visible_email(user),
interactive: true,

6
web/src/user_group_popover.ts
View File

@ -1,6 +1,6 @@
import $ from "jquery";
import assert from "minimalistic-assert";
import type {Instance as PopoverInstance, ReferenceElement} from "tippy.js";
import type * as tippy from "tippy.js";
import render_user_group_info_popover from "../templates/popovers/user_group_info_popover.hbs";
@ -17,7 +17,7 @@ import * as ui_util from "./ui_util";
import * as user_groups from "./user_groups";
import * as util from "./util";
let user_group_popover_instance: PopoverInstance | undefined;
let user_group_popover_instance: tippy.Instance | undefined;
type PopoverGroupMember = User & {user_circle_class: string; user_last_seen_time_status: string};
@ -57,7 +57,7 @@ export function handle_keyboard(key: string): void {
// in case of message, message_id is the message id containing it;
// in case of user group pill, message_id is not used;
export function toggle_user_group_info_popover(
element: ReferenceElement,
element: tippy.ReferenceElement,
message_id: number | undefined,
): void {
if (is_open()) {