Add ArrayController

Add an ArrayController that provides a string input box for arrays
separated by commas. Automatically convert numbers and booleans if
appropriate.

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

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, StringController, 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);
+        }
+
       }
 
     });

tests/index.html

@@ -7,7 +7,7 @@
   <script type="text/javascript" src="qunit.js"></script>
   <script type="text/javascript" src="jquery.js"></script>
   
-  <script type="text/javascript" src="../build/dat.gui.min.js"></script>
+  <script type="text/javascript" src="../build/dat.gui.js"></script>
   <script type="text/javascript">
 
   $.noConflict();
@@ -21,6 +21,7 @@
     var BooleanController = dat.controllers.BooleanController;
     var OptionController = dat.controllers.OptionController;
     var StringController = dat.controllers.StringController;
+    var ArrayController = dat.controllers.ArrayController;
     var NumberController = dat.controllers.NumberController;
     var NumberControllerBox = dat.controllers.NumberControllerBox;
     var NumberControllerSlider = dat.controllers.NumberControllerSlider;
@@ -444,6 +445,7 @@
       return {
         numberProperty: 10,
         stringProperty: 'foo',
+        arrayProperty: [0, 0, 0],
         booleanProperty: false,
         functionProperty: function() {
           // do something
@@ -659,6 +661,30 @@ console.log(c2.__checkbox.getAttribute('checked'));
 
     });
 
+    module("ArrayController");
+
+    test("Acknowledges original value", function() {
+      var object = initObject();
+      var c1 = new ArrayController(object, 'arrayProperty');
+
+      equal($(c1.__input).val(), object.arrayProperty);
+
+    });
+
+    test("Modifies values", function() {
+      var object = initObject();
+      var c1 = new ArrayController(object, 'arrayProperty');
+
+      var newVal = '1,a,true';
+
+      var elem = $(c1.__input).val(newVal)[0];
+      dom.fakeEvent(elem, 'change');
+
+      equal(1, object.arrayProperty[0]);
+      equal('a', object.arrayProperty[1]);
+      equal(true, object.arrayProperty[2]);
+    });
+
     module("NumberController");
 
     test("Constraints", function() {