supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Adjust user list scroll when active item is outside of the visible area

Browse Source
This commit is contained in:
Jérémie Astori 2017-12-16 15:27:26 -05:00
parent bfc8959bb9
commit ee7272305a
No known key found for this signature in database
GPG Key ID: B9A4F245CD67BDE8
1 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
client/js/userlist.js
View File

@ -55,15 +55,17 @@ chat.on("mouseleave", ".users .user", function() {
exports.handleKeybinds = function(input) { exports.handleKeybinds = function(input) {
Mousetrap(input.get(0)).bind(["up", "down"], (_e, key) => { Mousetrap(input.get(0)).bind(["up", "down"], (_e, key) => {
const userlists = input.closest(".users"); const userlists = input.closest(".users");
let users; let userlist;
// If input field has content, use the filtered list instead // If input field has content, use the filtered list instead
if (input.val().length) { if (input.val().length) {
users = userlists.find(".names-filtered .user"); userlist = userlists.find(".names-filtered");
} else { } 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. // Find which item in the array of users is currently selected, if any.
// Returns -1 if none. // Returns -1 if none.
const activeIndex = users.toArray() 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. // If no users or first user was marked as active, mark the last one.
users.eq(Math.max(activeIndex, 0) - 1).addClass("active"); 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 // When pressing Enter, open the context menu (emit a click) on the active