resize update

package-lock.json

@@ -11021,6 +11021,12 @@
         }
       }
     },
+    "vue-router": {
+      "version": "3.4.9",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.9.tgz",
+      "integrity": "sha512-CGAKWN44RqXW06oC+u4mPgHLQQi2t6vLD/JbGRDAXm0YpMv0bgpKuU5bBd7AvMgfTz9kXVRIWKHqRwGEb8xFkA==",
+      "dev": true
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

package.json

@@ -19,6 +19,7 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "vue-router": "^3.4.9",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

src/components/newMessage.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="newMessageBanner">
     <label for="newMessageInput"></label>
-    <textarea  id="newMessageInput" class="newMessageInput" placeholder="type a message ..." v-model="msg.content.text" />
-    <icon v-on:click="sendMessage()" id="sendMessageBtn" style="position: absolute; right: 1rem; bottom: 0.5rem;" ic="./sym/ic_send_white_24px.svg" />
+    <textarea @input="resizeMessageBanner()" ref="newMessageInput" id="newMessageInput" class="newMessageInput" placeholder="type a message ..." v-model="msg.content.text" />
+    <icon @click.native="sendMessage()" id="sendMessageBtn" style="position: absolute; right: 1rem; bottom: 0.5rem;" ic="./sym/ic_send_white_24px.svg" />
   </div>
 </template>
 
@@ -15,20 +15,23 @@ export default {
   components: {
     icon
   },
-  mounted() {
-    ResizeListener(document.getElementById("newMessageInput"));
-    /*document.getElementById("sendMessageBtn").addEventListener("click", () => {
-      if (document.getElementById("newMessageInput").value !== '') {
-        main.methods.sendMessage(document.getElementById("newMessageInput").value)
-        document.getElementById("newMessageInput").value = ''
-        //sendMessage.methods.callSendMessage(this.data.message)
-      }
-    })*/
-  },
   methods: {
     sendMessage(){
-      this.msg.time = Date.now()
-      main.methods.sendWebSocket(this.msg)
+      if (this.msg.content.text !== "") {
+        this.msg.time = Date.now()
+        main.methods.sendWebSocket(this.msg)
+        this.msg.content.text = ""
+        this.resizeMessageBanner()
+      }
+    },
+    resizeMessageBanner(){
+      let id = this.$refs.newMessageInput
+      id.style.height = '1.25rem'
+      id.style.height = `${id.scrollHeight}px`
+      let msgContainer = document.getElementById("messagesContainer")
+      msgContainer.style.height
+          = `calc(100% - ${id.parentElement.clientHeight}px)`
+      //msgContainer.scrollTo(0, msgContainer.scrollHeight)
     }
   },
   data(){
@@ -43,17 +46,6 @@ export default {
     }
   }
 }
-
-export const ResizeListener = id => {
-  id.addEventListener("input", function(){
-    this.style.height = '1.25rem'
-    this.style.height = `${this.scrollHeight}px`
-    let msgContainer = document.getElementById("messagesContainer")
-    msgContainer.style.height
-        = `calc(100% - ${this.parentElement.clientHeight}px)`
-    //msgContainer.scrollTo(0, msgContainer.scrollHeight)
-  });
-}
 </script>
 
 <style scoped>