Use textarea & allow ctrl+enter & shift+enter

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>
+</html>

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 */
+/* _SNACKBAR */

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();
     });
 }