diff --git a/src/dat/controllers/ArrayController.js b/src/dat/controllers/ArrayController.js
new file mode 100644
index 0000000..bc4983e
--- /dev/null
+++ b/src/dat/controllers/ArrayController.js
@@ -0,0 +1,108 @@
+/**
+ * dat-gui JavaScript Controller Library
+ * http://code.google.com/p/dat-gui
+ *
+ * Copyright 2011 Data Arts Team, Google Creative Lab
+ *
+ * ArrayController is based on StringController and was created by Ulysses Popple
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+
+define([
+ 'dat/controllers/Controller',
+ 'dat/dom/dom',
+ 'dat/utils/common'
+], function (Controller, dom, common) {
+
+ /**
+ * @class Provides a text input to alter the array property of an object.
+ * Automatically converts strings to numbers and boolean values if appropriate.
+ *
+ * @extends dat.controllers.Controller
+ *
+ * @param {Object} object The object to be manipulated
+ * @param {string} property The name of the property to be manipulated
+ *
+ * @member dat.controllers
+ */
+ var ArrayController = function(object, property) {
+
+ ArrayController.superclass.call(this, object, property);
+
+ var _this = this;
+
+ this.__input = document.createElement('input');
+ this.__input.setAttribute('type', 'text');
+
+ dom.bind(this.__input, 'keyup', onChange);
+ dom.bind(this.__input, 'change', onChange);
+ dom.bind(this.__input, 'blur', onBlur);
+ dom.bind(this.__input, 'keydown', function(e) {
+ if (e.keyCode === 13) {
+ this.blur();
+ }
+ });
+
+
+ function onChange() {
+ var arr = _this.__input.value.replace(/^\s*|\s*$/g, '').split(/\s*,\s*/)
+
+ // The resulting values will all be strings, so convert them here to actual data types
+ for (var i = 0; i < arr.length; i++) {
+ var value = arr[i];
+ if (!isNaN(value)) {
+ arr[i] = +value;
+ continue;
+ }
+ else if (value === 'true') {
+ arr[i] = true;
+ }
+ else if (value === 'false') {
+ arr[i] = false;
+ }
+ }
+ _this.setValue(arr);
+ }
+
+ function onBlur() {
+ if (_this.__onFinishChange) {
+ _this.__onFinishChange.call(_this, _this.getValue());
+ }
+ }
+
+ this.updateDisplay();
+
+ this.domElement.appendChild(this.__input);
+
+ };
+
+ ArrayController.superclass = Controller;
+
+ common.extend(
+
+ ArrayController.prototype,
+ Controller.prototype,
+
+ {
+
+ updateDisplay: function() {
+ // Stops the caret from moving on account of:
+ // keyup -> setValue -> updateDisplay
+ if (!dom.isActive(this.__input)) {
+ this.__input.value = this.getValue();
+ }
+ return ArrayController.superclass.prototype.updateDisplay.call(this);
+ }
+
+ }
+
+ );
+
+ return ArrayController;
+
+});
\ No newline at end of file
diff --git a/src/dat/controllers/factory.js b/src/dat/controllers/factory.js
index 897b267..d273ce8 100644
--- a/src/dat/controllers/factory.js
+++ b/src/dat/controllers/factory.js
@@ -16,11 +16,12 @@ define([
'dat/controllers/NumberControllerBox',
'dat/controllers/NumberControllerSlider',
'dat/controllers/StringController',
+ 'dat/controllers/ArrayController',
'dat/controllers/FunctionController',
'dat/controllers/BooleanController',
'dat/utils/common'
],
- function(OptionController, NumberControllerBox, NumberControllerSlider, StringController, FunctionController, BooleanController, common) {
+ function(OptionController, NumberControllerBox, NumberControllerSlider, ArrayController, FunctionController, BooleanController, common) {
return function(object, property) {
@@ -60,6 +61,10 @@ define([
return new BooleanController(object, property);
}
+ if(common.isArray(initialValue)) {
+ return new ArrayController(object, property);
+ }
+
}
});
\ No newline at end of file
diff --git a/tests/index.html b/tests/index.html
index 2246526..2aacf86 100644
--- a/tests/index.html
+++ b/tests/index.html
@@ -7,7 +7,7 @@
-
+