From e5a6417a8244cc1a490695d25a7b5c5ee6782e05 Mon Sep 17 00:00:00 2001
From: dgw <dgw@technobabbl.es>
Date: Thu, 8 Mar 2018 10:27:20 -0600
Subject: [PATCH] Scroll to newly joined/activated channels

Add a new utility function for scrolling elements into view with the
same, consistent options, and use it for both the new channel scrolling
behavior and the existing userlist scroll code.

Implements & resolves #2062
---
 client/js/lounge.js   | 1 +
 client/js/userlist.js | 3 ++-
 client/js/utils.js    | 8 ++++++++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/client/js/lounge.js b/client/js/lounge.js
index 22560ece..1c28c7b5 100644
--- a/client/js/lounge.js
+++ b/client/js/lounge.js
@@ -375,6 +375,7 @@ $(function() {
 				utils.toggleNotificationMarkers(false);
 			}
 
+			utils.scrollIntoViewNicely(self[0]);
 			slideoutMenu.toggle(false);
 		}
 
diff --git a/client/js/userlist.js b/client/js/userlist.js
index 90595e3f..4c6ff81f 100644
--- a/client/js/userlist.js
+++ b/client/js/userlist.js
@@ -5,6 +5,7 @@ const fuzzy = require("fuzzy");
 const Mousetrap = require("mousetrap");
 
 const templates = require("../views");
+const utils = require("./utils");
 
 const chat = $("#chat");
 
@@ -93,7 +94,7 @@ exports.handleKeybinds = function(input) {
 		}
 
 		// Adjust scroll when active item is outside of the visible area
-		userlist.find(".user.active")[0].scrollIntoView(false);
+		utils.scrollIntoViewNicely(userlist.find(".user.active")[0]);
 	});
 
 	// When pressing Enter, open the context menu (emit a click) on the active
diff --git a/client/js/utils.js b/client/js/utils.js
index 6684ae71..4202c672 100644
--- a/client/js/utils.js
+++ b/client/js/utils.js
@@ -14,6 +14,7 @@ module.exports = {
 	lastMessageId,
 	confirmExit,
 	forceFocus,
+	scrollIntoViewNicely,
 	hasRoleInChannel,
 	move,
 	resetHeight,
@@ -58,6 +59,13 @@ function forceFocus() {
 	input.trigger("click").trigger("focus");
 }
 
+// Reusable scrollIntoView parameters for channel list / user list
+function scrollIntoViewNicely(el) {
+	// Ideally this would use behavior: "smooth", but that does not consistently work in e.g. Chrome
+	// https://github.com/iamdustan/smoothscroll/issues/28#issuecomment-364061459
+	el.scrollIntoView({block: "nearest", inline: "nearest"});
+}
+
 function collapse() {
 	$(".chan.active .toggle-button.toggle-preview.opened").click();
 	return true;