Arrow up also edits message

masks/chat.html

@@ -609,38 +609,36 @@ function keyController(e)
 	switch(e.keyCode)
 	{
 		case 13 : //enter
-			$this = databap.getMainElem('#message');
+			var chat_message = $MsgInput.val();
-			var chat_message = $this.val();
 			var bSuccess = true;
 			if(chat_message.substr(0, 7) == '/join #') joinChan(chat_message.substr(7));
 			else if(chat_message.substr(0, 7) == '/quit #') quitChan(getChanKeyName(chat_message.substr(7)));
 			else if(chat_message == '/help') displayHelp();
 			else if(chat_message.substr(0, 8) == '/invite ') invite($.trim(chat_message.substr(8)), currentChan());
+			else if(chat_message != '' && $MsgInput.data('orig_msg_id')) editMessage($MsgInput.data('orig_msg_id'), chat_message);
 			else if(chat_message != '') bSuccess = postMessage();
 
 			if(bSuccess)
 			{
-				databap.vars.prev_chat_value = chat_message;
+				$MsgInput.val('');
-				$this.val('');
 			}
 			break;
 		case 27 : //echap
 			databap.getMainElem('#message').val('');
 			break;
 		case 38 : //arrow up
-			$this = databap.getMainElem('#message');
+			var $LastMsg = databap.getMainElem('#chat_messages').find('p.U[data-id-user='+databap.vars.user_id+'], p.P[data-id-user='+databap.vars.user_id+']').last();
-			var chat_message = $this.val();
+			if($MsgInput.val()=='' && $LastMsg.length)
-			if(chat_message=='' && typeof databap.vars.prev_chat_value !== 'undefined' && databap.vars.prev_chat_value!='')
 			{
-				$this.val(databap.vars.prev_chat_value);
+				$MsgInput.val($LastMsg.data('orig_msg'));
+				$MsgInput.data('orig_msg_id', $LastMsg.data('id'));
 			}
 			break;
 		case 40 : //arrow down
-			$this = databap.getMainElem('#message');
+			if($MsgInput.data('orig_msg_id'))
-			var chat_message = $this.val();
-			if(typeof databap.vars.prev_chat_value !== 'undefined' && databap.vars.prev_chat_value==chat_message)
 			{
-				$this.val('');
+				$MsgInput.val('');
+				$MsgInput.data('orig_msg_id', '');
 			}
 			break;
 		case 9 : //tab
@@ -842,6 +840,7 @@ function addMessage(message_info, bReset)
 				let $Msg = databap.getMainElem('#chat_messages').find('p[data-id='+message_info.id_message_ref+']');
 				$Msg.find('.msg_txt').text(message_info.message);
 				$Msg.find('.status').show().text('modifié');
+				$Msg.data('orig_msg', message_info.message);
 			}
 			else {
 				msg_body = sMsgPrefix+'<span class="msg_txt text'+(message_info.id_user==databap.vars.user_id?' editable':'')+'">'+message_info.message+'</span>';
@@ -873,16 +872,18 @@ function addMessage(message_info, bReset)
 			msg_body = '<span class="text action">'+message_info.nickname+' '+message_info.message+'</span>';
 			break;
 		case databap.consts.msg_types['private']:
-			if(message_info.id_message_ref) { //edit user message
-				let $Msg = databap.getMainElem('#chat_messages').find('p[data-id='+message_info.id_message_ref+']');
-				$Msg.find('.msg_txt').text(message_info.message);
-				$Msg.find('.status').show().text('modifié');
-			}
-			else {
 			var slicePos = message_info.message.indexOf(' ');
 			var msgTargetUser = message_info.message.substr(1, slicePos - 1);
 			var msg = message_info.message.slice(slicePos + 1);
-				msg_body = '<a class="user clickable" title="Ecrire un PM &agrave; '+message_info.nickname+'">'+message_info.nickname+'</a><span class="console"> <span class="highlight">&#64;'+msgTargetUser+'</span></span><span class="msg_txt text'+(message_info.id_user==databap.vars.user_id?' editable':'')+'">'+msg+'</span>';
+			if(message_info.id_message_ref) { //edit user message
+				let $Msg = databap.getMainElem('#chat_messages').find('p[data-id='+message_info.id_message_ref+']');
+				$Msg.find('.highlight').text(msgTargetUser);
+				$Msg.find('.msg_txt').text(msg);
+				$Msg.find('.status').show().text('modifié');
+				$Msg.data('orig_msg', message_info.message);
+			}
+			else {
+				msg_body = '<a class="user clickable" title="Ecrire un PM &agrave; '+message_info.nickname+'">'+message_info.nickname+'</a><span class="console"> <span class="highlight">'+msgTargetUser+'</span></span><span class="msg_txt text'+(message_info.id_user==databap.vars.user_id?' editable':'')+'">'+msg+'</span>';
 				sNotif = message_info.nickname+' @'+msgTargetUser+' : '+msg;
 			}
 			break;
@@ -958,7 +959,8 @@ function addMessage(message_info, bReset)
 		}
 
 		//Adding message to channel panel
-		$Message = $('<p>', {'class':message_info.msg_class+' class_'+sChanKeyName+' hide round_right', 'data-id':message_info.id})
+		$Message = $('<p>', {'class':message_info.msg_class+' class_'+sChanKeyName+' hide round_right', 'data-id':message_info.id, 'data-id-user':message_info.id_user})
+					.data('orig_msg', message_info.message)
 					.append($('<span>', {'class':'time'}).text(((message_info.date==databap.consts.cur_date)?'':message_info.date+' - ')+message_info.time))
 					.append($Msg)
 					.append($('<span>', {'class':'status'}));
@@ -967,7 +969,7 @@ function addMessage(message_info, bReset)
 		databap.getMainElem('#chat_messages').append($Message);
 
 		//Edit own message
-		$Message.find('.editable').hover(toggleEditButton).click(editMessage);
+		$Message.find('.editable').hover(toggleEditButton).click(onMessageEditClick);
 
 		//Unread messages
 		if(!bReset && !bSystemMsg /* && message_info.id_user!=databap.vars.user_id */)
@@ -1003,43 +1005,57 @@ function toggleEditButton()
 	else $Editable.after($('<span>', {'class':'text edit-btn'}).append($('<i>', {'class': 'fa fa-fw fa-c-edit'})));
 }
 
