You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
3.1 KiB
Vue
104 lines
3.1 KiB
Vue
<template>
|
|
<div>
|
|
<div @scroll="scrollHandler()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
|
|
<div id="messages" class="messages">
|
|
<p v-if="session.currentRoom.messages.length === 0" class="info">this room is empty</p>
|
|
<div v-for="(message, i) in session.currentRoom.messages" :key="message.origin_server_ts">
|
|
<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: 2rem; margin-top: 1rem">{{message.sender}}
|
|
</div>
|
|
<message :msgClass="message.sender === session.user?'messageSend':'messageReceive'"
|
|
:msg=message.content.body :time=getTime(message.origin_server_ts) />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<newMessage />
|
|
<icon v-if="showScrollBtn" v-on:click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
|
|
<topBanner />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import message from '@/components/message.vue';
|
|
import newMessage from '@/components/newMessage.vue';
|
|
import topBanner from '@/components/topBanner.vue';
|
|
import main from '@/main.js';
|
|
import Icon from "@/components/icon";
|
|
import matrix from '@/matrix.js';
|
|
|
|
export default {
|
|
name: 'chat',
|
|
components: {
|
|
Icon,
|
|
message,
|
|
newMessage,
|
|
topBanner
|
|
},
|
|
methods:{
|
|
scrollToBottom(){
|
|
let msgContainer = document.getElementById("messagesContainer")
|
|
msgContainer.scrollTo(0, msgContainer.scrollHeight)
|
|
},
|
|
getTime(time){
|
|
let date = new Date(time);
|
|
return `${date.getHours()}:${(date.getMinutes()<10)?"0":""}${date.getMinutes()}`;
|
|
},
|
|
getDate(time){
|
|
let months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
|
|
let date = new Date(time);
|
|
return `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`;
|
|
},
|
|
scrollHandler(){
|
|
if (this.$refs.msgContainer.scrollTop === 0){
|
|
console.log("load messages")
|
|
}
|
|
let msgContainer = document.getElementById("messagesContainer")
|
|
this.showScrollBtn = msgContainer.scrollHeight - msgContainer.scrollTop > msgContainer.offsetHeight + 200;
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
chatroom: main.data().chatroom,
|
|
session: matrix.data().session,
|
|
showScrollBtn: false,
|
|
scrollOnUpdate: true
|
|
}
|
|
},
|
|
updated(){
|
|
//this.scrollToBottom();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.messagesContainer{
|
|
position: absolute;
|
|
margin: 0;
|
|
left: 0;
|
|
top: 3rem;
|
|
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;
|
|
}
|
|
</style>
|