Merge pull request #1842 from thelounge/astorije/userlist-up-down

Move the user list client code to its own file and make it possible to navigate with keyboard

client/css/style.css

@@ -1208,7 +1208,7 @@ kbd {
 	color: #50a656;
 }
 
-#chat .user:hover {
+.chat .user:hover {
 	opacity: 0.6;
 }
 
@@ -1925,7 +1925,8 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 
 .context-menu-item:hover,
 .textcomplete-item:hover,
-.textcomplete-menu .active {
+.textcomplete-menu .active,
+#chat .users .user.active {
 	background-color: #f6f6f6;
 	transition: none;
 }

client/js/lounge.js

@@ -5,7 +5,6 @@ require("jquery-ui/ui/widgets/sortable");
 const $ = require("jquery");
 const moment = require("moment");
 const URI = require("urijs");
-const fuzzy = require("fuzzy");
 
 // our libraries
 require("./libs/jquery/inputhistory");
@@ -585,34 +584,6 @@ $(function() {
 		contextMenuActions.execute(contextAction, itemData);
 	});
 
-	chat.on("input", ".search", function() {
-		const value = $(this).val();
-		const parent = $(this).closest(".users");
-		const names = parent.find(".names-original");
-		const container = parent.find(".names-filtered");
-
-		if (!value.length) {
-			container.hide();
-			names.show();
-			return;
-		}
-
-		const fuzzyOptions = {
-			pre: "<b>",
-			post: "</b>",
-			extract: (el) => $(el).text(),
-		};
-
-		const result = fuzzy.filter(
-			value,
-			names.find(".user").toArray(),
-			fuzzyOptions
-		);
-
-		names.hide();
-		container.html(templates.user_filtered({matches: result})).show();
-	});
-
 	if ($(document.body).hasClass("public") && (window.location.hash === "#connect" || window.location.hash === "")) {
 		$("#connect").one("show", function() {
 			const params = URI(document.location.search).search(true);

client/js/render.js

@@ -10,6 +10,7 @@ const constants = require("./constants");
 const condensed = require("./condensed");
 const JoinChannel = require("./join-channel");
 const helpers_parse = require("./libs/handlebars/parse");
+const Userlist = require("./userlist");
 
 const chat = $("#chat");
 const sidebar = $("#sidebar");
@@ -117,7 +118,9 @@ function renderChannel(data) {
 	renderChannelMessages(data);
 
 	if (data.type === "channel") {
-		renderChannelUsers(data);
+		const users = renderChannelUsers(data);
+
+		Userlist.handleKeybinds(users.find(".search"));
 	}
 
 	if (historyObserver) {
@@ -160,6 +163,11 @@ function renderChannelUsers(data) {
 		.sort((a, b) => b.lastMessage - a.lastMessage)
 		.map((a) => a.nick);
 
+	// Before re-rendering the list of names, there might have been an entry
+	// marked as active (i.e. that was highlighted by keyboard navigation).
+	// It is `undefined` if there was none.
+	const previouslyActive = users.find(".active").data("name");
+
 	const search = users
 		.find(".search")
 		.prop("placeholder", nicks.length + " " + (nicks.length === 1 ? "user" : "users"));
@@ -173,6 +181,17 @@ function renderChannelUsers(data) {
 	if (search.val().length) {
 		search.trigger("input");
 	}
+
+	// If a nick was highlighted before re-rendering the lists, re-highlight it in
+	// the newly-rendered list.
+	if (previouslyActive) {
+		// We need to un-highlight everything first because triggering `input` with
+		// a value highlights the first entry.
+		users.find(".user").removeClass("active");
+		users.find(`.user[data-name="${previouslyActive}"]`).addClass("active");
+	}
+
+	return users;
 }
 
 function renderNetworks(data, singleNetwork) {

client/js/userlist.js

@@ -0,0 +1,116 @@
+"use strict";
+
+const $ = require("jquery");
+const fuzzy = require("fuzzy");
+const Mousetrap = require("mousetrap");
+
+const templates = require("../views");
+
+const chat = $("#chat");
+
+chat.on("input", ".users .search", function() {
+	const value = $(this).val();
+	const parent = $(this).closest(".users");
+	const names = parent.find(".names-original");
+	const container = parent.find(".names-filtered");
+
+	// Input content has changed, reset the potential selection
+	parent.find(".user").removeClass("active");
+
+	if (!value.length) {
+		container.hide();
+		names.show();
+		return;
+	}
+
+	const fuzzyOptions = {
+		pre: "<b>",
+		post: "</b>",
+		extract: (el) => $(el).text(),
+	};
+
+	const result = fuzzy.filter(
+		value,
+		names.find(".user").toArray(),
+		fuzzyOptions
+	);
+
+	names.hide();
+	container.html(templates.user_filtered({matches: result})).show();
+
+	// Mark the first result as active for convenience
+	container.find(".user").first().addClass("active");
+});
+
+chat.on("mouseenter", ".users .user", function() {
+	// Reset any potential selection, this is required in cas there is already a
+	// nick previously selected by keyboard
+	$(".users .user").removeClass("active");
+
+	$(this).addClass("active");
+});
+
+chat.on("mouseleave", ".users .user", function() {
+	// Reset any potential selection
+	$(".users .user").removeClass("active");
+});
+
+exports.handleKeybinds = function(input) {
+	Mousetrap(input.get(0)).bind(["up", "down"], (_e, key) => {
+		const userlists = input.closest(".users");
+		let userlist;
+
+		// If input field has content, use the filtered list instead
+		if (input.val().length) {
+			userlist = userlists.find(".names-filtered");
+		} else {
+			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()
+			.findIndex((user) => user.classList.contains("active"));
+
+		// Now that we know which user is active, reset any selection
+		userlists.find(".user").removeClass("active");
+
+		// Mark next/previous user as active.
+		if (key === "down") {
+			// If no users or last user were marked as active, mark the first one.
+			users.eq((activeIndex + 1) % users.length).addClass("active");
+		} else {
+			// 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
+	// user
+	Mousetrap(input.get(0)).bind("enter", () => {
+		const user = input.closest(".users").find(".user.active");
+
+		if (user.length) {
+			const clickEvent = new $.Event("click");
+			const userOffset = user.offset();
+			clickEvent.pageX = userOffset.left;
+			clickEvent.pageY = userOffset.top + user.height();
+			user.trigger(clickEvent);
+		}
+	});
+};