From e6e601077f8ff3f4e63839a16761a85d4f50dac1 Mon Sep 17 00:00:00 2001 From: Ganesh Pawar Date: Sun, 4 Jul 2021 11:33:07 +0530 Subject: [PATCH] dialog_widget: Append dialog_widget to the body element. We attach the DOM for the modal to the body element to avoid style interference from other elements and having to choose a separate parent element for every single dialog_widget. --- static/js/avatar.js | 3 --- static/js/dialog_widget.js | 10 ++++------ static/js/message_edit.js | 2 -- static/js/muted_users_ui.js | 4 ---- static/js/settings_account.js | 2 -- static/js/settings_emoji.js | 2 -- static/js/settings_invites.js | 4 ---- static/js/settings_linkifiers.js | 2 -- static/js/settings_org.js | 2 -- static/js/settings_user_groups.js | 4 ---- static/js/settings_users.js | 7 ------- static/js/starred_messages_ui.js | 6 ------ static/js/stream_create.js | 2 -- static/js/stream_edit.js | 6 +----- static/js/stream_popover.js | 4 +--- static/js/stream_settings_ui.js | 14 ++++---------- 16 files changed, 10 insertions(+), 64 deletions(-) diff --git a/static/js/avatar.js b/static/js/avatar.js index dfb7fd916d..d7504111de 100644 --- a/static/js/avatar.js +++ b/static/js/avatar.js @@ -95,12 +95,9 @@ export function build_user_avatar_widget(upload_function) { }, }); } - const modal_parent = $("#profile-settings"); - const html_body = render_confirm_delete_user_avatar(); confirm_dialog.launch({ - parent: modal_parent, html_heading: $t_html({defaultMessage: "Delete profile picture"}), html_body, on_click: delete_user_avatar, diff --git a/static/js/dialog_widget.js b/static/js/dialog_widget.js index f51c656751..85ebad57f8 100644 --- a/static/js/dialog_widget.js +++ b/static/js/dialog_widget.js @@ -19,9 +19,8 @@ import * as settings_data from "./settings_data"; 1) We create DOM on the fly, and we remove the DOM once it's closed. - 2) We attach the DOM for the modal to conf.parent, - and this temporary DOM location will influence - how styles work. + 2) We attach the DOM for the modal to the body element + to avoid style interference from other elements. 3) The cancel button is driven by bootstrap.js. @@ -68,7 +67,6 @@ export function launch(conf) { "html_heading", "html_body", "on_click", - "parent", ]; // Optional parameters: @@ -103,7 +101,7 @@ export function launch(conf) { danger_submit_button: conf.danger_submit_button, }); const dialog = $(html); - conf.parent.append(dialog); + $("body").append(dialog); if (conf.post_render !== undefined) { conf.post_render(); @@ -126,7 +124,7 @@ export function launch(conf) { }); if (conf.focus_submit_on_open) { - conf.parent.on("shown.bs.modal", () => { + dialog.on("shown.bs.modal", () => { submit_button.trigger("focus"); }); } diff --git a/static/js/message_edit.js b/static/js/message_edit.js index 1d97eefae5..625d3da139 100644 --- a/static/js/message_edit.js +++ b/static/js/message_edit.js @@ -1008,7 +1008,6 @@ export function edit_last_sent_message() { export function delete_message(msg_id) { const html_body = render_delete_message_modal(); - const modal_parent = $("#main_div"); function do_delete_message() { currently_deleting_messages.push(msg_id); @@ -1037,7 +1036,6 @@ export function delete_message(msg_id) { } confirm_dialog.launch({ - parent: modal_parent, html_heading: $t_html({defaultMessage: "Delete message"}), html_body, help_link: "/help/edit-or-delete-a-message#delete-a-message", diff --git a/static/js/muted_users_ui.js b/static/js/muted_users_ui.js index e98d24afa6..c77f4ac638 100644 --- a/static/js/muted_users_ui.js +++ b/static/js/muted_users_ui.js @@ -1,5 +1,3 @@ -import $ from "jquery"; - import render_confirm_mute_user from "../templates/confirm_dialog/confirm_mute_user.hbs"; import * as activity from "./activity"; @@ -27,13 +25,11 @@ export function confirm_mute_user(user_id) { mute_user(user_id); } - const modal_parent = $(".mute-user-modal-holder"); const html_body = render_confirm_mute_user({ user_name: people.get_full_name(user_id), }); confirm_dialog.launch({ - parent: modal_parent, html_heading: $t_html({defaultMessage: "Mute user"}), help_link: "/help/mute-a-user", html_body, diff --git a/static/js/settings_account.js b/static/js/settings_account.js index 3c10f1c978..f64d55b209 100644 --- a/static/js/settings_account.js +++ b/static/js/settings_account.js @@ -598,9 +598,7 @@ export function set_up() { }); } const html_body = render_confirm_deactivate_own_user(); - const modal_parent = $("#account-settings .account-settings-form"); confirm_dialog.launch({ - parent: modal_parent, html_heading: $t_html({defaultMessage: "Deactivate your account"}), html_body, on_click: handle_confirm, diff --git a/static/js/settings_emoji.js b/static/js/settings_emoji.js index 16ace12555..7bf9894e3c 100644 --- a/static/js/settings_emoji.js +++ b/static/js/settings_emoji.js @@ -250,13 +250,11 @@ export function set_up() { } if (is_default_emoji(emoji.name)) { - const modal_parent = $("#settings_content"); const html_body = emoji_settings_warning_modal({ emoji_name: emoji.name, }); confirm_dialog.launch({ - parent: modal_parent, html_heading: $t_html({defaultMessage: "Override built-in emoji?"}), html_body, on_click: submit_custom_emoji_request, diff --git a/static/js/settings_invites.js b/static/js/settings_invites.js index ed14b29d28..6cd4bac850 100644 --- a/static/js/settings_invites.js +++ b/static/js/settings_invites.js @@ -197,11 +197,9 @@ export function on_load_success(invites_data, initialize_event_handlers) { email, referred_by, }; - const modal_parent = $("#admin_invites_table"); const html_body = render_settings_revoke_invite_modal(ctx); confirm_dialog.launch({ - parent: modal_parent, html_heading: ctx.is_multiuse ? $t_html({defaultMessage: "Revoke invitation link"}) : $t_html({defaultMessage: "Revoke invitation to {email}"}, {email}), @@ -224,11 +222,9 @@ export function on_load_success(invites_data, initialize_event_handlers) { const email = row.find(".email").text(); meta.current_resend_invite_user_modal_row = row; meta.invite_id = $(e.currentTarget).attr("data-invite-id"); - const modal_parent = $("#admin_invites_table"); const html_body = render_settings_resend_invite_modal({email}); confirm_dialog.launch({ - parent: modal_parent, html_heading: $t_html({defaultMessage: "Resend invitation"}), html_body, on_click: do_resend_invite, diff --git a/static/js/settings_linkifiers.js b/static/js/settings_linkifiers.js index d85f08f844..01e592c7c7 100644 --- a/static/js/settings_linkifiers.js +++ b/static/js/settings_linkifiers.js @@ -51,7 +51,6 @@ function open_linkifier_edit_form(linkifier_id) { pattern: linkifier.pattern, url_format_string: linkifier.url_format, }); - const modal_parent = $("#linkifier-edit-form-modal-container"); function submit_linkifier_form() { const change_linkifier_button = $(".dialog_submit_button"); @@ -99,7 +98,6 @@ function open_linkifier_edit_form(linkifier_id) { dialog_widget.launch({ html_heading: $t_html({defaultMessage: "Edit linkfiers"}), - parent: modal_parent, html_body, on_click: submit_linkifier_form, fade: true, diff --git a/static/js/settings_org.js b/static/js/settings_org.js index 2de8f1faec..6e7e9fbec7 100644 --- a/static/js/settings_org.js +++ b/static/js/settings_org.js @@ -1235,10 +1235,8 @@ export function build_page() { } const html_body = render_settings_deactivate_realm_modal(); - const modal_parent = $(".organization-box"); confirm_dialog.launch({ - parent: modal_parent, html_heading: $t_html({defaultMessage: "Deactivate organization"}), help_link: "/help/deactivate-your-organization", html_body, diff --git a/static/js/settings_user_groups.js b/static/js/settings_user_groups.js index f41330439c..92ee65e563 100644 --- a/static/js/settings_user_groups.js +++ b/static/js/settings_user_groups.js @@ -353,15 +353,11 @@ export function set_up() { }); } - // This is mostly important for styling concerns. - const modal_parent = $("#settings_content"); - const html_body = render_confirm_delete_user({ group_name: user_group.name, }); confirm_dialog.launch({ - parent: modal_parent, html_heading: $t_html({defaultMessage: "Delete user group"}), html_body, on_click: delete_user_group, diff --git a/static/js/settings_users.js b/static/js/settings_users.js index 7a82e3990f..dd858f95a6 100644 --- a/static/js/settings_users.js +++ b/static/js/settings_users.js @@ -419,7 +419,6 @@ function get_human_profile_data(fields_user_pills) { function confirm_deactivation(row, user_id, status_field) { const user = people.get_by_user_id(user_id); - const modal_parent = $("#settings_content .organization-box"); const opts = { username: user.full_name, email: user.email, @@ -443,7 +442,6 @@ function confirm_deactivation(row, user_id, status_field) { } confirm_dialog.launch({ - parent: modal_parent, html_heading: $t_html({defaultMessage: "Deactivate {email}"}, {email: user.email}), html_body, on_click: handle_confirm, @@ -539,7 +537,6 @@ function handle_human_form(tbody, status_field) { disable_role_dropdown: person.is_owner && !page_params.is_owner, }); - const modal_parent = $("#user-info-form-modal-container"); let fields_user_pills; function set_role_dropdown_and_fields_user_pills() { @@ -584,7 +581,6 @@ function handle_human_form(tbody, status_field) { dialog_widget.launch({ html_heading: $t_html({defaultMessage: "Change user info and roles"}), - parent: modal_parent, html_body, on_click: submit_user_details, post_render: set_role_dropdown_and_fields_user_pills, @@ -610,8 +606,6 @@ function handle_bot_form(tbody, status_field) { full_name: bot.full_name, }); - const modal_parent = $("#user-info-form-modal-container"); - let owner_widget; function submit_bot_details() { @@ -656,7 +650,6 @@ function handle_bot_form(tbody, status_field) { dialog_widget.launch({ html_heading: $t_html({defaultMessage: "Change bot info and owner"}), - parent: modal_parent, html_body, on_click: submit_bot_details, post_render: get_bot_owner_widget, diff --git a/static/js/starred_messages_ui.js b/static/js/starred_messages_ui.js index d017cc1c7e..7affbbe077 100644 --- a/static/js/starred_messages_ui.js +++ b/static/js/starred_messages_ui.js @@ -1,5 +1,3 @@ -import $ from "jquery"; - import render_confirm_unstar_all_messages from "../templates/confirm_dialog/confirm_unstar_all_messages.hbs"; import render_confirm_unstar_all_messages_in_topic from "../templates/confirm_dialog/confirm_unstar_all_messages_in_topic.hbs"; @@ -9,11 +7,9 @@ import * as message_flags from "./message_flags"; import * as stream_data from "./stream_data"; export function confirm_unstar_all_messages() { - const modal_parent = $(".left-sidebar-modal-holder"); const html_body = render_confirm_unstar_all_messages(); confirm_dialog.launch({ - parent: modal_parent, html_heading: $t_html({defaultMessage: "Unstar all messages"}), html_body, on_click: message_flags.unstar_all_messages, @@ -30,14 +26,12 @@ export function confirm_unstar_all_messages_in_topic(stream_id, topic) { return; } - const modal_parent = $(".left-sidebar-modal-holder"); const html_body = render_confirm_unstar_all_messages_in_topic({ stream_name, topic, }); confirm_dialog.launch({ - parent: modal_parent, html_heading: $t_html({defaultMessage: "Unstar messages in topic"}), html_body, on_click, diff --git a/static/js/stream_create.js b/static/js/stream_create.js index 109e7fd511..2bf07b63ea 100644 --- a/static/js/stream_create.js +++ b/static/js/stream_create.js @@ -455,14 +455,12 @@ export function set_up_handlers() { } if (principals.length >= 50) { - const modal_parent = $("#subscription_overlay"); const html_body = render_subscription_invites_warning_modal({ stream_name, count: principals.length, }); confirm_dialog.launch({ - parent: modal_parent, html_heading: $t_html({defaultMessage: "Large number of subscribers"}), html_body, on_click: () => { diff --git a/static/js/stream_edit.js b/static/js/stream_edit.js index abac02bdc2..722e7ee22b 100644 --- a/static/js/stream_edit.js +++ b/static/js/stream_edit.js @@ -914,11 +914,9 @@ export function initialize() { } if (sub.invite_only && people.is_my_user_id(target_user_id)) { - const modal_parent = $("#subscriptions_table"); const html_body = render_unsubscribe_private_stream_modal(); confirm_dialog.launch({ - parent: modal_parent, html_heading: $t_html( {defaultMessage: "Unsubscribe from {stream_name}"}, {stream_name: sub.name}, @@ -941,7 +939,7 @@ export function initialize() { const stream_row = $( `#subscriptions_table div.stream-row[data-stream-id='${CSS.escape(sub.stream_id)}']`, ); - stream_settings_ui.sub_or_unsub(sub, false, stream_row); + stream_settings_ui.sub_or_unsub(sub, stream_row); if (!sub.subscribed) { open_edit_panel_for_row(stream_row); @@ -978,14 +976,12 @@ export function initialize() { archive_stream(stream_id, $(".stream_change_property_info"), row); } - const modal_parent = $("#subscription_overlay"); const stream_name = stream_data.maybe_get_stream_name(stream_id); const html_body = render_settings_deactivation_stream_modal({ stream_name, }); confirm_dialog.launch({ - parent: modal_parent, html_heading: $t_html( {defaultMessage: "Archive stream {stream}"}, {stream: stream_name}, diff --git a/static/js/stream_popover.js b/static/js/stream_popover.js index c20fc328de..c62a4b9b96 100644 --- a/static/js/stream_popover.js +++ b/static/js/stream_popover.js @@ -543,7 +543,7 @@ export function register_stream_handlers() { $(this).closest(".popover").fadeOut(500).delay(500).remove(); const sub = stream_popover_sub(e); - stream_settings_ui.sub_or_unsub(sub, true); + stream_settings_ui.sub_or_unsub(sub); e.preventDefault(); e.stopPropagation(); }); @@ -664,11 +664,9 @@ export function register_topic_handlers() { hide_topic_popover(); - const modal_parent = $("#delete-topic-modal-holder"); const html_body = render_delete_topic_modal(args); confirm_dialog.launch({ - parent: modal_parent, html_heading: $t_html({defaultMessage: "Delete topic"}), help_link: "/help/delete-a-topic", html_body, diff --git a/static/js/stream_settings_ui.js b/static/js/stream_settings_ui.js index 94e9dedeea..42db17586e 100644 --- a/static/js/stream_settings_ui.js +++ b/static/js/stream_settings_ui.js @@ -799,7 +799,7 @@ export function keyboard_sub() { const active_data = get_active_data(); const row_data = get_row_data(active_data.row); if (row_data) { - sub_or_unsub(row_data.object, false); + sub_or_unsub(row_data.object); } } @@ -949,14 +949,9 @@ export function open_create_stream() { browser_history.update("#streams/new"); } -export function unsubscribe_from_private_stream(sub, from_stream_popover) { - let modal_parent = $("#subscriptions_table"); +export function unsubscribe_from_private_stream(sub) { const html_body = render_unsubscribe_private_stream_modal(); - if (from_stream_popover) { - modal_parent = $(".left-sidebar-modal-holder"); - } - function unsubscribe_from_stream() { let stream_row; if (overlays.streams_open()) { @@ -969,7 +964,6 @@ export function unsubscribe_from_private_stream(sub, from_stream_popover) { } confirm_dialog.launch({ - parent: modal_parent, html_heading: $t_html( {defaultMessage: "Unsubscribe from {stream_name}"}, {stream_name: sub.name}, @@ -980,11 +974,11 @@ export function unsubscribe_from_private_stream(sub, from_stream_popover) { }); } -export function sub_or_unsub(sub, from_stream_popover, stream_row) { +export function sub_or_unsub(sub, stream_row) { if (sub.subscribed) { // TODO: This next line should allow guests to access web-public streams. if (sub.invite_only || page_params.is_guest) { - unsubscribe_from_private_stream(sub, from_stream_popover); + unsubscribe_from_private_stream(sub); return; } ajaxUnsubscribe(sub, stream_row);