update/debug newMessage and chat
This commit is contained in:
parent
4963bec650
commit
7e611a96f5
@ -12,7 +12,6 @@
|
||||
"core-js": "^3.6.5",
|
||||
"matrix-js-sdk": "^9.1.0",
|
||||
"sass": "^1.29.0",
|
||||
"sass-loader": "^10.1.0",
|
||||
"v-emoji-picker": "^2.3.1",
|
||||
"vue": "^2.6.11",
|
||||
"ws": "^7.3.1"
|
||||
|
||||
@ -1,47 +1,45 @@
|
||||
<template>
|
||||
<div class="newMessageBanner">
|
||||
<form v-on:submit.prevent="sendMessage()">
|
||||
<form class="newMessageBanner" ref="newMessageBanner" v-on:submit.prevent="sendMessage()">
|
||||
<label for="newMessageInput"></label>
|
||||
<textarea @keyup.enter.exact="sendMessage()" @input="resizeMessageBanner()" ref="newMessageInput" id="newMessageInput" class="newMessageInput"
|
||||
autocomplete="off" rows="1" placeholder="type a message ..." v-model="msg.content.body" />
|
||||
<icon type="submit" title="press enter to submit" id="sendMessageBtn"
|
||||
ic="./sym/ic_send_white_24px.svg" />
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import icon from '@/components/icon.vue';
|
||||
import main from '@/main.js';
|
||||
import matrix from '@/matrix.js';
|
||||
import {matrix} from '@/main.js';
|
||||
|
||||
export default {
|
||||
name: "newMessage",
|
||||
components: {
|
||||
icon
|
||||
},
|
||||
props: {
|
||||
onResize: Function,
|
||||
roomId: String
|
||||
},
|
||||
methods: {
|
||||
sendMessage(){
|
||||
async sendMessage(){
|
||||
if (this.msg.content.body !== "") {
|
||||
let msgSend = Object.assign({}, this.msg)
|
||||
matrix.methods.sendMessage(msgSend)
|
||||
this.msg.content.body = ""
|
||||
document.getElementById("messagesContainer").style.height = "calc(100% - 7rem)"
|
||||
document.getElementById("newMessageInput").style.height = "1.25rem"
|
||||
//let msgContainer = document.getElementById("messagesContainer")
|
||||
//msgContainer.scrollTo(0, msgContainer.scrollHeight)
|
||||
let msgSend = Object.assign({}, this.msg);
|
||||
await matrix.sendEvent(msgSend, this.roomId);
|
||||
this.msg.content.body = "";
|
||||
let id = this.$refs.newMessageInput;
|
||||
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`
|
||||
let msgContainer = document.getElementById("messagesContainer")
|
||||
msgContainer.style.height
|
||||
= `calc(100% - ${id.parentElement.clientHeight}px - 3rem)`
|
||||
let id = this.$refs.newMessageInput;
|
||||
id.style.height = '1.25rem';
|
||||
id.style.height = `${id.scrollHeight}px`;
|
||||
this.onResize(id.parentElement.clientHeight);
|
||||
},
|
||||
toggleEmojiPicker() {
|
||||
this.showEmojiPicker= !this.showEmojiPicker;
|
||||
this.showEmojiPicker = !this.showEmojiPicker;
|
||||
},
|
||||
onSelectEmoji(emoji) {
|
||||
this.msg.content.body += emoji.data;
|
||||
@ -56,8 +54,6 @@ export default {
|
||||
msgtype: "m.text"
|
||||
}
|
||||
},
|
||||
chatroom: main.data().chatroom,
|
||||
session: matrix.data().session,
|
||||
showEmojiPicker: false
|
||||
}
|
||||
}
|
||||
|
||||
@ -62,4 +62,11 @@ export class MatrixHandler {
|
||||
}
|
||||
})
|
||||
}
|
||||
async sendEvent(msg, roomId){
|
||||
await this.client.sendEvent(roomId, msg.type, msg.content, '').then(() => {
|
||||
console.log('message sent successfully');
|
||||
}).catch((err) => {
|
||||
console.log(`error while sending message => ${err}`);
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,46 +1,36 @@
|
||||
<template>
|
||||
<div>
|
||||
<div @scroll="scrollHandler()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
|
||||
<div id="messages" class="messages">
|
||||
<p v-if="room.timeline.length === 0" class="info">this room is empty</p>
|
||||
<!--<div v-for="(message, i) in session.currentRoom.messages" :key="message.origin_server_ts" class="event">
|
||||
<div v-if="i===0 || getDate(session.currentRoom.messages[i-1].origin_server_ts)!==getDate(message.origin_server_ts)"
|
||||
style="margin-left: 2rem; margin-top: 1rem" class="info">{{getDate(message.origin_server_ts)}}
|
||||
</div>
|
||||
<div v-if="(message.sender !== session.user) && (i===0 || session.currentRoom.messages[i-1].sender!==message.sender)"
|
||||
style="margin-left: 3rem; margin-top: 1rem">{{message.sender}}
|
||||
</div>
|
||||
<message :type="message.sender === session.user?'send':'receive'"
|
||||
:group="session.currentRoom.members.length > 2"
|
||||
:msg=message.content.body :time=getTime(message.origin_server_ts) />
|
||||
<userThumbnail v-if="(message.sender !== session.user) && (i===session.currentRoom.messages.length-1 || session.currentRoom.messages[i+1].sender!==message.sender)"
|
||||
:userId="message.sender" width="64" height="64" resizeMethod="scale" class="userThumbnail" />
|
||||
</div>-->
|
||||
<div class="timeGroup" v-for="timeGroup in splitArray(room.timeline, obj => getDate(obj.event.origin_server_ts), obj => obj.event)" :key="timeGroup[0].origin_server_ts">
|
||||
<div class="time">{{getDate(timeGroup[0].origin_server_ts)}}</div>
|
||||
<div class="eventGroup" v-for="group in splitArray(timeGroup, obj => obj.sender)" :key="group[0].origin_server_ts">
|
||||
<div class="username" v-if="group[0].sender !== user">{{group[0].sender}}</div>
|
||||
<div class="thumbnailContainer">
|
||||
<userThumbnail v-if="group[0].sender !== user && room._membersPromise.length > 2" :userId="group[0].sender" width="64" height="64" resizeMethod="scale" class="userThumbnail" />
|
||||
</div>
|
||||
<div class="event" v-for="event in group" :key="event.origin_server_ts">
|
||||
<message :type="event.sender === user?'send':'receive'"
|
||||
:group="room._membersPromise.length > 2"
|
||||
:msg=event.content.body :time=getTime(event.origin_server_ts) />
|
||||
<div ref="chatContainer" class="chatContainer">
|
||||
<div @scroll="scrollHandler()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
|
||||
<div id="messages" class="messages" ref="messages">
|
||||
<p v-if="room.timeline.length === 0" class="info">this room is empty</p>
|
||||
<div class="timeGroup" v-for="timeGroup in splitArray(room.timeline,
|
||||
obj => getDate(obj.event.origin_server_ts),obj => obj.event)" :key="timeGroup[0].origin_server_ts">
|
||||
<div class="time">{{getDate(timeGroup[0].origin_server_ts)}}</div>
|
||||
<div class="eventGroup" v-for="group in splitArray(timeGroup, obj => obj.sender)" :key="group[0].origin_server_ts">
|
||||
<div class="username" v-if="group[0].sender !== user">{{group[0].sender}}</div>
|
||||
<div class="thumbnailContainer">
|
||||
<userThumbnail v-if="group[0].sender !== user && room._membersPromise.length > 2" :userId="group[0].sender" width="64" height="64" resizeMethod="scale" class="userThumbnail" />
|
||||
</div>
|
||||
<div class="event" v-for="event in group" :key="event.origin_server_ts">
|
||||
<message v-if="event.content.msgtype==='m.text'" :type="event.sender === user?'send':'receive'"
|
||||
:group="room._membersPromise.length > 2"
|
||||
:msg=event.content.body :time=getTime(event.origin_server_ts) />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<icon v-if="showScrollBtn" @click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
|
||||
</div>
|
||||
<!--<newMessage />-->
|
||||
<icon v-if="showScrollBtn" @click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
|
||||
<newMessage :onResize="(height)=>resize(height)" :roomId="room.roomId"/>
|
||||
<!--<topBanner />-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import message from '@/components/message.vue';
|
||||
//import newMessage from '@/components/newMessage.vue';
|
||||
import newMessage from '@/components/newMessage.vue';
|
||||
//import topBanner from '@/components/topBanner.vue';
|
||||
import Icon from "@/components/icon";
|
||||
import userThumbnail from '@/components/userThumbnail';
|
||||
@ -50,7 +40,7 @@ export default {
|
||||
components: {
|
||||
Icon,
|
||||
message,
|
||||
//newMessage,
|
||||
newMessage,
|
||||
//topBanner,
|
||||
userThumbnail
|
||||
},
|
||||
@ -75,8 +65,8 @@ export default {
|
||||
if (this.$refs.msgContainer.scrollTop === 0){
|
||||
console.log("load messages")
|
||||
}
|
||||
let msgContainer = document.getElementById("messagesContainer")
|
||||
this.showScrollBtn = msgContainer.scrollHeight - msgContainer.scrollTop > msgContainer.offsetHeight + 200;
|
||||
let msg = this.$refs.msgContainer;
|
||||
this.showScrollBtn = msg.scrollHeight - msg.scrollTop > msg.offsetHeight + 200;
|
||||
},
|
||||
splitArray(arr, key, get=obj=>obj){
|
||||
let payload = [[]];
|
||||
@ -87,6 +77,9 @@ export default {
|
||||
if (key(obj) !== key(nextObj)) payload.push([]);
|
||||
})
|
||||
return payload;
|
||||
},
|
||||
resize(height){
|
||||
this.$refs.chatContainer.style.height = `calc(100% - ${height}px - 3rem)`;
|
||||
}
|
||||
},
|
||||
data(){
|
||||
@ -101,38 +94,56 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.messagesContainer{
|
||||
<style scoped lang="scss">
|
||||
.chatContainer{
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
top: 3rem;
|
||||
width: 100%;
|
||||
height: calc(100% - 7rem);
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.messages{
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#scrollDown{
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
bottom: 5rem;
|
||||
right: 1rem;
|
||||
display: block;
|
||||
}
|
||||
.info{
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
margin: 1rem;
|
||||
}
|
||||
.eventGroup{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
margin-top: 0.75rem;
|
||||
.messagesContainer{
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
.messages{
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
.eventGroup{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
.info{
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
margin: 1rem;
|
||||
}
|
||||
.time{
|
||||
top: 0.25rem;
|
||||
position: sticky;
|
||||
z-index: 100;
|
||||
background-color: #2d2d2d;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
width: fit-content;
|
||||
left: 50%;
|
||||
transform: translate(-50%,0);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
#scrollDown{
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
display: block;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
}
|
||||
.userThumbnail{
|
||||
position: absolute;
|
||||
@ -152,16 +163,4 @@ export default {
|
||||
.username{
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.time{
|
||||
top: 0.25rem;
|
||||
position: sticky;
|
||||
z-index: 100;
|
||||
background-color: #2d2d2d;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
width: fit-content;
|
||||
left: 50%;
|
||||
transform: translate(-50%,0);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user