From ee7272305af0a6f41ccaa86f050896e6d40fb49c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= Date: Sat, 16 Dec 2017 15:27:26 -0500 Subject: [PATCH] Adjust user list scroll when active item is outside of the visible area --- client/js/userlist.js | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/client/js/userlist.js b/client/js/userlist.js index faf9ffb9..9b646565 100644 --- a/client/js/userlist.js +++ b/client/js/userlist.js @@ -55,15 +55,17 @@ chat.on("mouseleave", ".users .user", function() { exports.handleKeybinds = function(input) { Mousetrap(input.get(0)).bind(["up", "down"], (_e, key) => { const userlists = input.closest(".users"); - let users; + let userlist; // If input field has content, use the filtered list instead if (input.val().length) { - users = userlists.find(".names-filtered .user"); + userlist = userlists.find(".names-filtered"); } else { - users = userlists.find(".names-original .user"); + userlist = userlists.find(".names-original"); } + const users = userlist.find(".user"); + // Find which item in the array of users is currently selected, if any. // Returns -1 if none. const activeIndex = users.toArray() @@ -80,6 +82,19 @@ exports.handleKeybinds = function(input) { // If no users or first user was marked as active, mark the last one. users.eq(Math.max(activeIndex, 0) - 1).addClass("active"); } + + // Adjust scroll when active item is outside of the visible area + const userlistHeight = userlist.height(); + const userlistScroll = userlist.scrollTop(); + const active = $(".user.active"); + const activeTop = active.position().top; + const activeHeight = active.height(); + + if (activeTop > userlistHeight - activeHeight) { + userlist.scrollTop(userlistScroll + activeTop - userlistHeight + activeHeight); + } else if (activeTop < 0) { + userlist.scrollTop(userlistScroll + activeTop - activeHeight); + } }); // When pressing Enter, open the context menu (emit a click) on the active