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
This commit is contained in:
dgw 2018-03-08 10:27:20 -06:00
parent d1648823c3
commit e5a6417a82
3 changed files with 11 additions and 1 deletions

View file

@ -375,6 +375,7 @@ $(function() {
utils.toggleNotificationMarkers(false); utils.toggleNotificationMarkers(false);
} }
utils.scrollIntoViewNicely(self[0]);
slideoutMenu.toggle(false); slideoutMenu.toggle(false);
} }

View file

@ -5,6 +5,7 @@ const fuzzy = require("fuzzy");
const Mousetrap = require("mousetrap"); const Mousetrap = require("mousetrap");
const templates = require("../views"); const templates = require("../views");
const utils = require("./utils");
const chat = $("#chat"); const chat = $("#chat");
@ -93,7 +94,7 @@ exports.handleKeybinds = function(input) {
} }
// Adjust scroll when active item is outside of the visible area // 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 // When pressing Enter, open the context menu (emit a click) on the active

View file

@ -14,6 +14,7 @@ module.exports = {
lastMessageId, lastMessageId,
confirmExit, confirmExit,
forceFocus, forceFocus,
scrollIntoViewNicely,
hasRoleInChannel, hasRoleInChannel,
move, move,
resetHeight, resetHeight,
@ -58,6 +59,13 @@ function forceFocus() {
input.trigger("click").trigger("focus"); 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() { function collapse() {
$(".chan.active .toggle-button.toggle-preview.opened").click(); $(".chan.active .toggle-button.toggle-preview.opened").click();
return true; return true;