add reply to events / update sendEvent / refactor parseMessage to eventUtils / fix quotes

2021-04-06 03:15:23 +02:00 · 2021-04-06 03:15:23 +02:00 · d66f2c990e
commit d66f2c990e
parent 3b70b5b37c
6 changed files with 122 additions and 77 deletions
--- a/src/components/message.vue
+++ b/src/components/message.vue
@ -10,11 +10,12 @@
 </template>

 <script>
-import {matrix} from "@/main";
-import {calcUserName} from "@/lib/matrixUtils";
+import {matrix} from '@/main';
+import {calcUserName} from '@/lib/matrixUtils';
+import {parseMessage} from '@/lib/eventUtils';

 export default {
-  name: "message",
+  name: 'message',
  props: {
    msg: String,
    time: String,
@ -23,18 +24,6 @@ export default {
    roomId: String
  },
  methods:{
-    solveTextLinks(text){
-      return (text || "").replace(
-        /([^\S]|^)(((https?:\/\/)|(www\.))(\S+))/gi,
-        (match, space, url)=>{
-          let hyperlink = url;
-          if (!hyperlink.match('^https?://')) {
-            hyperlink = 'http://' + hyperlink;
-          }
-          return `${space}<a href="${hyperlink}" target="_blank">${url}</a>`;
-        }
-      )
-    },
    async getReplyEvent(content) {
      let replyId = this.getReplyId(content);
      if (replyId === undefined) return undefined;
@ -46,14 +35,8 @@ export default {
      if(!content['m.relates_to']) return undefined;
      return content['m.relates_to']['m.in_reply_to'].event_id || undefined;
    },
-    parseMessage(msg){
-      return this.solveTextLinks(
-        msg.replace(/>.*\n/gm, '').trim()
-          .replace(/</g, '&lt')
-          .replace(/>/g, '&gt')
-      );
-    },
-    calcUserName
+    calcUserName,
+    parseMessage
  },
  data(){
    return{
@ -81,13 +64,13 @@ export default {
    margin-top: 0.25rem;
  }
  .messageReceive{
-    background-color: #42b983;
+    background-color: #424141;
    border-radius: 1rem 1rem 1rem 0;
  }
  .messageSend{
    margin-left:auto;
    margin-right:0;
-    background-color: #42a7b9;
+    background-color: #357882;
    border-radius: 1rem 1rem 0 1rem;
  }
  .time{
--- a/src/components/newMessage.vue
+++ b/src/components/newMessage.vue
@ -1,16 +1,16 @@
 <template>
-    <form class="newMessageBanner" ref="newMessageBanner" v-on:submit.prevent="sendMessage()">
-      <label for="newMessageInput"></label>
+  <div class="newMessageBanner" ref="newMessageBanner">
+    <div class="reply" v-if="replyTo" @click="resetReplyTo">
+      <span class="username">{{calcUserName(replyTo.sender)}}</span><br>
+      {{parseMessage(replyTo.content.body)}}
+    </div>
+    <form v-on:submit.prevent="sendMessage()">
      <textarea
        @keyup.enter.exact="sendMessage()"
        @input="resizeMessageBanner()"
-        v-model="msg.content.body"
-        ref="newMessageInput"
-        id="newMessageInput"
-        class="newMessageInput"
-        autocomplete="off"
-        rows="1"
-        placeholder="type a message ..."
+        v-model="event.content.body"
+        ref="newMessageInput" class="newMessageInput"
+        rows="1" placeholder="type a message ..."
      />
      <icon
        type="submit"
@ -19,52 +19,67 @@
        ic="./sym/ic_send_white.svg"
      />
    </form>
+  </div>
 </template>

 <script>
 import icon from '@/components/icon.vue';
 import {matrix} from '@/main.js';
+import {parseMessage} from '@/lib/eventUtils';
+import {calcUserName} from '@/lib/matrixUtils';

 export default {
-  name: "newMessage",
+  name: 'newMessage',
  components: {
    icon
  },
  props: {
    onResize: Function,
-    roomId: String
+    roomId: String,
+    replyTo: Object,
+    resetReplyTo: Function
  },
  methods: {
    sendMessage(){
-      let content = this.msg.content;
+      let content = this.event.content;
      if (!content.body.trim()) return;
-      let msgSend = Object.assign({}, this.msg);
-      matrix.sendEvent(msgSend, this.roomId);
-      content.body = "";
+      matrix.sendEvent(this.event, this.roomId, this.replyTo);
+      content.body = '';
+      this.resetReplyTo();
      let id = this.$refs.newMessageInput;
-      id.style.height = "1.25rem";
+      id.style.height = '1.25rem';
      this.onResize(id.parentElement.clientHeight);
    },
    resizeMessageBanner(){
      let id = this.$refs.newMessageInput;
      id.style.height = '1.25rem';
      id.style.height = `${id.scrollHeight}px`;
-      this.onResize(id.parentElement.clientHeight);
+      this.onResize(this.$refs.newMessageBanner.clientHeight);
+    },
+    focusInput(){
+      this.$refs.newMessageInput.focus();
    },
    toggleEmojiPicker() {
      this.showEmojiPicker = !this.showEmojiPicker;
    },
    onSelectEmoji(emoji) {
-      this.msg.content.body += emoji.data;
-    }
+      this.event.content.body += emoji.data;
+    },
+    parseMessage,
+    calcUserName
  },
  data(){
    return {
-      msg: {
-        type: "m.room.message",
+      event: {
+        type: 'm.room.message',
        content: {
-          body: "",
-          msgtype: "m.text"
+          body: '',
+          msgtype: 'm.text',
+          'm.relates_to': {
+            'm.in_reply_to': {
+              event_id: undefined
+            }
+          }
        }
      },
      showEmojiPicker: false
@ -89,7 +104,7 @@ export default {
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
  padding: 0;
-  left: 2rem;
+  left: 1rem;
  min-height: 1.5rem;
  max-height: 10rem;
  width: calc(100% - 7rem);
@ -110,4 +125,18 @@ export default {
  bottom: 0.25rem;
  background-color: unset;
 }
+.reply{
+  position: relative;
+  width: calc(100% - 7rem);
+  left: 1rem;
+  border-left:  2px solid #fff;
+  padding-left: 0.5rem;
+  margin-top: 0.75rem;
+  margin-right: 0.5rem;
+  word-break: break-word;
+  white-space: pre-line;
+}
+.username{
+  font-weight: bold;
+}
 </style>
--- a/src/components/timeline.vue
+++ b/src/components/timeline.vue
@ -29,6 +29,7 @@
           v-for="event in group"
          :key="event.origin_server_ts"
          :title="`${group[0].sender} at ${getTime(event.origin_server_ts)}`"
+          @contextmenu.prevent="setReplyTo(event)"
        >
          <message
            v-if="event.content.msgtype==='m.text'"
@ -54,11 +55,11 @@
 </template>

 <script>
-import message from "@/components/message";
-import avatar from "@/components/avatar";
-import splitArray from "@/lib/splitArray";
-import {getDate, getTime} from "@/lib/getTimeStrings";
-import {getUser, calcUserName} from "@/lib/matrixUtils";
+import message from '@/components/message';
+import avatar from '@/components/avatar';
+import splitArray from '@/lib/splitArray';
+import {getDate, getTime} from '@/lib/getTimeStrings';
+import {getUser, calcUserName} from '@/lib/matrixUtils';

 export default {
  name: 'eventGroup',
@ -70,7 +71,8 @@ export default {
    timeline: Array,
    user: String,
    groupTimeline: Boolean,
-    roomId: String
+    roomId: String,
+    setReplyTo: Function
  },
  methods: {
    getUser,
--- a/src/lib/eventUtils.js
+++ b/src/lib/eventUtils.js
@ -0,0 +1,19 @@
+export function solveTextLinks(text){
+  return (text || '').replace(
+    /([^\S]|^)(((https?:\/\/)|(www\.))(\S+))/gi,
+    (match, space, url)=>{
+      let hyperlink = url;
+      if (!hyperlink.match('^https?://')) {
+        hyperlink = 'http://' + hyperlink;
+      }
+      return `${space}<a href="${hyperlink}" target="_blank">${url}</a>`;
+    }
+  )
+}
+export function parseMessage(msg){
+  return solveTextLinks(
+    msg.replace(/>.*\n/gm, '').trim()
+      .replace(/</g, '&lt')
+      .replace(/>/g, '&gt')
+  );
+}
--- a/src/lib/matrixHandler.js
+++ b/src/lib/matrixHandler.js
@ -68,18 +68,17 @@ export class MatrixHandler {
      callback();
    });
  }
-  async sendEvent(msg, roomId){
-    const msgSend = {
-      type: msg.type,
-      content: {
-        body: msg.content.body.trim(),
-        msgtype: msg.content.msgtype,
-      },
-    };
-    await this.client.sendEvent(roomId, msgSend.type, msgSend.content, '').then(() => {
-      console.log('message sent successfully');
-    }).catch((err) => {
-      console.log(`error while sending message => ${err}`);
-    });
+  async sendEvent({content, type}, roomId, replyTo = undefined){
+    await this.client.sendEvent(roomId, type, {
+      body: content.body.trim(),
+      msgtype: content.msgtype,
+      'm.relates_to': {
+        'm.in_reply_to': {
+          event_id: replyTo?replyTo.event_id:undefined
+        }
+      }
+    }).then(() => console.log('message sent successfully'))
+      .catch((err) => console.log(`error while sending message => ${err}`)
+      );
  }
 }
--- a/src/views/chat.vue
+++ b/src/views/chat.vue
@ -1,14 +1,21 @@
 <template>
  <div>
    <div ref="chatContainer" class="chatContainer">
-      <div @scroll="onScroll()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
+      <div @scroll="onScroll()" ref="timelineContainer" class="timelineContainer">
        <div v-if="loadingStatus" @click="loadEvents()" class="loadMore">{{loadingStatus}}</div>
        <p v-if="room.timeline.length === 0" class="chatInfo">this room is empty</p>
-        <timeline :timeline="room.timeline" :group-timeline="isGroup()" :user="user" :roomId="room.roomId" />
+        <timeline
+          :timeline="room.timeline" :group-timeline="isGroup()"
+          :user="user" :roomId="room.roomId"
+          :setReplyTo="event=>{replyTo=event; resize();}"
+        />
      </div>
      <icon v-if="showScrollBtn" @click.native="scroll.scrollToBottom()" id="scrollDown" ic="./sym/ic_expand_more_black.svg" />
    </div>
-    <newMessage :onResize="height=>resize(height)" :roomId="room.roomId"/>
+    <newMessage
+      :onResize="height=>resize(height)" :roomId="room.roomId" ref="newMessage"
+      :replyTo="replyTo" :resetReplyTo="()=>replyTo=undefined"
+    />
    <topBanner :room="room" :close-chat="()=>closeChat()" :open-chat-info="()=>openChatInfo()"/>
  </div>
 </template>
@ -20,7 +27,7 @@ import Icon from '@/components/icon';
 import {matrix} from '@/main';
 import splitArray from '@/lib/splitArray.js'
 import timeline from '@/components/timeline';
-import scrollHandler from "@/lib/scrollHandler";
+import scrollHandler from '@/lib/scrollHandler';

 export default {
  name: 'chat',
@ -38,10 +45,10 @@ export default {
  },
  methods:{
    onScroll(){
-      if (this.$refs.msgContainer.scrollTop === 0) this.loadEvents();
+      if (this.$refs.timelineContainer.scrollTop === 0) this.loadEvents();
      this.showScrollBtn = this.scroll.getScrollBottom() > 400;
    },
-    resize(height){
+    resize(height = this.$refs.newMessage.clientHeight){
      this.$refs.chatContainer.style.height = `calc(100% - ${height}px - 3.5rem)`;
    },
    isGroup(){
@ -64,15 +71,21 @@ export default {
      showScrollBtn: false,
      scrollOnUpdate: true,
      loadingStatus: 'load more',
-      scroll: ()=>{}
+      scroll: ()=>{},
+      replyTo: undefined
    }
  },
  updated(){
    if(this.scroll.getScrollBottom() < 350) this.scroll.scrollToBottom();
  },
  mounted(){
-    this.scroll = new scrollHandler(this.$refs.msgContainer);
+    this.scroll = new scrollHandler(this.$refs.timelineContainer);
    this.scroll.scrollToBottom();
+  },
+  watch: {
+    '$route'(){
+      this.scroll.scrollToBottom();
+    }
  }
 }
 </script>
@ -85,7 +98,7 @@ export default {
  top: 3.5rem;
  width: 100%;
  height: calc(100% - 7rem);
-  .messagesContainer{
+  .timelineContainer{
    height: 100%;
    overflow-y: auto;
  }