modals: Use selectors for open_modal/close_modal.

When reading the calling code, it's helpful to know
that we're really just passing in a selector.  The
calls to open_modal/close_modal are nicer now to
reconcile with surrounding code, and you don't have
to guess whether the parameter is some kind of
"key" value--it really just refers directly to a DOM
element.

There is nothing user-visible about this change, but
the blueslip info messages now include the hash:

    open modal: open #change_email_modal
This commit is contained in:
Steve Howell 2020-05-09 13:45:54 +00:00 committed by Tim Abbott
parent d3aded2ae7
commit 2272c5e6eb
8 changed files with 47 additions and 40 deletions

View File

@ -51,7 +51,7 @@ exports.launch = function (conf) {
// Close any existing modals--on settings screens you can // Close any existing modals--on settings screens you can
// have multiple buttons that need confirmation. // have multiple buttons that need confirmation.
if (overlays.is_modal_open()) { if (overlays.is_modal_open()) {
overlays.close_modal('confirm_dialog_modal'); overlays.close_modal('#confirm_dialog_modal');
} }
confirm_dialog.find('.confirm_dialog_heading').html(conf.html_heading); confirm_dialog.find('.confirm_dialog_heading').html(conf.html_heading);
@ -63,7 +63,7 @@ exports.launch = function (conf) {
// Set up handlers. // Set up handlers.
yes_button.on('click', function () { yes_button.on('click', function () {
overlays.close_modal('confirm_dialog_modal'); overlays.close_modal('#confirm_dialog_modal');
conf.on_click(); conf.on_click();
}); });
@ -72,7 +72,7 @@ exports.launch = function (conf) {
}); });
// Open the modal // Open the modal
overlays.open_modal('confirm_dialog_modal'); overlays.open_modal('#confirm_dialog_modal');
}; };
window.confirm_dialog = exports; window.confirm_dialog = exports;

View File

