Fixed a bug in slider

controllers/controller.js

@@ -4,6 +4,7 @@ var Controller = function() {
 
     this.setName = function(n) {
   	    this.propertyNameElement.innerHTML = n;
+  	    return this;
     }
     
     this.setValue = function(n) {
@@ -11,6 +12,7 @@ var Controller = function() {
       	if (onChange != null) {
       		onChange.call(this, n);
       	}
+      	return this;
     }
     
     this.getValue = function() {
@@ -19,6 +21,7 @@ var Controller = function() {
     
     this.onChange = function(fnc) {
     	onChange = fnc;
+    	return this;
     }
     
 	this.makeUnselectable = function(elem) {

controllers/controller.number.js

@@ -20,13 +20,15 @@ var NumberController = function() {
     var step = arguments[4];
     
     if (!step) {
-    	if (min && max) {
+    	if (min != undefined && max != undefined) {
     		step = (max-min)*0.01;
     	} else {
     		step = 1;
     	}	
     }
     
+    console.log("step " + step);
+    
     var numberField = document.createElement('input');
     numberField.setAttribute('id', this.propertyName);
     
@@ -114,10 +116,15 @@ var NumberController = function() {
     	}
         _this.setValue(val);
         
-        numberField.value = _this.getValue();
+        numberField.value = roundToDecimal(_this.getValue(), 4);
         if (slider) slider.value = _this.getValue();
     }
     
+    var roundToDecimal = function(n, decimals) {
+	    var t = Math.pow(10, decimals);
+    	return Math.round(n*t)/t;
+    }
+    
 };
 
 NumberController.prototype = new Controller();

controllers/slider.js

@@ -13,8 +13,9 @@ var Slider = function(numberController, min, max, step, initValue) {
 	var x, px;
 	
 	this.domElement = document.createElement('div');
-	this.fg = document.createElement('div');
 	this.domElement.setAttribute('class', 'guidat-slider-bg');
+	
+	this.fg = document.createElement('div');
 	this.fg.setAttribute('class', 'guidat-slider-fg');
 	
 	this.domElement.appendChild(this.fg);
@@ -38,10 +39,8 @@ var Slider = function(numberController, min, max, step, initValue) {
 	}
 	
 	this.__defineSetter__('value', function(e) {
-		
 		var pct = map(e, min, max, 0, 100);
 		this.fg.style.width = pct+"%";
-		
 	});
 
 	var onDrag = function(e) {
@@ -68,9 +67,6 @@ var Slider = function(numberController, min, max, step, initValue) {
 	}, false);
 	
 	document.addEventListener('mousemove', onDrag, false);
-
-
-	
 	
 	this.value = initValue;	
 		

gui.js

@@ -38,7 +38,7 @@ var GUI = new function() {
 			return;
 		}
 	
-		var controllerObject = handler.apply(this, arguments);
+		var controllerObject = construct(handler, arguments);
 		
 		// Were we able to make the controller?
 		if (!controllerObject) {		
@@ -55,23 +55,10 @@ var GUI = new function() {
 	}
 	
 	var addHandlers = {
-		
+		"number": NumberController,
-		"number": function() {
+		"string": StringController,
-            return construct(NumberController, arguments);
+		"boolean": BooleanController,
-		},
+		"function": FunctionController
-		
-		"string": function() {
-            return construct(StringController, arguments);
-		},
-		
-		"boolean": function() {
-			return construct(BooleanController, arguments);
-		},
-		
-		"function": function() {
-			return construct(FunctionController, arguments);
-		},
-		
 	};
 	
 	var alreadyControlled = function(object, propertyName) {

index.html

@@ -6,15 +6,16 @@
         
         <link href="gui.css" media="screen" rel="stylesheet" type="text/css" />
         <link href="demo/demo.css" media="screen" rel="stylesheet" type="text/css" />
-  <!--   <script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>-->
+		<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
+
 
-        <script type="text/javascript" src="gui.js"></script>
         <script type="text/javascript" src="controllers/slider.js"></script>
         <script type="text/javascript" src="controllers/controller.js"></script>
         <script type="text/javascript" src="controllers/controller.string.js"></script>
         <script type="text/javascript" src="controllers/controller.number.js"></script>
         <script type="text/javascript" src="controllers/controller.boolean.js"></script>
         <script type="text/javascript" src="controllers/controller.function.js"></script>
+		<script type="text/javascript" src="gui.js"></script>
         <script type="text/javascript" src="demo/demo.js"></script>
         <script type="text/javascript">
             var controllableObject = 
@@ -35,7 +36,7 @@
 
                 var testDisplay = new DynamicText("gui-dat", 600, 300, 160);
 
-        //       prettyPrint();
+            prettyPrint();
 
                GUI.start();
                
@@ -43,7 +44,7 @@
                GUI.add(testDisplay, "minSize", 0, 1);
                
                // Creates a number box
-               GUI.add(testDisplay, "maxSize", 1, 5);
+               GUI.add(testDisplay, "maxSize", 1, 20);
 
                // Creates a slider (min, max)
                GUI.add(testDisplay, "growthSpeed", 0.01, 0.5);
@@ -122,8 +123,7 @@ window.onload = function() {
    GUI.add(controllableObject, &quot;booleanProperty&quot;);
 
    // Creates a button
-   GUI.add(controllableObject, &quot;functionProperty&quot;)
+   GUI.add(controllableObject, &quot;functionProperty&quot;).setName(&quot;Fire a Function&quot;);
-      .setName(&quot;Fire a Function&quot;);
 
 };