diff --git a/controllers/controller.js b/controllers/controller.js index 8d11f62..c2f6eef 100644 --- a/controllers/controller.js +++ b/controllers/controller.js @@ -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; +} diff --git a/controllers/controller.number.js b/controllers/controller.number.js index e455843..4a63372 100644 --- a/controllers/controller.number.js +++ b/controllers/controller.number.js @@ -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() { - _this.domElement.removeChild(slider.domElement); + if (slider) { + _this.domElement.removeChild(slider.domElement); + } + return this; }; this.setValue = function(val) { diff --git a/controllers/controller.string.js b/controllers/controller.string.js index f96b6d7..9167358 100644 --- a/controllers/controller.string.js +++ b/controllers/controller.string.js @@ -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); }; diff --git a/gui.css b/gui.css index 63f79be..db24012 100644 --- a/gui.css +++ b/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; } diff --git a/index.html b/index.html index f029565..fb2cd3f 100644 --- a/index.html +++ b/index.html @@ -221,6 +221,20 @@ gui.add(someObject, "someOtherProperty"); + +
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}); ++