Make the text field visible during text edition.

client-data/board.css

@@ -77,7 +77,7 @@ html, body, svg {
 	border:1px solid black;
 	border-radius:3px;
 	color:black;
-	text-shadow: 0 0 5px white;
+	text-shadow: 0 0 6px white;
 }
 
 #chooseSize {

client-data/board.html

@@ -22,7 +22,6 @@
 
 <div id="menu">
 	<h2 id="toggleMenu">Menu</h2>
-	
 	<br/>
 
 	<div id="menuItems">

client-data/tools/text/text.css

@@ -1,5 +1,9 @@
-#hiddenInput {
+#textToolInput {
 	position:fixed;
-	top:0; left:0;
-	width:0; height:0;
+	top:-1000px; /*Hidden*/
+	left:200px;
+	width:100%;
+}
+#textToolInput:focus {
+	top:0;
 }

client-data/tools/text/text.js

@@ -27,6 +27,10 @@
 (function(){ //Code isolation
 	var board = Tools.board, svg = Tools.svg;
 
+	var input = document.createElement("input");
+	input.id="textToolInput";
+	board.appendChild(input);
+
 	var curText = {
 		"x":0,
 		"y":0,
@@ -37,6 +41,7 @@
 	};
 
 	function clickHandler (x,y, evt) {
+		if (evt && evt.target == input) return;
 		stopEdit()
 		curText.id = Tools.generateUID("t");
 		curText.x=x; curText.y=y;
@@ -56,17 +61,15 @@
 		if (evt) evt.preventDefault();
 	}
 
-	var hiddenInput = document.createElement("input");
-	hiddenInput.id="hiddenInput";
-	board.appendChild(hiddenInput);
-
 	function startEdit () {
-		hiddenInput.value="";
-		hiddenInput.focus();
-		hiddenInput.addEventListener("keyup", textChangeHandler);
+		input.value="";
+		input.focus();
+		input.addEventListener("keyup", textChangeHandler);
+		input.addEventListener("blur", inputBlurHandler);
 	}
 	function stopEdit () {
-		hiddenInput.removeEventListener("keyup", textChangeHandler);
+		input.blur();
+		input.removeEventListener("keyup", textChangeHandler);
 	}
 
 	function textChangeHandler (evt) {
@@ -74,13 +77,13 @@
 			clickHandler(curText.x,curText.y + 1.5*curText.size);
 		}
 		if (performance.now() - curText.lastSending > 100) {
-			if (curText.sentText !== hiddenInput.value) {
+			if (curText.sentText !== input.value) {
 				Tools.drawAndSend({
 					'type' : "update",
 					'field' : curText.id,
-					'txt' : hiddenInput.value
+					'txt' : input.value
 				});
-				curText.sentText = hiddenInput.value;
+				curText.sentText = input.value;
 				curText.lastSending = performance.now();
 			}
 		} else {
@@ -89,12 +92,11 @@
 		}
 	}
 
-	function fieldBlurHandler (evt) {
-		var field = evt.target;
-		if (field.textContent.trim() === "") {
+	function inputBlurHandler (evt) {
+		if (input.value.trim() === "") {
 			Tools.drawAndSend({
 				"type" : "delete",
-				"field" : field.id
+				"field" : curText.id
 			});
 		}
 	}