Make nick badge editable to set it in the UI

client/css/style.css

@@ -160,7 +160,8 @@ button {
 #chat .whois .from:before,
 #chat .nick .from:before,
 #chat .action .from:before,
-.context-menu-item:before {
+.context-menu-item:before,
+#nick button:before {
 	font: normal normal normal 14px/1 FontAwesome;
 	font-size: inherit; /* Can't have font-size inherit on line above, so need to override */
 	-webkit-font-smoothing: antialiased;
@@ -260,6 +261,18 @@ button {
 	margin-right: 9px;
 }
 
+#set-nick:before {
+	content: "\f040"; /* http://fontawesome.io/icon/pencil/ */
+}
+
+#submit-nick:before {
+	content: "\f00c"; /* http://fontawesome.io/icon/check/ */
+}
+
+#cancel-nick:before {
+	content: "\f00d"; /* http://fontawesome.io/icon/times/ */
+}
+
 /* End icons */
 
 #wrap {
@@ -1284,32 +1297,61 @@ button {
 	align-items: flex-end;
 }
 
+[contenteditable]:focus {
+	outline: none;
+}
+
+/* Nick editor */
+
 #form #nick {
 	background: #f6f6f6;
 	color: #666;
 	font: inherit;
 	font-size: 11px;
 	margin: 4px;
-	line-height: 26px;
+	line-height: 22px;
 	height: 24px;
-	padding: 0 9px;
-	border-radius: 1px;
+	padding-left: 9px;
+	padding-right: 5px;
+	border-radius: 2px;
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
 	user-select: none;
 	-webkit-flex: 0 0 auto;
 	flex: 0 0 auto;
+	border: 1px solid transparent;
+	transition: border-color .2s;
 }
 
-#form #nick:empty {
-	visibility: hidden;
+#form #nick-value {
+	padding-right: 5px;
 }
 
-#form #nick:after {
-	content: ":";
+#form #nick.editable {
+	border-color: black;
 }
 
+#nick button#set-nick,
+#nick button#submit-nick,
+#nick button#cancel-nick {
+	color: #aaa;
+	width: 18px;
+}
+
+#nick.editable button#set-nick,
+#nick button#submit-nick,
+#nick button#cancel-nick {
+	display: none;
+}
+
+#nick.editable button#submit-nick,
+#nick.editable button#cancel-nick {
+	display: inline-block;
+}
+
+/* End nick editor */
+
 #form #input {
 	background: transparent;
 	border: none;

client/index.html

@@ -59,7 +59,13 @@
 					<div id="chat"></div>
 					<form id="form" method="post" action="">
 						<div class="input">
-							<label for="input" id="nick"></label>
+							<span id="nick">
+								<span id="nick-value" spellcheck="false"></span><!-- Comments here remove spaces between elements
+								--><button id="set-nick" type="button" title="Set Nick" aria-label="Set nick"></button><!--
+								--><button id="cancel-nick" type="button" title="Cancel Nick" aria-label="Cancel nick"></button><!--
+								--><button id="submit-nick" type="button" title="Submit Nick" aria-label="Submit nick"></button>
+								</span>
+							</span>
 							<textarea id="input" class="mousetrap"></textarea>
 							<span class="tooltipped tooltipped-w" aria-label="Send message">
 								<button id="submit" type="submit" aria-label="Send message"></button>

client/js/lounge.js

@@ -713,6 +713,61 @@ $(function() {
 			.first();
 	}
 
+	$("button#set-nick").on("click", function() {
+		toggleNickEditor(true);
+
+		// Selects existing nick in the editable text field
+		var element = document.querySelector("#nick-value");
+		element.focus();
+		var range = document.createRange();
+		range.selectNodeContents(element);
+		var selection = window.getSelection();
+		selection.removeAllRanges();
+		selection.addRange(range);
+	});
+
+	$("button#cancel-nick").on("click", cancelNick);
+	$("button#submit-nick").on("click", submitNick);
+
+	function toggleNickEditor(toggle) {
+		$("#nick").toggleClass("editable", toggle);
+		$("#nick-value").attr("contenteditable", toggle);
+	}
+
+	// FIXME Reset content when new nick is invalid (already in use, forbidden chars, ...)
+	function submitNick() {
+		var newNick = $("#nick-value").text();
+
+		socket.emit("input", {
+			target: chat.data("id"),
+			text: "/nick " + newNick
+		});
+
+		toggleNickEditor(false);
+	}
+
+	function cancelNick() {
+		setNick(sidebar.find(".chan.active").closest(".network").data("nick"));
+	}
+
+	$("#nick-value").keypress(function(e) {
+		switch (e.keyCode ? e.keyCode : e.which) {
+		case 13: // Enter
+			// Ensures a new line is not added when pressing Enter
+			e.preventDefault();
+			break;
+		}
+	}).keyup(function(e) {
+		switch (e.keyCode ? e.keyCode : e.which) {
+		case 13: // Enter
+			submitNick();
+			break;
+		case 27: // Escape
+			cancelNick();
+			break;
+		}
+	});
+
 	chat.on("click", ".inline-channel", function() {
 		var name = $(this).data("chan");
 		var chan = findCurrentNetworkChan(name);
@@ -1198,7 +1253,10 @@ $(function() {
 	}
 
 	function setNick(nick) {
-		$("#nick").text(nick);
+		$("#nick-value").text(nick);
+		// Closes the nick editor when canceling, changing channel, or when a nick
+		// is set in a different tab / browser / device.
+		toggleNickEditor(false);
 	}
 
 	function move(array, old_index, new_index) {