Ready to implement conversation message writing notifier

assets/css/components/conversations/writingNotifier.css

@@ -0,0 +1,12 @@
+/**
+ * Conversation message writing notifier
+ */
+
+.user-writing-message {
+    font-size: 80%;
+    font-style: italic;
+}
+
+#conversationsElem .user-writing-message {
+    margin-top: -12px;
+}

assets/js/common/ws.js

@@ -197,6 +197,10 @@ class UserWebSocket {
 				SendEvent("newNumberUnreadConvs", msg.data)
 				break;
 			
+			case "writing_message_in_conv":
+				SendEvent("WritingMessageInConv", msg.data);
+				break;
+
 			case "new_conv_message":
 				SendEvent("newConvMessage", msg.data);
 				break;

assets/js/components/conversations/chatWindows.js

@@ -130,6 +130,8 @@ const ConvChatWindow = {
 			class: "create-message-form"
 		});
 
+		new ConversationWritingNotifier(conversationFormContainer, infosBox.conversationID)
+
 		//Create input group
 		var inputGroup = createElem2({
 			appendTo: conversationFormContainer,

assets/js/components/conversations/writingNotifier.js

@@ -0,0 +1,31 @@
+/**
+ * Notify when a user is writing a new message
+ * in a conversation
+ * 
+ * @author Pierre Hubert
+ */
+
+class ConversationWritingNotifier {
+    constructor(target, convID) {
+        this.messageArea = createElem2({
+            appendTo: target,
+            type: "div",
+            class: "user-writing-message"
+        })
+
+        this.setText("hello world for conv " + convID)
+    }
+
+    /**
+     * Update message. If message is empty, hide the area
+     * 
+     * @param {String} msg 
+     */
+    setText(msg) {
+        if(msg.length == 0)
+            return this.messageArea.style.display = "none";
+        
+        this.messageArea.style.display = "block";
+        this.messageArea.innerHTML = msg;
+    }
+}

assets/js/pages/conversations/conversation.js

@@ -407,6 +407,8 @@ const ConversationPageConvPart = {
 			emptyElem(formContainer);
 		}
 
+		new ConversationWritingNotifier(formContainer, this._conv_info.id)
+
 		//Add message input
 		var inputGroup = createElem2({
 			appendTo: formContainer,

system/config/dev.config.php

@@ -208,6 +208,7 @@ class Dev {
 			"css/components/conversations/windows.css",
 			"css/components/conversations/list.css",
 			"css/components/conversations/unreadDropdown.css",
+			"css/components/conversations/writingNotifier.css",
 			
 			//User selector stylesheet
 			"css/components/userSelect/userSelect.css",
@@ -405,6 +406,7 @@ class Dev {
 			"js/components/conversations/utils.js",
 			"js/components/conversations/unreadDropdown.js",
 			"js/components/conversations/messageEditor.js",
+			"js/components/conversations/writingNotifier.js",
 			
 			//User selector
 			"js/components/userSelect/userSelect.js",