Using common.js + webpack

README.md

@@ -10,32 +10,11 @@ The easiest way to use dat.GUI in your code is by using the built source at `bui
 
 In your `head` tag, include the following code:
 ```
-<script type="text/javascript" src="dat.gui.min.js"></script>
+<script type="text/javascript" src="dat.gui.main.js"></script>
 ```
 
 ----
 
-##Using dat.GUI with require.js
-Internally, dat.GUI uses [require.js](http://requirejs.org/) to handle dependency management. If you're making changes to the source and want to see the effects of your changes without building, use require js.
-
-In your `head` tag, include the following code:
-```
-<script data-main="path/to/main" src="path/to/requirejs/require.js"></script>
-```
-
-Then, in `path/to/main.js`:
-```
-require([
-  'path/to/gui/module/GUI'
-], function(GUI) {
-
-  // No namespace necessary 
-  var gui = new GUI();
-
-});
-```
-
-----
 
 ##Directory Contents
  * build: Concatenated source code.
@@ -50,19 +29,20 @@ require([
 In the terminal, enter the following:
 
 ```
-$ cd utils
+$ npm run build
-$ node build_gui.js
 ```
 
-This will create a namespaced, unminified build of dat.GUI at `build/dat.gui.js`
+This will create a namespaced, unminified build of dat.GUI at `build/dat.gui.main.js`
-
-_To export minified source using Closure Compiler, open `utils/build_gui.js` and set the `minify` parameter to `true`._
 
 ----
 
 ##Change log
 
-###0.5
+### 0.6.0
+ * Using common.js
+ * Using webpack for build
+
+### 0.5
  * Moved to requirejs for dependency management.
  * Changed global namespace from *DAT* to *dat* (lowercase).
  * Added support for color controllers. See [Color Controllers](http://workshop.chromeexperiments.com/examples/gui/#4--Color-Controllers).
@@ -75,7 +55,7 @@ _To export minified source using Closure Compiler, open `utils/build_gui.js` and
  * Made Controller code completely agnostic of GUI. Controllers can easily be created independent of a GUI panel.
 
 
-#0.4
+### 0.4
 
  * Migrated from GitHub to Google Code.
 

example.html

@@ -6,7 +6,7 @@
   <script type="text/javascript" src="build/dat.gui.min.js"></script>
   <script type="text/javascript">
     var obj = { x: 5 };
-    var gui = new dat.GUI();
+    var gui = new dat.gui.GUI();
 	gui.add(obj, 'x');	
   </script>
 </body>

index.js

@@ -0,0 +1 @@
+module.exports = require('./src/dat/index');

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "dat.gui",
+  "version": "0.6.0",
+  "description": "A lightweight graphical user interface for changing variables in JavaScript.",
+  "main": "index.js",
+  "directories": {
+    "test": "tests"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack && webpack --config ./webpack.config.min.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dataarts/dat.gui.git"
+  },
+  "author": "Data Arts Team, Google Creative Lab",
+  "license": "Apache 2.0",
+  "bugs": {
+    "url": "https://github.com/dataarts/dat.gui/issues"
+  },
+  "homepage": "https://github.com/dataarts/dat.gui#readme",
+  "devDependencies": {
+    "css-loader": "^0.16.0",
+    "extend": "^3.0.0",
+    "html-loader": "^0.3.0",
+    "style-loader": "^0.12.3",
+    "webpack": "^1.11.0"
+  }
+}

src/dat/color/Color.js

@@ -11,14 +11,12 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+var interpret = require('./interpret'),
-  'dat/color/interpret',
+    math = require('./math'),
-  'dat/color/math',
+    toString = require('./toString'),
-  'dat/color/toString',
+    common = require('../utils/common');
-  'dat/utils/common'
-], function(interpret, math, toString, common) {
 
-  var Color = function() {
+var Color = function () {
 
     this.__state = interpret.apply(this, arguments);
 
@@ -27,47 +25,44 @@ define([
     }
 
     this.__state.a = this.__state.a || 1;
+};
 
+Color.COMPONENTS = ['r', 'g', 'b', 'h', 's', 'v', 'hex', 'a'];
 
-  };
+common.extend(Color.prototype, {
 
-  Color.COMPONENTS = ['r','g','b','h','s','v','hex','a'];
+    toString: function () {
-
-  common.extend(Color.prototype, {
-
-    toString: function() {
         return toString(this);
     },
 
-    toOriginal: function() {
+    toOriginal: function () {
         return this.__state.conversion.write(this);
     }
 
-  });
+});
 
-  defineRGBComponent(Color.prototype, 'r', 2);
+defineRGBComponent(Color.prototype, 'r', 2);
-  defineRGBComponent(Color.prototype, 'g', 1);
+defineRGBComponent(Color.prototype, 'g', 1);
-  defineRGBComponent(Color.prototype, 'b', 0);
+defineRGBComponent(Color.prototype, 'b', 0);
 
-  defineHSVComponent(Color.prototype, 'h');
+defineHSVComponent(Color.prototype, 'h');
-  defineHSVComponent(Color.prototype, 's');
+defineHSVComponent(Color.prototype, 's');
-  defineHSVComponent(Color.prototype, 'v');
+defineHSVComponent(Color.prototype, 'v');
 
-  Object.defineProperty(Color.prototype, 'a', {
+Object.defineProperty(Color.prototype, 'a', {
 
-    get: function() {
+    get: function () {
         return this.__state.a;
     },
 
-    set: function(v) {
+    set: function (v) {
         this.__state.a = v;
     }
+});
 
-  });
+Object.defineProperty(Color.prototype, 'hex', {
 
-  Object.defineProperty(Color.prototype, 'hex', {
+    get: function () {
-
-    get: function() {
 
         if (!this.__state.space !== 'HEX') {
             this.__state.hex = math.rgb_to_hex(this.r, this.g, this.b);
@@ -77,20 +72,20 @@ define([
 
     },
 
-    set: function(v) {
+    set: function (v) {
 
         this.__state.space = 'HEX';
         this.__state.hex = v;
 
     }
 
-  });
+});
 
-  function defineRGBComponent(target, component, componentHexIndex) {
+function defineRGBComponent(target, component, componentHexIndex) {
 
     Object.defineProperty(target, component, {
 
-      get: function() {
+        get: function () {
 
             if (this.__state.space === 'RGB') {
                 return this.__state[component];
@@ -102,7 +97,7 @@ define([
 
         },
 
-      set: function(v) {
+        set: function (v) {
 
             if (this.__state.space !== 'RGB') {
                 recalculateRGB(this, component, componentHexIndex);
@@ -115,13 +110,13 @@ define([
 
     });
 
-  }
+}
 
-  function defineHSVComponent(target, component) {
+function defineHSVComponent(target, component) {
 
     Object.defineProperty(target, component, {
 
-      get: function() {
+        get: function () {
 
             if (this.__state.space === 'HSV')
                 return this.__state[component];
@@ -132,7 +127,7 @@ define([
 
         },
 
-      set: function(v) {
+        set: function (v) {
 
             if (this.__state.space !== 'HSV') {
                 recalculateHSV(this);
@@ -145,9 +140,9 @@ define([
 
     });
 
-  }
+}
 
-  function recalculateRGB(color, component, componentHexIndex) {
+function recalculateRGB(color, component, componentHexIndex) {
 
     if (color.__state.space === 'HEX') {
 
@@ -163,9 +158,9 @@ define([
 
     }
 
-  }
+}
 
-  function recalculateHSV(color) {
+function recalculateHSV(color) {
 
     var result = math.rgb_to_hsv(color.r, color.g, color.b);
 
@@ -182,8 +177,6 @@ define([
         color.__state.h = 0;
     }
 
-  }
+}
 
-  return Color;
+module.exports = Color;
-
-});

src/dat/color/interpret.js

@@ -11,14 +11,12 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+var toString = require('./toString'),
-  'dat/color/toString',
+    common = require('../utils/common');
-  'dat/utils/common'
-], function(toString, common) {
 
-  var result, toReturn;
+var result, toReturn;
 
-  var interpret = function() {
+var interpret = function() {
 
   toReturn = false;
 
@@ -50,9 +48,9 @@ define([
 
   return toReturn;
 
-  };
+};
 
-  var INTERPRETATIONS = [
+var INTERPRETATIONS = [
 
   // Strings
   {
@@ -332,9 +330,6 @@ define([
   }
 
 
-  ];
+];
 
-  return interpret;
+module.exports = interpret;
-
-
-});

src/dat/color/math.js

@@ -11,13 +11,9 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+var tmpComponent;
 
-], function() {
+var ColorMath = {
-
-  var tmpComponent;
-
-  return {
 
     hsv_to_rgb: function(h, s, v) {
 
@@ -94,7 +90,6 @@ define([
     hex_with_component: function(hex, componentIndex, value) {
         return value << (tmpComponent = componentIndex * 8) | (hex & ~ (0xFF << tmpComponent));
     }
+}
 
-  }
+module.exports = ColorMath;
-
-});

src/dat/color/toString.js

@@ -11,27 +11,17 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+var common = require('../utils/common');
-  'dat/utils/common'
-], function(common) {
-
-  return function(color) {
 
+module.exports = function(color) {
   if (color.a == 1 || common.isUndefined(color.a)) {
-
     var s = color.hex.toString(16);
     while (s.length < 6) {
       s = '0' + s;
     }
 
     return '#' + s;
-
   } else {
-
     return 'rgba(' + Math.round(color.r) + ',' + Math.round(color.g) + ',' + Math.round(color.b) + ',' + color.a + ')';
-
   }
-
+};
-  }
-
-});

src/dat/controllers/BooleanController.js

@@ -11,13 +11,11 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+var Controller = require('./Controller'),
-  'dat/controllers/Controller',
+    dom = require('../dom/dom'),
-  'dat/dom/dom',
+    common = require('../utils/common');
-  'dat/utils/common'
-], function(Controller, dom, common) {
 
-  /**
+/**
  * @class Provides a checkbox input to alter the boolean property of an object.
  * @extends dat.controllers.Controller
  *
@@ -26,7 +24,7 @@ define([
  *
  * @member dat.controllers
  */
-  var BooleanController = function(object, property) {
+var BooleanController = function(object, property) {
 
     BooleanController.superclass.call(this, object, property);
 
@@ -48,11 +46,11 @@ define([
         _this.setValue(!_this.__prev);
     }
 
-  };
+};
 
-  BooleanController.superclass = Controller;
+BooleanController.superclass = Controller;
 
-  common.extend(
+common.extend(
 
     BooleanController.prototype,
     Controller.prototype,
@@ -84,8 +82,6 @@ define([
 
     }
 
-  );
+);
 
-  return BooleanController;
+module.exports = BooleanController;
-
-});

src/dat/controllers/ColorController.js

@@ -11,16 +11,13 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+var Controller = require('./Controller'),
-  'dat/controllers/Controller',
+    dom = require('../dom/dom'),
-  'dat/dom/dom',
+    Color = require('../color/Color'),
-  'dat/color/Color',
+    interpret = require('../color/interpret'),
-  'dat/color/interpret',
+    common = require('../utils/common');
-  'dat/utils/common'
-], function(Controller, dom, Color, interpret, common) {
-
-  var ColorController = function(object, property) {
 
+var ColorController = function(object, property) {
   ColorController.superclass.call(this, object, property);
 
   this.__color = new Color(this.getValue());
@@ -229,11 +226,11 @@ define([
 
   }
 
-  };
+};
 
-  ColorController.superclass = Controller;
+ColorController.superclass = Controller;
 
-  common.extend(
+common.extend(
 
     ColorController.prototype,
     Controller.prototype,
@@ -298,27 +295,25 @@ define([
 
     }
 
-  );
+);
 
-  var vendors = ['-moz-','-o-','-webkit-','-ms-',''];
+var vendors = ['-moz-','-o-','-webkit-','-ms-',''];
 
-  function linearGradient(elem, x, a, b) {
+function linearGradient(elem, x, a, b) {
   elem.style.background = '';
   common.each(vendors, function(vendor) {
     elem.style.cssText += 'background: ' + vendor + 'linear-gradient('+x+', '+a+' 0%, ' + b + ' 100%); ';
   });
-  }
+}
 
-  function hueGradient(elem) {
+function hueGradient(elem) {
   elem.style.background = '';
   elem.style.cssText += 'background: -moz-linear-gradient(top,  #ff0000 0%, #ff00ff 17%, #0000ff 34%, #00ffff 50%, #00ff00 67%, #ffff00 84%, #ff0000 100%);'
   elem.style.cssText += 'background: -webkit-linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'
   elem.style.cssText += 'background: -o-linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'
   elem.style.cssText += 'background: -ms-linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'
   elem.style.cssText += 'background: linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'
-  }
+}
 
 
-  return ColorController;
+module.exports = ColorController;
-
-});

src/dat/controllers/Controller.js

@@ -11,11 +11,9 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+var common = require('../utils/common');
-   'dat/utils/common'
-], function(common) {
 
-  /**
+/**
  * @class An "abstract" class that represents a given property of an object.
  *
  * @param {Object} object The object to be manipulated
@@ -23,7 +21,7 @@ define([
  *
  * @member dat.controllers
  */
-  var Controller = function(object, property) {
+var Controller = function(object, property) {
 
     this.initialValue = object[property];
 
@@ -59,9 +57,9 @@ define([
      */
     this.__onFinishChange = undefined;
 
-  };
+};
 
-  common.extend(
+common.extend(
 
     Controller.prototype,
 
@@ -133,12 +131,7 @@ define([
         isModified: function() {
             return this.initialValue !== this.getValue()
         }
-
     }
+);
 
-  );
+module.exports = Controller;
-
-  return Controller;
-
-
-});

src/dat/controllers/FunctionController.js

@@ -11,13 +11,11 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+var Controller = require('./Controller'),
-    'dat/controllers/Controller',
+    dom = require('../dom/dom'),
-    'dat/dom/dom',
+    common = require('../utils/common');
-    'dat/utils/common'
-], function(Controller, dom, common) {
 
-  /**
+/**
  * @class Provides a GUI interface to fire a specified method, a property of an object.
  *
  * @extends dat.controllers.Controller
@@ -27,7 +25,7 @@ define([
  *
  * @member dat.controllers
  */
-  var FunctionController = function(object, property, text) {
+var FunctionController = function(object, property, text) {
 
     FunctionController.superclass.call(this, object, property);
 
@@ -46,11 +44,11 @@ define([
     this.domElement.appendChild(this.__button);
 
 
-  };
+};
 
-  FunctionController.superclass = Controller;
+FunctionController.superclass = Controller;
 
-  common.extend(
+common.extend(
 
     FunctionController.prototype,
     Controller.prototype,
@@ -67,8 +65,6 @@ define([
         }
     }
 
-  );
+);
 
-  return FunctionController;
+module.exports = FunctionController;
-
-});

src/dat/controllers/NumberController.js

@@ -11,12 +11,11 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+var Controller = require('./Controller'),
-    'dat/controllers/Controller',
+    common = require('../utils/common');
-    'dat/utils/common'
-], function(Controller, common) {
 
-  /**
+
+/**
  * @class Represents a given property of an object that is a number.
  *
  * @extends dat.controllers.Controller
@@ -30,7 +29,7 @@ define([
  *
  * @member dat.controllers
  */
-  var NumberController = function(object, property, params) {
+var NumberController = function(object, property, params) {
 
     NumberController.superclass.call(this, object, property);
 
@@ -52,17 +51,14 @@ define([
     } else {
 
         this.__impliedStep = this.__step;
-
     }
 
     this.__precision = numDecimals(this.__impliedStep);
+};
 
+NumberController.superclass = Controller;
 
-  };
+common.extend(
-
-  NumberController.superclass = Controller;
-
-  common.extend(
 
     NumberController.prototype,
     Controller.prototype,
@@ -129,17 +125,15 @@ define([
 
     }
 
-  );
+);
 
-  function numDecimals(x) {
+function numDecimals(x) {
     x = x.toString();
     if (x.indexOf('.') > -1) {
         return x.length - x.indexOf('.') - 1;
     } else {
         return 0;
     }
-  }
+}
 
-  return NumberController;
+module.exports = NumberController;
-
-});

src/dat/controllers/NumberControllerBox.js

@@ -11,13 +11,12 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+var Controller = require('./Controller'),
-  'dat/controllers/NumberController',
+    NumberController = require('./NumberController'),
-  'dat/dom/dom',
+    dom = require('../dom/dom'),
-  'dat/utils/common'
+    common = require('../utils/common');
-], function(NumberController, dom, common) {
 
-  /**
+/**
  * @class Represents a given property of an object that is a number and
  * provides an input element with which to manipulate it.
  *
@@ -33,7 +32,7 @@ define([
  *
  * @member dat.controllers
  */
-  var NumberControllerBox = function(object, property, params) {
+var NumberControllerBox = function(object, property, params) {
 
   this.__truncationSuspended = false;
 
@@ -102,11 +101,11 @@ define([
 
   this.domElement.appendChild(this.__input);
 
-  };
+};
 
-  NumberControllerBox.superclass = NumberController;
+NumberControllerBox.superclass = NumberController;
 
-  common.extend(
+common.extend(
 
     NumberControllerBox.prototype,
     NumberController.prototype,
@@ -121,14 +120,13 @@ define([
 
     }
 
-  );
+);
 
-  function roundToDecimal(value, decimals) {
+function roundToDecimal(value, decimals) {
   var tenTo = Math.pow(10, decimals);
   return Math.round(value * tenTo) / tenTo;
-  }
+}
 
-  return NumberControllerBox;
+module.exports = NumberControllerBox;
 
-});
 

src/dat/controllers/NumberControllerSlider.js

@@ -11,16 +11,13 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+var NumberController = require('./NumberController'),
-    'dat/controllers/NumberController',
+    dom = require('../dom/dom'),
-    'dat/dom/dom',
+    css = require('../utils/css'),
-    'dat/utils/css',
+    common = require('../utils/common'),
-    'dat/utils/common',
+    styleSheet = require('./NumberControllerSlider.css');
-    'text!dat/controllers/NumberControllerSlider.css'
-], 
-function(NumberController, dom, css, common, styleSheet) {
 
-  /**
+/**
  * @class Represents a given property of an object that is a number, contains
  * a minimum and maximum, and provides a slider element with which to
  * manipulate it. It should be noted that the slider element is made up of
@@ -38,7 +35,7 @@ function(NumberController, dom, css, common, styleSheet) {
  *
  * @member dat.controllers
  */
-  var NumberControllerSlider = function(object, property, min, max, step) {
+var NumberControllerSlider = function(object, property, min, max, step) {
 
   NumberControllerSlider.superclass.call(this, object, property, { min: min, max: max, step: step });
 
@@ -90,18 +87,18 @@ function(NumberController, dom, css, common, styleSheet) {
   this.__background.appendChild(this.__foreground);
   this.domElement.appendChild(this.__background);
 
-  };
+};
 
-  NumberControllerSlider.superclass = NumberController;
+NumberControllerSlider.superclass = NumberController;
 
-  /**
+/**
  * Injects default stylesheet for slider elements.
  */
-  NumberControllerSlider.useDefaultStyles = function() {
+NumberControllerSlider.useDefaultStyles = function() {
   css.inject(styleSheet);
-  };
+};
 
-  common.extend(
+common.extend(
 
     NumberControllerSlider.prototype,
     NumberController.prototype,
@@ -118,12 +115,10 @@ function(NumberController, dom, css, common, styleSheet) {
 
 
 
-  );
+);
 
-	function map(v, i1, i2, o1, o2) {
+function map(v, i1, i2, o1, o2) {
   return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
-	}
+}
 
-  return NumberControllerSlider;
+module.exports = NumberControllerSlider;
-  
-});

src/dat/controllers/OptionController.js

@@ -11,14 +11,11 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+var Controller = require('./Controller'),
-    'dat/controllers/Controller',
+    dom = require('../dom/dom'),
-    'dat/dom/dom',
+    common = require('../utils/common');
-    'dat/utils/common'
-],
-function(Controller, dom, common) {
 
-  /**
+/**
  * @class Provides a select input to alter the property of an object, using a
  * list of accepted values.
  *
@@ -31,7 +28,7 @@ function(Controller, dom, common) {
  *
  * @member dat.controllers
  */
-  var OptionController = function(object, property, options) {
+var OptionController = function(object, property, options) {
 
     OptionController.superclass.call(this, object, property);
 
@@ -70,11 +67,11 @@ function(Controller, dom, common) {
 
     this.domElement.appendChild(this.__select);
 
-  };
+};
 
-  OptionController.superclass = Controller;
+OptionController.superclass = Controller;
 
-  common.extend(
+common.extend(
 
     OptionController.prototype,
     Controller.prototype,
@@ -96,8 +93,6 @@ function(Controller, dom, common) {
 
     }
 
-  );
+);
 
-  return OptionController;
+module.exports = OptionController;
-
-});

src/dat/controllers/StringController.js

@@ -11,13 +11,11 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+var Controller = require('./Controller'),
-    'dat/controllers/Controller',
+    dom = require('../dom/dom'),
-    'dat/dom/dom',
+    common = require('../utils/common');
-    'dat/utils/common'
-], function(Controller, dom, common) {
 
-  /**
+/**
  * @class Provides a text input to alter the string property of an object.
  *
  * @extends dat.controllers.Controller
@@ -27,7 +25,7 @@ define([
  *
  * @member dat.controllers
  */
-  var StringController = function(object, property) {
+var StringController = function(object, property) {
 
   StringController.superclass.call(this, object, property);
 
@@ -60,11 +58,11 @@ define([
 
   this.domElement.appendChild(this.__input);
 
-  };
+};
 
-  StringController.superclass = Controller;
+StringController.superclass = Controller;
 
-  common.extend(
+common.extend(
 
     StringController.prototype,
     Controller.prototype,
@@ -82,8 +80,6 @@ define([
 
     }
 
-  );
+);
 
-  return StringController;
+module.exports = StringController;
-
-});

src/dat/controllers/factory.js

@@ -11,18 +11,15 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+var OptionController = require('./OptionController'),
-  'dat/controllers/OptionController',
+    NumberControllerBox = require('./NumberControllerBox'),
-  'dat/controllers/NumberControllerBox',
+    NumberControllerSlider = require('./NumberControllerSlider'),
-  'dat/controllers/NumberControllerSlider',
+    StringController = require('./StringController'),
-  'dat/controllers/StringController',
+    FunctionController = require('./FunctionController'),
-  'dat/controllers/FunctionController',
+    BooleanController = require('./BooleanController'),
-  'dat/controllers/BooleanController',
+    common = require('../utils/common');
-  'dat/utils/common'
-],
-    function(OptionController, NumberControllerBox, NumberControllerSlider, StringController, FunctionController, BooleanController, common) {
 
-      return function(object, property) {
+    module.exports = function(object, property) {
 
   var initialValue = object[property];
 
@@ -36,16 +33,13 @@ define([
   if (common.isNumber(initialValue)) {
 
     if (common.isNumber(arguments[2]) && common.isNumber(arguments[3])) {
-
       // Has min and max.
       return new NumberControllerSlider(object, property, arguments[2], arguments[3]);
 
     } else {
 
       return new NumberControllerBox(object, property, { min: arguments[2], max: arguments[3] });
-
     }
-
   }
 
   if (common.isString(initialValue)) {
@@ -59,7 +53,4 @@ define([
   if (common.isBoolean(initialValue)) {
     return new BooleanController(object, property);
   }
-
+};
-      }
-
-    });

src/dat/dom/CenteredDiv.js

@@ -11,13 +11,10 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+var dom = require('../dom/dom'),
-  'dat/dom/dom',
+    common = require('../utils/common');
-  'dat/utils/common'
-], function(dom, common) {
 
-
+var CenteredDiv = function() {
-  var CenteredDiv = function() {
 
     this.backgroundElement = document.createElement('div');
     common.extend(this.backgroundElement.style, {
@@ -54,9 +51,9 @@ define([
     });
 
 
-  };
+};
 
-  CenteredDiv.prototype.show = function() {
+CenteredDiv.prototype.show = function() {
 
     var _this = this;
 
@@ -75,9 +72,9 @@ define([
         _this.domElement.style.webkitTransform = 'scale(1)';
     });
 
-  };
+};
 
-  CenteredDiv.prototype.hide = function() {
+CenteredDiv.prototype.hide = function() {
 
     var _this = this;
 
@@ -101,17 +98,15 @@ define([
     this.domElement.style.opacity = 0;
     this.domElement.style.webkitTransform = 'scale(1.1)';
 
-  };
+};
 
-  CenteredDiv.prototype.layout = function() {
+CenteredDiv.prototype.layout = function() {
     this.domElement.style.left = window.innerWidth/2 - dom.getWidth(this.domElement) / 2 + 'px';
     this.domElement.style.top = window.innerHeight/2 - dom.getHeight(this.domElement) / 2 + 'px';
-  };
+};
 
-  function lockScroll(e) {
+function lockScroll(e) {
     console.log(e);
-  }
+}
 
-  return CenteredDiv;
+module.exports = CenteredDiv;
-
-});

src/dat/dom/dom.js

@@ -11,26 +11,24 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+var common = require('../utils/common');
-  'dat/utils/common'
-], function(common) {
 
-  var EVENT_MAP = {
+var EVENT_MAP = {
     'HTMLEvents': ['change'],
-    'MouseEvents': ['click','mousemove','mousedown','mouseup', 'mouseover'],
+    'MouseEvents': ['click', 'mousemove', 'mousedown', 'mouseup', 'mouseover'],
     'KeyboardEvents': ['keydown']
-  };
+};
 
-  var EVENT_MAP_INV = {};
+var EVENT_MAP_INV = {};
-  common.each(EVENT_MAP, function(v, k) {
+common.each(EVENT_MAP, function (v, k) {
-    common.each(v, function(e) {
+    common.each(v, function (e) {
         EVENT_MAP_INV[e] = k;
     });
-  });
+});
 
-  var CSS_VALUE_PIXELS = /(\d+(\.\d+)?)px/;
+var CSS_VALUE_PIXELS = /(\d+(\.\d+)?)px/;
 
-  function cssValueToPixels(val) {
+function cssValueToPixels(val) {
 
     if (val === '0' || common.isUndefined(val)) return 0;
 
@@ -44,26 +42,26 @@ define([
 
     return 0;
 
-  }
+}
 
-  /**
+/**
  * @namespace
  * @member dat.dom
  */
-  var dom = {
+var dom = {
 
     /**
      *
      * @param elem
      * @param selectable
      */
-    makeSelectable: function(elem, selectable) {
+    makeSelectable: function (elem, selectable) {
 
         if (elem === undefined || elem.style === undefined) return;
 
-      elem.onselectstart = selectable ? function() {
+        elem.onselectstart = selectable ? function () {
             return false;
-      } : function() {
+        } : function () {
         };
 
         elem.style.MozUserSelect = selectable ? 'auto' : 'none';
@@ -78,7 +76,7 @@ define([
      * @param horizontal
      * @param vertical
      */
-    makeFullscreen: function(elem, horizontal, vertical) {
+    makeFullscreen: function (elem, horizontal, vertical) {
 
         if (common.isUndefined(horizontal)) horizontal = true;
         if (common.isUndefined(vertical)) vertical = true;
@@ -102,7 +100,7 @@ define([
      * @param eventType
      * @param params
      */
-    fakeEvent: function(elem, eventType, params, aux) {
+    fakeEvent: function (elem, eventType, params, aux) {
         params = params || {};
         var className = EVENT_MAP_INV[eventType];
         if (!className) {
@@ -154,7 +152,7 @@ define([
      * @param func
      * @param bool
      */
-    bind: function(elem, event, func, bool) {
+    bind: function (elem, event, func, bool) {
         bool = bool || false;
         if (elem.addEventListener)
             elem.addEventListener(event, func, bool);
@@ -170,7 +168,7 @@ define([
      * @param func
      * @param bool
      */
-    unbind: function(elem, event, func, bool) {
+    unbind: function (elem, event, func, bool) {
         bool = bool || false;
         if (elem.removeEventListener)
             elem.removeEventListener(event, func, bool);
@@ -184,7 +182,7 @@ define([
      * @param elem
      * @param className
      */
-    addClass: function(elem, className) {
+    addClass: function (elem, className) {
         if (elem.className === undefined) {
             elem.className = className;
         } else if (elem.className !== className) {
@@ -202,7 +200,7 @@ define([
      * @param elem
      * @param className
      */
-    removeClass: function(elem, className) {
+    removeClass: function (elem, className) {
         if (className) {
             if (elem.className === undefined) {
                 // elem.className = className;
@@ -222,7 +220,7 @@ define([
         return dom;
     },
 
-    hasClass: function(elem, className) {
+    hasClass: function (elem, className) {
         return new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)').test(elem.className) || false;
     },
 
@@ -230,7 +228,7 @@ define([
      *
      * @param elem
      */
-    getWidth: function(elem) {
+    getWidth: function (elem) {
 
         var style = getComputedStyle(elem);
 
@@ -245,7 +243,7 @@ define([
      *
      * @param elem
      */
-    getHeight: function(elem) {
+    getHeight: function (elem) {
 
         var style = getComputedStyle(elem);
 
@@ -260,8 +258,8 @@ define([
      *
      * @param elem
      */
-    getOffset: function(elem) {
+    getOffset: function (elem) {
-      var offset = {left: 0, top:0};
+        var offset = {left: 0, top: 0};
         if (elem.offsetParent) {
             do {
                 offset.left += elem.offsetLeft;
@@ -276,12 +274,10 @@ define([
      *
      * @param elem
      */
-    isActive: function(elem) {
+    isActive: function (elem) {
         return elem === document.activeElement && ( elem.type || elem.href );
     }
 
-  };
+};
 
-  return dom;
+module.exports = dom;
-
-});

src/dat/gui/GUI.js

@@ -11,66 +11,57 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+var css = require('../utils/css'),
+    saveDialogueContents = require('html!./saveDialogue.html'),
+    styleSheet = require('./style.css'),
+    controllerFactory = require('../controllers/factory'),
+    Controller = require('../controllers/Controller'),
+    BooleanController = require('../controllers/BooleanController'),
+    FunctionController = require('../controllers/FunctionController'),
+    NumberControllerBox = require('../controllers/NumberControllerBox'),
+    NumberControllerSlider = require('../controllers/NumberControllerSlider'),
+    OptionController = require('../controllers/OptionController'),
+    ColorController = require('../controllers/ColorController'),
+    requestAnimationFrame = require('../utils/requestAnimationFrame'),
+    CenteredDiv = require('../dom/CenteredDiv'),
+    dom = require('../dom/dom'),
+    common = require('../utils/common');
 
-  'dat/utils/css',
+css.inject(styleSheet);
 
-  'text!dat/gui/saveDialogue.html',
+/** Outer-most className for GUI's */
-  'text!dat/gui/style.css',
+var CSS_NAMESPACE = 'dg';
 
-  'dat/controllers/factory',
+var HIDE_KEY_CODE = 72;
-  'dat/controllers/Controller',
-  'dat/controllers/BooleanController',
-  'dat/controllers/FunctionController',
-  'dat/controllers/NumberControllerBox',
-  'dat/controllers/NumberControllerSlider',
-  'dat/controllers/OptionController',
-  'dat/controllers/ColorController',
 
-  'dat/utils/requestAnimationFrame',
+/** The only value shared between the JS and SCSS. Use caution. */
+var CLOSE_BUTTON_HEIGHT = 20;
 
-  'dat/dom/CenteredDiv',
+var DEFAULT_DEFAULT_PRESET_NAME = 'Default';
-  'dat/dom/dom',
 
-  'dat/utils/common'
+var SUPPORTS_LOCAL_STORAGE = (function() {
-
-], function(css, saveDialogueContents, styleSheet, controllerFactory, Controller, BooleanController, FunctionController, NumberControllerBox, NumberControllerSlider, OptionController, ColorController, requestAnimationFrame, CenteredDiv, dom, common) {
-
-  css.inject(styleSheet);
-
-  /** Outer-most className for GUI's */
-  var CSS_NAMESPACE = 'dg';
-
-  var HIDE_KEY_CODE = 72;
-
-  /** The only value shared between the JS and SCSS. Use caution. */
-  var CLOSE_BUTTON_HEIGHT = 20;
-
-  var DEFAULT_DEFAULT_PRESET_NAME = 'Default';
-
-  var SUPPORTS_LOCAL_STORAGE = (function() {
     try {
         return 'localStorage' in window && window['localStorage'] !== null;
     } catch (e) {
         return false;
     }
-  })();
+})();
 
-  var SAVE_DIALOGUE;
+var SAVE_DIALOGUE;
 
-  /** Have we yet to create an autoPlace GUI? */
+/** Have we yet to create an autoPlace GUI? */
-  var auto_place_virgin = true;
+var auto_place_virgin = true;
 
-  /** Fixed position div that auto place GUI's go inside */
+/** Fixed position div that auto place GUI's go inside */
-  var auto_place_container;
+var auto_place_container;
 
-  /** Are we hiding the GUI's ? */
+/** Are we hiding the GUI's ? */
-  var hide = false;
+var hide = false;
 
-  /** GUI's which should be hidden */
+/** GUI's which should be hidden */
-  var hideable_guis = [];
+var hideable_guis = [];
 
-  /**
+/**
  * A lightweight controller library for JavaScript. It allows you to easily
  * manipulate variables and fire functions on the fly.
  * @class
@@ -85,7 +76,7 @@ define([
  * @param {dat.gui.GUI} [params.parent] The GUI I'm nested in.
  * @param {Boolean} [params.closed] If true, starts closed
  */
-  var GUI = function(params) {
+var GUI = function(params) {
 
     var _this = this;
 
@@ -458,40 +449,40 @@ define([
         resetWidth();
     }
 
-  };
+};
 
-  GUI.toggleHide = function() {
+GUI.toggleHide = function() {
 
     hide = !hide;
     common.each(hideable_guis, function(gui) {
         gui.domElement.style.zIndex = hide ? -999 : 999;
         gui.domElement.style.opacity = hide ? 0 : 1;
     });
-  };
+};
 
-  GUI.CLASS_AUTO_PLACE = 'a';
+GUI.CLASS_AUTO_PLACE = 'a';
-  GUI.CLASS_AUTO_PLACE_CONTAINER = 'ac';
+GUI.CLASS_AUTO_PLACE_CONTAINER = 'ac';
-  GUI.CLASS_MAIN = 'main';
+GUI.CLASS_MAIN = 'main';
-  GUI.CLASS_CONTROLLER_ROW = 'cr';
+GUI.CLASS_CONTROLLER_ROW = 'cr';
-  GUI.CLASS_TOO_TALL = 'taller-than-window';
+GUI.CLASS_TOO_TALL = 'taller-than-window';
-  GUI.CLASS_CLOSED = 'closed';
+GUI.CLASS_CLOSED = 'closed';
-  GUI.CLASS_CLOSE_BUTTON = 'close-button';
+GUI.CLASS_CLOSE_BUTTON = 'close-button';
-  GUI.CLASS_DRAG = 'drag';
+GUI.CLASS_DRAG = 'drag';
 
-  GUI.DEFAULT_WIDTH = 245;
+GUI.DEFAULT_WIDTH = 245;
-  GUI.TEXT_CLOSED = 'Close Controls';
+GUI.TEXT_CLOSED = 'Close Controls';
-  GUI.TEXT_OPEN = 'Open Controls';
+GUI.TEXT_OPEN = 'Open Controls';
 
-  dom.bind(window, 'keydown', function(e) {
+dom.bind(window, 'keydown', function(e) {
 
     if (document.activeElement.type !== 'text' &&
         (e.which === HIDE_KEY_CODE || e.keyCode == HIDE_KEY_CODE)) {
         GUI.toggleHide();
     }
 
-  }, false);
+}, false);
 
-  common.extend(
+common.extend(
 
     GUI.prototype,
 
@@ -794,9 +785,9 @@ define([
 
     }
 
-  );
+);
 
-  function add(gui, object, property, params) {
+function add(gui, object, property, params) {
 
     if (object[property] === undefined) {
         throw new Error("Object " + object + " has no property \"" + property + "\"");
@@ -842,16 +833,16 @@ define([
 
     return controller;
 
-  }
+}
 
-  /**
+/**
  * Add a row to the end of the GUI or before another row.
  *
  * @param gui
  * @param [dom] If specified, inserts the dom content in the new row
  * @param [liBefore] If specified, places the new row before another row
  */
-  function addRow(gui, dom, liBefore) {
+function addRow(gui, dom, liBefore) {
     var li = document.createElement('li');
     if (dom) li.appendChild(dom);
     if (liBefore) {
@@ -861,9 +852,9 @@ define([
     }
     gui.onResize();
     return li;
-  }
+}
 
-  function augmentController(gui, li, controller) {
+function augmentController(gui, li, controller) {
 
     controller.__li = li;
     controller.__gui = gui;
@@ -1014,9 +1005,9 @@ define([
         return r;
     }, controller.setValue);
 
-  }
+}
 
-  function recallSavedValue(gui, controller) {
+function recallSavedValue(gui, controller) {
 
     // Find the topmost GUI, that's where remembered objects live.
     var root = gui.getRoot();
@@ -1088,15 +1079,15 @@ define([
 
     }
 
-  }
+}
 
-  function getLocalStorageHash(gui, key) {
+function getLocalStorageHash(gui, key) {
     // TODO how does this deal with multiple GUI's?
     return document.location.href + '.' + key;
 
-  }
+}
 
-  function addSaveMenu(gui) {
+function addSaveMenu(gui) {
 
     var div = gui.__save_row = document.createElement('li');
 
@@ -1212,9 +1203,9 @@ define([
 
 //    div.appendChild(button2);
 
-  }
+}
 
-  function addResizeHandle(gui) {
+function addResizeHandle(gui) {
 
     gui.__resize_handle = document.createElement('div');
 
@@ -1270,9 +1261,9 @@ define([
 
     }
 
-  }
+}
 
-  function setWidth(gui, w) {
+function setWidth(gui, w) {
     gui.domElement.style.width = w + 'px';
     // Auto placed save-rows are position fixed, so we have to
     // set the width manually if we want it to bleed to the edge
@@ -1281,9 +1272,9 @@ define([
     }if (gui.__closeButton) {
         gui.__closeButton.style.width = w + 'px';
     }
-  }
+}
 
-  function getCurrentPreset(gui, useInitialValues) {
+function getCurrentPreset(gui, useInitialValues) {
 
     var toReturn = {};
 
@@ -1308,9 +1299,9 @@ define([
 
     return toReturn;
 
-  }
+}
 
-  function addPresetOption(gui, name, setSelected) {
+function addPresetOption(gui, name, setSelected) {
     var opt = document.createElement('option');
     opt.innerHTML = name;
     opt.value = name;
@@ -1318,17 +1309,17 @@ define([
     if (setSelected) {
         gui.__preset_select.selectedIndex = gui.__preset_select.length - 1;
     }
-  }
+}
 
-  function setPresetSelectIndex(gui) {
+function setPresetSelectIndex(gui) {
     for (var index = 0; index < gui.__preset_select.length; index++) {
         if (gui.__preset_select[index].value == gui.preset) {
             gui.__preset_select.selectedIndex = index;
         }
     }
-  }
+}
 
-  function markPresetModified(gui, modified) {
+function markPresetModified(gui, modified) {
     var opt = gui.__preset_select[gui.__preset_select.selectedIndex];
 //    console.log('mark', modified, opt);
     if (modified) {
@@ -1336,9 +1327,9 @@ define([
     } else {
         opt.innerHTML = opt.value;
     }
-  }
+}
 
-  function updateDisplays(controllerArray) {
+function updateDisplays(controllerArray) {
 
 
     if (controllerArray.length != 0) {
@@ -1353,8 +1344,7 @@ define([
         c.updateDisplay();
     });
 
-  }
+}
 
-  return GUI;
+module.exports = GUI;
 
-});

src/dat/index.js

@@ -0,0 +1,27 @@
+module.exports = {
+    color: {
+        Color: require('./color/Color'),
+        math: require('./color/math'),
+        interpret: require('./color/interpret')
+    },
+
+    controllers: {
+        Controller: require('./controllers/Controller'),
+        BooleanController: require('./controllers/BooleanController'),
+        OptionController: require('./controllers/OptionController'),
+        StringController: require('./controllers/StringController'),
+        NumberController: require('./controllers/NumberController'),
+        NumberControllerBox: require('./controllers/NumberControllerBox'),
+        NumberControllerSlider: require('./controllers/NumberControllerSlider'),
+        FunctionController: require('./controllers/FunctionController'),
+        ColorController: require('./controllers/ColorController'),
+    },
+
+    dom: {
+        dom: require('./dom/dom')
+    },
+
+    gui: {
+        GUI: require('./gui/GUI')
+    }
+};

src/dat/utils/common.js

@@ -11,25 +11,22 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+var ARR_EACH = Array.prototype.forEach;
-], function() {
+var ARR_SLICE = Array.prototype.slice;
 
-  var ARR_EACH = Array.prototype.forEach;
+/**
-  var ARR_SLICE = Array.prototype.slice;
-
-  /**
  * Band-aid methods for things that should be a lot easier in JavaScript.
  * Implementation and structure inspired by underscore.js
  * http://documentcloud.github.com/underscore/
  */
 
-  return { 
+var Common = {
 
     BREAK: {},
 
-    extend: function(target) {
+    extend: function (target) {
 
-      this.each(ARR_SLICE.call(arguments, 1), function(obj) {
+        this.each(ARR_SLICE.call(arguments, 1), function (obj) {
 
             for (var key in obj)
                 if (!this.isUndefined(obj[key]))
@@ -41,9 +38,9 @@ define([
 
     },
 
-    defaults: function(target) {
+    defaults: function (target) {
 
-      this.each(ARR_SLICE.call(arguments, 1), function(obj) {
+        this.each(ARR_SLICE.call(arguments, 1), function (obj) {
 
             for (var key in obj)
                 if (this.isUndefined(target[key]))
@@ -55,18 +52,18 @@ define([
 
     },
 
-    compose: function() {
+    compose: function () {
         var toCall = ARR_SLICE.call(arguments);
-            return function() {
+        return function () {
             var args = ARR_SLICE.call(arguments);
-              for (var i = toCall.length -1; i >= 0; i--) {
+            for (var i = toCall.length - 1; i >= 0; i--) {
                 args = [toCall[i].apply(this, args)];
             }
             return args[0];
         }
     },
 
-    each: function(obj, itr, scope) {
+    each: function (obj, itr, scope) {
 
         if (!obj) return;
 
@@ -90,51 +87,51 @@ define([
 
     },
 
-    defer: function(fnc) {
+    defer: function (fnc) {
         setTimeout(fnc, 0);
     },
 
-    toArray: function(obj) {
+    toArray: function (obj) {
         if (obj.toArray) return obj.toArray();
         return ARR_SLICE.call(obj);
     },
 
-    isUndefined: function(obj) {
+    isUndefined: function (obj) {
         return obj === undefined;
     },
 
-    isNull: function(obj) {
+    isNull: function (obj) {
         return obj === null;
     },
 
-    isNaN: function(obj) {
+    isNaN: function (obj) {
         return obj !== obj;
     },
 
-    isArray: Array.isArray || function(obj) {
+    isArray: Array.isArray || function (obj) {
         return obj.constructor === Array;
     },
 
-    isObject: function(obj) {
+    isObject: function (obj) {
         return obj === Object(obj);
     },
 
-    isNumber: function(obj) {
+    isNumber: function (obj) {
-      return obj === obj+0;
+        return obj === obj + 0;
     },
 
-    isString: function(obj) {
+    isString: function (obj) {
-      return obj === obj+'';
+        return obj === obj + '';
     },
 
-    isBoolean: function(obj) {
+    isBoolean: function (obj) {
         return obj === false || obj === true;
     },
 
-    isFunction: function(obj) {
+    isFunction: function (obj) {
         return Object.prototype.toString.call(obj) === '[object Function]';
     }
 
-  };
+};
 
-});
+module.exports = Common;

src/dat/utils/css.js

@@ -11,9 +11,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([],
+module.exports = {
-function() {
-  return {
     load: function (url, doc) {
         doc = doc || document;
         var link = doc.createElement('link');
@@ -22,12 +20,11 @@ function() {
         link.href = url;
         doc.getElementsByTagName('head')[0].appendChild(link);
     },
-    inject: function(css, doc) {
+    inject: function (css, doc) {
         doc = doc || document;
         var injected = document.createElement('style');
         injected.type = 'text/css';
         injected.innerHTML = css;
         doc.getElementsByTagName('head')[0].appendChild(injected);
     }
-  }
+};
-});

src/dat/utils/requestAnimationFrame.js

@@ -11,22 +11,13 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+module.exports = function () {
-], function() {
-
-  /**
-   * requirejs version of Paul Irish's RequestAnimationFrame
-   * http://paulirish.com/2011/requestanimationframe-for-smart-animating/
-   */
-
     return window.requestAnimationFrame ||
         window.webkitRequestAnimationFrame ||
         window.mozRequestAnimationFrame ||
         window.oRequestAnimationFrame ||
         window.msRequestAnimationFrame ||
-      function(callback, element) {
+        function (callback, element) {
-
             window.setTimeout(callback, 1000 / 60);
-
         };
-});
+};

tests/index.html

@@ -7,11 +7,12 @@
   <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();
   jQuery(document).ready(function($) {
+    // var dat = this['dat.gui'];
 
     var math = dat.color.math;
     var interpret = dat.color.interpret;

utils/build.js

@@ -1,19 +0,0 @@
-var builder = require('./builder.js');
-
-builder.build({
-   "baseUrl": "../src/",
-   "main": "dat/gui/GUI",
-   "out": "../build/dat.gui.js",
-   "minify": false,
-   "shortcut": "dat.GUI",
-   "paths": {}
-});
-
-builder.build({
-   "baseUrl": "../src/",
-   "main": "dat/gui/GUI",
-   "out": "../build/dat.gui.min.js",
-   "minify": true,
-   "shortcut": "dat.GUI",
-   "paths": {}
-});

utils/build_color.js

@@ -1,8 +0,0 @@
-require('./builder.js').build({
-   "baseUrl": "../src/",
-   "main": "dat/color/Color",
-   "out": "../build/dat.color.js",
-   "minify": false,
-   "shortcut": "dat.Color",
-   "paths": {}
-});

utils/build_gui.js

@@ -1,8 +0,0 @@
-require('./builder.js').build({
-   "baseUrl": "../src/",
-   "main": "dat/gui/GUI",
-   "out": "../build/dat.gui.js",
-   "minify": false,
-   "shortcut": "dat.GUI",
-   "paths": {}
-});

utils/builder.js

@@ -1,284 +0,0 @@
-/**
- * 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
- */
-
-var fs = require('fs'),
-    closure = require('./closure'),
-    params,
-    defined,
-    third_party,
-    request_counts,
-    namespaces,
-    next_load = '',
-    next_path = '';
-
-exports.build = build;
-exports.file_exists = file_exists;
-exports.read_file = read_file;
-exports.tab = tab;
-
-exports.license = read_file('license.txt');
-
-function build(_params) {
-
-  params = _params;
-
-  defined = {};
-  third_party = {};
-  request_counts = {};
-  namespaces = {};
-
-  var deps = [];
-
-  load_module(params.baseUrl + params.main + '.js', params.main);
-
-  for (var i in defined) {
-    if (params.verbose) console.log('Loaded: ' + defined[i].path);
-    deps.push(defined[i].path);
-    if (defined[i].module) {
-      var namespace = i.substr(0, i.lastIndexOf('/'));
-      namespaces[namespace] = true;
-    }
-  }
-
-  var to_write = '';
-  var ensured = {};
-
-
-  for (var name in params.paths) {
-    var path = params.baseUrl + params.paths[name] + '.js';
-    var str = read_file(path);
-    if (str === false) {
-      console.log('Failed to locate dependency \'' + name + '\' at ' + path);
-      fail();
-    }
-    third_party[name] = str;
-    to_write += third_party[name] + "\n\n";
-    if (params.verbose) console.log('Loaded: ' + path);
-    //deps.push(path);
-  }
-
-  // Ensure namespaces
-  for (i in namespaces) {
-
-    var split = i.split('/');
-
-    for (var j = 0; j < split.length; j++) {
-      var cur = [];
-      if (j == 0 && !ensured[split[j]]) {
-        to_write += '/** @namespace */\n';
-        to_write += 'var ' + split[j] + ' = ' + split[j] + ' || {};\n\n';
-        ensured[split[j]] = true;
-      } else {
-        for (var k = 0; k <= j; k++) {
-          cur.push(split[k]);
-        }
-        var curn = cur.join('.');
-        if (!ensured[curn]) {
-          to_write += '/** @namespace */\n';
-          to_write += curn + ' = ' + curn + ' || {};\n\n';
-        }
-        ensured[curn] = true;
-      }
-    }
-
-  }
-
-  var shared_count = 0;
-  for (i in request_counts) {
-    var count = request_counts[i];
-    if (count > 1) {
-      if (i in defined) {
-        var new_shared = i.replace(/\//g, '.');
-        var v = new_shared + ' = ' + defined[i].getClosure() + ';\n';
-        to_write += v + "\n\n";
-        defined[i].shared = new_shared;
-        shared_count++;
-      }
-    }
-  }
-  
-
-  to_write += params.shortcut + ' = ' + params.main.replace(/\//g, '.') + ' = ' + defined[params.main].getClosure() + ';';
-
-  if (params.verbose) console.log('Exported: ' + params.main + ' to window.' + params.shortcut);
-
-  if (params.minify) {
-
-    console.log('Compiling minified source ...');
-
-
-    closure.compile(to_write, function(error, code) {
-      if (error) {
-        console.log(error);
-      } else {
-        write(exports.license + code);
-      }
-      if (params.on_compile) {
-        params.on_compile();
-      }
-    });
-
-  } else {
-
-    write(exports.license + "\n" + to_write);
-
-  }
-
-  return deps;
-
-}
-
-function define(deps, callback) {
-
-  this.name = next_load;
-  this.path = next_path;
-  this.shared = false;
-
-  defined[this.name] = this;
-
-  if (Array.isArray(deps)) {
-
-    this.deps = deps;
-    this.callback = callback.toString();
-    this.module = true;
-
-    // Simple define call, just an object
-  } else if (typeof deps === 'object') {
-
-    var props = [];
-    for (var i in deps) {
-      props.push(i + ':' + deps[i].toString())
-    }
-    this.callback = '{' + props.join(',') + '}';
-    this.module = true;
-
-  } else {
-
-    this.deps = deps;
-    this.callback = callback;
-
-  }
-
-  this.getClosure = function() {
-    if (this.shared) return this.shared;
-    if (!this.deps || this.text) return this.callback;
-    var arg_string = '(';
-    var args = [];
-    for (var i in this.deps) {
-      var dep = this.deps[i];
-      if (dep in defined) {
-        var closure = defined[dep].getClosure();
-        if (!defined[dep].shared && !defined[dep].text) {
-          closure = defined[dep].name.replace(/\//g, '.') + ' = ' + closure;
-        }
-        args.push(closure);
-      }
-    }
-    arg_string += args.join(',\n');
-    arg_string += ')';
-    return '(' + this.callback + ')' + arg_string;
-
-  };
-
-  this.recurseDeps = function() {
-
-    if (!this.deps) return;
-
-    for (var i in this.deps) {
-
-      var dep = this.deps[i];
-
-      if (dep in params.paths) continue;
-
-      var path = params.baseUrl + dep;
-
-      // Define module?
-      if (file_exists(path + '.js')) {
-        load_module(path + '.js', dep);
-
-        // Text module?
-      } else if (path.match(/text!/) != null) {
-        load_text(path.replace('text!', ''), dep);
-      }
-
-      // up the request count
-      if (dep in request_counts) {
-        request_counts[dep]++
-      } else {
-        request_counts[dep] = 1;
-      }
-
-    }
-
-  };
-
-  this.recurseDeps();
-
-}
-
-function file_exists(path) {
-  try {
-    var stats = fs.lstatSync(path)
-    return stats.isFile();
-  } catch (e) {
-    return false;
-  }
-}
-
-function read_file(path) {
-  try {
-    return fs.readFileSync(path).toString();
-  } catch (e) {
-    return false;
-  }
-}
-
-function load_module(path, name) {
-  name = name || path;
-  if (name in defined) return;
-  next_load = name;
-  next_path = path;
-  eval('new ' + read_file(path));
-}
-
-function load_text(path, name) {
-  name = name || path;
-  if (name in defined) return;
-  var text = read_file(path);
-  text = text.replace(/\r/g, "\\r");
-  text = text.replace(/\n/g, "\\n");
-  text = text.replace(/"/g, "\\\"");
-  next_load = name;
-  next_path = path;
-  var d = new define([], '"' + text + '"');
-  d.text = true;
-  d.module = false;
-}
-
-function tab(str, tabs) {
-  var lines = str.split("\n");
-  for (var i in lines) {
-    lines[i] = tabs + lines[i];
-  }
-  return lines.join("\n");
-}
-
-function write(str) {
-  fs.writeFile(params.out, str);
-  console.log('Saved to ' + params.out);
-}
-
-function fail() {
-  console.log('Build failed.');
-  process.exit(0);
-}

utils/closure.js

@@ -1,108 +0,0 @@
-/// # Google Closure Compiler Service #
-/// https://github.com/weaver/scribbles/blob/master/node/google-closure/lib/closure.js
-/// Compress javascript with Node.js using the Closure Compiler
-/// Service.
-
-var sys = require('sys');
-
-exports.compile = compile;
-
-// Use the Google Closure Compiler Service to compress Javascript
-// code.
-//
-// + code - String of javascript to compress
-// + next - Function callback that accepts.
-//
-// This method will POST the `code` to the compiler service.  If an
-// error occurs, `next()` will be called with an `Error` object as the
-// first argument.  Otherwise, the `next()` will be called with `null`
-// as the first argument and a String of compressed javascript as the
-// second argument.
-//
-//     compile('... javascript ...', function(err, result) {
-//       if (err) throw err;
-//
-//       ... do something with result ...
-//     });
-//
-// Returns nothing.
-function compile(code, next) {
-  try {
-    var qs = require('querystring'),
-        http = require('http'),
-        host = 'closure-compiler.appspot.com',
-        body = qs.stringify({
-          js_code: code.toString('utf-8'),
-          compilation_level: 'SIMPLE_OPTIMIZATIONS',
-          output_format: 'json',
-          output_info: 'compiled_code'
-        }),
-        client = http.createClient(80, host).on('error', next),
-        req = client.request('POST', '/compile', {
-          'Host': host,
-          'Content-Length': body.length,
-          'Content-Type': 'application/x-www-form-urlencoded'
-        });
-
-    req.on('error', next).end(body);
-
-    req.on('response', function(res) {
-      if (res.statusCode != 200)
-        next(new Error('Unexpected HTTP response: ' + res.statusCode));
-      else
-        capture(res, 'utf-8', parseResponse);
-    });
-
-    function parseResponse(err, data) {
-      err ? next(err) : loadJSON(data, function(err, obj) {
-        var error;
-        if (err)
-          next(err);
-        else if ((error = obj.errors || obj.serverErrors || obj.warnings))
-          next(new Error('Failed to compile: ' + sys.inspect(error)));
-        else
-          next(null, obj.compiledCode);
-      });
-    }
-  } catch (err) {
-    next(err);
-  }
-}
-
-// Convert a Stream to a String.
-//
-// + input    - Stream object
-// + encoding - String input encoding
-// + next     - Function error/success callback
-//
-// Returns nothing.
-function capture(input, encoding, next) {
-  var buffer = '';
-
-  input.on('data', function(chunk) {
-    buffer += chunk.toString(encoding);
-  });
-
-  input.on('end', function() {
-    next(null, buffer);
-  });
-
-  input.on('error', next);
-}
-
-// Convert JSON.load() to callback-style.
-//
-// + data - String value to load
-// + next - Function error/success callback
-//
-// Returns nothing.
-function loadJSON(data, next) {
-  var err, obj;
-
-  try {
-    obj = JSON.parse(data);
-  } catch (x) {
-    err = x;
-  }
-  next(err, obj);
-}

utils/license.txt

@@ -1,12 +0,0 @@
-/**
- * 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
- */

webpack.config.js

@@ -0,0 +1,26 @@
+var path = require("path");
+
+module.exports = {
+    target: 'web',
+
+    context: path.resolve(__dirname, 'src'),
+
+    entry: {
+        main: '../index'
+    },
+
+    module: {
+        loaders: [
+            { test: /\.css$/, loader: "style-loader!css-loader" },
+            { test: /\.png$/, loader: "url-loader?limit=100000" },
+            { test: /\.jpg$/, loader: "file-loader" }
+        ]
+    },
+
+    output: {
+        path: path.join(__dirname, 'build'),
+        filename: 'dat.gui.js',
+        library: ['dat'],
+        libraryTarget: 'umd'
+    }
+};

webpack.config.min.js

@@ -0,0 +1,15 @@
+var extend = require('extend'),
+    webpack = require('webpack'),
+    webpackConfig = require('./webpack.config');
+
+var config = {
+    plugins: [
+        new webpack.optimize.UglifyJsPlugin({minimize: true})
+    ],
+
+    output: {
+        filename: 'dat.gui.min.js'
+    }
+}
+
+module.exports = extend(true, webpackConfig, config);