Implemented text field functionality

Character text fields now work. Slightly modified versions will be needed for Spells, features, etc.

rpg-docs/client/views/character/character.html

@@ -3,9 +3,6 @@
 		{{> characterName}}
 	</div>
 	<div class="flexContainer">
-		<div id="abilityScores" class="flexItem">
-			{{> bigAbilities}}
-		</div>
 		<div class="flexItem">
 			<div>
 				Proficiency Bonus {{proficiencyBonus}}
@@ -14,11 +11,8 @@
 				{{> skills}}
 			</div>
 		</div>
-		<div id="stats" class="flexItem">
-			{{> characterStats}}
-		</div>
-		<div>
-			{{> features}}
+		<div class="flexItem floatBox">
+			{{> textField character=this field="description"}}
 		</div>
 	</div>
 </template>

rpg-docs/client/views/character/textField/textField.css

@@ -0,0 +1,11 @@
+#textOutput.notEditing{
+	cursor: default;
+}
+
+#textInput {
+	width:100%;
+	height:100%; 
+	box-sizing: border-box;         /* For IE and modern versions of Chrome */
+	-moz-box-sizing: border-box;    /* For Firefox                          */
+	-webkit-box-sizing: border-box;
+}

rpg-docs/client/views/character/textField/textField.html

@@ -0,0 +1,9 @@
+<template name="textField">
+	{{#if editing}}
+		<div id="textInput" class={{outputClass}} contenteditable=true>{{input}}</div>
+	{{else}}
+		<div id="textOutput" class={{outputClass}}>
+			{{output}}
+		</div>
+	{{/if}}
+</template>

rpg-docs/client/views/character/textField/textField.js

@@ -0,0 +1,42 @@
+Template.textField.created = function(){
+	Template.instance().editing = new ReactiveVar(false);
+	document.execCommand('defaultParagraphSeparator', false, 'div');
+}
+
+Template.textField.helpers({
+	editing: function(){
+		return Template.instance().editing.get();
+	},
+	input: function(){
+		var text = this.character.strings[this.field];
+		return Spacebars.SafeString(text);
+	},
+	output: function(){
+		var html = evaluateString(this.character, this.character.strings[this.field]);
+		return Spacebars.SafeString(html);
+	},
+	outputClass: function(){
+		if(Template.instance().editing.get()){
+			return "editing";
+		} else{
+			return "notEditing"
+		}
+	}
+})
+
+Template.textField.events({
+	"blur #textInput": function(){
+		Template.instance().editing.set(false);
+		var text = $("#textInput").html();
+		//TODO sanitise the html
+		var setter = {};
+		setter["strings."+this.field] = text;
+		Characters.update(this.character._id, {$set: setter});
+	},
+	"click #textOutput": function(){
+		Template.instance().editing.set(true);
+		Tracker.afterFlush(function(){
+			$("#textInput").focus();
+		});
+	}
+})