feat: #8509, don't scroll chat to bottom if user scrolled up

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 ...",

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 () {

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');
+		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) {

public/src/modules/chat.js

@@ -91,7 +91,9 @@ define('chat', [
 
 			if (modal.is(':visible')) {
 				taskbar.updateActive(modal.attr('data-uuid'));
+				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);