Updates to NumberController

controller.number.js

@@ -1,3 +1,6 @@
+// TODO: How do we intercept the press up/down event on number fields?
+// TODO: Provide alternate controllers for non-html5 browsers?
+// TODO: Firefox is retarded?
 var NumberController = function() {
 
 	this.type = "number";
@@ -6,128 +9,98 @@ var NumberController = function() {
     
     var _this = this;
     
-    var isClicked = false;
+    var y = py = 0;
-    var isDragged = false;
-    var y, py, initialValue, inc;
     
-    py = y = 0;
+    var min = arguments[2];
-    inc = initialValue = this.object[this.propertyName];
+    var max = arguments[3];
+    var step = arguments[4] || (max - min) * 0.01;
     
-    var min, max;
+    var numberField = document.createElement('input');
-    (arguments[2] != null) ? min = arguments[2] : min = null;
+    numberField.setAttribute('id', this.propertyName);
-    (arguments[3] != null) ? max = arguments[3] : max = null;
+    numberField.setAttribute('type', this.type);
+    numberField.setAttribute('value', this.getValue());
     
-    var amt;
+    if (step) numberField.setAttribute('step', step);
-    (arguments[4] != null) ? amt = arguments[4] : amt = (max - min) * .01;
-    if(amt == 0) amt = 1;
     
-    var button = document.createElement('input');
+    this.domElement.appendChild(numberField);
-    button.setAttribute('id', this.propertyName);
-    button.setAttribute('type', this.type);
-    button.setAttribute('value', inc);
-    button.setAttribute('step', amt);
-    this.domElement.appendChild(button);
     
-    var slider = document.createElement('input');
+    var slider;
-    if(min != null && max != null) {
+    
-        slider.setAttribute('id', this.propertyName + "-slider");
+    if (min && max) {
+    
+	    slider = document.createElement('input');
         slider.setAttribute('type', 'range');
-        slider.setAttribute('value', inc);
+        slider.setAttribute('value', this.getValue());
-        if(min != null && max != null) {
+		slider.setAttribute('min', min);
-            slider.setAttribute('min', min);
+		slider.setAttribute('max', max);
-            slider.setAttribute('max', max);
+		
-        }
+		numberField.setAttribute('min', min);
-        slider.setAttribute('step', amt);
+		numberField.setAttribute('max', max);
+		
+        slider.setAttribute('step', step);
+		slider.addEventListener('change', function(e) {
+			updateValue(this.value);
+		}, false);		
         this.domElement.appendChild(slider);
     }
     
-    button.addEventListener('mousedown', function(e) {
+    numberField.addEventListener('blur', function(e) {
-        isClicked = true;
-    }, false);
-    button.addEventListener('blur', function(e) {
         var val = parseFloat(this.value);
-        if(isNaN(val)) {
+        if (!isNaN(val)) {
-            inc = initialValue;
+	        updateValue(val);
-        } else {
-            inc = val;
         }
-        updateValue(inc);
     }, false);
-    slider.addEventListener('mousedown', function(e) {
+    
-        isDragged = true;
+    numberField.addEventListener('mousewheel', function(e) {
+    	e.preventDefault();
+    	updateValue(_this.getValue() + Math.abs(e.wheelDeltaY)/e.wheelDeltaY*step);
+    	return false;
     }, false);
+    
+    numberField.addEventListener('mousedown', function(e) {
+    	py = y = e.pageY;
+    	document.addEventListener('mousemove', dragNumberField, false);
+    }, false);
+    
+    
+    numberField.addEventListener('mouseup', function(e) {
+    	updateValue(this.value);
+    }, false);
+    
     document.addEventListener('mouseup', function(e) {
-        isClicked = false;
+    	document.removeEventListener('mousemove', dragNumberField, false);
       	_this.makeSelectable(GUI.domElement); 
-		_this.makeSelectable(button);
+		_this.makeSelectable(numberField);
-        isDragged = false;
-    }, false);
-    document.addEventListener('mousemove', function(e) {
-        if(isClicked) {
-            e.preventDefault();
-        	_this.makeUnselectable(GUI.domElement);
-        	_this.makeUnselectable(button);
-      
-            py = y;
-            y = e.offsetY;
-            var dy = y - py;
-            if(dy < 0) {
-                
-                if(max != null) {
-                    if(inc >= max) {
-                        inc = max;
-                        return;
-                    } else {
-                        inc+=amt;
-                        updateValue(inc);
-                    }
-                } else {
-                    inc++;
-                    updateValue(inc);
-                }
-            } else if(dy > 0) {
-            
-                if(min != null) {
-                    if(inc <= min) {
-                        inc = min;
-                        return;
-                    } else {
-                        inc-=amt;
-                        updateValue(inc);
-                    }
-                } else {
-                    inc--;
-                    updateValue(inc);
-                }
-            }
-            updateValue(inc);
-        } else if(isDragged) {
-            if(inc != slider.value) inc = slider.value;
-            updateValue(inc);
-        }
     }, false);
     
+    document.addEventListener('mouseout', function(e) {
+    	document.removeEventListener('mousemove', dragNumberField, false);
+    }, false);
     
-    function updateValue(val) {
+    var dragNumberField = function(e) {
-        if(inc != val) inc = val;
+		e.preventDefault();
-        if(inc > max && max != null) {
+		_this.makeUnselectable(GUI.domElement);
-            inc = max;
+		_this.makeUnselectable(numberField);
-        } else if(inc < min && min != null) {
+		py = y;
-            inc = min;
+		y = e.pageY;
-        }
+		var dy = py - y;
-        button.value = val;
+		var newVal = _this.getValue() + dy*step;
-        slider.value = val;
+		updateValue(newVal);
-        _this.setValue(val);
+		return false;
+    }
+    
+    var updateValue = function(val) {
+    	if (min && val <= min) {
+    		val = min;
+    	} else if (max && val >= max) { 
+    		val = max;
+    	}
+        _this.setValue(val);
+        numberField.value = _this.getValue();
+        if (slider) slider.value = _this.getValue();
     }
     
-    this.__defineSetter__("position", function(val) {
-        inc = val;
-        updateValue(val);
-        // possibly push to an array here so that
-        // we have a record of "defined" / "presets"
-        // ????
-    });
 };
 
 NumberController.prototype = new Controller();
-NumberController.prototype.constructor = NumberController;
+NumberController.prototype.constructor = NumberController;

demo.html

@@ -35,7 +35,6 @@ window.onload = function() {
    
    // Creates a slider (min, max)
    GUI.add(controllableObject, "constrainedNum", -100, 100)
-      .setName("customName");
    
    // Creates a text field
    GUI.add(controllableObject, "textProperty");
@@ -44,7 +43,8 @@ window.onload = function() {
    GUI.add(controllableObject, "booleanProperty");
    
    // Creates a button
-   GUI.add(controllableObject, "functionProperty");
+   GUI.add(controllableObject, "functionProperty")
+      .setName("Fire a Function");
 
 };
 </script>
@@ -70,8 +70,7 @@ window.onload = function() {
    GUI.add(controllableObject, "numberProperty");
    
    // Creates a slider (min, max)
-   GUI.add(controllableObject, "constrainedNum", -100, 100)
+   GUI.add(controllableObject, "constrainedNum", -100, 100, 0);
-      .setName("customName");
    
    // Creates a text field
    GUI.add(controllableObject, "textProperty");
@@ -80,7 +79,8 @@ window.onload = function() {
    GUI.add(controllableObject, "booleanProperty");
    
    // Creates a button
-   GUI.add(controllableObject, "functionProperty");
+   GUI.add(controllableObject, "functionProperty")
+      .setName("Fire a Function");
 
 };
 </pre>