Added onFinishChange() for string and number controllers, onFire() for function controllers and noSlider() for number controllers.

controllers/controller.function.js

@@ -1,11 +1,30 @@
 GUI.FunctionController = function() {
+	
 	this.type = "function";
-	var that = this;
+	
+	var _this = this;
+	
 	GUI.Controller.apply(this, arguments);
+	
 	this.domElement.addEventListener('click', function() {
-		that.object[that.propertyName].call(that.object);
+		_this.fire();
 	}, false);
+	
 	this.domElement.style.cursor = "pointer";
 	this.propertyNameElement.style.cursor = "pointer";
+	
+	var fireFunction = null;
+	this.onFire = function(fnc) {
+		fireFunction = fnc;
+		return this;
+	}
+	
+	this.fire = function() {
+		if (fireFunction != null) {
+			fireFunction.call(this);
+		}
+		_this.object[_this.propertyName].call(_this.object);
+	};
+	
 };
 GUI.extendController(GUI.FunctionController);

controllers/controller.js

@@ -19,6 +19,7 @@ GUI.Controller = function() {
 };
 
 GUI.Controller.prototype.changeFunction = null;
+GUI.Controller.prototype.finishChangeFunction = null;
 
 GUI.Controller.prototype.name = function(n) {
 	this.propertyNameElement.innerHTML = n;
@@ -45,8 +46,6 @@ GUI.Controller.prototype.setValue = function(n) {
 	if (this.changeFunction != null) {
 		this.changeFunction.call(this, n);
 	}
-	// Whenever you call setValue, the display will be updated automatically.
-	// This reduces some clutter in subclasses. We can also use this method for listen().
 	this.updateDisplay();
 	return this;
 }
@@ -61,3 +60,7 @@ GUI.Controller.prototype.onChange = function(fnc) {
 	this.changeFunction = fnc;
 	return this;
 }
+GUI.Controller.prototype.onFinishChange = function(fnc) {
+	this.finishChangeFunction = fnc;
+	return this;
+}

controllers/controller.number.js

@@ -44,10 +44,9 @@ GUI.NumberController = function() {
     
     numberField.addEventListener('blur', function(e) {
         var val = parseFloat(this.value);
+        console.log(val);
         if (!isNaN(val)) {
-	        _this.updateDisplay();
-        } else { 
-        	this.value = _this.getValue();
+	        _this.setValue(val);
         }
     }, false);
     
@@ -61,6 +60,7 @@ GUI.NumberController = function() {
         py = y = e.pageY;
 		clickedNumberField = true;
         document.addEventListener('mousemove', dragNumberField, false);
+		document.addEventListener('mouseup', mouseup, false);
     }, false);
 
 	// Handle up arrow and down arrow
@@ -77,7 +77,7 @@ GUI.NumberController = function() {
 		}
 	}, false);
     
