From 7c9143a8e217704a1d915229a08bc3ce7f38ed58 Mon Sep 17 00:00:00 2001
From: George Michael Brower <georgebrower@google.com>
Date: Wed, 9 Feb 2011 13:28:35 -0800
Subject: [PATCH] Added options() method for string and number controllers

---
 controllers/controller.js        | 30 ++++++++++++++++++++++++++++++
 controllers/controller.number.js | 11 ++++++++++-
 controllers/controller.string.js |  5 +++++
 gui.css                          |  6 ++++++
 index.html                       | 14 ++++++++++++++
 5 files changed, 65 insertions(+), 1 deletion(-)

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");</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">