(deleted)
" || editability === message_edit.editability_types.FULL || editability === message_edit.editability_types.TOPIC_ONLY) && not_spectator; const should_display_quote_and_reply = message.content !== "(deleted)
" && not_spectator; const conversation_time_uri = hash_util.by_conversation_and_time_uri(message); const should_display_delete_option = message_edit.get_deletability(message) && not_spectator; const args = { message_id: message.id, historical: message.historical, stream_id: message.stream_id, topic, use_edit_icon, editability_menu_item, can_mute_topic, can_unmute_topic, should_display_collapse, should_display_uncollapse, should_display_add_reaction_option: message.sent_by_me, should_display_edit_history_option, should_display_hide_option, conversation_time_uri, narrowed: narrow_state.active(), should_display_delete_option, should_display_reminder_option: feature_flags.reminders_in_message_action_menu, should_display_edit_and_view_source, should_display_quote_and_reply, }; const ypos = elt.offset().top; elt.popover({ // Popover height with 7 items in it is ~190 px placement: message_viewport.height() - ypos < 220 ? "top" : "bottom", title: "", content: render_actions_popover_content(args), html: true, trigger: "manual", }); elt.popover("show"); current_actions_popover_elem = elt; } } export function render_actions_remind_popover(element, id) { hide_all(); $(element).closest(".message_row").toggleClass("has_popover has_actions_popover"); message_lists.current.select_id(id); const elt = $(element); if (elt.data("popover") === undefined) { const message = message_lists.current.get(id); const args = { message, }; const ypos = elt.offset().top; elt.popover({ // Popover height with 7 items in it is ~190 px placement: message_viewport.height() - ypos < 220 ? "top" : "bottom", title: "", content: render_remind_me_popover_content(args), html: true, trigger: "manual", }); elt.popover("show"); current_flatpickr_instance = $( `.remind.custom[data-message-id="${CSS.escape(message.id)}"]`, ).flatpickr({ enableTime: true, clickOpens: false, defaultDate: "today", minDate: "today", plugins: [new ConfirmDatePlugin({})], }); current_actions_popover_elem = elt; } } function get_action_menu_menu_items() { if (!current_actions_popover_elem) { blueslip.error("Trying to get menu items when action popover is closed."); return undefined; } const popover_data = current_actions_popover_elem.data("popover"); if (!popover_data) { blueslip.error("Cannot find popover data for actions menu."); return undefined; } return $("li:not(.divider):visible a", popover_data.$tip); } export function focus_first_popover_item(items) { if (!items) { return; } items.eq(0).expectOne().trigger("focus"); } export function popover_items_handle_keyboard(key, items) { if (!items) { return; } let index = items.index(items.filter(":focus")); if (key === "enter" && index >= 0 && index < items.length) { items[index].click(); return; } if (index === -1) { index = 0; } else if ((key === "down_arrow" || key === "vim_down") && index < items.length - 1) { index += 1; } else if ((key === "up_arrow" || key === "vim_up") && index > 0) { index -= 1; } items.eq(index).trigger("focus"); } function focus_first_action_popover_item() { // For now I recommend only calling this when the user opens the menu with a hotkey. // Our popup menus act kind of funny when you mix keyboard and mouse. const items = get_action_menu_menu_items(); focus_first_popover_item(items); } export function open_message_menu(message) { if (message.locally_echoed) { // Don't open the popup for locally echoed messages for now. // It creates bugs with things like keyboard handlers when // we get the server response. return true; } const message_id = message.id; toggle_actions_popover($(".selected_message .actions_hover")[0], message_id); if (current_actions_popover_elem) { focus_first_action_popover_item(); } return true; } export function actions_menu_handle_keyboard(key) { const items = get_action_menu_menu_items(); popover_items_handle_keyboard(key, items); } export function actions_popped() { return current_actions_popover_elem !== undefined; } export function hide_actions_popover() { if (actions_popped()) { $(".has_popover").removeClass("has_popover has_actions_popover"); current_actions_popover_elem.popover("destroy"); current_actions_popover_elem = undefined; } if (current_flatpickr_instance !== undefined) { current_flatpickr_instance.destroy(); current_flatpickr_instance = undefined; } } export function message_info_popped() { return current_message_info_popover_elem !== undefined; } export function hide_message_info_popover() { if (message_info_popped()) { current_message_info_popover_elem.popover("destroy"); current_message_info_popover_elem = undefined; } } export function user_info_popped() { return current_user_info_popover_elem !== undefined; } export function hide_user_info_popover() { if (user_info_popped()) { current_user_info_popover_elem.popover("destroy"); current_user_info_popover_elem = undefined; } } export function hide_userlist_sidebar() { $(".app-main .column-right").removeClass("expanded"); } export function hide_pm_list_sidebar() { $(".app-main .column-left").removeClass("expanded"); } export function show_userlist_sidebar() { $(".app-main .column-right").addClass("expanded"); resize.resize_page_components(); } export function show_pm_list_sidebar() { $(".app-main .column-left").addClass("expanded"); resize.resize_page_components(); } let current_user_sidebar_user_id; let current_user_sidebar_popover; export function user_sidebar_popped() { return current_user_sidebar_popover !== undefined; } export function hide_user_sidebar_popover() { if (user_sidebar_popped()) { // this hide_* method looks different from all the others since // the presence list may be redrawn. Due to funkiness with jquery's .data() // this would confuse $.popover("destroy"), which looks at the .data() attached // to a certain element. We thus save off the .data("popover") in the // show_user_sidebar_popover and inject it here before calling destroy. $("#user_presences").data("popover", current_user_sidebar_popover); $("#user_presences").popover("destroy"); current_user_sidebar_user_id = undefined; current_user_sidebar_popover = undefined; } } function focus_user_info_popover_item() { // For now I recommend only calling this when the user opens the menu with a hotkey. // Our popup menus act kind of funny when you mix keyboard and mouse. const items = get_user_info_popover_for_message_items(); focus_first_popover_item(items); } function get_user_sidebar_popover_items() { if (!current_user_sidebar_popover) { blueslip.error("Trying to get menu items when user sidebar popover is closed."); return undefined; } return $("li:not(.divider):visible > a", current_user_sidebar_popover.$tip); } export function user_sidebar_popover_handle_keyboard(key) { const items = get_user_sidebar_popover_items(); popover_items_handle_keyboard(key, items); } export function user_info_popover_for_message_handle_keyboard(key) { const items = get_user_info_popover_for_message_items(); popover_items_handle_keyboard(key, items); } export function user_info_popover_handle_keyboard(key) { const items = get_user_info_popover_items(); popover_items_handle_keyboard(key, items); } export function show_sender_info() { const $message = $(".selected_message"); const $sender = $message.find(".sender_info_hover"); const message = message_lists.current.get(rows.id($message)); const user = people.get_by_user_id(message.sender_id); show_user_info_popover_for_message($sender[0], user, message); if (current_message_info_popover_elem) { focus_user_info_popover_item(); } } // On mobile web, opening the keyboard can trigger a resize event // (which in turn can trigger a scroll event). This will have the // side effect of closing popovers, which we don't want. So we // suppress the first hide from scrolling after a resize using this // variable. let suppress_scroll_hide = false; export function set_suppress_scroll_hide() { suppress_scroll_hide = true; } // Playground_info 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. export function toggle_playground_link_popover(element, playground_info) { const last_popover_elem = current_playground_links_popover_elem; hide_all(); if (last_popover_elem !== undefined && last_popover_elem.get()[0] === element) { // We want it to be the case that a user can dismiss a popover // by clicking on the same element that caused the popover. return; } const elt = $(element); if (elt.data("popover") === undefined) { const ypos = elt.offset().top; elt.popover({ // It's unlikely we'll have more than 3-4 playground links // for one language, so it should be OK to hardcode 120 here. placement: message_viewport.height() - ypos < 120 ? "top" : "bottom", title: "", content: render_playground_links_popover_content({playground_info}), html: true, trigger: "manual", }); elt.popover("show"); current_playground_links_popover_elem = elt; } } export function hide_playground_links_popover() { if (current_playground_links_popover_elem !== undefined) { current_playground_links_popover_elem.popover("destroy"); current_playground_links_popover_elem = undefined; } } export function register_click_handlers() { $("#main_div").on("click", ".actions_hover", function (e) { const row = $(this).closest(".message_row"); e.stopPropagation(); toggle_actions_popover(this, rows.id(row)); }); $("#main_div").on( "click", ".sender_name, .sender_name-in-status, .inline_profile_picture", function (e) { const row = $(this).closest(".message_row"); e.stopPropagation(); const message = message_lists.current.get(rows.id(row)); const user = people.get_by_user_id(message.sender_id); show_user_info_popover_for_message(this, user, message); }, ); $("#main_div").on("click", ".user-mention", function (e) { const id_string = $(this).attr("data-user-id"); // We fallback to email to handle legacy Markdown that was rendered // before we cut over to using data-user-id const email = $(this).attr("data-user-email"); if (id_string === "*" || email === "*") { return; } const row = $(this).closest(".message_row"); e.stopPropagation(); const message = message_lists.current.get(rows.id(row)); let user; if (id_string) { const user_id = Number.parseInt(id_string, 10); user = people.get_by_user_id(user_id); } else { user = people.get_by_email(email); } show_user_info_popover_for_message(this, user, message); }); $("#main_div").on("click", ".user-group-mention", function (e) { const user_group_id = Number.parseInt($(this).attr("data-user-group-id"), 10); const row = $(this).closest(".message_row"); e.stopPropagation(); const message = message_lists.current.get(rows.id(row)); const group = user_groups.get_user_group_from_id(user_group_id, true); if (group === undefined) { // This user group has likely been deleted. blueslip.info("Unable to find user group in message" + message.sender_id); } else { show_user_group_info_popover(this, group, message); } }); $("#main_div, #compose .preview_content").on("click", ".code_external_link", function (e) { const view_in_playground_button = $(this); const codehilite_div = $(this).closest(".codehilite"); e.stopPropagation(); const playground_info = realm_playground.get_playground_info_for_languages( codehilite_div.data("code-language"), ); // We do the code extraction here and set the target href combining the url_prefix // and the extracted code. Depending on whether the language has multiple playground // links configured, a popover is show. const extracted_code = codehilite_div.find("code").text(); if (playground_info.length === 1) { const url_prefix = playground_info[0].url_prefix; view_in_playground_button.attr("href", url_prefix + encodeURIComponent(extracted_code)); } else { for (const $playground of playground_info) { $playground.playground_url = $playground.url_prefix + encodeURIComponent(extracted_code); } toggle_playground_link_popover(this, playground_info); } }); $("body").on("click", ".popover_playground_link", (e) => { hide_playground_links_popover(); e.stopPropagation(); }); $("body").on("click", ".info_popover_actions .narrow_to_private_messages", (e) => { const user_id = elem_to_user_id($(e.target).parents("ul")); const email = people.get_by_user_id(user_id).email; hide_all(); if (overlays.settings_open()) { overlays.close_overlay("settings"); } narrow.by("pm-with", email, {trigger: "user sidebar popover"}); e.stopPropagation(); e.preventDefault(); }); $("body").on("click", ".info_popover_actions .narrow_to_messages_sent", (e) => { const user_id = elem_to_user_id($(e.target).parents("ul")); const email = people.get_by_user_id(user_id).email; hide_all(); if (overlays.settings_open()) { overlays.close_overlay("settings"); } narrow.by("sender", email, {trigger: "user sidebar popover"}); e.stopPropagation(); e.preventDefault(); }); $("body").on("click", ".user_popover .mention_user", (e) => { if (!compose_state.composing()) { compose_actions.start("stream", {trigger: "sidebar user actions"}); } const user_id = elem_to_user_id($(e.target).parents("ul")); const name = people.get_by_user_id(user_id).full_name; const mention = people.get_mention_syntax(name, user_id); compose_ui.insert_syntax_and_focus(mention); hide_user_sidebar_popover(); hide_userlist_sidebar(); e.stopPropagation(); e.preventDefault(); }); $("body").on("click", ".message-info-popover .mention_user", (e) => { if (!compose_state.composing()) { compose_actions.respond_to_message({trigger: "user sidebar popover"}); } const user_id = elem_to_user_id($(e.target).parents("ul")); const name = people.get_by_user_id(user_id).full_name; const mention = people.get_mention_syntax(name, user_id); compose_ui.insert_syntax_and_focus(mention); hide_message_info_popover(); e.stopPropagation(); e.preventDefault(); }); $("body").on("click", ".info_popover_actions .clear_status", (e) => { e.preventDefault(); const me = elem_to_user_id($(e.target).parents("ul")); user_status.server_update({ user_id: me, status_text: "", success() { $(".info_popover_actions #status_message").html(""); }, }); }); $("body").on("click", ".view_user_profile", (e) => { const user_id = Number.parseInt($(e.target).attr("data-user-id"), 10); const user = people.get_by_user_id(user_id); show_user_info_popover(e.target, user); e.stopPropagation(); e.preventDefault(); }); /* These click handlers are implemented as just deep links to the * relevant part of the Zulip UI, so we don't want preventDefault, * but we do want to close the modal when you click them. */ $("body").on("click", ".set_away_status", (e) => { hide_all(); user_status.server_set_away(); e.stopPropagation(); e.preventDefault(); }); $("body").on("click", ".revoke_away_status", (e) => { hide_all(); user_status.server_revoke_away(); e.stopPropagation(); e.preventDefault(); }); $("body").on("click", ".update_status_text", (e) => { hide_all(); user_status_ui.open_user_status_modal(); e.stopPropagation(); e.preventDefault(); }); $("body").on("click", ".info_popover_actions .sidebar-popover-mute-user", (e) => { const user_id = elem_to_user_id($(e.target).parents("ul")); hide_message_info_popover(); hide_user_sidebar_popover(); e.stopPropagation(); e.preventDefault(); muting_ui.confirm_mute_user(user_id); }); $("body").on("click", ".info_popover_actions .sidebar-popover-unmute-user", (e) => { const user_id = elem_to_user_id($(e.target).parents("ul")); hide_message_info_popover(); hide_user_sidebar_popover(); muting_ui.unmute_user(user_id); e.stopPropagation(); e.preventDefault(); }); $("#user_presences").on("click", ".user-list-sidebar-menu-icon", function (e) { e.stopPropagation(); // use email of currently selected user, rather than some elem comparison, // as the presence list may be redrawn with new elements. const target = $(this).closest("li"); const user_id = elem_to_user_id(target.find("a")); if (current_user_sidebar_user_id === user_id) { // If the popover is already shown, clicking again should toggle it. // We don't want to hide the sidebars on smaller browser windows. hide_all_except_sidebars(); return; } hide_all(); if (userlist_placement === "right") { show_userlist_sidebar(); } else { // Maintain the same behavior when displaying with the streamlist. stream_popover.show_streamlist_sidebar(); } const user = people.get_by_user_id(user_id); const popover_placement = userlist_placement === "left" ? "right" : "left"; render_user_info_popover( user, target, false, false, "compose_private_message", "user_popover", popover_placement, ); current_user_sidebar_user_id = user.user_id; current_user_sidebar_popover = target.data("popover"); }); $("body").on("mouseenter", ".user_popover_email", function () { const tooltip_holder = $(this).find("div"); if (this.offsetWidth < this.scrollWidth) { tooltip_holder.addClass("display-tooltip"); } else { tooltip_holder.removeClass("display-tooltip"); } }); $("body").on("click", ".respond_button", (e) => { // Arguably, we should fetch the message ID to respond to from // e.target, but that should always be the current selected // message in the current message list (and // compose_actions.respond_to_message doesn't take a message // argument). compose_actions.quote_and_reply({trigger: "popover respond"}); hide_actions_popover(); e.stopPropagation(); e.preventDefault(); }); $("body").on("click", ".reminder_button", (e) => { const message_id = $(e.currentTarget).data("message-id"); render_actions_remind_popover($(".selected_message .actions_hover")[0], message_id); e.stopPropagation(); e.preventDefault(); }); $("body").on("click", ".remind.custom", (e) => { $(e.currentTarget)[0]._flatpickr.toggle(); e.stopPropagation(); e.preventDefault(); }); function reminder_click_handler(datestr, e) { const message_id = $(".remind.custom").data("message-id"); reminder.do_set_reminder_for_message(message_id, datestr); hide_all(); e.stopPropagation(); e.preventDefault(); } $("body").on("click", ".remind.in_20m", (e) => { const datestr = formatISO(add(new Date(), {minutes: 20})); reminder_click_handler(datestr, e); }); $("body").on("click", ".remind.in_1h", (e) => { const datestr = formatISO(add(new Date(), {hours: 1})); reminder_click_handler(datestr, e); }); $("body").on("click", ".remind.in_3h", (e) => { const datestr = formatISO(add(new Date(), {hours: 3})); reminder_click_handler(datestr, e); }); $("body").on("click", ".remind.tomo", (e) => { const datestr = formatISO( set(add(new Date(), {days: 1}), {hours: 9, minutes: 0, seconds: 0}), ); reminder_click_handler(datestr, e); }); $("body").on("click", ".remind.nxtw", (e) => { const datestr = formatISO( set(add(new Date(), {weeks: 1}), {hours: 9, minutes: 0, seconds: 0}), ); reminder_click_handler(datestr, e); }); $("body").on("click", ".flatpickr-calendar", (e) => { e.stopPropagation(); e.preventDefault(); }); $("body").on("click", ".flatpickr-confirm", (e) => { const datestr = $(".remind.custom")[0].value; reminder_click_handler(datestr, e); }); $("body").on("click", ".respond_personal_button, .compose_private_message", (e) => { const user_id = elem_to_user_id($(e.target).parents("ul")); const email = people.get_by_user_id(user_id).email; compose_actions.start("private", { trigger: "popover send private", private_message_recipient: email, }); hide_all(); if (overlays.settings_open()) { overlays.close_overlay("settings"); } e.stopPropagation(); e.preventDefault(); }); $("body").on("click", ".popover_toggle_collapse", (e) => { const message_id = $(e.currentTarget).data("message-id"); const row = message_lists.current.get_row(message_id); const message = message_lists.current.get(rows.id(row)); hide_actions_popover(); if (row) { if (message.collapsed) { condense.uncollapse(row); } else { condense.collapse(row); } } e.stopPropagation(); e.preventDefault(); }); $("body").on("click", ".popover_edit_message", (e) => { const message_id = $(e.currentTarget).data("message-id"); const row = message_lists.current.get_row(message_id); hide_actions_popover(); message_edit.start(row); e.stopPropagation(); e.preventDefault(); }); $("body").on("click", ".rehide_muted_user_message", (e) => { const message_id = $(e.currentTarget).data("message-id"); const row = message_lists.current.get_row(message_id); const message = message_lists.current.get(rows.id(row)); const message_container = message_lists.current.view.message_containers.get(message.id); hide_actions_popover(); if (row && !message_container.is_hidden) { message_lists.current.view.hide_revealed_message(message_id); } e.stopPropagation(); e.preventDefault(); }); $("body").on("click", ".view_edit_history", (e) => { const message_id = $(e.currentTarget).data("message-id"); const row = message_lists.current.get_row(message_id); const message = message_lists.current.get(rows.id(row)); hide_actions_popover(); message_edit_history.show_history(message); $("#message-history-cancel").trigger("focus"); e.stopPropagation(); e.preventDefault(); }); $("body").on("click", ".popover_mute_topic", (e) => { const stream_id = Number.parseInt($(e.currentTarget).attr("data-msg-stream-id"), 10); const topic = $(e.currentTarget).attr("data-msg-topic"); hide_actions_popover(); muting_ui.mute_topic(stream_id, topic); e.stopPropagation(); e.preventDefault(); }); $("body").on("click", ".popover_unmute_topic", (e) => { const stream_id = Number.parseInt($(e.currentTarget).attr("data-msg-stream-id"), 10); const topic = $(e.currentTarget).attr("data-msg-topic"); hide_actions_popover(); muting_ui.unmute_topic(stream_id, topic); e.stopPropagation(); e.preventDefault(); }); $("body").on("click", ".delete_message", (e) => { const message_id = $(e.currentTarget).data("message-id"); hide_actions_popover(); message_edit.delete_message(message_id); e.stopPropagation(); e.preventDefault(); }); clipboard_enable(".copy_link").on("success", (e) => { hide_actions_popover(); // e.trigger returns the DOM element triggering the copy action const message_id = e.trigger.getAttribute("data-message-id"); const row = $(`[zid='${CSS.escape(message_id)}']`); row.find(".alert-msg") .text($t({defaultMessage: "Copied!"})) .css("display", "block") .delay(1000) .fadeOut(300); setTimeout(() => { // The Cliboard library works by focusing to a hidden textarea. // We unfocus this so keyboard shortcuts, etc., will work again. $(":focus").trigger("blur"); }, 0); }); clipboard_enable(".copy_mention_syntax"); $("body").on("click", ".copy_mention_syntax", (e) => { hide_all(); e.stopPropagation(); e.preventDefault(); }); { let last_scroll = 0; $(".app").on("scroll", () => { if (suppress_scroll_hide) { suppress_scroll_hide = false; return; } const date = Date.now(); // only run `popovers.hide_all()` if the last scroll was more // than 250ms ago. if (date - last_scroll > 250) { hide_all(); } // update the scroll time on every event to make sure it doesn't // retrigger `hide_all` while still scrolling. last_scroll = date; }); } } 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 ( 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() || stream_popover.topic_popped() || message_info_popped() || user_info_popped() || emoji_picker.reactions_popped() || $("[class^='column-'].expanded").length ); } // This function will hide all true popovers (the streamlist and // userlist sidebars use the popover infrastructure, but doesn't work // like a popover structurally). export function hide_all_except_sidebars(opts) { $(".has_popover").removeClass("has_popover has_actions_popover has_emoji_popover"); if (!opts || !opts.not_hide_tippy_instances) { hideAll(); } else if (opts.exclude_tippy_instance) { hideAll({exclude: opts.exclude_tippy_instance}); } hide_actions_popover(); hide_message_info_popover(); emoji_picker.hide_emoji_popover(); giphy.hide_giphy_popover(); stream_popover.hide_stream_popover(); stream_popover.hide_topic_popover(); stream_popover.hide_all_messages_popover(); stream_popover.hide_starred_messages_popover(); hide_user_sidebar_popover(); hide_user_info_popover(); hide_playground_links_popover(); // look through all the popovers that have been added and removed. for (const $o of list_of_popovers) { if (!document.body.contains($o.$element[0]) && $o.$tip) { $o.$tip.remove(); } } list_of_popovers = []; } // This function will hide all the popovers, including the mobile web // or narrow window sidebars. export function hide_all(not_hide_tippy_instances) { hide_userlist_sidebar(); stream_popover.hide_streamlist_sidebar(); hide_all_except_sidebars({ exclude_tippy_instance: undefined, not_hide_tippy_instances, }); } export function set_userlist_placement(placement) { userlist_placement = placement || "right"; } export function compute_placement(elt, popover_height, popover_width, prefer_vertical_positioning) { const client_rect = elt.get(0).getBoundingClientRect(); const distance_from_top = client_rect.top; const distance_from_bottom = message_viewport.height() - client_rect.bottom; const distance_from_left = client_rect.left; const distance_from_right = message_viewport.width() - client_rect.right; const elt_will_fit_horizontally = distance_from_left + elt.width() / 2 > popover_width / 2 && distance_from_right + elt.width() / 2 > popover_width / 2; const elt_will_fit_vertically = distance_from_bottom + elt.height() / 2 > popover_height / 2 && distance_from_top + elt.height() / 2 > popover_height / 2; // default to placing the popover in the center of the screen let placement = "viewport_center"; // prioritize left/right over top/bottom if (distance_from_top > popover_height && elt_will_fit_horizontally) { placement = "top"; } if (distance_from_bottom > popover_height && elt_will_fit_horizontally) { placement = "bottom"; } if (prefer_vertical_positioning && placement !== "viewport_center") { // If vertical positioning is preferred and the popover fits in // either top or bottom position then return. return placement; } if (distance_from_left > popover_width && elt_will_fit_vertically) { placement = "left"; } if (distance_from_right > popover_width && elt_will_fit_vertically) { placement = "right"; } return placement; }