library-mirrors/dat.gui
1
0
Fork 0
mirror of https://github.com/dataarts/dat.gui.git synced 2024-10-10 06:54:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
controllers/controller.function.js
View File

@ -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);

7
controllers/controller.js
View File

@ -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;
}

19
controllers/controller.number.js
View File

@ -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) {

11
controllers/controller.string.js
View File

@ -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();
}

12
controllers/slider.js
View File

@ -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);
clicked = false;
if (numberController.finishChangeFunction != null) {
numberController.finishChangeFunction.call(this, numberController.getValue());
}
document.removeEventListener('mouseup', mouseup, false);
};
document.addEventListener('mousemove', onDrag, false);

52
index.html
View File

@ -36,24 +36,24 @@
var fizzyText = new FizzyText("gui-dat");
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);
var gui = new GUI();
// Sliders with min, max and increment.
gui.add(fizzyText, "noiseStrength", 10, 100, 5);
// Text field
gui.add(fizzyText, "message");
// Boolean checkbox
gui.add(fizzyText, "displayOutline");
// Fires a function called "explode"
gui.add(fizzyText, "explode").name("Explode!"); // Specify a custom name.
// 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);
// 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
getCollapsables();
@ -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">