From 36b6fdcc883597d119f6bb52737fe97256625a81 Mon Sep 17 00:00:00 2001
From: Pavel Djundik <github@xpaw.me>
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) {