From 3a55f18b963d9aa20127bd971b421a670e03593f Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Mon, 8 Mar 2021 19:01:51 +0100
Subject: [PATCH] Ready to implement conversation message writing notifier

---
 .../conversations/writingNotifier.css         | 12 +++++++
 assets/js/common/ws.js                        |  4 +++
 .../components/conversations/chatWindows.js   |  2 ++
 .../conversations/writingNotifier.js          | 31 +++++++++++++++++++
 assets/js/pages/conversations/conversation.js |  2 ++
 system/config/dev.config.php                  |  2 ++
 6 files changed, 53 insertions(+)
 create mode 100644 assets/css/components/conversations/writingNotifier.css
 create mode 100644 assets/js/components/conversations/writingNotifier.js

diff --git a/assets/css/components/conversations/writingNotifier.css b/assets/css/components/conversations/writingNotifier.css
new file mode 100644
index 00000000..cc109e7e
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/assets/js/common/ws.js b/assets/js/common/ws.js
index b3084258..e33668ee 100644
--- a/assets/js/common/ws.js
+++ b/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;
diff --git a/assets/js/components/conversations/chatWindows.js b/assets/js/components/conversations/chatWindows.js
index 6b3c08da..e3d43e10 100644
--- a/assets/js/components/conversations/chatWindows.js
+++ b/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,
diff --git a/assets/js/components/conversations/writingNotifier.js b/assets/js/components/conversations/writingNotifier.js
new file mode 100644
index 00000000..e100b7d7
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/assets/js/pages/conversations/conversation.js b/assets/js/pages/conversations/conversation.js
index e54e7c0d..2d2c266d 100644
--- a/assets/js/pages/conversations/conversation.js
+++ b/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,
diff --git a/system/config/dev.config.php b/system/config/dev.config.php
index cdc59c63..0824471d 100644
--- a/system/config/dev.config.php
+++ b/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",