From e000ba45dfb594dfdf8dada5155ab6af30be21b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= Date: Tue, 25 Apr 2017 01:01:24 +0200 Subject: [PATCH] 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 | 16 ++++------- client/index.html | 15 +++++----- client/js/lounge.js | 67 ++++++++++++++++++-------------------------- 3 files changed, 40 insertions(+), 58 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index 522b319d..29323197 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -1338,8 +1338,7 @@ kbd { #help .help-item .subject { white-space: nowrap; - padding-right: 10px; - min-width: 150px; + padding-right: 15px; } #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; diff --git a/client/index.html b/client/index.html index af4d3bcd..5103e0ba 100644 --- a/client/index.html +++ b/client/index.html @@ -534,15 +534,17 @@

Autocompletion

-

Start typing the following characters followed by any letter to - trigger the autocompletion dropdown:

+

+ Start typing the following characters followed by any letter to + trigger the autocompletion dropdown: +

@
-

Nickname

+

Nickname

@@ -551,7 +553,7 @@ #
-

Chan

+

Channel

@@ -560,7 +562,7 @@ /
-

Commands (see list of commands below)

+

Commands (see list of commands below)

@@ -569,11 +571,10 @@ :
-

Emoji

+

Emoji

-

Commands

All commands can be autocompleted with tab.

diff --git a/client/js/lounge.js b/client/js/lounge.js index 5c44ba3a..327808dd 100644 --- a/client/js/lounge.js +++ b/client/js/lounge.js @@ -45,73 +45,66 @@ $(function() { // Autocompletion Strategies - var emojiStrategy = { + const emojiStrategy = { id: "emoji", match: /\B:([-+\w]*)$/, - search: function(term, callback) { - callback($.map(Object.keys(emojiMap), function(e) { - return e.indexOf(term) === 0 ? e : null; - })); + search(term, callback) { + callback(Object.keys(emojiMap).filter(name => name.indexOf(term) === 0)); }, - template: function(value) { + template(value) { return `${emojiMap[value]} ${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) { - return "@" + val; - })); + callback(completeNicks(term.slice(1)).map(val => "@" + val)); } else { callback(completeNicks(term)); } }, - template: function(value) { - if (value[0] === "@") { - return value; - } - return "@" + value; + template(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"); - var words = users.data("nicks"); + const users = chat.find(".active").find(".users"); + const words = users.data("nicks"); return $.grep( words, - function(w) { - return !w.toLowerCase().indexOf(word.toLowerCase()); - } + w => !w.toLowerCase().indexOf(word.toLowerCase()) ); } function completeCommands(word) { - var words = constants.commands.slice(); + const words = constants.commands.slice(); return $.grep( words, - function(w) { - return !w.toLowerCase().indexOf(word.toLowerCase()); - } + w => !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) { - return !w.toLowerCase().indexOf(word.toLowerCase()); - } + w => !w.toLowerCase().indexOf(word.toLowerCase()) ); }