@ -59,7 +59,7 @@ exports.active_modal = function () {
blueslip.error("Programming error — Called active_modal when there is no modal open"); blueslip.error("Programming error — Called active_modal when there is no modal open");
return; return;
} }
return $(".modal.in").attr("id"); return '#' + $(".modal.in").attr("id");
}; };
exports.open_overlay = function (opts) { exports.open_overlay = function (opts) {
@ -101,9 +101,14 @@ exports.open_overlay = function (opts) {
}; };
}; };
exports.open_modal = function (name) { exports.open_modal = function (selector) {
if (name === undefined) { if (selector === undefined) {
blueslip.error('Undefined name was passed into open_modal'); blueslip.error('Undefined selector was passed into open_modal');
return;
}
if (selector[0] !== '#') {
blueslip.error('Non-id-based selector passed in to open_modal: ' + selector);
return; return;
} }
@ -113,14 +118,15 @@ exports.open_modal = function (name) {
return; return;
} }
blueslip.debug('open modal: ' + name); blueslip.debug('open modal: ' + selector);
$("#" + name).modal("show").attr("aria-hidden", false); const elem = $(selector).expectOne();
elem.modal("show").attr("aria-hidden", false);
// Disable background mouse events when modal is active // Disable background mouse events when modal is active
exports.disable_background_mouse_events(); exports.disable_background_mouse_events();
// Remove previous alert messages from modal, if exists. // Remove previous alert messages from modal, if exists.
$("#" + name).find(".alert").hide(); elem.find(".alert").hide();
$("#" + name).find(".alert-notification").html(""); elem.find(".alert-notification").html("");
}; };
exports.close_overlay = function (name) { exports.close_overlay = function (name) {
@ -160,9 +166,9 @@ exports.close_active = function () {
exports.close_overlay(open_overlay_name); exports.close_overlay(open_overlay_name);
}; };
exports.close_modal = function (name) { exports.close_modal = function (selector) {
if (name === undefined) { if (selector === undefined) {
blueslip.error('Undefined name was passed into close_modal'); blueslip.error('Undefined selector was passed into close_modal');
return; return;
} }
@ -171,15 +177,16 @@ exports.close_modal = function (name) {
return; return;
} }
if (exports.active_modal() !== name) { if (exports.active_modal() !== selector) {
blueslip.error("Trying to close " + name + blueslip.error("Trying to close " + selector +
" modal when " + exports.active_modal() + " is open."); " modal when " + exports.active_modal() + " is open.");
return; return;
} }
blueslip.debug('close modal: ' + name); blueslip.debug('close modal: ' + selector);
$("#" + name).modal("hide").attr("aria-hidden", true); const elem = $(selector).expectOne();
elem.modal("hide").attr("aria-hidden", true);
// Enable mouse events for the background as the modal closes. // Enable mouse events for the background as the modal closes.
exports.enable_background_mouse_events(); exports.enable_background_mouse_events();

View File

@ -342,7 +342,7 @@ exports.set_up = function () {
$('#api_key_button').click(function (e) { $('#api_key_button').click(function (e) {
setup_api_key_modal(); setup_api_key_modal();
overlays.open_modal('api_key_modal'); overlays.open_modal('#api_key_modal');
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
}); });
@ -361,14 +361,14 @@ exports.set_up = function () {
e.stopPropagation(); e.stopPropagation();
if (exports.user_can_change_name()) { if (exports.user_can_change_name()) {
$('#change_full_name_modal').find("input[name='full_name']").val(page_params.full_name); $('#change_full_name_modal').find("input[name='full_name']").val(page_params.full_name);
overlays.open_modal('change_full_name_modal'); overlays.open_modal('#change_full_name_modal');
} }
}); });
$('#change_password').on('click', function (e) { $('#change_password').on('click', function (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
overlays.open_modal('change_password_modal'); overlays.open_modal('#change_password_modal');
$('#pw_change_controls').show(); $('#pw_change_controls').show();
if (page_params.realm_password_auth_enabled !== false) { if (page_params.realm_password_auth_enabled !== false) {
// zxcvbn.js is pretty big, and is only needed on password // zxcvbn.js is pretty big, and is only needed on password
@ -419,7 +419,7 @@ exports.set_up = function () {
const opts = { const opts = {
success_continuation: function () { success_continuation: function () {
overlays.close_modal("change_password_modal"); overlays.close_modal("#change_password_modal");
}, },
error_msg_element: change_password_error, error_msg_element: change_password_error,
}; };
@ -443,7 +443,7 @@ exports.set_up = function () {
const opts = { const opts = {
success_continuation: function () { success_continuation: function () {
overlays.close_modal("change_full_name_modal"); overlays.close_modal("#change_full_name_modal");
}, },
error_msg_element: change_full_name_error, error_msg_element: change_full_name_error,
}; };
@ -464,7 +464,7 @@ exports.set_up = function () {
const email_msg = render_settings_dev_env_email_access(); const email_msg = render_settings_dev_env_email_access();
ui_report.success(email_msg, $("#dev-account-settings-status").expectOne(), 4000); ui_report.success(email_msg, $("#dev-account-settings-status").expectOne(), 4000);
} }
overlays.close_modal('change_email_modal'); overlays.close_modal('#change_email_modal');
}, },
error_msg_element: change_email_error, error_msg_element: change_email_error,
success_msg: i18n.t('Check your email (%s) to confirm the new address.').replace( success_msg: i18n.t('Check your email (%s) to confirm the new address.').replace(
@ -478,7 +478,7 @@ exports.set_up = function () {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
if (!page_params.realm_email_changes_disabled || page_params.is_admin) { if (!page_params.realm_email_changes_disabled || page_params.is_admin) {
overlays.open_modal('change_email_modal'); overlays.open_modal('#change_email_modal');
const email = $('#email_value').text().trim(); const email = $('#email_value').text().trim();
$('.email_change_container').find("input[name='email']").val(email); $('.email_change_container').find("input[name='email']").val(email);
} }

View File

@ -388,7 +388,7 @@ exports.set_up = function () {
$("#active_bots_list").on("click", "button.open_edit_bot_form", function (e) { $("#active_bots_list").on("click", "button.open_edit_bot_form", function (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
overlays.open_modal('edit_bot_modal'); overlays.open_modal('#edit_bot_modal');
const li = $(e.currentTarget).closest('li'); const li = $(e.currentTarget).closest('li');
const bot_id = parseInt(li.find('.bot_info').attr('data-user-id'), 10); const bot_id = parseInt(li.find('.bot_info').attr('data-user-id'), 10);
const bot = bot_data.get(bot_id); const bot = bot_data.get(bot_id);
@ -475,13 +475,13 @@ exports.set_up = function () {
image_version += 1; image_version += 1;
image.find('img').attr('src', data.avatar_url + '&v=' + image_version.toString()); image.find('img').attr('src', data.avatar_url + '&v=' + image_version.toString());
} }
overlays.close_modal('edit_bot_modal'); overlays.close_modal('#edit_bot_modal');
}, },
error: function (xhr) { error: function (xhr) {
loading.destroy_indicator(spinner); loading.destroy_indicator(spinner);
edit_button.show(); edit_button.show();
errors.text(JSON.parse(xhr.responseText).msg).show(); errors.text(JSON.parse(xhr.responseText).msg).show();
overlays.close_modal('edit_bot_modal'); overlays.close_modal('#edit_bot_modal');
}, },
}); });
}, },

View File

@ -34,7 +34,7 @@ exports.set_up = function () {
$(".emojiset_choice[value=" + page_params.emojiset + "]").prop("checked", true); $(".emojiset_choice[value=" + page_params.emojiset + "]").prop("checked", true);
$("#default_language_modal [data-dismiss]").click(function () { $("#default_language_modal [data-dismiss]").click(function () {
overlays.close_modal('default_language_modal'); overlays.close_modal('#default_language_modal');
}); });
const all_display_settings = settings_config.get_all_display_settings(); const all_display_settings = settings_config.get_all_display_settings();
@ -57,7 +57,7 @@ exports.set_up = function () {
$("#default_language_modal .language").click(function (e) { $("#default_language_modal .language").click(function (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
overlays.close_modal('default_language_modal'); overlays.close_modal('#default_language_modal');
const $link = $(e.target).closest("a[data-code]"); const $link = $(e.target).closest("a[data-code]");
const setting_value = $link.attr('data-code'); const setting_value = $link.attr('data-code');
@ -74,7 +74,7 @@ exports.set_up = function () {
$('#default_language').on('click', function (e) { $('#default_language').on('click', function (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
overlays.open_modal('default_language_modal'); overlays.open_modal('#default_language_modal');
}); });
$('#demote_inactive_streams').change(function () { $('#demote_inactive_streams').change(function () {

View File

@ -841,7 +841,7 @@ exports.build_page = function () {
if (org_join_restrictions === 'only_selected_domain') { if (org_join_restrictions === 'only_selected_domain') {
node.show(); node.show();
if (page_params.realm_domains.length === 0) { if (page_params.realm_domains.length === 0) {
overlays.open_modal('realm_domains_modal'); overlays.open_modal('#realm_domains_modal');
} }
} else { } else {
node.hide(); node.hide();
@ -1021,13 +1021,13 @@ exports.build_page = function () {
if (!overlays.is_modal_open()) { if (!overlays.is_modal_open()) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
overlays.open_modal('deactivate-realm-modal'); overlays.open_modal('#deactivate-realm-modal');
} }
}); });
$('#do_deactivate_realm_button').on('click', function () { $('#do_deactivate_realm_button').on('click', function () {
if (overlays.is_modal_open()) { if (overlays.is_modal_open()) {
overlays.close_modal('deactivate-realm-modal'); overlays.close_modal('#deactivate-realm-modal');
} }
channel.post({ channel.post({
url: '/json/realm/deactivate', url: '/json/realm/deactivate',

View File

@ -320,7 +320,7 @@ function open_user_info_form_modal(person) {
const user_info_form_modal = $(html); const user_info_form_modal = $(html);
const modal_container = $('#user-info-form-modal-container'); const modal_container = $('#user-info-form-modal-container');
modal_container.empty().append(user_info_form_modal); modal_container.empty().append(user_info_form_modal);
overlays.open_modal('user-info-form-modal'); overlays.open_modal('#user-info-form-modal');
if (person.is_bot) { if (person.is_bot) {
// Dynamically add the owner select control in order to // Dynamically add the owner select control in order to
@ -499,7 +499,7 @@ exports.on_load_success = function (realm_people_data) {
} }
settings_ui.do_settings_change(channel.patch, url, data, admin_status); settings_ui.do_settings_change(channel.patch, url, data, admin_status);
overlays.close_modal('user-info-form-modal'); overlays.close_modal('#user-info-form-modal');
}); });
}); });

View File

@ -410,7 +410,7 @@ function change_stream_privacy(e) {
url: "/json/streams/" + stream_id, url: "/json/streams/" + stream_id,
data: data, data: data,
success: function () { success: function () {
overlays.close_modal('stream_privacy_modal'); overlays.close_modal('#stream_privacy_modal');
$("#stream_privacy_modal").remove(); $("#stream_privacy_modal").remove();
// The rest will be done by update stream event we will get. // The rest will be done by update stream event we will get.
}, },
@ -529,7 +529,7 @@ exports.initialize = function () {
const change_privacy_modal = render_subscription_stream_privacy_modal(template_data); const change_privacy_modal = render_subscription_stream_privacy_modal(template_data);
$("#stream_privacy_modal").remove(); $("#stream_privacy_modal").remove();
$("#subscriptions_table").append(change_privacy_modal); $("#subscriptions_table").append(change_privacy_modal);
overlays.open_modal('stream_privacy_modal'); overlays.open_modal('#stream_privacy_modal');
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
}); });
@ -665,12 +665,12 @@ exports.initialize = function () {
}); });
$("#deactivation_stream_modal").remove(); $("#deactivation_stream_modal").remove();
$("#subscriptions_table").append(deactivate_stream_modal); $("#subscriptions_table").append(deactivate_stream_modal);
overlays.open_modal('deactivation_stream_modal'); overlays.open_modal('#deactivation_stream_modal');
}); });
$("#subscriptions_table").on("click", "#do_deactivate_stream_button", function (e) { $("#subscriptions_table").on("click", "#do_deactivate_stream_button", function (e) {
const stream_id = $(e.target).data("stream-id"); const stream_id = $(e.target).data("stream-id");
overlays.close_modal('deactivation_stream_modal'); overlays.close_modal('#deactivation_stream_modal');
$("#deactivation_stream_modal").remove(); $("#deactivation_stream_modal").remove();
if (!stream_id) { if (!stream_id) {
ui_report.message(i18n.t("Invalid stream id"), $(".stream_change_property_info"), 'alert-error'); ui_report.message(i18n.t("Invalid stream id"), $(".stream_change_property_info"), 'alert-error');