Improve details of emoji/chan/nick/command autocompletion

- Make dropdown items match context menu items
- Disable transparency on dropdown item links
- Clean up help page additions
- Better align help page autocompletion characters
- Use ES6 features (`const`, arrow functions, method definition shorthands)
- Use `Array#filter` instead of `$.map`
- Do not display `@` in nick completion *when* only one `@` is used (to be less confusing and more consistent)

client/css/style.css

@@ -1338,8 +1338,7 @@ kbd {
 
 #help .help-item .subject {
 	white-space: nowrap;
-	padding-right: 10px;
+	padding-right: 15px;
-	min-width: 150px;
 }
 
 #help .help-item .description p {
@@ -1528,19 +1527,14 @@ kbd {
 	display: inline-block;
 }
 
-.textcomplete-item {
-	border-bottom-color: rgba(0, 0, 0, .1);
-	border-bottom-style: solid;
-	border-bottom-width: 1px;
-	margin-top: 0;
-	margin-bottom: 0;
-	padding: 10px 8px;
-}
-
 .textcomplete-item a {
 	color: #333;
 }
 
+.textcomplete-item a:hover {
+	opacity: 1;
+}
+
 .textcomplete-item .emoji {
 	margin-right: 8px;
 	width: 16px;

client/index.html

@@ -534,15 +534,17 @@
 
 						<h2>Autocompletion</h2>
 
-						<p> Start typing the following characters followed by any letter to
+						<p>
-						  trigger the autocompletion dropdown:</p>
+							Start typing the following characters followed by any letter to
+							trigger the autocompletion dropdown:
+						</p>
 
 						<div class="help-item">
 							<div class="subject">
 								<code>@</code>
 							</div>
 							<div class="description">
-								<p> Nickname </p>
+								<p>Nickname</p>
 							</div>
 						</div>
 
@@ -551,7 +553,7 @@
 								<code>#</code>
 							</div>
 							<div class="description">
-								<p> Chan </p>
+								<p>Channel</p>
 							</div>
 						</div>
 
@@ -560,7 +562,7 @@
 								<code>/</code>
 							</div>
 							<div class="description">
-								<p> Commands (see list of commands below)</p>
+								<p>Commands (see list of commands below)</p>
 							</div>
 						</div>
 
@@ -569,11 +571,10 @@
 								<code>:</code>
 							</div>
 							<div class="description">
-								<p> Emoji </p>
+								<p>Emoji</p>
 							</div>
 						</div>
 
-
 						<h2>Commands</h2>
 
 						<p>All commands can be autocompleted with <kbd>tab</kbd>.</p>

client/js/lounge.js

@@ -45,73 +45,66 @@ $(function() {
 
 	// Autocompletion Strategies
 
-	var emojiStrategy = {
+	const emojiStrategy = {
 		id: "emoji",
 		match: /\B:([-+\w]*)$/,
-		search: function(term, callback) {
+		search(term, callback) {
-			callback($.map(Object.keys(emojiMap), function(e) {
+			callback(Object.keys(emojiMap).filter(name => name.indexOf(term) === 0));
-				return e.indexOf(term) === 0 ? e : null;
-			}));
 		},
-		template: function(value) {
+		template(value) {
 			return `<span class="emoji">${emojiMap[value]}</span> ${value}`;
 		},
-		replace: function(value) {
+		replace(value) {
 			return emojiMap[value];
 		},
 		index: 1
 	};
 
-	var nicksStrategy = {
+	const nicksStrategy = {
 		id: "nicks",
 		match: /\B(@([a-zA-Z_[\]\\^{}|`@][a-zA-Z0-9_[\]\\^{}|`-]*)?)$/,
-		search: function(term, callback) {
+		search(term, callback) {
 			term = term.slice(1);
 			if (term[0] === "@") {
-				callback(completeNicks(term.slice(1)).map(function(val) {
+				callback(completeNicks(term.slice(1)).map(val => "@" + val));
-					return "@" + val;
-				}));
 			} else {
 				callback(completeNicks(term));
 			}
 		},
-		template: function(value) {
+		template(value) {
-			if (value[0] === "@") {
+			return value;
-				return value;
-			}
-			return "@" + value;
 		},
-		replace: function(value) {
+		replace(value) {
 			return value;
 		},
 		index: 1
 	};
 
-	var chanStrategy = {
+	const chanStrategy = {
 		id: "chans",
 		match: /\B((#|\+|&|![A-Z0-9]{5})([^\x00\x0A\x0D\x20\x2C\x3A]+(:[^\x00\x0A\x0D\x20\x2C\x3A]*)?)?)$/,
-		search: function(term, callback, match) {
+		search(term, callback, match) {
 			callback(completeChans(match[0]));
 		},
-		template: function(value) {
+		template(value) {
 			return value;
 		},
-		replace: function(value) {
+		replace(value) {
 			return value;
 		},
 		index: 1
 	};
 
-	var commandStrategy = {
+	const commandStrategy = {
 		id: "commands",
 		match: /^\/(\w*)$/,
-		search: function(term, callback) {
+		search(term, callback) {
 			callback(completeCommands("/" + term));
 		},
-		template: function(value) {
+		template(value) {
 			return value;
 		},
-		replace: function(value) {
+		replace(value) {
 			return value;
 		},
 		index: 1
@@ -1360,34 +1353,30 @@ $(function() {
 	}
 
 	function completeNicks(word) {
-		var users = chat.find(".active").find(".users");
+		const users = chat.find(".active").find(".users");
-		var words = users.data("nicks");
+		const words = users.data("nicks");
 
 		return $.grep(
 			words,
-			function(w) {
+			w => !w.toLowerCase().indexOf(word.toLowerCase())
-				return !w.toLowerCase().indexOf(word.toLowerCase());
-			}
 		);
 	}
 
 	function completeCommands(word) {
-		var words = constants.commands.slice();
+		const words = constants.commands.slice();
 
 		return $.grep(
 			words,
-			function(w) {
+			w => !w.toLowerCase().indexOf(word.toLowerCase())
-				return !w.toLowerCase().indexOf(word.toLowerCase());
-			}
 		);
 	}
 
 	function completeChans(word) {
-		var words = [];
+		const words = [];
 
 		sidebar.find(".chan")
 			.each(function() {
-				var self = $(this);
+				const self = $(this);
 				if (!self.hasClass("lobby")) {
 					words.push(self.data("title"));
 				}
@@ -1395,9 +1384,7 @@ $(function() {
 
 		return $.grep(
 			words,
-			function(w) {
+			w => !w.toLowerCase().indexOf(word.toLowerCase())
-				return !w.toLowerCase().indexOf(word.toLowerCase());
-			}
 		);
 	}