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:
parent
29d8bc9d3d
commit
e000ba45df
@ -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;
|
||||
|
@ -534,15 +534,17 @@
|
||||
|
||||
<h2>Autocompletion</h2>
|
||||
|
||||
<p> Start typing the following characters followed by any letter to
|
||||
trigger the autocompletion dropdown:</p>
|
||||
<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>
|
||||
|
@ -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 `<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) {
|
||||
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())
|
||||
);
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user