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

Reference scrolledToBottom variable instead of recalculating on message received

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: { watch: {
"channel.id"() { "channel.id"() {
this.scrolledToBottom = true; this.$set(this.link, "scrolledToBottom", true);
}, },
"channel.messages"() { "channel.messages"() {
this.keepScrollPosition(); this.keepScrollPosition();
@ -134,13 +134,13 @@ export default {
}); });
} }
this.scrolledToBottom = true; this.channel.scrolledToBottom = true;
this.$refs.chat.scrollTop = this.$refs.chat.scrollHeight; this.$refs.chat.scrollTop = this.$refs.chat.scrollHeight;
}); });
}, },
mounted() { mounted() {
this.debouncedResize = debounce(this.handleResize, 50); 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}); window.addEventListener("resize", this.debouncedResize, {passive: true});
this.$refs.chat.addEventListener("scroll", this.debouncedScroll, {passive: true}); this.$refs.chat.addEventListener("scroll", this.debouncedScroll, {passive: true});
@ -226,7 +226,7 @@ export default {
return; return;
} }
if (!this.scrolledToBottom) { if (!this.channel.scrolledToBottom) {
if (this.channel.historyLoading) { if (this.channel.historyLoading) {
const heightOld = el.scrollHeight - el.scrollTop; const heightOld = el.scrollHeight - el.scrollTop;
@ -253,13 +253,13 @@ export default {
return; return;
} }
this.scrolledToBottom = el.scrollHeight - el.scrollTop - el.offsetHeight <= 30; this.channel.scrolledToBottom = el.scrollHeight - el.scrollTop - el.offsetHeight <= 30;
}, },
handleResize() { handleResize() {
// Keep message list scrolled to bottom on resize // Keep message list scrolled to bottom on resize
const el = this.$refs.chat; const el = this.$refs.chat;
if (el && this.scrolledToBottom) { if (el && this.channel.scrolledToBottom) {
this.$nextTick(() => { this.$nextTick(() => {
el.scrollTop = el.scrollHeight; 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 targetId = data.chan;
let target = "#chan-" + targetId;
let channelContainer = $("#chat").find(target);
let {channel} = findChannel(data.chan); let {channel} = findChannel(data.chan);
if (typeof data.highlight !== "undefined") { if (typeof data.highlight !== "undefined") {
@ -48,9 +46,6 @@ socket.on("msg", function(data) {
channel = vueApp.activeChannel.channel; channel = vueApp.activeChannel.channel;
targetId = data.chan = channel.id; targetId = data.chan = channel.id;
target = "#chan-" + targetId;
channelContainer = $("#chat").find(target);
} }
channel.messages.push(data.msg); channel.messages.push(data.msg);
@ -66,14 +61,10 @@ socket.on("msg", function(data) {
if (!vueApp.activeChannel || vueApp.activeChannel.channel !== channel) { if (!vueApp.activeChannel || vueApp.activeChannel.channel !== channel) {
// If message arrives in non active channel, keep only 100 messages // If message arrives in non active channel, keep only 100 messages
messageLimit = 100; messageLimit = 100;
} else { } else if (channel.scrolledToBottom) {
const el = channelContainer.find(".chat").get(0);
// If message arrives in active channel, keep 500 messages if scroll is currently at the bottom // 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; messageLimit = 500;
} }
}
if (messageLimit > 0 && channel.messages.length > messageLimit) { if (messageLimit > 0 && channel.messages.length > messageLimit) {
channel.messages.splice(0, channel.messages.length - messageLimit); channel.messages.splice(0, channel.messages.length - messageLimit);