Added options() method for string and number controllers

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

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() {
+    	if (slider) {
     		_this.domElement.removeChild(slider.domElement);
+    	}
+    	return this;
     };
     
     this.setValue = function(val) {

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

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

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">