|
|
@ -1,12 +1,12 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<div ref="chatContainer" class="chatContainer">
|
|
|
|
<div ref="chatContainer" class="chatContainer">
|
|
|
|
<div @scroll="scrollHandler()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
|
|
|
|
<div @scroll="onScroll()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
|
|
|
|
<div v-if="loadingStatus" @click="loadEvents()" class="loadMore">{{loadingStatus}}</div>
|
|
|
|
<div v-if="loadingStatus" @click="loadEvents()" class="loadMore">{{loadingStatus}}</div>
|
|
|
|
<p v-if="room.timeline.length === 0" class="chatInfo">this room is empty</p>
|
|
|
|
<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" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<icon v-if="showScrollBtn" @click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
|
|
|
|
<icon v-if="showScrollBtn" @click.native="scroll.scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<newMessage :onResize="height=>resize(height)" :roomId="room.roomId"/>
|
|
|
|
<newMessage :onResize="height=>resize(height)" :roomId="room.roomId"/>
|
|
|
|
<topBanner :room="room" :close-chat="()=>closeChat()" :open-chat-info="()=>openChatInfo()"/>
|
|
|
|
<topBanner :room="room" :close-chat="()=>closeChat()" :open-chat-info="()=>openChatInfo()"/>
|
|
|
@ -20,6 +20,7 @@ import Icon from '@/components/icon';
|
|
|
|
import {matrix} from '@/main';
|
|
|
|
import {matrix} from '@/main';
|
|
|
|
import splitArray from '@/lib/splitArray.js'
|
|
|
|
import splitArray from '@/lib/splitArray.js'
|
|
|
|
import timeline from '@/components/timeline';
|
|
|
|
import timeline from '@/components/timeline';
|
|
|
|
|
|
|
|
import scrollHandler from "@/lib/scrollHandler";
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
name: 'chat',
|
|
|
|
name: 'chat',
|
|
|
@ -36,13 +37,9 @@ export default {
|
|
|
|
openChatInfo: Function
|
|
|
|
openChatInfo: Function
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods:{
|
|
|
|
methods:{
|
|
|
|
scrollToBottom(){
|
|
|
|
onScroll(){
|
|
|
|
this.$refs.msgContainer.scrollTop = this.$refs.msgContainer.scrollHeight;
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
scrollHandler(){
|
|
|
|
|
|
|
|
if (this.$refs.msgContainer.scrollTop === 0) this.loadEvents();
|
|
|
|
if (this.$refs.msgContainer.scrollTop === 0) this.loadEvents();
|
|
|
|
let msg = this.$refs.msgContainer;
|
|
|
|
this.showScrollBtn = this.scroll.getScrollBottom() > 400;
|
|
|
|
this.showScrollBtn = msg.scrollHeight - msg.scrollTop > msg.offsetHeight + 200;
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
resize(height){
|
|
|
|
resize(height){
|
|
|
|
this.$refs.chatContainer.style.height = `calc(100% - ${height}px - 3.5rem)`;
|
|
|
|
this.$refs.chatContainer.style.height = `calc(100% - ${height}px - 3.5rem)`;
|
|
|
@ -51,9 +48,11 @@ export default {
|
|
|
|
return Object.keys(this.room.currentState.members).length > 2;
|
|
|
|
return Object.keys(this.room.currentState.members).length > 2;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
async loadEvents(){
|
|
|
|
async loadEvents(){
|
|
|
|
|
|
|
|
let scrollBottom = this.scroll.getScrollBottom();
|
|
|
|
this.loadingStatus = 'loading ...';
|
|
|
|
this.loadingStatus = 'loading ...';
|
|
|
|
await matrix.client.paginateEventTimeline(this.room.getLiveTimeline(), {backwards: true})
|
|
|
|
await matrix.client.paginateEventTimeline(this.room.getLiveTimeline(), {backwards: true})
|
|
|
|
.then(state => this.loadingStatus = state?'load more':false);
|
|
|
|
.then(state => this.loadingStatus = state?'load more':false);
|
|
|
|
|
|
|
|
this.scroll.setScrollBottom(scrollBottom);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
getUser(userId){
|
|
|
|
getUser(userId){
|
|
|
|
return matrix.client.getUser(userId);
|
|
|
|
return matrix.client.getUser(userId);
|
|
|
@ -64,14 +63,16 @@ export default {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
showScrollBtn: false,
|
|
|
|
showScrollBtn: false,
|
|
|
|
scrollOnUpdate: true,
|
|
|
|
scrollOnUpdate: true,
|
|
|
|
loadingStatus: 'load more'
|
|
|
|
loadingStatus: 'load more',
|
|
|
|
|
|
|
|
scroll: ()=>{}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
updated(){
|
|
|
|
updated(){
|
|
|
|
//this.scrollToBottom();
|
|
|
|
if(this.scroll.getScrollBottom() < 400) this.scroll.scrollToBottom();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mounted(){
|
|
|
|
mounted(){
|
|
|
|
//this.scrollToBottom();
|
|
|
|
this.scroll = new scrollHandler(this.$refs.msgContainer);
|
|
|
|
|
|
|
|
this.scroll.scrollToBottom();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|