From 320008cd492930f4eb5a166ecf6bf8468ccd67c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Sun, 19 Jul 2020 14:34:31 -0400
Subject: [PATCH] feat: #8509, don't scroll chat to bottom if user scrolled up

---
 public/language/en-GB/modules.json  |  1 +
 public/src/client/chats.js          | 10 ++++++++++
 public/src/client/chats/messages.js | 26 +++++++++++++++++++++++---
 public/src/modules/chat.js          |  5 ++++-
 4 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/public/language/en-GB/modules.json b/public/language/en-GB/modules.json
index 47d62c74d7c5..0ce26e11d720 100644
--- a/public/language/en-GB/modules.json
+++ b/public/language/en-GB/modules.json
@@ -1,6 +1,7 @@
 {
 	"chat.chatting_with": "Chat with",
 	"chat.placeholder": "Type chat message here, press enter to send",
+	"chat.scroll-up-alert": "You are looking at older messages, click here to go to most recent message.",
 	"chat.send": "Send",
 	"chat.no_active": "You have no active chats.",
 	"chat.user_typing": "%1 is typing ...",
diff --git a/public/src/client/chats.js b/public/src/client/chats.js
index b3e21858c4cc..8dd4fc25100f 100644
--- a/public/src/client/chats.js
+++ b/public/src/client/chats.js
@@ -56,6 +56,7 @@ define('forum/chats', [
 		Chats.addRenameHandler(ajaxify.data.roomId, components.get('chat/controls').find('[data-action="rename"]'));
 		Chats.addLeaveHandler(ajaxify.data.roomId, components.get('chat/controls').find('[data-action="leave"]'));
 		Chats.addScrollHandler(ajaxify.data.roomId, ajaxify.data.uid, $('.chat-content'));
+		Chats.addScrollBottomHandler($('.chat-content'));
 		Chats.addCharactersLeftHandler($('[component="chat/main-wrapper"]'));
 		Chats.addIPHandler($('[component="chat/main-wrapper"]'));
 		Chats.createAutoComplete($('[component="chat/input"]'));
@@ -101,6 +102,7 @@ define('forum/chats', [
 	Chats.addScrollHandler = function (roomId, uid, el) {
 		var loading = false;
 		el.off('scroll').on('scroll', function () {
+			messages.toggleScrollUpAlert(el);
 			if (loading) {
 				return;
 			}
@@ -144,6 +146,14 @@ define('forum/chats', [
 		});
 	};
 
+	Chats.addScrollBottomHandler = function (chatContent) {
+		chatContent.parent()
+			.find('[component="chat/messages/scroll-up-alert"]')
+			.off('click').on('click', function () {
+				messages.scrollToBottom(chatContent);
+			});
+	};
+
 	Chats.addCharactersLeftHandler = function (parent) {
 		var element = parent.find('[component="chat/input"]');
 		element.on('change keyup paste', function () {
diff --git a/public/src/client/chats/messages.js b/public/src/client/chats/messages.js
index 32eb1c262d6b..6316eef23671 100644
--- a/public/src/client/chats/messages.js
+++ b/public/src/client/chats/messages.js
@@ -84,11 +84,13 @@ define('forum/chats/messages', ['components', 'sounds', 'translator', 'benchpres
 
 	function onMessagesParsed(chatContentEl, html) {
 		var newMessage = $(html);
-
+		var isAtBottom = messages.isAtBottom(chatContentEl);
 		newMessage.appendTo(chatContentEl);
 		newMessage.find('.timeago').timeago();
 		newMessage.find('img:not(.not-responsive)').addClass('img-responsive');
-		messages.scrollToBottom(chatContentEl);
+		if (isAtBottom) {
+			messages.scrollToBottom(chatContentEl);
+		}
 
 		$(window).trigger('action:chat.received', {
 			messageEl: newMessage,
@@ -112,13 +114,31 @@ define('forum/chats/messages', ['components', 'sounds', 'translator', 'benchpres
 		}
 	};
 
+	messages.isAtBottom = function (containerEl, threshold) {
+		if (containerEl.length) {
+			var distanceToBottom = containerEl[0].scrollHeight - (
+				containerEl.outerHeight() + containerEl.scrollTop()
+			);
+			return distanceToBottom < (threshold || 100);
+		}
+	};
 
 	messages.scrollToBottom = function (containerEl) {
-		if (containerEl.length) {
+		if (containerEl && containerEl.length) {
 			containerEl.scrollTop(containerEl[0].scrollHeight - containerEl.height());
+			containerEl.parent()
+				.find('[component="chat/messages/scroll-up-alert"]')
+				.addClass('hidden');
 		}
 	};
 
+	messages.toggleScrollUpAlert = function (containerEl) {
+		var isAtBottom = messages.isAtBottom(containerEl, 300);
+		containerEl.parent()
+			.find('[component="chat/messages/scroll-up-alert"]')
+			.toggleClass('hidden', isAtBottom);
+	};
+
 	messages.prepEdit = function (inputEl, messageId, roomId) {
 		socket.emit('modules.chats.getRaw', { mid: messageId, roomId: roomId }, function (err, raw) {
 			if (err) {
diff --git a/public/src/modules/chat.js b/public/src/modules/chat.js
index 46549ea6208a..68e313181a43 100644
--- a/public/src/modules/chat.js
+++ b/public/src/modules/chat.js
@@ -91,7 +91,9 @@ define('chat', [
 
 			if (modal.is(':visible')) {
 				taskbar.updateActive(modal.attr('data-uuid'));
-				ChatsMessages.scrollToBottom(modal.find('.chat-content'));
+				if (ChatsMessages.isAtBottom(modal.find('.chat-content'))) {
+					ChatsMessages.scrollToBottom(modal.find('.chat-content'));
+				}
 			} else if (!ajaxify.data.template.chats) {
 				module.toggleNew(modal.attr('data-uuid'), true, true);
 			}
@@ -239,6 +241,7 @@ define('chat', [
 				Chats.createAutoComplete(chatModal.find('[component="chat/input"]'));
 
 				Chats.addScrollHandler(chatModal.attr('data-roomid'), data.uid, chatModal.find('.chat-content'));
+				Chats.addScrollBottomHandler(chatModal.find('.chat-content'));
 
 				Chats.addCharactersLeftHandler(chatModal);
 				Chats.addIPHandler(chatModal);