Merge pull request #787 from yashsriv/feat/emoji-autocomplete
Add autocomplete for emoji, users, chans, and commands
This commit is contained in:
Pavel Djundik
GitHub
commit
6c8d1616fd
|
|
@ -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 {
|
||||
|
|
@ -1486,7 +1485,8 @@ kbd {
|
|||
background: transparent;
|
||||
}
|
||||
|
||||
#context-menu {
|
||||
#context-menu,
|
||||
.textcomplete-menu {
|
||||
position: absolute;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
|
|
@ -1505,7 +1505,8 @@ kbd {
|
|||
background-color: rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
.context-menu-item {
|
||||
.context-menu-item,
|
||||
.textcomplete-item {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
padding: 4px 8px;
|
||||
|
|
@ -1514,15 +1515,33 @@ kbd {
|
|||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.context-menu-item:hover {
|
||||
.context-menu-item:hover,
|
||||
.textcomplete-item:hover,
|
||||
.textcomplete-menu .active {
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
.context-menu-item:before {
|
||||
.context-menu-item:before,
|
||||
.textcomplete-item:before {
|
||||
width: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.textcomplete-item a {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.textcomplete-item a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.textcomplete-item .emoji {
|
||||
margin-right: 8px;
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Tooltips v0.5.3
|
||||
* See http://primercss.io/tooltips/
|
||||
|
|
|
|||
|
|
@ -532,6 +532,49 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Autocompletion</h2>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="help-item">
|
||||
<div class="subject">
|
||||
<code>#</code>
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>Channel</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="help-item">
|
||||
<div class="subject">
|
||||
<code>/</code>
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>Commands (see list of commands below)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="help-item">
|
||||
<div class="subject">
|
||||
<code>:</code>
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>Emoji</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Commands</h2>
|
||||
|
||||
<p>All commands can be autocompleted with <kbd>tab</kbd>.</p>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ import jQuery from "jquery";
|
|||
var key = e.which;
|
||||
switch (key) {
|
||||
case 13: // Enter
|
||||
if (e.shiftKey) {
|
||||
if (e.shiftKey || self.data("autocompleting")) {
|
||||
return; // multiline input
|
||||
}
|
||||
|
||||
|
|
@ -56,7 +56,7 @@ import jQuery from "jquery";
|
|||
case 38: // Up
|
||||
case 40: // Down
|
||||
// NOTICE: This is specific to The Lounge.
|
||||
if (e.ctrlKey || e.metaKey) {
|
||||
if (e.ctrlKey || e.metaKey || self.data("autocompleting")) {
|
||||
break;
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -2,12 +2,14 @@
|
|||
|
||||
// vendor libraries
|
||||
require("jquery-ui/ui/widgets/sortable");
|
||||
require("jquery-textcomplete");
|
||||
const $ = require("jquery");
|
||||
const moment = require("moment");
|
||||
const Mousetrap = require("mousetrap");
|
||||
const URI = require("urijs");
|
||||
|
||||
// our libraries
|
||||
const emojiMap = require("./libs/simplemap.json");
|
||||
require("./libs/jquery/inputhistory");
|
||||
require("./libs/jquery/stickyscroll");
|
||||
require("./libs/jquery/tabcomplete");
|
||||
|
|
@ -41,6 +43,73 @@ $(function() {
|
|||
|
||||
var favicon = $("#favicon");
|
||||
|
||||
// Autocompletion Strategies
|
||||
|
||||
const emojiStrategy = {
|
||||
id: "emoji",
|
||||
match: /\B:([-+\w]*)$/,
|
||||
search(term, callback) {
|
||||
callback(Object.keys(emojiMap).filter(name => name.indexOf(term) === 0));
|
||||
},
|
||||
template(value) {
|
||||
return `<span class="emoji">${emojiMap[value]}</span> ${value}`;
|
||||
},
|
||||
replace(value) {
|
||||
return emojiMap[value];
|
||||
},
|
||||
index: 1
|
||||
};
|
||||
|
||||
const nicksStrategy = {
|
||||
id: "nicks",
|
||||
match: /\B(@([a-zA-Z_[\]\\^{}|`@][a-zA-Z0-9_[\]\\^{}|`-]*)?)$/,
|
||||
search(term, callback) {
|
||||
term = term.slice(1);
|
||||
if (term[0] === "@") {
|
||||
callback(completeNicks(term.slice(1)).map(val => "@" + val));
|
||||
} else {
|
||||
callback(completeNicks(term));
|
||||
}
|
||||
},
|
||||
template(value) {
|
||||
return value;
|
||||
},
|
||||
replace(value) {
|
||||
return value;
|
||||
},
|
||||
index: 1
|
||||
};
|
||||
|
||||
const chanStrategy = {
|
||||
id: "chans",
|
||||
match: /\B((#|\+|&|![A-Z0-9]{5})([^\x00\x0A\x0D\x20\x2C\x3A]+(:[^\x00\x0A\x0D\x20\x2C\x3A]*)?)?)$/,
|
||||
search(term, callback, match) {
|
||||
callback(completeChans(match[0]));
|
||||
},
|
||||
template(value) {
|
||||
return value;
|
||||
},
|
||||
replace(value) {
|
||||
return value;
|
||||
},
|
||||
index: 1
|
||||
};
|
||||
|
||||
const commandStrategy = {
|
||||
id: "commands",
|
||||
match: /^\/(\w*)$/,
|
||||
search(term, callback) {
|
||||
callback(completeCommands("/" + term));
|
||||
},
|
||||
template(value) {
|
||||
return value;
|
||||
},
|
||||
replace(value) {
|
||||
return value;
|
||||
},
|
||||
index: 1
|
||||
};
|
||||
|
||||
socket.on("auth", function(data) {
|
||||
var login = $("#sign-in");
|
||||
var token;
|
||||
|
|
@ -638,7 +707,18 @@ $(function() {
|
|||
|
||||
chat.find(".chan.active .chat").trigger("msg.sticky"); // fix growing
|
||||
})
|
||||
.tab(complete, {hint: false});
|
||||
.tab(completeNicks, {hint: false})
|
||||
.textcomplete([emojiStrategy, nicksStrategy, chanStrategy, commandStrategy], {
|
||||
dropdownClassName: "textcomplete-menu",
|
||||
placement: "top"
|
||||
}).on({
|
||||
"textComplete:show": function() {
|
||||
$(this).data("autocompleting", true);
|
||||
},
|
||||
"textComplete:hide": function() {
|
||||
$(this).data("autocompleting", false);
|
||||
}
|
||||
});
|
||||
|
||||
var focus = $.noop;
|
||||
if (!("ontouchstart" in window || navigator.maxTouchPoints > 0)) {
|
||||
|
|
@ -1272,18 +1352,31 @@ $(function() {
|
|||
.find(".messages .msg, .date-marker").remove();
|
||||
}
|
||||
|
||||
function complete(word) {
|
||||
var words = constants.commands.slice();
|
||||
var users = chat.find(".active").find(".users");
|
||||
var nicks = users.data("nicks");
|
||||
function completeNicks(word) {
|
||||
const users = chat.find(".active").find(".users");
|
||||
const words = users.data("nicks");
|
||||
|
||||
for (var i in nicks) {
|
||||
words.push(nicks[i]);
|
||||
}
|
||||
return $.grep(
|
||||
words,
|
||||
w => !w.toLowerCase().indexOf(word.toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
function completeCommands(word) {
|
||||
const words = constants.commands.slice();
|
||||
|
||||
return $.grep(
|
||||
words,
|
||||
w => !w.toLowerCase().indexOf(word.toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
function completeChans(word) {
|
||||
const words = [];
|
||||
|
||||
sidebar.find(".chan")
|
||||
.each(function() {
|
||||
var self = $(this);
|
||||
const self = $(this);
|
||||
if (!self.hasClass("lobby")) {
|
||||
words.push(self.data("title"));
|
||||
}
|
||||
|
|
@ -1291,9 +1384,7 @@ $(function() {
|
|||
|
||||
return $.grep(
|
||||
words,
|
||||
function(w) {
|
||||
return !w.toLowerCase().indexOf(word.toLowerCase());
|
||||
}
|
||||
w => !w.toLowerCase().indexOf(word.toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -68,6 +68,7 @@
|
|||
"handlebars": "4.0.6",
|
||||
"handlebars-loader": "1.5.0",
|
||||
"jquery": "3.2.1",
|
||||
"jquery-textcomplete": "1.8.0",
|
||||
"jquery-ui": "1.12.1",
|
||||
"mocha": "3.3.0",
|
||||
"mousetrap": "1.6.1",
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ let config = {
|
|||
"js/bundle.vendor.js": [
|
||||
"handlebars/runtime",
|
||||
"jquery",
|
||||
"jquery-textcomplete",
|
||||
"jquery-ui/ui/widgets/sortable",
|
||||
"moment",
|
||||
"mousetrap",
|
||||
|
|
|
|||
Loading…
Reference in New Issue