From ddaf7ff300746e7e8aec4aa6a940294ddcd2a36f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Thu, 6 Oct 2016 19:42:05 -0400
Subject: [PATCH] Add a way to cycle through nicks on mobile

This was heavily inspired by https://github.com/maxpoulin64/lounge/commit/a877e46.
Clearly not a definitive solution but a good start to have and to improve upon.
---
 client/css/style.css | 11 ++++++++++-
 client/index.html    |  3 +++
 client/js/lounge.js  |  6 ++++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/client/css/style.css b/client/css/style.css
index 6a0b0408..ce41be48 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -141,6 +141,7 @@ button {
 #footer .icon,
 #chat .count:before,
 #settings #play:before,
+#form #cycle-nicks:before,
 #form #submit:before,
 #chat .invite .from:before,
 #chat .join .from:before,
@@ -186,6 +187,8 @@ button {
 #footer .settings:before { content: "\f013"; /* http://fontawesome.io/icon/cog/ */ }
 #footer .sign-out:before { content: "\f011"; /* http://fontawesome.io/icon/power-off/ */ }
 
+#form #cycle-nicks:before { content: "\f007"; /* http://fontawesome.io/icon/user/ */ }
+
 #form #submit:before { content: "\f1d8"; /* http://fontawesome.io/icon/paper-plane/ */ }
 
 #chat .invite .from:before {
@@ -1362,16 +1365,22 @@ button {
 	align-self: center;
 }
 
+#form #cycle-nicks,
 #form #submit {
 	color: #9ca5b4;
 	font-size: 14px;
 	height: 32px;
 	transition: opacity .2s;
-	width: 32px;
+	width: 24px;
 	-webkit-flex: 0 0 auto;
 	flex: 0 0 auto;
 }
 
+#form #submit {
+	margin-right: 4px;
+}
+
+#form #cycle-nicks:hover,
 #form #submit:hover {
 	opacity: .6;
 }
diff --git a/client/index.html b/client/index.html
index 1e6098e1..4226476f 100644
--- a/client/index.html
+++ b/client/index.html
@@ -66,6 +66,9 @@
 								--><span id="save-nick-tooltip" class="tooltipped tooltipped-e" aria-label="Save"><button id="submit-nick" type="button" aria-label="Save"></button></span>
 							</span>
 							<textarea id="input" class="mousetrap"></textarea>
+							<span id="cycle-nicks-tooltip" class="tooltipped tooltipped-w" aria-label="Cycle through nicks">
+								<button id="cycle-nicks" type="button" aria-label="Cycle through nicks"></button>
+							</span>
 							<span id="submit-tooltip" class="tooltipped tooltipped-w" aria-label="Send message">
 								<button id="submit" type="submit" aria-label="Send message"></button>
 							</span>
diff --git a/client/js/lounge.js b/client/js/lounge.js
index 9769efd2..3722ed3c 100644
--- a/client/js/lounge.js
+++ b/client/js/lounge.js
@@ -721,6 +721,12 @@ $(function() {
 		})
 		.tab(complete, {hint: false});
 
+	// Cycle through nicks for the current word, just like hitting "Tab"
+	$("#cycle-nicks").on("click", function() {
+		input.triggerHandler($.Event("keydown.tabcomplete", {which: 9}));
+		focus();
+	});
+
 	$("#form").on("submit", function(e) {
 		e.preventDefault();
 		var text = input.val();