From 30e828aa2d56fc40def38387dd3745de9da4624d Mon Sep 17 00:00:00 2001
From: Amir Sanni <amirsanni@gmail.com>
Date: Fri, 12 Jun 2020 17:25:27 +0100
Subject: [PATCH] Use textarea & allow ctrl+enter & shift+enter

---
 comm.html    |  4 ++--
 css/comm.css |  6 +++++-
 js/comm.js   | 40 +++++++++++++++++++++-------------------
 3 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/comm.html b/comm.html
index 2d5cd94..11fb28e 100644
--- a/comm.html
+++ b/comm.html
@@ -96,7 +96,7 @@
                         <div class="panel-footer">
                             <span id="typingInfo"></span>
                             <div class="input-group">
-                                <input id="chatInput" type="text" class="form-control input-sm chat_input" placeholder="Type message here...">
+                                <textarea id='chatInput' class="form-control chat-area" placeholder="Type message here..."></textarea>
                                 <span class="input-group-btn">
                                     <button class="btn btn-primary btn-sm" id="chatSendBtn">Send</button>
                                 </span>
@@ -154,4 +154,4 @@
         <audio id="callerTone" src="media/callertone.mp3" loop preload="auto"></audio>
         <audio id="msgTone" src="media/msgtone.mp3" preload="auto"></audio>
     </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/css/comm.css b/css/comm.css
index 7763aa0..43a618f 100644
--- a/css/comm.css
+++ b/css/comm.css
@@ -207,6 +207,10 @@
 }
 /* _CHAT PANE */
 
+.chat-area {
+    resize: none;
+}
+
 /*
 ********************************************************************************************************************************
 ********************************************************************************************************************************
@@ -299,4 +303,4 @@
     from {top: 90px; opacity: 1;}
     to {right: 0; opacity: 0;}
 }
-/* _SNACKBAR */
\ No newline at end of file
+/* _SNACKBAR */
diff --git a/js/comm.js b/js/comm.js
index feaf101..0ba3fdc 100644
--- a/js/comm.js
+++ b/js/comm.js
@@ -323,12 +323,14 @@ window.addEventListener('load', function(){
     //WHEN ENTER IS PRESSED TO SEND MESSAGE
     document.getElementById("chatInput").addEventListener('keypress', function(e){
         var msg = this.value.trim();
-        
-        if((e.which === 13) && msg){
-            //trigger the click event on the send btn
-            document.getElementById("chatSendBtn").click();
-            
-            return false;
+
+        if ( e.which === 13 && e.ctrlKey && msg ) {
+            this.value = `${ this.value }\n`;
+        }
+
+        else if ( e.which === 13 && !e.shiftKey && msg ) {
+            e.preventDefault();
+            document.getElementById( "chatSendBtn" ).click();
         }
     });
     
@@ -809,12 +811,12 @@ function addRemoteChat(msg, date){
         
         return resolve(newNode);
     }).then(function(newlyCreatedNode){
-        newlyCreatedNode.innerHTML = '<div class="col-sm-10 col-xs-10">\
-                <div class="messages msg_receive">\
-                    <p>'+msg+'</p>\
-                    <time>Remote • '+date+'</time>\
-                </div>\
-            </div>';
+        newlyCreatedNode.innerHTML = `<div class="col-sm-10 col-xs-10">
+                <div class="messages msg_receive">
+                    <p>${msg}</p>
+                    <time>Remote • ${date}</time>
+                </div>
+            </div>`;
         
         document.getElementById('chats').appendChild(newlyCreatedNode);
 
@@ -854,12 +856,12 @@ function addLocalChat(msg, date, sendToPartner){
         
         return resolve(newNode);
     }).then(function(newlyCreatedNode){
-        newlyCreatedNode.innerHTML = '<div class="col-sm-10 col-xs-10">\
-                <div class="messages msg_sent">\
-                    <p>'+msg+'</p>\
-                    <time>You • '+date+' <i class="fa fa-clock-o sentStatus" id="'+msgId+'"></i></time>\
-                </div>\
-            </div>';
+        newlyCreatedNode.innerHTML = `<div class="col-sm-10 col-xs-10">
+                <div class="messages msg_sent">
+                    <p>${msg}</p>
+                    <time>You • ${date} <i class="fa fa-clock-o sentStatus" id="'+msgId+'"></i></time>
+                </div>
+            </div>`;
         
         document.getElementById('chats').appendChild(newlyCreatedNode);
         
@@ -867,7 +869,7 @@ function addLocalChat(msg, date, sendToPartner){
             //use this if you just want to send via socket without saving in db
             sendChatToSocket(msg, date, msgId);
         }
-        
+
         fixChatScrollBarToBottom();
     });
 }