supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Reference scrolledToBottom variable instead of recalculating on message received

Browse Source
This commit is contained in:
Pavel Djundik 2018-07-13 23:40:20 +03:00 committed by Pavel Djundik
parent efdf11dcae
commit 36b6fdcc88
2 changed files with 8 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/components/MessageList.vue
View File

@ -116,7 +116,7 @@ export default {
},
watch: {
"channel.id"() {
this.scrolledToBottom = true;
this.$set(this.link, "scrolledToBottom", true);
},
"channel.messages"() {
this.keepScrollPosition();
@ -134,13 +134,13 @@ export default {
});
}
this.scrolledToBottom = true;
this.channel.scrolledToBottom = true;
this.$refs.chat.scrollTop = this.$refs.chat.scrollHeight;
});
},
mounted() {
this.debouncedResize = debounce(this.handleResize, 50);
this.debouncedScroll = debounce(this.handleScroll, 50)
this.debouncedScroll = debounce(this.handleScroll, 50);
window.addEventListener("resize", this.debouncedResize, {passive: true});
this.$refs.chat.addEventListener("scroll", this.debouncedScroll, {passive: true});
@ -226,7 +226,7 @@ export default {
return;
}
if (!this.scrolledToBottom) {
if (!this.channel.scrolledToBottom) {
if (this.channel.historyLoading) {
const heightOld = el.scrollHeight - el.scrollTop;
@ -253,13 +253,13 @@ export default {
return;
}
this.scrolledToBottom = el.scrollHeight - el.scrollTop - el.offsetHeight <= 30;
this.channel.scrolledToBottom = el.scrollHeight - el.scrollTop - el.offsetHeight <= 30;
},
handleResize() {
// Keep message list scrolled to bottom on resize
const el = this.$refs.chat;
if (el && this.scrolledToBottom) {
if (el && this.channel.scrolledToBottom) {
this.$nextTick(() => {
el.scrollTop = el.scrollHeight;
});

11
client/js/socket-events/msg.js
View File

@ -25,8 +25,6 @@ socket.on("msg", function(data) {
}
let targetId = data.chan;
let target = "#chan-" + targetId;
let channelContainer = $("#chat").find(target);
let {channel} = findChannel(data.chan);
if (typeof data.highlight !== "undefined") {
@ -48,9 +46,6 @@ socket.on("msg", function(data) {
channel = vueApp.activeChannel.channel;
targetId = data.chan = channel.id;
target = "#chan-" + targetId;
channelContainer = $("#chat").find(target);
}
channel.messages.push(data.msg);
@ -66,14 +61,10 @@ socket.on("msg", function(data) {
if (!vueApp.activeChannel || vueApp.activeChannel.channel !== channel) {
// If message arrives in non active channel, keep only 100 messages
messageLimit = 100;
} else {
const el = channelContainer.find(".chat").get(0);
} else if (channel.scrolledToBottom) {
// If message arrives in active channel, keep 500 messages if scroll is currently at the bottom
if (el.scrollHeight - el.scrollTop - el.offsetHeight <= 30) {
messageLimit = 500;
}
}
if (messageLimit > 0 && channel.messages.length > messageLimit) {
channel.messages.splice(0, channel.messages.length - messageLimit);