room rename logic

public/language/en-GB/modules.json

@@ -12,6 +12,7 @@
 	"chat.recent-chats": "Recent Chats",
 	"chat.contacts": "Contacts",
 	"chat.message-history": "Message History",
+	"chat.options": "Chat options",
 	"chat.pop-out": "Pop out chat",
 	"chat.minimize": "Minimize",
 	"chat.maximize": "Maximize",
@@ -21,6 +22,10 @@
 	"chat.delete_message_confirm": "Are you sure you wish to delete this message?",
 	"chat.add-users-to-room": "Add users to room",
 	"chat.confirm-chat-with-dnd-user": "This user has set their status to DnD(Do not disturb). Do you still want to chat with them?",
+	"chat.rename-room": "Rename room",
+	"chat.rename-placeholder": "Enter your room name here",
+	"chat.rename-help": "The room name set here will be viewable by all participants in the room.",
+	"chat.in-room": "In this room",
 
 	"composer.compose": "Compose",
 	"composer.show_preview": "Show Preview",

public/src/client/chats.js

@@ -31,10 +31,6 @@ define('forum/chats', [
 		Chats.createAutoComplete($('[component="chat/input"]'));
 		Chats.resizeMainWindow();
 
-		components.get('expanded-chat/controlsToggle').on('click', function () {
-			components.get('expanded-chat/controls').toggleClass('hide');
-		});
-
 		if (env === 'md' || env === 'lg') {
 			Chats.addHotkeys();
 		}
@@ -72,8 +68,7 @@ define('forum/chats', [
 		});
 
 		Chats.addActionHandlers(components.get('chat/messages'), ajaxify.data.roomId);
-
-		Chats.addRenameHandler(ajaxify.data.roomId, $('[component="chat/room/name"]'));
+		Chats.addRenameHandler(ajaxify.data.roomId, components.get('expanded-chat/controls').find('[data-action="rename"]'));
 		Chats.addScrollHandler(ajaxify.data.roomId, ajaxify.data.uid, $('.chat-content'));
 		Chats.addCharactersLeftHandler($('[component="chat/main-wrapper"]'));
 	};
@@ -175,28 +170,39 @@ define('forum/chats', [
 		});
 	};
 
-	Chats.addRenameHandler = function (roomId, inputEl) {
-		var oldName = inputEl.val();
-		inputEl.on('blur keypress', function (ev) {
-			if (ev.type === 'keypress' && ev.keyCode !== 13) {
-				return;
-			}
-			var newName = inputEl.val();
+	Chats.addRenameHandler = function (roomId, buttonEl, roomName) {
+		var modal;
+
+		buttonEl.on('click', function () {
+			Benchpress.parse('partials/modals/rename_room', {
+				name: roomName || ajaxify.data.roomName,
+			}, function (html) {
+				translator.translate(html, function (html) {
+					modal = bootbox.dialog({
+						title: '[[modules:chat.rename-room]]',
+						message: html,
+						buttons: {
+							save: {
+								label: '[[global:save]]',
+								className: 'btn-primary',
+								callback: submit,
+							},
+						},
+					});
+				});
+			});
+		});
 
-			if (oldName === newName) {
-				return;
-			}
+		function submit() {
 			socket.emit('modules.chats.renameRoom', {
 				roomId: roomId,
-				newName: newName,
+				newName: modal.find('#roomName').val(),
 			}, function (err) {
 				if (err) {
 					return app.alertError(err.message);
 				}
-				oldName = newName;
-				inputEl.blur();
 			});
-		});
+		}
 	};
 
 	Chats.addSendHandlers = function (roomId, inputEl, sendEl) {

public/src/modules/chat.js

@@ -251,14 +251,7 @@ define('chat', [
 
 			Chats.addActionHandlers(chatModal.find('[component="chat/messages"]'), data.roomId);
 
-			chatModal.find('[component="chat/controlsToggle"]').on('click', function () {
-				var messagesEl = chatModal.find('[component="chat/messages"]');
-
-				chatModal.find('[component="chat/controls"]').toggle();
-				messagesEl.css('height', module.calculateChatListHeight(chatModal));
-			});
-
-			Chats.addRenameHandler(chatModal.attr('data-roomid'), chatModal.find('[component="chat/room/name"]'));
+			Chats.addRenameHandler(chatModal.attr('data-roomid'), chatModal.find('[data-action="rename"]'), chatModal.attr('data-name'));
 
 			Chats.addSendHandlers(chatModal.attr('data-roomid'), chatModal.find('#chat-message-input'), chatModal.find('#chat-message-send-btn'));