From 55cff329c31f9b300a338159f3c38c9b7c6607ee Mon Sep 17 00:00:00 2001
From: hugogogo <hugogogo@protonmail.com>
Date: Tue, 20 Dec 2022 23:02:45 +0100
Subject: [PATCH] wip handle newline with enter shift

---
 .../chat_node/chat_client/_test_layouts.js    |  2 +-
 tests_hugo/chat_node/chat_client/chat.html    | 93 ++++++++++---------
 .../chat_node/chat_client/chat_add_msg.js     |  8 ++
 .../chat_node/chat_client/chat_send_msg.js    | 42 ++++++++-
 .../chat_node/chat_client/style/chat.css      | 19 +---
 .../chat_node/chat_client/style/chat_msg.css  | 26 +++---
 6 files changed, 114 insertions(+), 76 deletions(-)

diff --git a/tests_hugo/chat_node/chat_client/_test_layouts.js b/tests_hugo/chat_node/chat_client/_test_layouts.js
index 6f4df1a9..743bb720 100644
--- a/tests_hugo/chat_node/chat_client/_test_layouts.js
+++ b/tests_hugo/chat_node/chat_client/_test_layouts.js
@@ -2,7 +2,7 @@
 */
 let test = document.createElement('form');
 test.innerHTML = `
-	<br><br><button onclick="chat_layout(this.innerText)" type="reset">close</button>
+	        <button onclick="chat_layout(this.innerText)" type="reset">close</button>
 	<br><br><button onclick="chat_layout(this.innerText)" type="reset">home</button>
 	<br><br><button onclick="chat_layout(this.innerText)" type="reset">room</button>
 	<br><br><button onclick="chat_layout(this.innerText)" type="reset">new</button>
diff --git a/tests_hugo/chat_node/chat_client/chat.html b/tests_hugo/chat_node/chat_client/chat.html
index 4af28460..a5287245 100644
--- a/tests_hugo/chat_node/chat_client/chat.html
+++ b/tests_hugo/chat_node/chat_client/chat.html
@@ -12,21 +12,21 @@
 		<div class="close" id="chat_box">
 		<!--
 			classes:
-				close       -> layout close
-				home        -> layout home
-				room        -> layout room
-				new         -> layout new
-				settings    -> layout settings
-				room_set    -> layout room_set
-				protected   -> layout protected
-				create      -> layout create
-				mute        -> layout mute
-				user        -> layout user
-					_blocked  -> for user layout : user is blocked
-					_muted    -> for user layout : user is muted
-					_admin    -> for user layout : you are admin
-					_room_set -> for user layout : comes from room_set
-					_settings -> for user layout : comes from settings
+				 1. close       -> layout close
+				 2. home        -> layout home
+				 3. room        -> layout room
+				 4. new         -> layout new
+				 5. settings    -> layout settings
+				 6. room_set    -> layout room_set
+				 7. protected   -> layout protected
+				 8. create      -> layout create
+				 9. mute        -> layout mute
+				10. user        -> layout user
+				11. _blocked    -> for user layout : user is blocked
+				12. _muted      -> for user layout : user is muted
+				13. _admin      -> for user layout : you are admin
+				14. _room_set   -> for user layout : comes from room_set
+				15. _settings   -> for user layout : comes from settings
 
 			classes for layout must replace the entire previous class
 			but classes starting with "_" must be added to existing class
@@ -37,7 +37,6 @@
 			<button class="chat_item chat_new       btn" id="chat_new"        onclick="chat_layout('new')"      title="new"     ><p>new</p></button>
 			<button class="chat_item chat_settings  btn" id="chat_settings"   onclick="chat_layout('settings')" title="settings"><p>settings</p></button>
 			<button class="chat_item chat_room_name btn" id="chat_room_name"  onclick="chat_layout('room_set')"                 ><p>&lt;room_name&gt;</p></button>
-			<button class="chat_item chat_send      btn" id="chat_send"       onclick="send_msg()"         title="send"         ><p>send</p></button>
 			<p      class="chat_item chat_create"        id="chat_create"                                                       >create</p>
 			<p      class="chat_item chat_user"          id="chat_user"                                                         >&lt;user_name&gt;</p>
 
@@ -73,8 +72,8 @@
 					<div class="chat_room_name __show_if_only_child">
 						<p class="__center">/ you have no chat room yet /</p>
 					</div>
-					<!-- placeholders -------
-					-->
+					<!-- placeholders 
+					------------- -->
 					<button class="chat_room_name btn" onclick="chat_layout('room')">
 						<p class="__left">a room</p>
 					</button>
@@ -88,23 +87,6 @@
 				</div>
 			</div>
 
-			<!-- MSG -->
-			<div class="chat_item chat_panel chat_panel_msg" id="chat_panel_msg">
-				<div id="chat_api_msg_thread" class="chat_api">
-					<!-- placeholders -------
-					-->
-					<div class="chat_msg bob">
-						<p class="name">bob</p>
-						<p class="msg">hello</p>
-					</div>
-					<div class="chat_msg me">
-						<p class="name">me</p>
-						<p class="msg">hello</p>
-					</div>
-					<!-- END placeholders -->
-				</div>
-			</div>
-
 			<!-- NEW -->
 			<div class="chat_item chat_panel chat_panel_new" id="chat_panel_new">
 				<button class="chat_create_btn btn"><p>create</p></button>
@@ -113,8 +95,8 @@
 					<div class="__show_if_only_child">
 						<p class="__center">/ there are no public rooms yet /</p>
 					</div>
-					<!-- placeholders -------
-					-->
+					<!-- placeholders
+					------------- -->
 					<button class="chat_room_name btn" onclick="chat_layout('room')">
 						<p class="__left">join room</p>
 					</button>
@@ -135,8 +117,8 @@
 			<div class="chat_item chat_panel chat_panel_settings" id="chat_panel_settings">
 				<p>blocked users :</p>
 				<div id="chat_api_blocked_users" class="chat_api chat_blocked_users list_btn">
-					<!-- placeholders -------
-					-->
+					<!-- placeholders
+					------------- -->
 					<button class="chat_user btn" onclick="chat_layout('user _settings')">
 						<p class="__left blocked">user 1</p>
 					</button>
@@ -161,8 +143,8 @@
 					<div class="chat_public_rooms __show_if_only_child">
 						<p class="__center">/ there are no public rooms yet /</p>
 					</div>
-					<!-- placeholders -------
-					-->
+					<!-- placeholders
+					------------- -->
 					<button class="chat_room_name btn" onclick="chat_layout('user _room_set')">
 						<p class="__left">user 1</p>
 					</button>
@@ -390,15 +372,40 @@
 				</form>
 			</div>
 
+			<!-- MSG -->
+			<div class="chat_item chat_panel chat_panel_msg" id="chat_panel_msg">
+				<div id="chat_api_msg_thread" class="chat_api">
+					<!-- placeholders
+					------------- -->
+					<div class="chat_msg bob">
+						<p class="name">bob</p>
+						<p class="msg">hello</p>
+					</div>
+					<div class="chat_msg me">
+						<p class="name">me</p>
+						<p class="msg">hello</p>
+					</div>
+					<!-- END placeholders -->
+				</div>
+			</div>
+
 			<!-- WRITE -->
 			<div class="chat_item chat_panel chat_panel_write" id="chat_panel_write">
-				<div class="text_area" contenteditable></div>
+				<!--
+				<div class="text_area" id="chat_msg_write" onkeypress="send_msg(event.key, event.shiftKey)" contenteditable="true"></div>
+				<div class="text_area" id="chat_msg_write" onkeypress="" contenteditable="true"></div>
+				<div class="text_area" id="chat_msg_write" contenteditable="true"></div>
+				<textarea class="text_area" id="chat_msg_write" onkeypress="send_if_enter(event)"></textarea>
+				<textarea class="text_area" id="chat_msg_write" onkeyup="send_if_enter(event)"></textarea>
+				-->
+				<div class="text_area" id="chat_msg_write" onkeypress="send_if_enter(event)" contenteditable="true"></div>
 			</div>
+			<!-- send -->
+			<button class="chat_item chat_send btn" id="chat_send" onclick="send_msg()" title="send"><p>send</p></button>
 
 
 			<!-- --------------------------------
 				MODELS
-
 			<div    class="chat_model" id="chat_model_myroom_name">
 			</div>
 			<div    class="chat_model" id="chat_model_msg">
diff --git a/tests_hugo/chat_node/chat_client/chat_add_msg.js b/tests_hugo/chat_node/chat_client/chat_add_msg.js
index f8ae324a..4a8af0e0 100644
--- a/tests_hugo/chat_node/chat_client/chat_add_msg.js
+++ b/tests_hugo/chat_node/chat_client/chat_add_msg.js
@@ -13,6 +13,7 @@ const build_new_message = (from, message) => {
 	const p_name = document.createElement("p");
 	const p_msg = document.createElement("p");
 
+	div.classList.add("chat_msg");
 	div.classList.add(from);
 	p_name.classList.add("name");
 	p_msg.classList.add("msg");
@@ -25,3 +26,10 @@ const build_new_message = (from, message) => {
 	return div;
 }
 
+/*
+	<div class="chat_msg bob">
+		<p class="name">bob</p>
+		<p class="msg">hello</p>
+	</div>
+*/
+
diff --git a/tests_hugo/chat_node/chat_client/chat_send_msg.js b/tests_hugo/chat_node/chat_client/chat_send_msg.js
index dc874784..b29a7deb 100644
--- a/tests_hugo/chat_node/chat_client/chat_send_msg.js
+++ b/tests_hugo/chat_node/chat_client/chat_send_msg.js
@@ -1,14 +1,50 @@
-const send_msg = () => {
-
-	const div_msg = document.getElementById('msg_write');
+function send_msg(evt = null)
+{
+	const div_msg = document.getElementById('chat_msg_write');
 	const msg = div_msg.innerText.trim();
 
 	div_msg.innerText = "";
 	div_msg.focus();
 
+	/*
+	const div_msg = document.getElementById('chat_msg_write');
+	const msg = div_msg.value.trim();
+
+	div_msg.value = "";
+	div_msg.focus();
+	*/
+
 	if (msg.length > 0) {
 		socket.emit('sendmsg', msg);
 		add_message("me", msg);
 	}
 }
 
+function send_if_enter(evt)
+{
+	//let test = new Event('test');
+	let test = new evt;
+	test = evt;
+	console.log("evt:");
+	console.log(evt);
+	console.log("test:");
+	console.log(test);
+
+	// change height of textarea according to content
+	//evt.target.style.height = evt.target.scrollHeight + "px";
+
+	if (evt.key != "Enter")
+		return;
+	if (evt.shiftKey == true)
+	{
+		console.log(evt.target);
+		console.log(evt.target.value);
+		console.log(evt.target.innerText);
+		evt.preventDefault();
+		// https://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript/20548330#20548330
+		evt.target.dispatchEvent(new Event('Enter'));
+		return;
+	}
+	evt.preventDefault();
+	send_msg();
+}
diff --git a/tests_hugo/chat_node/chat_client/style/chat.css b/tests_hugo/chat_node/chat_client/style/chat.css
index 862b4f71..7b5abf72 100644
--- a/tests_hugo/chat_node/chat_client/style/chat.css
+++ b/tests_hugo/chat_node/chat_client/style/chat.css
@@ -1,6 +1,5 @@
 
 /*
-cxv
 */
 
 @import 'chat__global.css';
@@ -25,23 +24,9 @@ cxv
 @import 'chat_blocked.css';
 @import 'chat_form.css';
 
-/*
-@import '_chat_controls.css';
-@import '_action_board.css';
-*/
-
-
-/* vanish elements wihtout display:none;
-input.vanish {
-	opacity: 0;
-	position: absolute;
-	pointer-events: none;
-}
-*/
-
 
 /*
-/* GRID
+   GRID
  */
 
 #chat_box * {
@@ -52,7 +37,7 @@ input.vanish {
 	padding: 0px;
 	margin: auto;
 }
-#chat_box .chat_item                {
+#chat_box .chat_item {
 	display: none;
 	/*
 	border: 1px solid black;
diff --git a/tests_hugo/chat_node/chat_client/style/chat_msg.css b/tests_hugo/chat_node/chat_client/style/chat_msg.css
index 71df9f6b..0e382aa5 100644
--- a/tests_hugo/chat_node/chat_client/style/chat_msg.css
+++ b/tests_hugo/chat_node/chat_client/style/chat_msg.css
@@ -1,15 +1,15 @@
-.chat_item#chat_panel_msg {
+#chat_box #chat_panel_msg {
 	flex-direction: column-reverse;
 	overflow: scroll;
 	border: 1px solid black;
 }
-.chat_item#chat_panel_msg #chat_api_msg_thread {
+#chat_box #chat_panel_msg #chat_api_msg_thread {
 	flex-direction: column;
 	width: 100%;
 	padding: 0px 5px;
 	margin-bottom: 0px;
 }
-.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg {
+#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg {
 	white-space: pre-wrap;
 	margin: 5px auto;
 	padding: 5px;
@@ -22,21 +22,23 @@
 	ALL MSG
 */
 
-.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg {
+#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg {
 	margin-left: 0px;
 	background-color: rgb(210, 210, 210);
 	max-width: 80%;
 }
-.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg p {
+#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg p {
 	padding: 0px;
 }
-.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg p.name {
+#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg p.name {
 	margin: 0px;
+	margin-bottom: 5px;
 	font-size: 12px;
 	color: rgb(100, 100, 100);
 }
-.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg p.msg {
+#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg p.msg {
 	margin: 5px 0px;
+	line-height: 8px;
 }
 
 
@@ -44,12 +46,12 @@
 	MSG PERSO
 */
 
-.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg.me {
+#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg.me {
 	margin-right: 0px;
 	margin-left: auto;
 	background-color: rgb(210, 110, 10);
 }
-.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg.me p.name {
+#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg.me p.name {
 	display: none;
 }
 
@@ -58,14 +60,14 @@
 	MSG SERVER
 */
 
-.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER {
+#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER {
 	margin-left: auto;
 	background-color: transparent;
 }
-.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER p.name {
+#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER p.name {
 	display: none;
 }
-.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER p.msg {
+#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER p.msg {
 	margin: 0px auto;
 	font-size: 12px;
 	color: rgb(100, 100, 100);