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
// have multiple buttons that need confirmation.
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);
@ -63,7 +63,7 @@ exports.launch = function (conf) {
// Set up handlers.
yes_button.on('click', function () {
overlays.close_modal('confirm_dialog_modal');
overlays.close_modal('#confirm_dialog_modal');
conf.on_click();
});
@ -72,7 +72,7 @@ exports.launch = function (conf) {
});
// Open the modal
overlays.open_modal('confirm_dialog_modal');
overlays.open_modal('#confirm_dialog_modal');
};
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");
return;
}
return $(".modal.in").attr("id");
return '#' + $(".modal.in").attr("id");
};
exports.open_overlay = function (opts) {
@ -101,9 +101,14 @@ exports.open_overlay = function (opts) {
};
};
exports.open_modal = function (name) {
if (name === undefined) {
blueslip.error('Undefined name was passed into open_modal');
exports.open_modal = function (selector) {
if (selector === undefined) {
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;
}
@ -113,14 +118,15 @@ exports.open_modal = function (name) {
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
exports.disable_background_mouse_events();
// Remove previous alert messages from modal, if exists.
$("#" + name).find(".alert").hide();
$("#" + name).find(".alert-notification").html("");
elem.find(".alert").hide();
elem.find(".alert-notification").html("");
};
exports.close_overlay = function (name) {
@ -160,9 +166,9 @@ exports.close_active = function () {
exports.close_overlay(open_overlay_name);
};
exports.close_modal = function (name) {
if (name === undefined) {
blueslip.error('Undefined name was passed into close_modal');
exports.close_modal = function (selector) {
if (selector === undefined) {
blueslip.error('Undefined selector was passed into close_modal');
return;
}
@ -171,15 +177,16 @@ exports.close_modal = function (name) {
return;
}
if (exports.active_modal() !== name) {
blueslip.error("Trying to close " + name +
if (exports.active_modal() !== selector) {
blueslip.error("Trying to close " + selector +
" modal when " + exports.active_modal() + " is open.");
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.
exports.enable_background_mouse_events();

View File

@ -342,7 +342,7 @@ exports.set_up = function () {
$('#api_key_button').click(function (e) {
setup_api_key_modal();
overlays.open_modal('api_key_modal');
overlays.open_modal('#api_key_modal');
e.preventDefault();
e.stopPropagation();
});
@ -361,14 +361,14 @@ exports.set_up = function () {
e.stopPropagation();
if (exports.user_can_change_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) {
e.preventDefault();
e.stopPropagation();
overlays.open_modal('change_password_modal');
overlays.open_modal('#change_password_modal');
$('#pw_change_controls').show();
if (page_params.realm_password_auth_enabled !== false) {
// zxcvbn.js is pretty big, and is only needed on password
@ -419,7 +419,7 @@ exports.set_up = function () {
const opts = {
success_continuation: function () {
overlays.close_modal("change_password_modal");
overlays.close_modal("#change_password_modal");
},
error_msg_element: change_password_error,
};
@ -443,7 +443,7 @@ exports.set_up = function () {
const opts = {
success_continuation: function () {
overlays.close_modal("change_full_name_modal");
overlays.close_modal("#change_full_name_modal");
},
error_msg_element: change_full_name_error,
};
@ -464,7 +464,7 @@ exports.set_up = function () {
const email_msg = render_settings_dev_env_email_access();
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,
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.stopPropagation();
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();
$('.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) {
e.preventDefault();
e.stopPropagation();
overlays.open_modal('edit_bot_modal');
overlays.open_modal('#edit_bot_modal');
const li = $(e.currentTarget).closest('li');
const bot_id = parseInt(li.find('.bot_info').attr('data-user-id'), 10);
const bot = bot_data.get(bot_id);
@ -475,13 +475,13 @@ exports.set_up = function () {
image_version += 1;
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) {
loading.destroy_indicator(spinner);
edit_button.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);
$("#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();
@ -57,7 +57,7 @@ exports.set_up = function () {
$("#default_language_modal .language").click(function (e) {
e.preventDefault();
e.stopPropagation();
overlays.close_modal('default_language_modal');
overlays.close_modal('#default_language_modal');
const $link = $(e.target).closest("a[data-code]");
const setting_value = $link.attr('data-code');
@ -74,7 +74,7 @@ exports.set_up = function () {
$('#default_language').on('click', function (e) {
e.preventDefault();
e.stopPropagation();
overlays.open_modal('default_language_modal');
overlays.open_modal('#default_language_modal');
});
$('#demote_inactive_streams').change(function () {

View File

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

View File

@ -320,7 +320,7 @@ function open_user_info_form_modal(person) {
const user_info_form_modal = $(html);
const modal_container = $('#user-info-form-modal-container');
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) {
// 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);
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,
data: data,
success: function () {
overlays.close_modal('stream_privacy_modal');
overlays.close_modal('#stream_privacy_modal');
$("#stream_privacy_modal").remove();
// 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);
$("#stream_privacy_modal").remove();
$("#subscriptions_table").append(change_privacy_modal);
overlays.open_modal('stream_privacy_modal');
overlays.open_modal('#stream_privacy_modal');
e.preventDefault();
e.stopPropagation();
});
@ -665,12 +665,12 @@ exports.initialize = function () {
});
$("#deactivation_stream_modal").remove();
$("#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) {
const stream_id = $(e.target).data("stream-id");
overlays.close_modal('deactivation_stream_modal');
overlays.close_modal('#deactivation_stream_modal');
$("#deactivation_stream_modal").remove();
if (!stream_id) {
ui_report.message(i18n.t("Invalid stream id"), $(".stream_change_property_info"), 'alert-error');