-    document.addEventListener('mouseup', function(e) {
+    var mouseup = function(e) {
         document.removeEventListener('mousemove', dragNumberField, false);
         GUI.makeSelectable(_this.parent.domElement); 
         GUI.makeSelectable(numberField);
@@ -87,7 +87,12 @@ GUI.NumberController = function() {
         }
         draggedNumberField = false;
         clickedNumberField = false;
-    }, false);
+		if (_this.finishChangeFunction != null) {
+			_this.finishChangeFunction.call(this, _this.getValue());
+		}
+		document.removeEventListener('mouseup', mouseup, false);
+	}
+
     
     
     var dragNumberField = function(e) {
@@ -109,7 +114,9 @@ GUI.NumberController = function() {
 		return false;
     }
     
-    
+    this.noSlider = function() {
+    	_this.domElement.removeChild(slider.domElement);
+    };
     
     this.setValue = function(val) {
     

controllers/controller.string.js

@@ -18,10 +18,19 @@ GUI.StringController = function() {
     }, false);
     
     // TODO: getting messed up on ctrl a
-    input.addEventListener('keyup', function() {
+    input.addEventListener('keyup', function(e) {
+    	if (e.keyCode == 13 && _this.finishChangeFunction != null) {
+			_this.finishChangeFunction.call(this, _this.getValue());
+		}
         _this.setValue(input.value);
     }, false);
     
+    input.addEventListener('blur', function() {
+		if (_this.finishChangeFunction != null) {
+			_this.finishChangeFunction.call(this, _this.getValue());
+		}
+    }, false);
+    
     this.updateDisplay = function() {
     	input.value = _this.getValue();
     }

controllers/slider.js

@@ -47,14 +47,20 @@ GUI.Slider = function(numberController, min, max, step, initValue) {
 		_this.domElement.setAttribute('class', 'guidat-slider-bg active');
 		_this.fg.setAttribute('class', 'guidat-slider-fg active');
 		onDrag(e);
+		document.addEventListener('mouseup', mouseup, false);
 	}, false);
 	
 	
-	document.addEventListener('mouseup', function(e) {
+	var mouseup = function(e) { 
 		_this.domElement.setAttribute('class', 'guidat-slider-bg');
 		_this.fg.setAttribute('class', 'guidat-slider-fg');
 		clicked = false;			
-	}, false);
+		if (numberController.finishChangeFunction != null) {
+			numberController.finishChangeFunction.call(this, numberController.getValue());
+		}
+		document.removeEventListener('mouseup', mouseup, false);
+	};
+
 	
 	document.addEventListener('mousemove', onDrag, false);
 	

index.html

@@ -40,7 +40,8 @@
 
    // Text field
    gui.add(fizzyText, "message");
-                        // Sliders with min and max
+
+   // Sliders with min + max
    gui.add(fizzyText, "maxSize", 0.5, 7);
    gui.add(fizzyText, "growthSpeed", 0.01, 1);
    gui.add(fizzyText, "speed", 0.1, 2);
@@ -54,7 +55,6 @@
    // Fires a function called "explode"
    gui.add(fizzyText, "explode").name("Explode!"); // Specify a custom name.
 
-
 						// Javascript for documentation
 						getCollapsables();
 						handleListening();
@@ -146,7 +146,7 @@ window.onload = function() {
    // Text field
    gui.add(fizzyText, "message");
 
-   // Sliders with min and max
+   // Sliders with min + max
    gui.add(fizzyText, "maxSize", 0.5, 7);
    gui.add(fizzyText, "growthSpeed", 0.01, 1);
    gui.add(fizzyText, "speed", 0.1, 2);
@@ -221,6 +221,24 @@ gui.add(someObject, "someOtherProperty");</pre>
 		</div>
     </div>
 
+	<div class="collapsed">
+	    <h2 class="section">Listen for variable changes inside the GUI</h2>
+		<div class="collapsable">
+			<div>
+				<p>To fire a function whenever a user changes a variable via the GUI, use the following syntax:</p>
+		    	<pre class="prettyprint">gui.add(obj, "propertyName").onChange(function(newValue) {
+   alert("You changed me to " + newValue);
+});</pre>		<p>This can be slightly annoying for types like number or string. You may not want to fire a function while the user is sliding, or while they're typing. To fire a function when the user has <em>finished</em> making changes, use the following:</p>
+		    	<pre class="prettyprint">gui.add(obj, "propertyName").onFinishChange(function(newValue) {
+   alert("You just finished changing me to " + newValue);
+});</pre>
+				<p>Finally, if you'd like to do a little something extra when a function is called, use the following:</p>
+		    	<pre class="prettyprint">gui.add(obj, "functionName").onFire(function() {
+   alert("You called a function with gui-dat");
+});</pre>
+	    	</div>
+		</div>
+	</div>
 	<div class="collapsed">
 	    <h2 class="section">Listen for variable changes outside of the GUI</h2>
 		<div class="collapsable">