Added updateValue method to StringController (so watched string controllers update).

Moved easing from margin-top to height. It's now showing an ugly scrollbar jump. Hmm...

controllers/controller.string.js

@@ -1,27 +1,33 @@
 var StringController = function() {
-	
+
 	this.type = "string";
-	
+
 	var _this = this;
-	
+
-    Controller.apply(this, arguments);
+	Controller.apply(this, arguments);
-    
+
-    var input = document.createElement('input');
+	var input = document.createElement('input');
-    
+
-    var initialValue = this.getValue();
+	var initialValue = this.getValue();
-    
+
-    input.setAttribute('value', initialValue);
+	input.setAttribute('value', initialValue);
-    input.setAttribute('spellcheck', 'false');
+	input.setAttribute('spellcheck', 'false');
-    this.domElement.addEventListener('mouseup', function() {
+
-    	input.focus();
+	this.domElement.addEventListener('mouseup', function() {
-    	input.select();
+		input.focus();
-    }, false);
+		input.select();
-    
+	}, false);
-    input.addEventListener('keyup', function() {
+
-        _this.setValue(input.value);
+	input.addEventListener('keyup', function() {
-    }, false);
+		_this.setValue(input.value);
-    
+	}, false);
-    this.domElement.appendChild(input);
+
+	this.domElement.appendChild(input);
+
+	this.updateValue = function(val) {
+		input.setAttribute('value', val);
+	}
+
 };
 StringController.prototype = new Controller();
-StringController.prototype.constructor = StringController;
+StringController.prototype.constructor = StringController;

gui.css

@@ -8,9 +8,6 @@
 	left: 100%;
 	margin-left: -300px;
 	background-color: #fff;
-	-moz-transition: margin-top .2s ease-out;
-	-webkit-transition: margin-top .2s ease-out;
-	transition: margin-top .2s ease-out;
 	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
 	-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
 	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
@@ -26,6 +23,9 @@
 	overflow-y: auto;
 	overflow-x: hidden;
 	background-color: rgba(0,0,0,0.1);
+	-moz-transition: height .2s ease-out;
+	-webkit-transition: height .2s ease-out;
+	transition: height .2s ease-out;
 }
 
 #guidat-toggle { 
@@ -155,4 +155,4 @@ width: 148px;
 .guidat-slider-fg { 
 	background-color: #00aeff;
 	height: 20px;
-}
+}