diff --git a/client/css/style.css b/client/css/style.css index 7ce8ea86..a81f1adf 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -608,6 +608,12 @@ button { display: none; font-style: normal; } +#chat .msg .inline-channel { + cursor: pointer; +} +#chat .msg .inline-channel:hover { + opacity: .6; +} #chat .time, #chat .from, #chat .text { diff --git a/client/js/shout.js b/client/js/shout.js index c3560284..dc0a8d7f 100644 --- a/client/js/shout.js +++ b/client/js/shout.js @@ -191,13 +191,39 @@ $(function() { var chan = chat.find(target); var from = data.msg.from; + var msg = $(render("msg", {messages: [data.msg]})); chan.find(".messages") - .append(render("msg", {messages: [data.msg]})) + .append(msg) .trigger("msg", [ target, data.msg ]); + var text = msg.find(".text"); + if (text.find("i").size() === 1) { + text = text.find("i"); + } + // Channels names are strings (beginning with a '&' or '#' character) + // of length up to 200 characters. + // See https://tools.ietf.org/html/rfc1459#section-1.3 + text.html(text.html().replace(/(^|\s)([#&][^\x07\x2C\s]{0,199})/ig, + '$1$2')); + text.find("span.inline-channel") + .on("click", function() { + var chan = $(".network") + .find(".chan.active") + .parent(".network") + .find(".chan[data-title='" + $(this).data("chan") + "']"); + if (chan.size() === 1) { + chan.click(); + } else { + socket.emit("input", { + target: chat.data("id"), + text: "/join " + $(this).data("chan") + }); + } + }); + if (!chan.hasClass("channel")) { return; }