Updates to NumberController

This commit is contained in:
George Michael Brower 2011-01-24 22:31:20 -07:00
parent 9d903e125b
commit 88eb51e7d5
2 changed files with 80 additions and 107 deletions

View File

@ -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() { var NumberController = function() {
this.type = "number"; this.type = "number";
@ -6,128 +9,98 @@ var NumberController = function() {
var _this = this; 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('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); 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); var val = parseFloat(this.value);
if(isNaN(val)) { if (!isNaN(val)) {
inc = initialValue; updateValue(val);
} else {
inc = val;
} }
updateValue(inc);
}, false); }, 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); }, 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) { document.addEventListener('mouseup', function(e) {
isClicked = false; document.removeEventListener('mousemove', dragNumberField, false);
_this.makeSelectable(GUI.domElement); _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); }, 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 = new Controller();
NumberController.prototype.constructor = NumberController; NumberController.prototype.constructor = NumberController;

View File

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