From 36b6fdcc883597d119f6bb52737fe97256625a81 Mon Sep 17 00:00:00 2001 From: Pavel Djundik Date: Fri, 13 Jul 2018 23:40:20 +0300 Subject: [PATCH] Reference scrolledToBottom variable instead of recalculating on message received --- client/components/MessageList.vue | 12 ++++++------ client/js/socket-events/msg.js | 13 ++----------- 2 files changed, 8 insertions(+), 17 deletions(-) diff --git a/client/components/MessageList.vue b/client/components/MessageList.vue index 3b1fb836..6a941334 100644 --- a/client/components/MessageList.vue +++ b/client/components/MessageList.vue @@ -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; }); diff --git a/client/js/socket-events/msg.js b/client/js/socket-events/msg.js index 553df62d..b6c8c8d3 100644 --- a/client/js/socket-events/msg.js +++ b/client/js/socket-events/msg.js @@ -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,13 +61,9 @@ 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; - } + messageLimit = 500; } if (messageLimit > 0 && channel.messages.length > messageLimit) {