made channel names in chat clickable; lets users join channels

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 {

client/js/shout.js

@@ -190,13 +190,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<span class="inline-channel" role="button" tabindex="0" data-chan="$2">$2</span>'));
+		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;
 		}