dan/Nertivia-Client
1
0
Fork 0
mirror of https://github.com/danbulant/Nertivia-Client synced 2026-07-05 19:10:52 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixed issues with auto scroll.

Browse source
This commit is contained in:
supertiger1234 2019-08-09 20:24:54 +01:00
parent 82a0ae2031
commit 66420c62b2
1 changed files with 22 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
src/components/app/MessagePanel.vue
View file

@ -9,7 +9,7 @@
<div class="loading" v-if="selectedChannelID && !selectedChannelMessages"> <div class="loading" v-if="selectedChannelID && !selectedChannelMessages">
<spinner/> <spinner/>
</div> </div>
<div v-else-if="selectedChannelID" ref="msg-logs" class="message-logs" > <div v-else-if="selectedChannelID" ref="msg-logs" class="message-logs" @scroll="scrollEvent">
<div class="scroll"> <div class="scroll">
<message <message
class="message-container" class="message-container"
@ -123,7 +123,8 @@ export default {
typingTimer: null, typingTimer: null,
typing: false, typing: false,
typingRecipients: {}, typingRecipients: {},
showEmojiPanel: false showEmojiPanel: false,
scrolledDown: true,
}; };
}, },
methods: { methods: {
@ -257,7 +258,7 @@ export default {
} else { } else {
input.style.height = "auto"; input.style.height = "auto";
input.style.height = `calc(${input.scrollHeight}px - 1em)`; input.style.height = `calc(${input.scrollHeight}px - 1em)`;
this.scrollDown(false, undefined, input.scrollHeight); this.scrollDown();
} }
}, },
@ -454,14 +455,15 @@ export default {
}); });
} }
}, },
scrollDown(ignoreScrolledDown, el, minScroll = 100) { scrollEvent(event) {
const element = el || this.$refs['msg-logs']; const { currentTarget: { scrollTop, clientHeight, scrollHeight} } = event;
this.scrolledDown = Math.abs(scrollHeight - scrollTop - clientHeight) <= 3.0;
},
scrollDown() {
if (!this.scrolledDown) return;
const element = this.$refs['msg-logs']
if (!element) return; if (!element) return;
const currentScroll = element.scrollHeight - element.scrollTop; element.scrollTop = element.scrollHeight;
const total = element.clientHeight;
if ( ignoreScrolledDown || ( currentScroll <= total + minScroll ) ){
element.scrollTop = element.scrollHeight;
}
}, },
onResize(dimentions) { onResize(dimentions) {
this.scrollDown(); this.scrollDown();
@ -497,7 +499,7 @@ export default {
2500 2500
); );
}; };
this.scrollDown(true); this.scrollDown();
bus.$on("newMessage", this.hideTypingStatus); bus.$on("newMessage", this.hideTypingStatus);
bus.$on("emojiSuggestions:Selected", this.enterEmojiSuggestion); bus.$on("emojiSuggestions:Selected", this.enterEmojiSuggestion);
@ -520,33 +522,21 @@ export default {
delete this.$options.sockets.typingStatus; delete this.$options.sockets.typingStatus;
}, },
watch: { watch: {
selectedChannelMessages(newMessages, oldMessages){ scrolledDown(v) {
let element = this.$refs['msg-logs'];
let currentScroll;
let total;
if (element) {
currentScroll = element.scrollHeight - element.scrollTop
total = element.clientHeight
}
},
selectedChannelMessages(newMessages, oldMessages){
this.$nextTick(function () { this.$nextTick(function () {
if (oldMessages === undefined) { this.scrollDown();
this.scrollDown(true);
} else {
if (currentScroll === total) {
this.scrollDown(true);
}
}
}) })
}, },
selectedChannelID(){
this.scrolledDown = true;
},
uploadQueue() { uploadQueue() {
let element = this.$refs['msg-logs'];
let currentScroll = element.scrollHeight - element.scrollTop;
let total = element.clientHeight;
this.$nextTick(function () { this.$nextTick(function () {
if (currentScroll === total) { this.scrollDown(true);
this.scrollDown(true);
}
}) })
}, },
editMessage(editMessage) { editMessage(editMessage) {