mirror of
https://github.com/zulip/zulip.git
synced 2025-11-03 21:43:21 +00:00
043b55b5af
This is a common UX pattern for forms - a user would expect the input to be submitted on hitting enter. So, create a 'keypress' event listener on the input field for the new status, which calls 'submit_new_status' on enter key press.
105 lines
2.9 KiB
JavaScript
105 lines
2.9 KiB
JavaScript
exports.input_field = function () {
|
|
return $('.user_status_overlay input.user_status');
|
|
};
|
|
|
|
exports.submit_button = function () {
|
|
return $('.user_status_overlay .set_user_status');
|
|
};
|
|
|
|
exports.open_overlay = function () {
|
|
const overlay = $(".user_status_overlay");
|
|
overlays.open_overlay({
|
|
name: 'user_status_overlay',
|
|
overlay: overlay,
|
|
on_close: function () {},
|
|
});
|
|
|
|
const user_id = people.my_current_user_id();
|
|
const old_status_text = user_status.get_status_text(user_id);
|
|
const field = exports.input_field();
|
|
field.val(old_status_text);
|
|
field.select();
|
|
field.focus();
|
|
exports.toggle_clear_message_button();
|
|
|
|
const button = exports.submit_button();
|
|
button.attr('disabled', true);
|
|
};
|
|
|
|
exports.close_overlay = function () {
|
|
overlays.close_overlay('user_status_overlay');
|
|
};
|
|
|
|
exports.submit_new_status = function () {
|
|
const user_id = people.my_current_user_id();
|
|
let old_status_text = user_status.get_status_text(user_id) || '';
|
|
old_status_text = old_status_text.trim();
|
|
const new_status_text = exports.input_field().val().trim();
|
|
|
|
if (old_status_text === new_status_text) {
|
|
exports.close_overlay();
|
|
return;
|
|
}
|
|
|
|
user_status.server_update({
|
|
status_text: new_status_text,
|
|
success: function () {
|
|
exports.close_overlay();
|
|
},
|
|
});
|
|
};
|
|
|
|
exports.update_button = function () {
|
|
const user_id = people.my_current_user_id();
|
|
let old_status_text = user_status.get_status_text(user_id) || '';
|
|
old_status_text = old_status_text.trim();
|
|
const new_status_text = exports.input_field().val().trim();
|
|
const button = exports.submit_button();
|
|
|
|
if (old_status_text === new_status_text) {
|
|
button.attr('disabled', true);
|
|
} else {
|
|
button.attr('disabled', false);
|
|
}
|
|
};
|
|
|
|
exports.toggle_clear_message_button = function () {
|
|
if (exports.input_field().val() !== '') {
|
|
$('#clear_status_message_button').prop('disabled', false);
|
|
} else {
|
|
$('#clear_status_message_button').prop('disabled', true);
|
|
}
|
|
};
|
|
|
|
exports.clear_message = function () {
|
|
const field = exports.input_field();
|
|
field.val('');
|
|
$('#clear_status_message_button').prop('disabled', true);
|
|
};
|
|
|
|
exports.initialize = function () {
|
|
$('body').on('click', '.user_status_overlay .set_user_status', function () {
|
|
exports.submit_new_status();
|
|
});
|
|
|
|
$('body').on('keypress', '.user_status_overlay .user_status', function (event) {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
|
|
exports.submit_new_status();
|
|
}
|
|
});
|
|
|
|
$('body').on('keyup', '.user_status_overlay input.user_status', function () {
|
|
exports.update_button();
|
|
exports.toggle_clear_message_button();
|
|
});
|
|
|
|
$('#clear_status_message_button').on('click', function () {
|
|
exports.clear_message();
|
|
exports.update_button();
|
|
});
|
|
};
|
|
|
|
window.user_status_ui = exports;
|