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)
This commit is contained in:
Jérémie Astori 2017-04-25 01:01:24 +02:00 committed by Yash Srivastav
parent 29d8bc9d3d
commit e000ba45df
No known key found for this signature in database
GPG key ID: 67A09FFAC003E189
3 changed files with 40 additions and 58 deletions

View file

@ -1338,8 +1338,7 @@ kbd {
#help .help-item .subject { #help .help-item .subject {
white-space: nowrap; white-space: nowrap;
padding-right: 10px; padding-right: 15px;
min-width: 150px;
} }
#help .help-item .description p { #help .help-item .description p {
@ -1528,19 +1527,14 @@ kbd {
display: inline-block; 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 { .textcomplete-item a {
color: #333; color: #333;
} }
.textcomplete-item a:hover {
opacity: 1;
}
.textcomplete-item .emoji { .textcomplete-item .emoji {
margin-right: 8px; margin-right: 8px;
width: 16px; width: 16px;

View file

@ -534,15 +534,17 @@
<h2>Autocompletion</h2> <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="help-item">
<div class="subject"> <div class="subject">
<code>@</code> <code>@</code>
</div> </div>
<div class="description"> <div class="description">
<p> Nickname </p> <p>Nickname</p>
</div> </div>
</div> </div>
@ -551,7 +553,7 @@
<code>#</code> <code>#</code>
</div> </div>
<div class="description"> <div class="description">
<p> Chan </p> <p>Channel</p>
</div> </div>
</div> </div>
@ -560,7 +562,7 @@
<code>/</code> <code>/</code>
</div> </div>
<div class="description"> <div class="description">
<p> Commands (see list of commands below)</p> <p>Commands (see list of commands below)</p>
</div> </div>
</div> </div>
@ -569,11 +571,10 @@
<code>:</code> <code>:</code>
</div> </div>
<div class="description"> <div class="description">
<p> Emoji </p> <p>Emoji</p>
</div> </div>
</div> </div>
<h2>Commands</h2> <h2>Commands</h2>
<p>All commands can be autocompleted with <kbd>tab</kbd>.</p> <p>All commands can be autocompleted with <kbd>tab</kbd>.</p>

View file

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