mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
Added options() method for string and number controllers
This commit is contained in:
parent
9c2c24aeeb
commit
7c9143a8e2
@ -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;
|
||||
}
|
||||
|
@ -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) {
|
||||
|
@ -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);
|
||||
|
||||
};
|
||||
|
6
gui.css
6
gui.css
@ -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;
|
||||
}
|
||||
|
14
index.html
14
index.html
@ -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">
|
||||
|
Loading…
Reference in New Issue
Block a user