Added options() method for string and number controllers

This commit is contained in:
George Michael Brower 2011-02-09 13:28:35 -08:00
parent 9c2c24aeeb
commit 7c9143a8e2
5 changed files with 65 additions and 1 deletions

View File

@ -64,3 +64,33 @@ GUI.Controller.prototype.onFinishChange = function(fnc) {
this.finishChangeFunction = fnc;
return this;
}
GUI.Controller.prototype.options = function() {
var _this = this;
var select = document.createElement('select');
if (arguments.length == 1) {
var arr = arguments[0];
for (var i in arr) {
var opt = document.createElement('option');
opt.innerHTML = i;
opt.setAttribute('value', arr[i]);
select.appendChild(opt);
}
} else {
for (var i = 0; i < arguments.length; i++) {
var opt = document.createElement('option');
opt.innerHTML = arguments[i];
opt.setAttribute('value', arguments[i]);
select.appendChild(opt);
}
}
select.addEventListener('change', function() {
_this.setValue(this.value);
if (_this.finishChangeFunction != null) {
_this.finishChangeFunction.call(this, _this.getValue());
}
});
_this.domElement.appendChild(select);
return this;
}

View File

@ -114,8 +114,17 @@ GUI.NumberController = function() {
return false;
}
this.options = function() {
_this.noSlider();
_this.domElement.removeChild(numberField);
return GUI.Controller.prototype.options.apply(this, arguments);
};
this.noSlider = function() {
if (slider) {
_this.domElement.removeChild(slider.domElement);
}
return this;
};
this.setValue = function(val) {

View File

@ -35,6 +35,11 @@ GUI.StringController = function() {
input.value = _this.getValue();
}
this.options = function() {
_this.domElement.removeChild(input);
return GUI.Controller.prototype.options.apply(this, arguments);
};
this.domElement.appendChild(input);
};

View File

@ -80,6 +80,12 @@ a.guidat-toggle:hover {
background-color: #222;
}
.guidat-controller select {
margin-top: 4px;
float: right;
}
.guidat-controller input:hover {
background-color: #444;
}

View File

@ -221,6 +221,20 @@ gui.add(someObject, "someOtherProperty");</pre>
</div>
</div>
<div class="collapsed">
<h2 class="section">Choosing from a list of values</h2>
<div class="collapsable">
<div>
<pre class="prettyprint">gui.add(obj, "propertyName").options(1, 2, 3, 5, 8);
// Alternatively, you can specify custom labels using object syntax
gui.add(obj, "propertyName").options({'Small': 1, 'Medium': 2, 'Large': 3});
</pre>
</div>
</div>
</div>
<div class="collapsed">
<h2 class="section">Listen for variable changes inside the GUI</h2>
<div class="collapsable">