-function editMessage()
+function onMessageEditClick()
 {
 	let $Editable = $(this);
 	$Editable.prop('contenteditable', 'true').focus();
 
 	if($Editable.data('backup') == null)
 	{
+		let $Message = $Editable.parents('p');
+		let sPreContent = '';
+		if($Message.hasClass('P')) sPreContent = '@'+$Message.find('.highlight').text()+' ';
+
 		$Editable
 			.data('backup', $Editable.text())
+			.data('pre', sPreContent)
 			.on('focusout keydown', function(e) {
+				let $This = $(this);
 				if(e.type == 'focusout' || e.which == 13) {
 					e.preventDefault();
-					var sOldMsg = $Editable.data('backup');
+					var sOldMsg = $This.data('backup');
-					var sNewMsg = $Editable.text();
+					var sNewMsg = $This.text();
+
 					if(sOldMsg != sNewMsg) {
-						$Editable.data('backup', sNewMsg);
+						$This.data('backup', sNewMsg);
-						$Editable.prop('contenteditable', 'false');
+						$This.prop('contenteditable', 'false');
+
+						editMessage($This.parents('p').data('id'), $This.data('pre')+sNewMsg, function(){$This.data('backup', sOldMsg);});
+					}
+				}
+			});
+	}
+}
+
+function editMessage(iMsgId, sNewMsg, fOnError)
+{
+	fOnError = fOnError || function(){};
 	databap.getInfo
 	(
 		'edit_message',
 		function(asResult)
 		{
+			$MsgInput.data('orig_msg_id', '').focus();
 			refresh_chat();
-								$MsgInput.focus();
 		},
-							{message_id: $Editable.parents('p').data('id'), message: sNewMsg},
+		{message_id: iMsgId, message: sNewMsg},
 		'json',
 		function(textStatus)
 		{
-								$Editable.data('backup', sOldMsg);
+			fOnError();
 			databap.showError(textStatus);
 		}
 	);
-					}
-				}
-			});
-	}
 }
 
 function toggleImages()

style/databap.scss

@@ -785,6 +785,10 @@
 }
 #chat_messages p span.highlight {
 	color:$col_error;
+
+	&::before {
+		content: '@';
+	}
 }
 #chat_messages p span.chan_link {
 	font-weight:bold;