diff --git a/client/css/style.css b/client/css/style.css index af9b5605..9f731c39 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -1533,6 +1533,10 @@ kbd { display: inline-block; } +.textcomplete-item .irc-bg { + display: block; +} + /** * Tooltips v0.5.3 * See http://primercss.io/tooltips/ diff --git a/client/js/constants.js b/client/js/constants.js index e1990158..5c5811fd 100644 --- a/client/js/constants.js +++ b/client/js/constants.js @@ -1,5 +1,24 @@ "use strict"; +const colorCodeMap = [ + ["00", "White"], + ["01", "Black"], + ["02", "Blue"], + ["03", "Green"], + ["04", "Red"], + ["05", "Brown"], + ["06", "Magenta"], + ["07", "Orange"], + ["08", "Yellow"], + ["09", "Light Green"], + ["10", "Cyan"], + ["11", "Light Cyan"], + ["12", "Light Blue"], + ["13", "Pink"], + ["14", "Grey"], + ["15", "Light Grey"], +]; + const commands = [ "/away", "/back", @@ -36,5 +55,6 @@ const commands = [ ]; module.exports = { + colorCodeMap: colorCodeMap, commands: commands }; diff --git a/client/js/lounge.js b/client/js/lounge.js index abac9904..fcf9f46a 100644 --- a/client/js/lounge.js +++ b/client/js/lounge.js @@ -111,6 +111,45 @@ $(function() { index: 1 }; + const foregroundColorStrategy = { + id: "foreground-colors", + match: /\x03(\d{0,2}|[A-Za-z ]{0,10})$/, + search(term, callback) { + term = term.toLowerCase(); + const matchingColorCodes = constants.colorCodeMap + .filter(i => i[0].startsWith(term) || i[1].toLowerCase().startsWith(term)); + + callback(matchingColorCodes); + }, + template(value) { + return `${value[1]}`; + }, + replace(value) { + return "\x03" + value[0]; + }, + index: 1 + }; + + const backgroundColorStrategy = { + id: "background-colors", + match: /\x03(\d{2}),(\d{0,2}|[A-Za-z ]{0,10})$/, + search(term, callback, match) { + term = term.toLowerCase(); + const matchingColorCodes = constants.colorCodeMap + .filter(i => i[0].startsWith(term) || i[1].toLowerCase().startsWith(term)) + .map(pair => pair.concat(match[1])); // Needed to pass fg color to `template`... + + callback(matchingColorCodes); + }, + template(value) { + return `${value[1]}`; + }, + replace(value) { + return "\x03$1," + value[0]; + }, + index: 2 + }; + socket.on("auth", function(data) { var login = $("#sign-in"); var token; @@ -724,7 +763,10 @@ $(function() { chat.find(".chan.active .chat").trigger("msg.sticky"); // fix growing }) .tab(completeNicks, {hint: false}) - .textcomplete([emojiStrategy, nicksStrategy, chanStrategy, commandStrategy], { + .textcomplete([ + emojiStrategy, nicksStrategy, chanStrategy, commandStrategy, + foregroundColorStrategy, backgroundColorStrategy + ], { dropdownClassName: "textcomplete-menu", placement: "top" }).on({