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

This commit is contained in:
George Michael Brower 2011-02-09 11:39:18 -08:00
parent 6a19c5aa75
commit 9c2c24aeeb
6 changed files with 93 additions and 31 deletions

View File

@ -1,11 +1,30 @@
GUI.FunctionController = function() { GUI.FunctionController = function() {
this.type = "function"; this.type = "function";
var that = this;
var _this = this;
GUI.Controller.apply(this, arguments); GUI.Controller.apply(this, arguments);
this.domElement.addEventListener('click', function() { this.domElement.addEventListener('click', function() {
that.object[that.propertyName].call(that.object); _this.fire();
}, false); }, false);
this.domElement.style.cursor = "pointer"; this.domElement.style.cursor = "pointer";
this.propertyNameElement.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); GUI.extendController(GUI.FunctionController);

View File

@ -19,6 +19,7 @@ GUI.Controller = function() {
}; };
GUI.Controller.prototype.changeFunction = null; GUI.Controller.prototype.changeFunction = null;
GUI.Controller.prototype.finishChangeFunction = null;
GUI.Controller.prototype.name = function(n) { GUI.Controller.prototype.name = function(n) {
this.propertyNameElement.innerHTML = n; this.propertyNameElement.innerHTML = n;
@ -45,8 +46,6 @@ GUI.Controller.prototype.setValue = function(n) {
if (this.changeFunction != null) { if (this.changeFunction != null) {
this.changeFunction.call(this, n); 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(); this.updateDisplay();
return this; return this;
} }
@ -61,3 +60,7 @@ GUI.Controller.prototype.onChange = function(fnc) {
this.changeFunction = fnc; this.changeFunction = fnc;
return this; return this;
} }
GUI.Controller.prototype.onFinishChange = function(fnc) {
this.finishChangeFunction = fnc;
return this;
}

View File

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

View File

@ -18,10 +18,19 @@ GUI.StringController = function() {
}, false); }, false);
// TODO: getting messed up on ctrl a // 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); _this.setValue(input.value);
}, false); }, false);
input.addEventListener('blur', function() {
if (_this.finishChangeFunction != null) {
_this.finishChangeFunction.call(this, _this.getValue());
}
}, false);
this.updateDisplay = function() { this.updateDisplay = function() {
input.value = _this.getValue(); input.value = _this.getValue();
} }

View File

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

View File

@ -36,24 +36,24 @@
var fizzyText = new FizzyText("gui-dat"); var fizzyText = new FizzyText("gui-dat");
var gui = new GUI(); var gui = new GUI();
// Text field
gui.add(fizzyText, "message");
// Sliders with min and max
gui.add(fizzyText, "maxSize", 0.5, 7);
gui.add(fizzyText, "growthSpeed", 0.01, 1);
gui.add(fizzyText, "speed", 0.1, 2);
// Sliders with min, max and increment. // Text field
gui.add(fizzyText, "noiseStrength", 10, 100, 5); gui.add(fizzyText, "message");
// Boolean checkbox // Sliders with min + max
gui.add(fizzyText, "displayOutline"); gui.add(fizzyText, "maxSize", 0.5, 7);
gui.add(fizzyText, "growthSpeed", 0.01, 1);
// Fires a function called "explode" gui.add(fizzyText, "speed", 0.1, 2);
gui.add(fizzyText, "explode").name("Explode!"); // Specify a custom name.
// Sliders with min, max and increment.
gui.add(fizzyText, "noiseStrength", 10, 100, 5);
// Boolean checkbox
gui.add(fizzyText, "displayOutline");
// Fires a function called "explode"
gui.add(fizzyText, "explode").name("Explode!"); // Specify a custom name.
// Javascript for documentation // Javascript for documentation
getCollapsables(); getCollapsables();
@ -146,7 +146,7 @@ window.onload = function() {
// Text field // Text field
gui.add(fizzyText, "message"); gui.add(fizzyText, "message");
// Sliders with min and max // Sliders with min + max
gui.add(fizzyText, "maxSize", 0.5, 7); gui.add(fizzyText, "maxSize", 0.5, 7);
gui.add(fizzyText, "growthSpeed", 0.01, 1); gui.add(fizzyText, "growthSpeed", 0.01, 1);
gui.add(fizzyText, "speed", 0.1, 2); gui.add(fizzyText, "speed", 0.1, 2);
@ -221,6 +221,24 @@ gui.add(someObject, "someOtherProperty");</pre>
</div> </div>
</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"> <div class="collapsed">
<h2 class="section">Listen for variable changes outside of the GUI</h2> <h2 class="section">Listen for variable changes outside of the GUI</h2>
<div class="collapsable"> <div class="collapsable">