From 12839af6849f52f07311904201c0511212f20e21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Fri, 29 Jul 2016 02:10:29 -0400
Subject: [PATCH] Make nick badge editable to set it in the UI

---
 client/css/style.css | 58 ++++++++++++++++++++++++++++++++++++------
 client/index.html    |  8 +++++-
 client/js/lounge.js  | 60 +++++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 116 insertions(+), 10 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index 65bba699..9596efd7 100644
--- a/client/css/style.css
+++ b/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;
diff --git a/client/index.html b/client/index.html
index 1276b99b..bc3c7e0e 100644
--- a/client/index.html
+++ b/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>
diff --git a/client/js/lounge.js b/client/js/lounge.js
index 58cf0c17..1b65f4b0 100644
--- a/client/js/lounge.js
+++ b/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) {