Customcontroller

src/dat/controllers/CustomController.js

@@ -0,0 +1,28 @@
+/**
+ * dat-gui JavaScript Controller Library
+ * http://code.google.com/p/dat-gui
+ *
+ * Copyright 2011 Data Arts Team, Google Creative Lab
+ *
+ * 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
+ */
+import Controller from './Controller';
+
+/**
+ * @class Represents a custom controller.
+ * @param {Object} object
+ * @param {string} property
+ */
+class CustomController extends Controller{
+  constructor(object, property) {
+    super(object, property);
+
+    object.constructor( this );
+  }
+}
+
+export default CustomController;

src/dat/gui/GUI.js

@@ -20,6 +20,7 @@ import FunctionController from '../controllers/FunctionController';
 import NumberControllerBox from '../controllers/NumberControllerBox';
 import NumberControllerSlider from '../controllers/NumberControllerSlider';
 import ColorController from '../controllers/ColorController';
+import CustomController from '../controllers/CustomController';
 import requestAnimationFrame from '../utils/requestAnimationFrame';
 import CenteredDiv from '../dom/CenteredDiv';
 import dom from '../dom/dom';
@@ -455,6 +456,8 @@ const GUI = function(pars) {
   }
 };
 
+GUI.CustomController = CustomController;
+
 GUI.toggleHide = function() {
   hide = !hide;
   common.each(hideableGuis, function(gui) {
@@ -520,6 +523,7 @@ common.extend(
         object,
         property,
         {
+          custom: object instanceof CustomController,
           factoryArgs: Array.prototype.slice.call(arguments, 2)
         }
       );
@@ -557,6 +561,27 @@ common.extend(
     },
 
     /**
+     * Adds a new custom controller to the GUI.
+     *
+     * @param object
+     * @param property
+     * @returns {Controller} The controller that was added to the GUI.
+     * @instance
+     *
+     */
+    addCustomController: function(object, property) {
+    	return add(
+		  this,
+		  object,
+		  property,
+		  {
+		  	custom: true,
+		  	factoryArgs: Array.prototype.slice.call(arguments, 2)
+		  }
+		);
+    },
+
+  	/**
      * Removes the given controller from the GUI.
      * @param {Controller} controller
      * @instance
@@ -1131,16 +1156,21 @@ function recallSavedValue(gui, controller) {
 }
 
 function add(gui, object, property, params) {
-  if (object[property] === undefined) {
+  if (!object instanceof CustomController && !params.custom && (object[property] === undefined)) {
     throw new Error(`Object "${object}" has no property "${property}"`);
   }
 
   let controller;
 
   if (params.color) {
     controller = new ColorController(object, property);
-  } else {
-    const factoryArgs = [object, property].concat(params.factoryArgs);
+  } else if(object instanceof CustomController && ( property === undefined )){
+  	controller = object;
+  } else if (!(object instanceof CustomController) && params.custom && (object[property] === undefined)) {
+  	controller = new CustomController(object, property);
+  }else {
+  	const factoryArgs = object instanceof CustomController ?
+      [property].concat(params.factoryArgs) : [object, property].concat(params.factoryArgs);
     controller = ControllerFactory.apply(gui, factoryArgs);
   }
 
@@ -1152,12 +1182,15 @@ function add(gui, object, property, params) {
 
   dom.addClass(controller.domElement, 'c');
 
-  const name = document.createElement('span');
-  dom.addClass(name, 'property-name');
-  name.innerHTML = controller.property;
-
   const container = document.createElement('div');
+
+  const name = params.custom && ( controller instanceof CustomController === false ) ?
+    ( object instanceof CustomController ? object.domElement : new CustomController(object).domElement ) : document.createElement('span');
+  if (!params.custom)
+  	name.innerHTML = controller.property;
+  dom.addClass(name, 'property-name');
   container.appendChild(name);
+
   container.appendChild(controller.domElement);
 
   const li = addRow(gui, container, params.before);

src/dat/index.js

@@ -24,6 +24,7 @@ import NumberControllerBox from './controllers/NumberControllerBox';
 import NumberControllerSlider from './controllers/NumberControllerSlider';
 import FunctionController from './controllers/FunctionController';
 import ColorController from './controllers/ColorController';
+import CustomController from './controllers/CustomController';
 
 import domImport from './dom/dom';
 import GUIImport from './gui/GUI';
@@ -43,7 +44,8 @@ export const controllers = {
   NumberControllerBox: NumberControllerBox,
   NumberControllerSlider: NumberControllerSlider,
   FunctionController: FunctionController,
-  ColorController: ColorController
+  ColorController: ColorController,
+  CustomController: CustomController
 };
 
 export const dom = { dom: domImport };

tests/index.html

@@ -25,6 +25,7 @@
     var NumberControllerSlider = dat.controllers.NumberControllerSlider;
     var FunctionController = dat.controllers.FunctionController;
     var ColorController = dat.controllers.ColorController;
+    var CustomController = dat.controllers.CustomController;
     var GUI = dat.gui.GUI;
 
 
@@ -863,6 +864,22 @@
       document.body.removeChild(c1.domElement);
     });
 */
+    module("CustomController");
+    test("Get Custom", function () {
+        var value = 'value',
+            c1 = new CustomController({
+            constructor: function (controller) {
+                var input = document.createElement('input');
+                input.value = value;
+                controller.domElement.appendChild(input);
+            }
+        });
+        document.body.appendChild(c1.domElement);
+        var input = c1.domElement.getElementsByTagName("input")[0];
+        equal(input.value, value , "Input value is the same as the " + value);
+        document.body.removeChild(c1.domElement);
+    });
+
     module("Controller Events");
 
     test("onChange", function() {