Merge branch 'korczis-master' into develop

.babelrc

@@ -0,0 +1,5 @@
+{
+  "stage": 0,
+  "loose": "all"
+}
+

.editorconfig

@@ -0,0 +1,17 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+max_line_length = 80
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false
+
+[COMMIT_EDITMSG]
+max_line_length = 0

.eslintrc

@@ -0,0 +1,10 @@
+{
+  "extends": "eslint-config-airbnb",
+  "rules": {
+    "comma-dangle": 0,
+    "func-names": 0,
+    "no-alert": 1,
+    "no-console": 1,
+    "no-use-before-define": 1
+  }
+}

.gitattributes

@@ -0,0 +1,14 @@
+# Set the default behavior, in case people don't have core.autocrlf set.
+* text=auto
+
+# Explicitly declare text files you want to always be normalized and converted
+# to native line endings on checkout.
+*.c text
+*.h text
+
+# Declare files that will always have CRLF line endings on checkout.
+*.sln text eol=crlf
+
+# Denote all files that are truly binary and should not be modified.
+*.png binary
+*.jpg binary

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
 .sass-cache
-.idea
+.idea/
+node_modules/

CHANGELOG.md

@@ -0,0 +1,26 @@
+## Changelog
+
+### 0.6.1
+ * Fixed all eslint issues
+ 
+### 0.6.0
+ * Using common.js
+ * Using webpack for build
+ * Fixed an issue with colors based on arrays - https://github.com/dataarts/dat.gui/pull/57
+ * Update factory.js, Step param was not used - https://github.com/dataarts/dat.gui/pull/45
+ 
+### 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).
+ * Added support for folders. See [Folders](http://workshop.chromeexperiments.com/examples/gui/#3--Folders).
+ * Added support for saving named presets.  See [Presets](http://workshop.chromeexperiments.com/examples/gui/examples/gui/#6--Presets).
+ * Removed `height` parameter from GUI constructor. Scrollbar automatically induced when window is too short.
+ * `dat.GUI.autoPlace` parameter removed. Use `new dat.GUI( { autoPlace: false } )`. See [Custom Placement](http://workshop.chromeexperiments.com/examples/gui/#9--Custom-Placement).
+ * `gui.autoListen` and `gui.listenAll()` removed. See [Updating The Display Manually](http://workshop.chromeexperiments.com/examples/gui/#11--Updating-the-Display-Manually).
+ * `dat.GUI.load` removed. See [Saving Values](http://workshop.chromeexperiments.com/examples/gui/#5--Saving-Values).
+ * Made Controller code completely agnostic of GUI. Controllers can easily be created independent of a GUI panel.
+
+
+### 0.4
+ * Migrated from GitHub to Google Code.

README.md

@@ -1,87 +1,47 @@
-#dat.GUI
+# dat.GUI
 A lightweight graphical user interface for changing variables in JavaScript. 
 
 Get started with dat.GUI by reading the tutorial at http://workshop.chromeexperiments.com/examples/gui.
 
-----
+## Live demo
 
-##Packaged Builds
+Simple live demo [is available here](http://korczis.github.io/dat.gui-ng/).
+
+## Packaged Builds
 The easiest way to use dat.GUI in your code is by using the built source at `build/dat.gui.min.js`. These built JavaScript files bundle all the necessary dependencies to run dat.GUI.
 
 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.js"></script>
 ```
 
-----
+## Directory Contents
 
-##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>
+├── build - Compiled source code.
+├── node_modules - External node dependencies.
+├── src - Source files.
+├── tests - Tests.
+└── webpack - Webpack config files.
 ```
 
-Then, in `path/to/main.js`:
+## Building your own dat.GUI
-```
-require([
-  'path/to/gui/module/GUI'
-], function(GUI) {
-
-  // No namespace necessary 
-  var gui = new GUI();
-
-});
-```
-
-----
-
-##Directory Contents
- * build: Concatenated source code.
- * src: Modular code in [require.js](http://requirejs.org/) format. Also includes css, [scss](http://sass-lang.com/), and html, some of which is included during build.
- * tests: [QUnit](https://github.com/jquery/qunit) test suite.
- * utils: [node.js](http://nodejs.org/) utility scripts for compiling source.
-
-----
-
-##Building your own dat.GUI
 
 In the terminal, enter the following:
 
 ```
-$ cd utils
+$ npm run build
-$ node build_gui.js
 ```
 
+## npm scripts
+
+- npm test - Run ESLint
+- npm run build - Build development and production version of scripts.
+- npm run dev - Build development version of script watch for changes.
+
 This will create a namespaced, unminified build of dat.GUI at `build/dat.gui.js`
 
-_To export minified source using Closure Compiler, open `utils/build_gui.js` and set the `minify` parameter to `true`._
+## Thanks
-
-----
-
-##Change log
-
-###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).
- * Added support for folders. See [Folders](http://workshop.chromeexperiments.com/examples/gui/#3--Folders).
- * Added support for saving named presets.  See [Presets](http://workshop.chromeexperiments.com/examples/gui/examples/gui/#6--Presets).
- * Removed `height` parameter from GUI constructor. Scrollbar automatically induced when window is too short.
- * `dat.GUI.autoPlace` parameter removed. Use `new dat.GUI( { autoPlace: false } )`. See [Custom Placement](http://workshop.chromeexperiments.com/examples/gui/#9--Custom-Placement).
- * `gui.autoListen` and `gui.listenAll()` removed. See [Updating The Display Manually](http://workshop.chromeexperiments.com/examples/gui/#11--Updating-the-Display-Manually).
- * `dat.GUI.load` removed. See [Saving Values](http://workshop.chromeexperiments.com/examples/gui/#5--Saving-Values).
- * Made Controller code completely agnostic of GUI. Controllers can easily be created independent of a GUI panel.
-
-
-#0.4
-
- * Migrated from GitHub to Google Code.
-
-----
-
-##Thanks
 The following libraries / open-source projects were used in the development of dat.GUI:
  * [require.js](http://requirejs.org/)
  * [Sass](http://sass-lang.com/)

bower.json

@@ -1,12 +1,12 @@
 {
-  "name": "dat-gui",
+  "name": "dat.gui-ng",
-  "version": "0.5.0",
+  "version": "0.6.1",
-  "homepage": "https://github.com/dataarts/dat.gui",
+  "homepage": "https://github.com/korczis/dat.gui.git",
   "authors": [
     "Google Data Arts Team <dataarts@google.com>"
   ],
   "description": "dat.gui is a lightweight controller library for JavaScript.",
-  "main": "./build/dat.gui.js",
+  "main": "./index.js",
   "keywords": [
     "controller",
     "javascript",

example.html

@@ -3,11 +3,84 @@
 <head>
 </head>
 <body>
-  <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">
-    var obj = { x: 5 };
+    var obj = {
-    var gui = new dat.GUI();
+        example: {
-	gui.add(obj, 'x');	
+          message: 'Hello World',
+          speed: 2,
+          displayOutline: false,
+          explode: function () {
+            console.log('Bang!');
+          },
+        },
+
+        noiseStrength: 10,
+        growthSpeed: 0.2,
+        maxSize: 6,
+        message: null,
+        speed: null,
+
+        flow: {
+            speed: 0.4,
+            noiseStrength: 10
+        },
+
+        letters: {
+            growthSpeed: 0.2,
+            maxSize: 10,
+            message: 'folders'
+        },
+
+        colors: {
+            color0: "#ffae23", // CSS string
+            color1: [ 0, 128, 255 ], // RGB array
+            color2: [ 0, 128, 255, 0.3 ], // RGB with alpha
+            color3: { h: 350, s: 0.9, v: 0.3 } // Hue, saturation, value
+        }
+    };
+
+    var gui = new dat.gui.GUI();
+
+    gui.remember(obj);
+    gui.remember(obj.example);
+    gui.remember(obj.flow);
+    gui.remember(obj.letters);
+
+    gui.add(obj.example, 'message').onFinishChange(function(value) {
+      // Fires when a controller loses focus.
+      console.log("obj.example.message = " + value);
+    });
+
+    gui.add(obj.example, 'speed', -5, 5);
+    gui.add(obj.example, 'displayOutline');
+    gui.add(obj.example, 'explode');
+
+    gui.add(obj, 'noiseStrength').step(5); // Increment amount
+    gui.add(obj, 'growthSpeed', -5, 5); // Min and max
+    gui.add(obj, 'maxSize').min(0).step(0.25); // Mix and match
+
+    // Choose from accepted values
+    gui.add(obj, 'message', [ 'pizza', 'chrome', 'hooray' ] );
+
+    // Choose from named values
+    gui.add(obj, 'speed', { Stopped: 0, Slow: 0.1, Fast: 5 } );
+
+    var f1 = gui.addFolder('Flow Field');
+    f1.add(obj.flow, 'speed');
+    f1.add(obj.flow, 'noiseStrength');
+
+    var f2 = gui.addFolder('Letters');
+    f2.add(obj.letters, 'growthSpeed');
+    f2.add(obj.letters, 'maxSize');
+    f2.add(obj.letters, 'message');
+
+    gui.addColor(obj.colors, 'color0');
+    gui.addColor(obj.colors, 'color1');
+    gui.addColor(obj.colors, 'color2');
+    gui.addColor(obj.colors, 'color3');
+
+
   </script>
 </body>
 </html>

index.js

@@ -10,3 +10,7 @@
  *
  * http://www.apache.org/licenses/LICENSE-2.0
  */
+
+require('babel/polyfill');
+
+export default require('./src/dat/index');

package.json

@@ -0,0 +1,45 @@
+{
+  "name": "dat.gui",
+  "version": "0.6.1",
+  "description": "A lightweight graphical user interface for changing variables in JavaScript.",
+  "main": "index.js",
+  "directories": {
+    "test": "tests"
+  },
+  "scripts": {
+    "test": "node ./node_modules/eslint/bin/eslint.js src/",
+    "build": "webpack --config ./webpack/webpack.config.js --devtool sourcemap && webpack --config ./webpack/webpack.config.min.js",
+    "dev": "webpack --progress --colors --watch --config webpack/webpack.config.js --devtool sourcemap"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/korczis/dat.gui.git"
+  },
+  "author": "Data Arts Team, Google Creative Lab",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/korczis/dat.gui/issues"
+  },
+  "homepage": "https://github.com/korczis/dat.gui#readme",
+  "devDependencies": {
+    "babel-core": "^5.8.22",
+    "babel-eslint": "^4.0.5",
+    "babel-loader": "^5.3.2",
+    "css-loader": "^0.16.0",
+    "esdoc": "^0.2.1",
+    "esdoc-es7-plugin": "0.0.1",
+    "eslint": "^1.1.0",
+    "eslint-config-airbnb": "0.0.7",
+    "eslint-loader": "^1.0.0",
+    "eslint-plugin-react": "^3.2.2",
+    "extend": "^3.0.0",
+    "html-loader": "^0.3.0",
+    "node-sass": "^3.2.0",
+    "sass-loader": "^2.0.0",
+    "style-loader": "^0.12.3",
+    "webpack": "^1.11.0"
+  },
+  "dependencies": {
+    "babel": "^5.8.21"
+  }
+}

src/dat/color/Color.js

@@ -11,179 +11,138 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+import interpret from './interpret';
-  'dat/color/interpret',
+import math from './math';
-  'dat/color/math',
+import colorToString from './toString';
-  'dat/color/toString',
+import common from '../utils/common';
-  'dat/utils/common'
-], function(interpret, math, toString, common) {
-
-  var Color = function() {
 
+class Color {
+  constructor() {
     this.__state = interpret.apply(this, arguments);
 
     if (this.__state === false) {
-      throw 'Failed to interpret color arguments';
+      throw new Error('Failed to interpret color arguments');
     }
 
     this.__state.a = this.__state.a || 1;
+  }
 
+  toString() {
+    return colorToString(this);
+  }
 
-  };
+  toOriginal() {
-
+    return this.__state.conversion.write(this);
-  Color.COMPONENTS = ['r','g','b','h','s','v','hex','a'];
+  }
-
+}
-  common.extend(Color.prototype, {
-
-    toString: function() {
-      return toString(this);
-    },
-
-    toOriginal: function() {
-      return this.__state.conversion.write(this);
-    }
-
-  });
-
-  defineRGBComponent(Color.prototype, 'r', 2);
-  defineRGBComponent(Color.prototype, 'g', 1);
-  defineRGBComponent(Color.prototype, 'b', 0);
-
-  defineHSVComponent(Color.prototype, 'h');
-  defineHSVComponent(Color.prototype, 's');
-  defineHSVComponent(Color.prototype, 'v');
-
-  Object.defineProperty(Color.prototype, 'a', {
 
+function defineRGBComponent(target, component, componentHexIndex) {
+  Object.defineProperty(target, component, {
     get: function() {
-      return this.__state.a;
+      if (this.__state.space === 'RGB') {
+        return this.__state[component];
+      }
+
+      Color.recalculateRGB(this, component, componentHexIndex);
+
+      return this.__state[component];
     },
 
     set: function(v) {
-      this.__state.a = v;
+      if (this.__state.space !== 'RGB') {
-    }
+        Color.recalculateRGB(this, component, componentHexIndex);
-
+        this.__state.space = 'RGB';
-  });
-
-  Object.defineProperty(Color.prototype, 'hex', {
-
-    get: function() {
-
-      if (!this.__state.space !== 'HEX') {
-        this.__state.hex = math.rgb_to_hex(this.r, this.g, this.b);
       }
 
-      return this.__state.hex;
+      this.__state[component] = v;
+    }
+  });
+}
 
+function defineHSVComponent(target, component) {
+  Object.defineProperty(target, component, {
+    get: function() {
+      if (this.__state.space === 'HSV') {
+        return this.__state[component];
+      }
+
+      Color.recalculateHSV(this);
+
+      return this.__state[component];
     },
 
     set: function(v) {
+      if (this.__state.space !== 'HSV') {
+        Color.recalculateHSV(this);
+        this.__state.space = 'HSV';
+      }
 
-      this.__state.space = 'HEX';
+      this.__state[component] = v;
-      this.__state.hex = v;
-
     }
-
   });
+}
 
-  function defineRGBComponent(target, component, componentHexIndex) {
-
-    Object.defineProperty(target, component, {
-
-      get: function() {
-
-        if (this.__state.space === 'RGB') {
-          return this.__state[component];
-        }
-
-        recalculateRGB(this, component, componentHexIndex);
-
-        return this.__state[component];
-
-      },
-
-      set: function(v) {
-
-        if (this.__state.space !== 'RGB') {
-          recalculateRGB(this, component, componentHexIndex);
-          this.__state.space = 'RGB';
-        }
-
-        this.__state[component] = v;
-
-      }
-
-    });
 
+Color.recalculateRGB = function(color, component, componentHexIndex) {
+  if (color.__state.space === 'HEX') {
+    color.__state[component] = math.component_from_hex(color.__state.hex, componentHexIndex);
+  } else if (color.__state.space === 'HSV') {
+    common.extend(color.__state, math.hsv_to_rgb(color.__state.h, color.__state.s, color.__state.v));
+  } else {
+    throw new Error('Corrupted color state');
   }
+};
 
-  function defineHSVComponent(target, component) {
+Color.recalculateHSV = function(color) {
-
+  const result = math.rgb_to_hsv(color.r, color.g, color.b);
-    Object.defineProperty(target, component, {
-
-      get: function() {
-
-        if (this.__state.space === 'HSV')
-          return this.__state[component];
-
-        recalculateHSV(this);
-
-        return this.__state[component];
-
-      },
-
-      set: function(v) {
-
-        if (this.__state.space !== 'HSV') {
-          recalculateHSV(this);
-          this.__state.space = 'HSV';
-        }
-
-        this.__state[component] = v;
-
-      }
-
-    });
-
-  }
-
-  function recalculateRGB(color, component, componentHexIndex) {
-
-    if (color.__state.space === 'HEX') {
-
-      color.__state[component] = math.component_from_hex(color.__state.hex, componentHexIndex);
-
-    } else if (color.__state.space === 'HSV') {
-
-      common.extend(color.__state, math.hsv_to_rgb(color.__state.h, color.__state.s, color.__state.v));
-
-    } else {
-
-      throw 'Corrupted color state';
 
+  common.extend(color.__state,
+    {
+      s: result.s,
+      v: result.v
     }
+  );
 
+  if (!common.isNaN(result.h)) {
+    color.__state.h = result.h;
+  } else if (common.isUndefined(color.__state.h)) {
+    color.__state.h = 0;
   }
+};
 
-  function recalculateHSV(color) {
+Color.COMPONENTS = ['r', 'g', 'b', 'h', 's', 'v', 'hex', 'a'];
 
-    var result = math.rgb_to_hsv(color.r, color.g, color.b);
+defineRGBComponent(Color.prototype, 'r', 2);
+defineRGBComponent(Color.prototype, 'g', 1);
+defineRGBComponent(Color.prototype, 'b', 0);
 
-    common.extend(color.__state,
+defineHSVComponent(Color.prototype, 'h');
-        {
+defineHSVComponent(Color.prototype, 's');
-          s: result.s,
+defineHSVComponent(Color.prototype, 'v');
-          v: result.v
-        }
-    );
 
-    if (!common.isNaN(result.h)) {
+Object.defineProperty(Color.prototype, 'a', {
-      color.__state.h = result.h;
+  get: function() {
-    } else if (common.isUndefined(color.__state.h)) {
+    return this.__state.a;
-      color.__state.h = 0;
+  },
-    }
 
+  set: function(v) {
+    this.__state.a = v;
   }
-
-  return Color;
-
 });
+
+Object.defineProperty(Color.prototype, 'hex', {
+  get: function() {
+    if (!this.__state.space !== 'HEX') {
+      this.__state.hex = math.rgb_to_hex(this.r, this.g, this.b);
+    }
+
+    return this.__state.hex;
+  },
+
+  set: function(v) {
+    this.__state.space = 'HEX';
+    this.__state.hex = v;
+  }
+});
+
+export default Color;

src/dat/color/interpret.js

@@ -11,330 +11,290 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+import toString from './toString';
-  'dat/color/toString',
+import common from '../utils/common';
-  'dat/utils/common'
+
-], function(toString, common) {
+const INTERPRETATIONS = [
-
+  // Strings
-  var result, toReturn;
+  {
-
+    litmus: common.isString,
-  var interpret = function() {
+    conversions: {
-
+      THREE_CHAR_HEX: {
-    toReturn = false;
+        read: function(original) {
-
+          const test = original.match(/^#([A-F0-9])([A-F0-9])([A-F0-9])$/i);
-    var original = arguments.length > 1 ? common.toArray(arguments) : arguments[0];
+          if (test === null) {
-
-    common.each(INTERPRETATIONS, function(family) {
-
-      if (family.litmus(original)) {
-
-        common.each(family.conversions, function(conversion, conversionName) {
-
-          result = conversion.read(original);
-
-          if (toReturn === false && result !== false) {
-            toReturn = result;
-            result.conversionName = conversionName;
-            result.conversion = conversion;
-            return common.BREAK;
-
-          }
-
-        });
-
-        return common.BREAK;
-
-      }
-
-    });
-
-    return toReturn;
-
-  };
-
-  var INTERPRETATIONS = [
-
-    // Strings
-    {
-
-      litmus: common.isString,
-
-      conversions: {
-
-        THREE_CHAR_HEX: {
-
-          read: function(original) {
-
-            var test = original.match(/^#([A-F0-9])([A-F0-9])([A-F0-9])$/i);
-            if (test === null) return false;
-
-            return {
-              space: 'HEX',
-              hex: parseInt(
-                  '0x' +
-                      test[1].toString() + test[1].toString() +
-                      test[2].toString() + test[2].toString() +
-                      test[3].toString() + test[3].toString())
-            };
-
-          },
-
-          write: toString
-
-        },
-
-        SIX_CHAR_HEX: {
-
-          read: function(original) {
-
-            var test = original.match(/^#([A-F0-9]{6})$/i);
-            if (test === null) return false;
-
-            return {
-              space: 'HEX',
-              hex: parseInt('0x' + test[1].toString())
-            };
-
-          },
-
-          write: toString
-
-        },
-
-        CSS_RGB: {
-
-          read: function(original) {
-
-            var test = original.match(/^rgb\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/);
-            if (test === null) return false;
-
-            return {
-              space: 'RGB',
-              r: parseFloat(test[1]),
-              g: parseFloat(test[2]),
-              b: parseFloat(test[3])
-            };
-
-          },
-
-          write: toString
-
-        },
-
-        CSS_RGBA: {
-
-          read: function(original) {
-
-            var test = original.match(/^rgba\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\,\s*(.+)\s*\)/);
-            if (test === null) return false;
-
-            return {
-              space: 'RGB',
-              r: parseFloat(test[1]),
-              g: parseFloat(test[2]),
-              b: parseFloat(test[3]),
-              a: parseFloat(test[4])
-            };
-
-          },
-
-          write: toString
-
-        }
-
-      }
-
-    },
-
-    // Numbers
-    {
-
-      litmus: common.isNumber,
-
-      conversions: {
-
-        HEX: {
-          read: function(original) {
-            return {
-              space: 'HEX',
-              hex: original,
-              conversionName: 'HEX'
-            }
-          },
-
-          write: function(color) {
-            return color.hex;
-          }
-        }
-
-      }
-
-    },
-
-    // Arrays
-    {
-
-      litmus: common.isArray,
-
-      conversions: {
-
-        RGB_ARRAY: {
-          read: function(original) {
-            if (original.length != 3) return false;
-            return {
-              space: 'RGB',
-              r: original[0],
-              g: original[1],
-              b: original[2]
-            };
-          },
-
-          write: function(color) {
-            return [color.r, color.g, color.b];
-          }
-
-        },
-
-        RGBA_ARRAY: {
-          read: function(original) {
-            if (original.length != 4) return false;
-            return {
-              space: 'RGB',
-              r: original[0],
-              g: original[1],
-              b: original[2],
-              a: original[3]
-            };
-          },
-
-          write: function(color) {
-            return [color.r, color.g, color.b, color.a];
-          }
-
-        }
-
-      }
-
-    },
-
-    // Objects
-    {
-
-      litmus: common.isObject,
-
-      conversions: {
-
-        RGBA_OBJ: {
-          read: function(original) {
-            if (common.isNumber(original.r) &&
-                common.isNumber(original.g) &&
-                common.isNumber(original.b) &&
-                common.isNumber(original.a)) {
-              return {
-                space: 'RGB',
-                r: original.r,
-                g: original.g,
-                b: original.b,
-                a: original.a
-              }
-            }
             return false;
-          },
-
-          write: function(color) {
-            return {
-              r: color.r,
-              g: color.g,
-              b: color.b,
-              a: color.a
-            }
           }
+
+          return {
+            space: 'HEX',
+            hex: parseInt(
+              '0x' +
+              test[1].toString() + test[1].toString() +
+              test[2].toString() + test[2].toString() +
+              test[3].toString() + test[3].toString(), 0)
+          };
         },
 
-        RGB_OBJ: {
+        write: toString
-          read: function(original) {
+      },
-            if (common.isNumber(original.r) &&
-                common.isNumber(original.g) &&
-                common.isNumber(original.b)) {
-              return {
-                space: 'RGB',
-                r: original.r,
-                g: original.g,
-                b: original.b
-              }
-            }
-            return false;
-          },
 
-          write: function(color) {
+      SIX_CHAR_HEX: {
-            return {
+        read: function(original) {
-              r: color.r,
+          const test = original.match(/^#([A-F0-9]{6})$/i);
-              g: color.g,
+          if (test === null) {
-              b: color.b
+            return false;
-            }
           }
+
+          return {
+            space: 'HEX',
+            hex: parseInt('0x' + test[1].toString(), 0)
+          };
         },
 
-        HSVA_OBJ: {
+        write: toString
-          read: function(original) {
+      },
-            if (common.isNumber(original.h) &&
-                common.isNumber(original.s) &&
-                common.isNumber(original.v) &&
-                common.isNumber(original.a)) {
-              return {
-                space: 'HSV',
-                h: original.h,
-                s: original.s,
-                v: original.v,
-                a: original.a
-              }
-            }
-            return false;
-          },
 
-          write: function(color) {
+      CSS_RGB: {
-            return {
+        read: function(original) {
-              h: color.h,
+          const test = original.match(/^rgb\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/);
-              s: color.s,
+          if (test === null) {
-              v: color.v,
+            return false;
-              a: color.a
-            }
           }
+
+          return {
+            space: 'RGB',
+            r: parseFloat(test[1]),
+            g: parseFloat(test[2]),
+            b: parseFloat(test[3])
+          };
         },
 
-        HSV_OBJ: {
+        write: toString
-          read: function(original) {
+      },
-            if (common.isNumber(original.h) &&
-                common.isNumber(original.s) &&
-                common.isNumber(original.v)) {
-              return {
-                space: 'HSV',
-                h: original.h,
-                s: original.s,
-                v: original.v
-              }
-            }
-            return false;
-          },
 
-          write: function(color) {
+      CSS_RGBA: {
-            return {
+        read: function(original) {
-              h: color.h,
+          const test = original.match(/^rgba\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\,\s*(.+)\s*\)/);
-              s: color.s,
+          if (test === null) {
-              v: color.v
+            return false;
-            }
           }
 
+          return {
+            space: 'RGB',
+            r: parseFloat(test[1]),
+            g: parseFloat(test[2]),
+            b: parseFloat(test[3]),
+            a: parseFloat(test[4])
+          };
+        },
+
+        write: toString
+      }
+    }
+  },
+
+  // Numbers
+  {
+    litmus: common.isNumber,
+
+    conversions: {
+
+      HEX: {
+        read: function(original) {
+          return {
+            space: 'HEX',
+            hex: original,
+            conversionName: 'HEX'
+          };
+        },
+
+        write: function(color) {
+          return color.hex;
         }
-
       }
 
     }
 
+  },
 
-  ];
+  // Arrays
+  {
+    litmus: common.isArray,
+    conversions: {
+      RGB_ARRAY: {
+        read: function(original) {
+          if (original.length !== 3) {
+            return false;
+          }
 
-  return interpret;
+          return {
+            space: 'RGB',
+            r: original[0],
+            g: original[1],
+            b: original[2]
+          };
+        },
 
+        write: function(color) {
+          return [color.r, color.g, color.b];
+        }
+      },
 
-});
+      RGBA_ARRAY: {
+        read: function(original) {
+          if (original.length !== 4) return false;
+          return {
+            space: 'RGB',
+            r: original[0],
+            g: original[1],
+            b: original[2],
+            a: original[3]
+          };
+        },
+
+        write: function(color) {
+          return [color.r, color.g, color.b, color.a];
+        }
+      }
+    }
+  },
+
+  // Objects
+  {
+    litmus: common.isObject,
+    conversions: {
+
+      RGBA_OBJ: {
+        read: function(original) {
+          if (common.isNumber(original.r) &&
+            common.isNumber(original.g) &&
+            common.isNumber(original.b) &&
+            common.isNumber(original.a)) {
+            return {
+              space: 'RGB',
+              r: original.r,
+              g: original.g,
+              b: original.b,
+              a: original.a
+            };
+          }
+          return false;
+        },
+
+        write: function(color) {
+          return {
+            r: color.r,
+            g: color.g,
+            b: color.b,
+            a: color.a
+          };
+        }
+      },
+
+      RGB_OBJ: {
+        read: function(original) {
+          if (common.isNumber(original.r) &&
+            common.isNumber(original.g) &&
+            common.isNumber(original.b)) {
+            return {
+              space: 'RGB',
+              r: original.r,
+              g: original.g,
+              b: original.b
+            };
+          }
+          return false;
+        },
+
+        write: function(color) {
+          return {
+            r: color.r,
+            g: color.g,
+            b: color.b
+          };
+        }
+      },
+
+      HSVA_OBJ: {
+        read: function(original) {
+          if (common.isNumber(original.h) &&
+            common.isNumber(original.s) &&
+            common.isNumber(original.v) &&
+            common.isNumber(original.a)) {
+            return {
+              space: 'HSV',
+              h: original.h,
+              s: original.s,
+              v: original.v,
+              a: original.a
+            };
+          }
+          return false;
+        },
+
+        write: function(color) {
+          return {
+            h: color.h,
+            s: color.s,
+            v: color.v,
+            a: color.a
+          };
+        }
+      },
+
+      HSV_OBJ: {
+        read: function(original) {
+          if (common.isNumber(original.h) &&
+            common.isNumber(original.s) &&
+            common.isNumber(original.v)) {
+            return {
+              space: 'HSV',
+              h: original.h,
+              s: original.s,
+              v: original.v
+            };
+          }
+          return false;
+        },
+
+        write: function(color) {
+          return {
+            h: color.h,
+            s: color.s,
+            v: color.v
+          };
+        }
+      }
+    }
+  }
+];
+
+let result;
+let toReturn;
+
+const interpret = function() {
+  toReturn = false;
+
+  const original = arguments.length > 1 ? common.toArray(arguments) : arguments[0];
+  common.each(INTERPRETATIONS, function(family) {
+    if (family.litmus(original)) {
+      common.each(family.conversions, function(conversion, conversionName) {
+        result = conversion.read(original);
+
+        if (toReturn === false && result !== false) {
+          toReturn = result;
+          result.conversionName = conversionName;
+          result.conversion = conversion;
+          return common.BREAK;
+        }
+      });
+
+      return common.BREAK;
+    }
+  });
+
+  return toReturn;
+};
+
+export default interpret;

src/dat/color/math.js

@@ -11,90 +11,83 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+let tmpComponent;
 
-], function() {
+const ColorMath = {
+  hsv_to_rgb: function(h, s, v) {
+    const hi = Math.floor(h / 60) % 6;
 
-  var tmpComponent;
+    const f = h / 60 - Math.floor(h / 60);
+    const p = v * (1.0 - s);
+    const q = v * (1.0 - (f * s));
+    const t = v * (1.0 - ((1.0 - f) * s));
 
-  return {
+    const c = [
+      [v, t, p],
+      [q, v, p],
+      [p, v, t],
+      [p, q, v],
+      [t, p, v],
+      [v, p, q]
+    ][hi];
 
-    hsv_to_rgb: function(h, s, v) {
+    return {
+      r: c[0] * 255,
+      g: c[1] * 255,
+      b: c[2] * 255
+    };
+  },
 
-      var hi = Math.floor(h / 60) % 6;
+  rgb_to_hsv: function(r, g, b) {
-
+    const min = Math.min(r, g, b);
-      var f = h / 60 - Math.floor(h / 60);
+    const max = Math.max(r, g, b);
-      var p = v * (1.0 - s);
+    const delta = max - min;
-      var q = v * (1.0 - (f * s));
+    let h;
-      var t = v * (1.0 - ((1.0 - f) * s));
+    let s;
-      var c = [
-        [v, t, p],
-        [q, v, p],
-        [p, v, t],
-        [p, q, v],
-        [t, p, v],
-        [v, p, q]
-      ][hi];
 
+    if (max !== 0) {
+      s = delta / max;
+    } else {
       return {
-        r: c[0] * 255,
+        h: NaN,
-        g: c[1] * 255,
+        s: 0,
-        b: c[2] * 255
+        v: 0
       };
-
-    },
-
-    rgb_to_hsv: function(r, g, b) {
-
-      var min = Math.min(r, g, b),
-          max = Math.max(r, g, b),
-          delta = max - min,
-          h, s;
-
-      if (max != 0) {
-        s = delta / max;
-      } else {
-        return {
-          h: NaN,
-          s: 0,
-          v: 0
-        };
-      }
-
-      if (r == max) {
-        h = (g - b) / delta;
-      } else if (g == max) {
-        h = 2 + (b - r) / delta;
-      } else {
-        h = 4 + (r - g) / delta;
-      }
-      h /= 6;
-      if (h < 0) {
-        h += 1;
-      }
-
-      return {
-        h: h * 360,
-        s: s,
-        v: max / 255
-      };
-    },
-
-    rgb_to_hex: function(r, g, b) {
-      var hex = this.hex_with_component(0, 2, r);
-      hex = this.hex_with_component(hex, 1, g);
-      hex = this.hex_with_component(hex, 0, b);
-      return hex;
-    },
-
-    component_from_hex: function(hex, componentIndex) {
-      return (hex >> (componentIndex * 8)) & 0xFF;
-    },
-
-    hex_with_component: function(hex, componentIndex, value) {
-      return value << (tmpComponent = componentIndex * 8) | (hex & ~ (0xFF << tmpComponent));
     }
 
-  }
+    if (r === max) {
+      h = (g - b) / delta;
+    } else if (g === max) {
+      h = 2 + (b - r) / delta;
+    } else {
+      h = 4 + (r - g) / delta;
+    }
+    h /= 6;
+    if (h < 0) {
+      h += 1;
+    }
 
-});
+    return {
+      h: h * 360,
+      s: s,
+      v: max / 255
+    };
+  },
+
+  rgb_to_hex: function(r, g, b) {
+    let hex = this.hex_with_component(0, 2, r);
+    hex = this.hex_with_component(hex, 1, g);
+    hex = this.hex_with_component(hex, 0, b);
+    return hex;
+  },
+
+  component_from_hex: function(hex, componentIndex) {
+    return (hex >> (componentIndex * 8)) & 0xFF;
+  },
+
+  hex_with_component: function(hex, componentIndex, value) {
+    return value << (tmpComponent = componentIndex * 8) | (hex & ~(0xFF << tmpComponent));
+  }
+};
+
+export default ColorMath;

src/dat/color/toString.js

@@ -11,27 +11,16 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+import common from '../utils/common';
-  'dat/utils/common'
-], function(common) {
-
-  return 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 + ')';
 
+export default function(color) {
+  if (color.a === 1 || common.isUndefined(color.a)) {
+    let s = color.hex.toString(16);
+    while (s.length < 6) {
+      s = '0' + s;
     }
-
+    return '#' + s;
   }
 
-});
+  return 'rgba(' + Math.round(color.r) + ',' + Math.round(color.g) + ',' + Math.round(color.b) + ',' + color.a + ')';
+}

src/dat/controllers/BooleanController.js

@@ -11,31 +11,31 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+import Controller from './Controller';
-  'dat/controllers/Controller',
+import dom from '../dom/dom';
-  'dat/dom/dom',
-  'dat/utils/common'
-], function(Controller, dom, common) {
 
-  /**
+/**
-   * @class Provides a checkbox input to alter the boolean property of an object.
+ * @class Provides a checkbox input to alter the boolean property of an object.
-   * @extends dat.controllers.Controller
+ * @extends dat.controllers.Controller
-   *
+ *
-   * @param {Object} object The object to be manipulated
+ * @param {Object} object The object to be manipulated
-   * @param {string} property The name of the property to be manipulated
+ * @param {string} property The name of the property to be manipulated
-   *
+ *
-   * @member dat.controllers
+ * @member dat.controllers
-   */
+ */
-  var BooleanController = function(object, property) {
+class BooleanController extends Controller {
+  constructor(object, property) {
+    super(object, property);
 
-    BooleanController.superclass.call(this, object, property);
+    const _this = this;
-
-    var _this = this;
     this.__prev = this.getValue();
 
     this.__checkbox = document.createElement('input');
     this.__checkbox.setAttribute('type', 'checkbox');
 
+    function onChange() {
+      _this.setValue(!_this.__prev);
+    }
 
     dom.bind(this.__checkbox, 'change', onChange, false);
 
@@ -43,49 +43,27 @@ define([
 
     // Match original value
     this.updateDisplay();
+  }
 
-    function onChange() {
+  setValue(v) {
-      _this.setValue(!_this.__prev);
+    const toReturn = super.setValue(v);
+    if (this.__onFinishChange) {
+      this.__onFinishChange.call(this, this.getValue());
+    }
+    this.__prev = this.getValue();
+    return toReturn;
+  }
+
+  updateDisplay() {
+    if (this.getValue() === true) {
+      this.__checkbox.setAttribute('checked', 'checked');
+      this.__checkbox.checked = true;
+    } else {
+      this.__checkbox.checked = false;
     }
 
-  };
+    return super.updateDisplay();
+  }
+}
 
-  BooleanController.superclass = Controller;
+export default BooleanController;
-
-  common.extend(
-
-      BooleanController.prototype,
-      Controller.prototype,
-
-      {
-
-        setValue: function(v) {
-          var toReturn = BooleanController.superclass.prototype.setValue.call(this, v);
-          if (this.__onFinishChange) {
-            this.__onFinishChange.call(this, this.getValue());
-          }
-          this.__prev = this.getValue();
-          return toReturn;
-        },
-
-        updateDisplay: function() {
-          
-          if (this.getValue() === true) {
-            this.__checkbox.setAttribute('checked', 'checked');
-            this.__checkbox.checked = true;    
-          } else {
-              this.__checkbox.checked = false;
-          }
-
-          return BooleanController.superclass.prototype.updateDisplay.call(this);
-
-        }
-
-
-      }
-
-  );
-
-  return BooleanController;
-
-});

src/dat/controllers/ColorController.js

@@ -11,22 +11,20 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+import Controller from './Controller';
-  'dat/controllers/Controller',
+import dom from '../dom/dom';
-  'dat/dom/dom',
+import Color from '../color/Color';
-  'dat/color/Color',
+import interpret from '../color/interpret';
-  'dat/color/interpret',
+import common from '../utils/common';
-  'dat/utils/common'
-], function(Controller, dom, Color, interpret, common) {
 
-  var ColorController = function(object, property) {
+class ColorController extends Controller {
-
+  constructor(object, property) {
-    ColorController.superclass.call(this, object, property);
+    super(object, property);
 
     this.__color = new Color(this.getValue());
     this.__temp = new Color(0);
 
-    var _this = this;
+    const _this = this;
 
     this.domElement = document.createElement('div');
 
@@ -60,17 +58,15 @@ define([
 
     dom.bind(this.__input, 'blur', onBlur);
 
-    dom.bind(this.__selector, 'mousedown', function(e) {
+    dom.bind(this.__selector, 'mousedown', function(/* e */) {
-
       dom
         .addClass(this, 'drag')
-        .bind(window, 'mouseup', function(e) {
+        .bind(window, 'mouseup', function(/* e */) {
           dom.removeClass(_this.__selector, 'drag');
         });
-
     });
 
-    var value_field = document.createElement('div');
+    const valueField = document.createElement('div');
 
     common.extend(this.__selector.style, {
       width: '122px',
@@ -84,7 +80,7 @@ define([
       position: 'absolute',
       width: '12px',
       height: '12px',
-      border: this.__field_knob_border + (this.__color.v < .5 ? '#fff' : '#000'),
+      border: this.__field_knob_border + (this.__color.v < 0.5 ? '#fff' : '#000'),
       boxShadow: '0px 1px 3px rgba(0,0,0,0.5)',
       borderRadius: '12px',
       zIndex: 1
@@ -107,13 +103,13 @@ define([
       cursor: 'pointer'
     });
 
-    common.extend(value_field.style, {
+    common.extend(valueField.style, {
       width: '100%',
       height: '100%',
       background: 'none'
     });
 
-    linearGradient(value_field, 'top', 'rgba(0,0,0,0)', '#000');
+    linearGradient(valueField, 'top', 'rgba(0,0,0,0)', '#000');
 
     common.extend(this.__hue_field.style, {
       width: '15px',
@@ -160,7 +156,7 @@ define([
     }
 
     function onBlur() {
-      var i = interpret(this.value);
+      const i = interpret(this.value);
       if (i !== false) {
         _this.__color.__state = i;
         _this.setValue(_this.__color.toOriginal());
@@ -174,7 +170,7 @@ define([
       dom.unbind(window, 'mouseup', unbindH);
     }
 
-    this.__saturation_field.appendChild(value_field);
+    this.__saturation_field.appendChild(valueField);
     this.__selector.appendChild(this.__field_knob);
     this.__selector.appendChild(this.__saturation_field);
     this.__selector.appendChild(this.__hue_field);
@@ -186,19 +182,24 @@ define([
     this.updateDisplay();
 
     function setSV(e) {
-
       e.preventDefault();
 
-      var w = dom.getWidth(_this.__saturation_field);
+      const w = dom.getWidth(_this.__saturation_field);
-      var o = dom.getOffset(_this.__saturation_field);
+      const o = dom.getOffset(_this.__saturation_field);
-      var s = (e.clientX - o.left + document.body.scrollLeft) / w;
+      let s = (e.clientX - o.left + document.body.scrollLeft) / w;
-      var v = 1 - (e.clientY - o.top + document.body.scrollTop) / w;
+      let v = 1 - (e.clientY - o.top + document.body.scrollTop) / w;
 
-      if (v > 1) v = 1;
+      if (v > 1) {
-      else if (v < 0) v = 0;
+        v = 1;
+      } else if (v < 0) {
+        v = 0;
+      }
 
-      if (s > 1) s = 1;
+      if (s > 1) {
-      else if (s < 0) s = 0;
+        s = 1;
+      } else if (s < 0) {
+        s = 0;
+      }
 
       _this.__color.v = v;
       _this.__color.s = s;
@@ -207,118 +208,97 @@ define([
 
 
       return false;
-
     }
 
     function setH(e) {
-
       e.preventDefault();
 
-      var s = dom.getHeight(_this.__hue_field);
+      const s = dom.getHeight(_this.__hue_field);
-      var o = dom.getOffset(_this.__hue_field);
+      const o = dom.getOffset(_this.__hue_field);
-      var h = 1 - (e.clientY - o.top + document.body.scrollTop) / s;
+      let h = 1 - (e.clientY - o.top + document.body.scrollTop) / s;
 
-      if (h > 1) h = 1;
+      if (h > 1) {
-      else if (h < 0) h = 0;
+        h = 1;
+      } else if (h < 0) {
+        h = 0;
+      }
 
       _this.__color.h = h * 360;
 
       _this.setValue(_this.__color.toOriginal());
 
       return false;
+    }
+  }
 
+  updateDisplay() {
+    const i = interpret(this.getValue());
+
+    if (i !== false) {
+      let mismatch = false;
+
+      // Check for mismatch on the interpreted value.
+
+      common.each(Color.COMPONENTS, function(component) {
+        if (!common.isUndefined(i[component]) && !common.isUndefined(this.__color.__state[component]) &&
+          i[component] !== this.__color.__state[component]) {
+          mismatch = true;
+          return {}; // break
+        }
+      }, this);
+
+      // If nothing diverges, we keep our previous values
+      // for statefulness, otherwise we recalculate fresh
+      if (mismatch) {
+        common.extend(this.__color.__state, i);
+      }
     }
 
-  };
+    common.extend(this.__temp.__state, this.__color.__state);
 
-  ColorController.superclass = Controller;
+    this.__temp.a = 1;
 
-  common.extend(
+    const flip = (this.__color.v < 0.5 || this.__color.s > 0.5) ? 255 : 0;
+    const _flip = 255 - flip;
 
-      ColorController.prototype,
+    common.extend(this.__field_knob.style, {
-      Controller.prototype,
+      marginLeft: 100 * this.__color.s - 7 + 'px',
+      marginTop: 100 * (1 - this.__color.v) - 7 + 'px',
+      backgroundColor: this.__temp.toString(),
+      border: this.__field_knob_border + 'rgb(' + flip + ',' + flip + ',' + flip + ')'
+    });
 
-      {
+    this.__hue_knob.style.marginTop = (1 - this.__color.h / 360) * 100 + 'px';
 
-        updateDisplay: function() {
+    this.__temp.s = 1;
+    this.__temp.v = 1;
 
-          var i = interpret(this.getValue());
+    linearGradient(this.__saturation_field, 'left', '#fff', this.__temp.toString());
 
-          if (i !== false) {
+    common.extend(this.__input.style, {
-
+      backgroundColor: this.__input.value = this.__color.toString(),
-            var mismatch = false;
+      color: 'rgb(' + flip + ',' + flip + ',' + flip + ')',
-
+      textShadow: this.__input_textShadow + 'rgba(' + _flip + ',' + _flip + ',' + _flip + ',.7)'
-            // Check for mismatch on the interpreted value.
-
-            common.each(Color.COMPONENTS, function(component) {
-              if (!common.isUndefined(i[component]) &&
-                  !common.isUndefined(this.__color.__state[component]) &&
-                  i[component] !== this.__color.__state[component]) {
-                mismatch = true;
-                return {}; // break
-              }
-            }, this);
-
-            // If nothing diverges, we keep our previous values
-            // for statefulness, otherwise we recalculate fresh
-            if (mismatch) {
-              common.extend(this.__color.__state, i);
-            }
-
-          }
-
-          common.extend(this.__temp.__state, this.__color.__state);
-
-          this.__temp.a = 1;
-
-          var flip = (this.__color.v < .5 || this.__color.s > .5) ? 255 : 0;
-          var _flip = 255 - flip;
-
-          common.extend(this.__field_knob.style, {
-            marginLeft: 100 * this.__color.s - 7 + 'px',
-            marginTop: 100 * (1 - this.__color.v) - 7 + 'px',
-            backgroundColor: this.__temp.toString(),
-            border: this.__field_knob_border + 'rgb(' + flip + ',' + flip + ',' + flip +')'
-          });
-
-          this.__hue_knob.style.marginTop = (1 - this.__color.h / 360) * 100 + 'px'
-
-          this.__temp.s = 1;
-          this.__temp.v = 1;
-
-          linearGradient(this.__saturation_field, 'left', '#fff', this.__temp.toString());
-
-          common.extend(this.__input.style, {
-            backgroundColor: this.__input.value = this.__color.toString(),
-            color: 'rgb(' + flip + ',' + flip + ',' + flip +')',
-            textShadow: this.__input_textShadow + 'rgba(' + _flip + ',' + _flip + ',' + _flip +',.7)'
-          });
-
-        }
-
-      }
-
-  );
-  
-  var vendors = ['-moz-','-o-','-webkit-','-ms-',''];
-  
-  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) {
+const vendors = ['-moz-', '-o-', '-webkit-', '-ms-', ''];
-    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%);'
-  }
 
+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%); ';
+  });
+}
 
-  return ColorController;
+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%);';
+}
 
-});
+export default ColorController;

src/dat/controllers/Controller.js

@@ -11,20 +11,16 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+/**
-   'dat/utils/common'
+ * @class An "abstract" class that represents a given property of an object.
-], function(common) {
+ *
-
+ * @param {Object} object The object to be manipulated
-  /**
+ * @param {string} property The name of the property to be manipulated
-   * @class An "abstract" class that represents a given property of an object.
+ *
-   *
+ * @member dat.controllers
-   * @param {Object} object The object to be manipulated
+ */
-   * @param {string} property The name of the property to be manipulated
+class Controller {
-   *
+  constructor(object, property) {
-   * @member dat.controllers
-   */
-  var Controller = function(object, property) {
-
     this.initialValue = object[property];
 
     /**
@@ -58,87 +54,74 @@ define([
      * @ignore
      */
     this.__onFinishChange = undefined;
+  }
 
-  };
+  /**
+   * Specify that a function fire every time someone changes the value with
+   * this Controller.
+   *
+   * @param {Function} fnc This function will be called whenever the value
+   * is modified via this Controller.
+   * @returns {Controller} this
+   */
+  onChange(fnc) {
+    this.__onChange = fnc;
+    return this;
+  }
 
-  common.extend(
+  /**
+   * Specify that a function fire every time someone "finishes" changing
+   * the value wih this Controller. Useful for values that change
+   * incrementally like numbers or strings.
+   *
+   * @param {Function} fnc This function will be called whenever
+   * someone "finishes" changing the value via this Controller.
+   * @returns {Controller} this
+   */
+  onFinishChange(fnc) {
+    this.__onFinishChange = fnc;
+    return this;
+  }
 
-      Controller.prototype,
+  /**
+   * Change the value of <code>object[property]</code>
+   *
+   * @param {Object} newValue The new value of <code>object[property]</code>
+   */
+  setValue(newValue) {
+    this.object[this.property] = newValue;
+    if (this.__onChange) {
+      this.__onChange.call(this, newValue);
+    }
 
-      /** @lends dat.controllers.Controller.prototype */
+    this.updateDisplay();
-      {
+    return this;
+  }
 
-        /**
+  /**
-         * Specify that a function fire every time someone changes the value with
+   * Gets the value of <code>object[property]</code>
-         * this Controller.
+   *
-         *
+   * @returns {Object} The current value of <code>object[property]</code>
-         * @param {Function} fnc This function will be called whenever the value
+   */
-         * is modified via this Controller.
+  getValue() {
-         * @returns {dat.controllers.Controller} this
+    return this.object[this.property];
-         */
+  }
-        onChange: function(fnc) {
-          this.__onChange = fnc;
-          return this;
-        },
 
-        /**
+  /**
-         * Specify that a function fire every time someone "finishes" changing
+   * Refreshes the visual display of a Controller in order to keep sync
-         * the value wih this Controller. Useful for values that change
+   * with the object's current value.
-         * incrementally like numbers or strings.
+   * @returns {Controller} this
-         *
+   */
-         * @param {Function} fnc This function will be called whenever
+  updateDisplay() {
-         * someone "finishes" changing the value via this Controller.
+    return this;
-         * @returns {dat.controllers.Controller} this
+  }
-         */
-        onFinishChange: function(fnc) {
-          this.__onFinishChange = fnc;
-          return this;
-        },
 
-        /**
+  /**
-         * Change the value of <code>object[property]</code>
+   * @returns {Boolean} true if the value has deviated from initialValue
-         *
+   */
-         * @param {Object} newValue The new value of <code>object[property]</code>
+  isModified() {
-         */
+    return this.initialValue !== this.getValue();
-        setValue: function(newValue) {
+  }
-          this.object[this.property] = newValue;
+}
-          if (this.__onChange) {
-            this.__onChange.call(this, newValue);
-          }
-          this.updateDisplay();
-          return this;
-        },
 
-        /**
+export default Controller;
-         * Gets the value of <code>object[property]</code>
-         *
-         * @returns {Object} The current value of <code>object[property]</code>
-         */
-        getValue: function() {
-          return this.object[this.property];
-        },
-
-        /**
-         * Refreshes the visual display of a Controller in order to keep sync
-         * with the object's current value.
-         * @returns {dat.controllers.Controller} this
-         */
-        updateDisplay: function() {
-          return this;
-        },
-
-        /**
-         * @returns {Boolean} true if the value has deviated from initialValue
-         */
-        isModified: function() {
-          return this.initialValue !== this.getValue()
-        }
-
-      }
-
-  );
-
-  return Controller;
-
-
-});

src/dat/controllers/ControllerFactory.js

@@ -0,0 +1,56 @@
+/**
+ * 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 OptionController from './OptionController';
+import NumberControllerBox from './NumberControllerBox';
+import NumberControllerSlider from './NumberControllerSlider';
+import StringController from './StringController';
+import FunctionController from './FunctionController';
+import BooleanController from './BooleanController';
+import common from '../utils/common';
+
+const ControllerFactory = function(object, property) {
+  const initialValue = object[property];
+
+  // Providing options?
+  if (common.isArray(arguments[2]) || common.isObject(arguments[2])) {
+    return new OptionController(object, property, arguments[2]);
+  }
+
+  // Providing a map?
+  if (common.isNumber(initialValue)) {
+    if (common.isNumber(arguments[2]) && common.isNumber(arguments[3])) {
+      // Has min and max.
+      if (common.isNumber(arguments[4])) { // has step
+        return new NumberControllerSlider(object, property, arguments[2], arguments[3], arguments[4]);
+      }
+
+      return new NumberControllerSlider(object, property, arguments[2], arguments[3]);
+    }
+    return new NumberControllerBox(object, property, {min: arguments[2], max: arguments[3]});
+  }
+
+  if (common.isString(initialValue)) {
+    return new StringController(object, property);
+  }
+
+  if (common.isFunction(initialValue)) {
+    return new FunctionController(object, property, '');
+  }
+
+  if (common.isBoolean(initialValue)) {
+    return new BooleanController(object, property);
+  }
+};
+
+export default ControllerFactory;

src/dat/controllers/FunctionController.js

@@ -11,30 +11,28 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+import Controller from './Controller';
-    'dat/controllers/Controller',
+import dom from '../dom/dom';
-    'dat/dom/dom',
-    'dat/utils/common'
-], function(Controller, dom, common) {
 
-  /**
+/**
-   * @class Provides a GUI interface to fire a specified method, a property of an object.
+ * @class Provides a GUI interface to fire a specified method, a property of an object.
-   *
+ *
-   * @extends dat.controllers.Controller
+ * @extends dat.controllers.Controller
-   *
+ *
-   * @param {Object} object The object to be manipulated
+ * @param {Object} object The object to be manipulated
-   * @param {string} property The name of the property to be manipulated
+ * @param {string} property The name of the property to be manipulated
-   *
+ *
-   * @member dat.controllers
+ * @member dat.controllers
-   */
+ */
-  var FunctionController = function(object, property, text) {
+class FunctionController extends Controller {
+  constructor(object, property, text) {
+    super(object, property);
 
-    FunctionController.superclass.call(this, object, property);
+    const _this = this;
-
-    var _this = this;
 
     this.__button = document.createElement('div');
     this.__button.innerHTML = text === undefined ? 'Fire' : text;
+
     dom.bind(this.__button, 'click', function(e) {
       e.preventDefault();
       _this.fire();
@@ -44,31 +42,17 @@ define([
     dom.addClass(this.__button, 'button');
 
     this.domElement.appendChild(this.__button);
+  }
 
+  fire() {
+    if (this.__onChange) {
+      this.__onChange.call(this);
+    }
+    this.getValue().call(this.object);
+    if (this.__onFinishChange) {
+      this.__onFinishChange.call(this, this.getValue());
+    }
+  }
+}
 
-  };
+export default FunctionController;
-
-  FunctionController.superclass = Controller;
-
-  common.extend(
-
-      FunctionController.prototype,
-      Controller.prototype,
-      {
-        
-        fire: function() {
-          if (this.__onChange) {
-            this.__onChange.call(this);
-          }
-          this.getValue().call(this.object);
-          if (this.__onFinishChange) {
-            this.__onFinishChange.call(this, this.getValue());
-          }
-        }
-      }
-
-  );
-
-  return FunctionController;
-
-});

src/dat/controllers/NumberController.js

@@ -11,135 +11,112 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+import Controller from './Controller';
-    'dat/controllers/Controller',
+import common from '../utils/common';
-    'dat/utils/common'
-], function(Controller, common) {
 
-  /**
+function numDecimals(x) {
-   * @class Represents a given property of an object that is a number.
+  const _x = x.toString();
-   *
+  if (_x.indexOf('.') > -1) {
-   * @extends dat.controllers.Controller
+    return _x.length - _x.indexOf('.') - 1;
-   *
+  }
-   * @param {Object} object The object to be manipulated
-   * @param {string} property The name of the property to be manipulated
-   * @param {Object} [params] Optional parameters
-   * @param {Number} [params.min] Minimum allowed value
-   * @param {Number} [params.max] Maximum allowed value
-   * @param {Number} [params.step] Increment by which to change value
-   *
-   * @member dat.controllers
-   */
-  var NumberController = function(object, property, params) {
 
-    NumberController.superclass.call(this, object, property);
+  return 0;
+}
 
-    params = params || {};
+/**
+ * @class Represents a given property of an object that is a number.
+ *
+ * @extends dat.controllers.Controller
+ *
+ * @param {Object} object The object to be manipulated
+ * @param {string} property The name of the property to be manipulated
+ * @param {Object} [params] Optional parameters
+ * @param {Number} [params.min] Minimum allowed value
+ * @param {Number} [params.max] Maximum allowed value
+ * @param {Number} [params.step] Increment by which to change value
+ *
+ * @member dat.controllers
+ */
+class NumberController extends Controller {
+  constructor(object, property, params) {
+    super(object, property);
 
-    this.__min = params.min;
+    const _params = params || {};
-    this.__max = params.max;
+
-    this.__step = params.step;
+    this.__min = _params.min;
+    this.__max = _params.max;
+    this.__step = _params.step;
 
     if (common.isUndefined(this.__step)) {
-
+      if (this.initialValue === 0) {
-      if (this.initialValue == 0) {
         this.__impliedStep = 1; // What are we, psychics?
       } else {
         // Hey Doug, check this out.
-        this.__impliedStep = Math.pow(10, Math.floor(Math.log(Math.abs(this.initialValue))/Math.LN10))/10;
+        this.__impliedStep = Math.pow(10, Math.floor(Math.log(Math.abs(this.initialValue)) / Math.LN10)) / 10;
       }
-
     } else {
-
+      this.__impliedStep = this.__step;
-    	this.__impliedStep = this.__step;
-
     }
 
     this.__precision = numDecimals(this.__impliedStep);
-
-
-  };
-
-  NumberController.superclass = Controller;
-
-  common.extend(
-
-      NumberController.prototype,
-      Controller.prototype,
-
-      /** @lends dat.controllers.NumberController.prototype */
-      {
-
-        setValue: function(v) {
-
-          if (this.__min !== undefined && v < this.__min) {
-            v = this.__min;
-          } else if (this.__max !== undefined && v > this.__max) {
-            v = this.__max;
-          }
-
-          if (this.__step !== undefined && v % this.__step != 0) {
-            v = Math.round(v / this.__step) * this.__step;
-          }
-
-          return NumberController.superclass.prototype.setValue.call(this, v);
-
-        },
-
-        /**
-         * Specify a minimum value for <code>object[property]</code>.
-         *
-         * @param {Number} minValue The minimum value for
-         * <code>object[property]</code>
-         * @returns {dat.controllers.NumberController} this
-         */
-        min: function(v) {
-          this.__min = v;
-          return this;
-        },
-
-        /**
-         * Specify a maximum value for <code>object[property]</code>.
-         *
-         * @param {Number} maxValue The maximum value for
-         * <code>object[property]</code>
-         * @returns {dat.controllers.NumberController} this
-         */
-        max: function(v) {
-          this.__max = v;
-          return this;
-        },
-
-        /**
-         * Specify a step value that dat.controllers.NumberController
-         * increments by.
-         *
-         * @param {Number} stepValue The step value for
-         * dat.controllers.NumberController
-         * @default if minimum and maximum specified increment is 1% of the
-         * difference otherwise stepValue is 1
-         * @returns {dat.controllers.NumberController} this
-         */
-        step: function(v) {
-          this.__step = v;
-          this.__impliedStep = v;
-          this.__precision = numDecimals(v);
-          return this;
-        }
-
-      }
-
-  );
-
-  function numDecimals(x) {
-    x = x.toString();
-    if (x.indexOf('.') > -1) {
-      return x.length - x.indexOf('.') - 1;
-    } else {
-      return 0;
-    }
   }
 
-  return NumberController;
+  setValue(v) {
+    let _v = v;
 
-});
+    if (this.__min !== undefined && _v < this.__min) {
+      _v = this.__min;
+    } else if (this.__max !== undefined && _v > this.__max) {
+      _v = this.__max;
+    }
+
+    if (this.__step !== undefined && _v % this.__step !== 0) {
+      _v = Math.round(_v / this.__step) * this.__step;
+    }
+
+    return super.setValue(_v);
+  }
+
+  /**
+   * Specify a minimum value for <code>object[property]</code>.
+   *
+   * @param {Number} minValue The minimum value for
+   * <code>object[property]</code>
+   * @returns {dat.controllers.NumberController} this
+   */
+  min(v) {
+    this.__min = v;
+    return this;
+  }
+
+  /**
+   * Specify a maximum value for <code>object[property]</code>.
+   *
+   * @param {Number} maxValue The maximum value for
+   * <code>object[property]</code>
+   * @returns {dat.controllers.NumberController} this
+   */
+  max(v) {
+    this.__max = v;
+    return this;
+  }
+
+  /**
+   * Specify a step value that dat.controllers.NumberController
+   * increments by.
+   *
+   * @param {Number} stepValue The step value for
+   * dat.controllers.NumberController
+   * @default if minimum and maximum specified increment is 1% of the
+   * difference otherwise stepValue is 1
+   * @returns {dat.controllers.NumberController} this
+   */
+  step(v) {
+    this.__step = v;
+    this.__impliedStep = v;
+    this.__precision = numDecimals(v);
+    return this;
+  }
+}
+
+export default NumberController;

src/dat/controllers/NumberControllerBox.js

@@ -11,41 +11,76 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+import NumberController from './NumberController';
-  'dat/controllers/NumberController',
+import dom from '../dom/dom';
-  'dat/dom/dom',
+import common from '../utils/common';
-  'dat/utils/common'
-], function(NumberController, dom, common) {
 
-  /**
+function roundToDecimal(value, decimals) {
-   * @class Represents a given property of an object that is a number and
+  const tenTo = Math.pow(10, decimals);
-   * provides an input element with which to manipulate it.
+  return Math.round(value * tenTo) / tenTo;
-   *
+}
-   * @extends dat.controllers.Controller
+
-   * @extends dat.controllers.NumberController
+/**
-   *
+ * @class Represents a given property of an object that is a number and
-   * @param {Object} object The object to be manipulated
+ * provides an input element with which to manipulate it.
-   * @param {string} property The name of the property to be manipulated
+ *
-   * @param {Object} [params] Optional parameters
+ * @extends dat.controllers.Controller
-   * @param {Number} [params.min] Minimum allowed value
+ * @extends dat.controllers.NumberController
-   * @param {Number} [params.max] Maximum allowed value
+ *
-   * @param {Number} [params.step] Increment by which to change value
+ * @param {Object} object The object to be manipulated
-   *
+ * @param {string} property The name of the property to be manipulated
-   * @member dat.controllers
+ * @param {Object} [params] Optional parameters
-   */
+ * @param {Number} [params.min] Minimum allowed value
-  var NumberControllerBox = function(object, property, params) {
+ * @param {Number} [params.max] Maximum allowed value
+ * @param {Number} [params.step] Increment by which to change value
+ *
+ * @member dat.controllers
+ */
+class NumberControllerBox extends NumberController {
+  constructor(object, property, params) {
+    super(object, property, params);
 
     this.__truncationSuspended = false;
 
-    NumberControllerBox.superclass.call(this, object, property, params);
+    const _this = this;
-
-    var _this = this;
 
     /**
      * {Number} Previous mouse y position
      * @ignore
      */
-    var prev_y;
+    let prevY;
+
+    function onChange() {
+      const attempted = parseFloat(_this.__input.value);
+      if (!common.isNaN(attempted)) {
+        _this.setValue(attempted);
+      }
+    }
+
+    function onBlur() {
+      onChange();
+      if (_this.__onFinishChange) {
+        _this.__onFinishChange.call(_this, _this.getValue());
+      }
+    }
+
+    function onMouseDrag(e) {
+      const diff = prevY - e.clientY;
+      _this.setValue(_this.getValue() + diff * _this.__impliedStep);
+
+      prevY = e.clientY;
+    }
+
+    function onMouseUp() {
+      dom.unbind(window, 'mousemove', onMouseDrag);
+      dom.unbind(window, 'mouseup', onMouseUp);
+    }
+
+    function onMouseDown(e) {
+      dom.bind(window, 'mousemove', onMouseDrag);
+      dom.bind(window, 'mouseup', onMouseUp);
+      prevY = e.clientY;
+    }
 
     this.__input = document.createElement('input');
     this.__input.setAttribute('type', 'text');
@@ -56,79 +91,25 @@ define([
     dom.bind(this.__input, 'blur', onBlur);
     dom.bind(this.__input, 'mousedown', onMouseDown);
     dom.bind(this.__input, 'keydown', function(e) {
-
       // When pressing entire, you can be as precise as you want.
       if (e.keyCode === 13) {
         _this.__truncationSuspended = true;
         this.blur();
         _this.__truncationSuspended = false;
       }
-
     });
 
-    function onChange() {
-      var attempted = parseFloat(_this.__input.value);
-      if (!common.isNaN(attempted)) _this.setValue(attempted);
-    }
-
-    function onBlur() {
-      onChange();
-      if (_this.__onFinishChange) {
-        _this.__onFinishChange.call(_this, _this.getValue());
-      }
-    }
-
-    function onMouseDown(e) {
-      dom.bind(window, 'mousemove', onMouseDrag);
-      dom.bind(window, 'mouseup', onMouseUp);
-      prev_y = e.clientY;
-    }
-
-    function onMouseDrag(e) {
-
-      var diff = prev_y - e.clientY;
-      _this.setValue(_this.getValue() + diff * _this.__impliedStep);
-
-      prev_y = e.clientY;
-
-    }
-
-    function onMouseUp() {
-      dom.unbind(window, 'mousemove', onMouseDrag);
-      dom.unbind(window, 'mouseup', onMouseUp);
-    }
-
     this.updateDisplay();
 
     this.domElement.appendChild(this.__input);
-
-  };
-
-  NumberControllerBox.superclass = NumberController;
-
-  common.extend(
-
-      NumberControllerBox.prototype,
-      NumberController.prototype,
-
-      {
-
-        updateDisplay: function() {
-
-          this.__input.value = this.__truncationSuspended ? this.getValue() : roundToDecimal(this.getValue(), this.__precision);
-          return NumberControllerBox.superclass.prototype.updateDisplay.call(this);
-        }
-
-      }
-
-  );
-
-  function roundToDecimal(value, decimals) {
-    var tenTo = Math.pow(10, decimals);
-    return Math.round(value * tenTo) / tenTo;
   }
 
-  return NumberControllerBox;
+  updateDisplay() {
+    this.__input.value = this.__truncationSuspended ? this.getValue() : roundToDecimal(this.getValue(), this.__precision);
+    return super.updateDisplay();
+  }
+}
+
+export default NumberControllerBox;
 
-});
 

src/dat/controllers/NumberControllerSlider.js

@@ -11,51 +11,48 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+import NumberController from './NumberController';
-    'dat/controllers/NumberController',
+import dom from '../dom/dom';
-    'dat/dom/dom',
+import css from '../utils/css';
-    'dat/utils/css',
+import styleSheet from '!css!sass!./NumberControllerSlider.scss';
-    'dat/utils/common',
-    'text!dat/controllers/NumberControllerSlider.css'
-], 
-function(NumberController, dom, css, common, styleSheet) {
 
-  /**
+function map(v, i1, i2, o1, o2) {
-   * @class Represents a given property of an object that is a number, contains
+  return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
-   * 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
-   * <code>&lt;div&gt;</code> tags, <strong>not</strong> the html5
-   * <code>&lt;slider&gt;</code> element.
-   *
-   * @extends dat.controllers.Controller
-   * @extends dat.controllers.NumberController
-   * 
-   * @param {Object} object The object to be manipulated
-   * @param {string} property The name of the property to be manipulated
-   * @param {Number} minValue Minimum allowed value
-   * @param {Number} maxValue Maximum allowed value
-   * @param {Number} stepValue Increment by which to change value
-   *
-   * @member dat.controllers
-   */
-  var NumberControllerSlider = function(object, property, min, max, step) {
 
-    NumberControllerSlider.superclass.call(this, object, property, { min: min, max: max, step: step });
+/**
+ * @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
+ * <code>&lt;div&gt;</code> tags, <strong>not</strong> the html5
+ * <code>&lt;slider&gt;</code> element.
+ *
+ * @extends dat.controllers.Controller
+ * @extends dat.controllers.NumberController
+ *
+ * @param {Object} object The object to be manipulated
+ * @param {string} property The name of the property to be manipulated
+ * @param {Number} minValue Minimum allowed value
+ * @param {Number} maxValue Maximum allowed value
+ * @param {Number} stepValue Increment by which to change value
+ *
+ * @member dat.controllers
+ */
+class NumberControllerSlider extends NumberController {
+  constructor(object, property, min, max, step) {
+    super(object, property, {min: min, max: max, step: step});
 
-    var _this = this;
+    const _this = this;
 
     this.__background = document.createElement('div');
     this.__foreground = document.createElement('div');
 
-
-
     dom.bind(this.__background, 'mousedown', onMouseDown);
 
     dom.addClass(this.__background, 'slider');
     dom.addClass(this.__foreground, 'slider-fg');
 
     function onMouseDown(e) {
-
       dom.bind(window, 'mousemove', onMouseDrag);
       dom.bind(window, 'mouseup', onMouseUp);
 
@@ -63,18 +60,16 @@ function(NumberController, dom, css, common, styleSheet) {
     }
 
     function onMouseDrag(e) {
-
       e.preventDefault();
 
-      var offset = dom.getOffset(_this.__background);
+      const offset = dom.getOffset(_this.__background);
-      var width = dom.getWidth(_this.__background);
+      const width = dom.getWidth(_this.__background);
 
       _this.setValue(
-      	map(e.clientX, offset.left, offset.left + width, _this.__min, _this.__max)
+        map(e.clientX, offset.left, offset.left + width, _this.__min, _this.__max)
       );
 
       return false;
-
     }
 
     function onMouseUp() {
@@ -89,41 +84,20 @@ function(NumberController, dom, css, common, styleSheet) {
 
     this.__background.appendChild(this.__foreground);
     this.domElement.appendChild(this.__background);
+  }
 
-  };
+  updateDisplay() {
+    const pct = (this.getValue() - this.__min) / (this.__max - this.__min);
+    this.__foreground.style.width = pct * 100 + '%';
+    return super.updateDisplay();
+  }
+}
 
-  NumberControllerSlider.superclass = NumberController;
+/**
+ * Injects default stylesheet for slider elements.
+ */
+NumberControllerSlider.useDefaultStyles = function() {
+  css.inject(styleSheet.toString());
+};
 
-  /**
+export default NumberControllerSlider;
-   * Injects default stylesheet for slider elements.
-   */
-  NumberControllerSlider.useDefaultStyles = function() {
-    css.inject(styleSheet);
-  };
-
-  common.extend(
-
-      NumberControllerSlider.prototype,
-      NumberController.prototype,
-
-      {
-
-        updateDisplay: function() {
-          var pct = (this.getValue() - this.__min)/(this.__max - this.__min);
-          this.__foreground.style.width = pct*100+'%';
-          return NumberControllerSlider.superclass.prototype.updateDisplay.call(this);
-        }
-
-      }
-
-
-
-  );
-
-	function map(v, i1, i2, o1, o2) {
-		return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
-	}
-
-  return NumberControllerSlider;
-  
-});

src/dat/controllers/NumberControllerSlider.scss

@@ -12,20 +12,16 @@
  */
 
 .slider {
-  box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
   height: 1em;
-  border-radius: 1em;
+  border-radius: 1em 0 0 1em;
   background-color: #eee;
-  padding: 0 0.5em;
-  overflow: hidden;
 }
 
 .slider-fg {
-  padding: 1px 0 2px 0;
   background-color: #aaa;
   height: 1em;
   margin-left: -0.5em;
-  padding-right: 0.5em;
   border-radius: 1em 0 0 1em;
 }
 
@@ -33,11 +29,11 @@
   display: inline-block;
   border-radius: 1em;
   background-color: #fff;
-  border:  1px solid #aaa;
+  border: 1px solid #aaa;
   content: '';
   float: right;
-  margin-right: -1em;
+  margin-right: -0.5em;
-  margin-top: -1px;
+  margin-top: 3px;
   height: 0.9em;
   width: 0.9em;
 }

src/dat/controllers/OptionController.js

@@ -11,31 +11,30 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+import Controller from './Controller';
-    'dat/controllers/Controller',
+import dom from '../dom/dom';
-    'dat/dom/dom',
+import common from '../utils/common';
-    'dat/utils/common'
-],
-function(Controller, dom, common) {
 
-  /**
+/**
-   * @class Provides a select input to alter the property of an object, using a
+ * @class Provides a select input to alter the property of an object, using a
-   * list of accepted values.
+ * list of accepted values.
-   *
+ *
-   * @extends dat.controllers.Controller
+ * @extends dat.controllers.Controller
-   *
+ *
-   * @param {Object} object The object to be manipulated
+ * @param {Object} object The object to be manipulated
-   * @param {string} property The name of the property to be manipulated
+ * @param {string} property The name of the property to be manipulated
-   * @param {Object|string[]} options A map of labels to acceptable values, or
+ * @param {Object|string[]} options A map of labels to acceptable values, or
-   * a list of acceptable string values.
+ * a list of acceptable string values.
-   *
+ *
-   * @member dat.controllers
+ * @member dat.controllers
-   */
+ */
-  var OptionController = function(object, property, options) {
+class OptionController extends Controller {
+  constructor(object, property, opts) {
+    super(object, property);
 
-    OptionController.superclass.call(this, object, property);
+    let options = opts;
 
-    var _this = this;
+    const _this = this;
 
     /**
      * The drop down menu
@@ -44,7 +43,7 @@ function(Controller, dom, common) {
     this.__select = document.createElement('select');
 
     if (common.isArray(options)) {
-      var map = {};
+      const map = {};
       common.each(options, function(element) {
         map[element] = element;
       });
@@ -52,52 +51,36 @@ function(Controller, dom, common) {
     }
 
     common.each(options, function(value, key) {
-
+      const opt = document.createElement('option');
-      var opt = document.createElement('option');
       opt.innerHTML = key;
       opt.setAttribute('value', value);
       _this.__select.appendChild(opt);
-
     });
 
     // Acknowledge original value
     this.updateDisplay();
 
     dom.bind(this.__select, 'change', function() {
-      var desiredValue = this.options[this.selectedIndex].value;
+      const desiredValue = this.options[this.selectedIndex].value;
       _this.setValue(desiredValue);
     });
 
     this.domElement.appendChild(this.__select);
+  }
 
-  };
+  setValue(v) {
+    const toReturn = super.setValue(v);
 
-  OptionController.superclass = Controller;
+    if (this.__onFinishChange) {
+      this.__onFinishChange.call(this, this.getValue());
+    }
+    return toReturn;
+  }
 
-  common.extend(
+  updateDisplay() {
+    this.__select.value = this.getValue();
+    return super.updateDisplay();
+  }
+}
 
-      OptionController.prototype,
+export default OptionController;
-      Controller.prototype,
-
-      {
-
-        setValue: function(v) {
-          var toReturn = OptionController.superclass.prototype.setValue.call(this, v);
-          if (this.__onFinishChange) {
-            this.__onFinishChange.call(this, this.getValue());
-          }
-          return toReturn;
-        },
-
-        updateDisplay: function() {
-          this.__select.value = this.getValue();
-          return OptionController.superclass.prototype.updateDisplay.call(this);
-        }
-
-      }
-
-  );
-
-  return OptionController;
-
-});

src/dat/controllers/StringController.js

@@ -11,27 +11,34 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+import Controller from './Controller';
-    'dat/controllers/Controller',
+import dom from '../dom/dom';
-    'dat/dom/dom',
-    'dat/utils/common'
-], function(Controller, dom, common) {
 
-  /**
+/**
-   * @class Provides a text input to alter the string property of an object.
+ * @class Provides a text input to alter the string property of an object.
-   *
+ *
-   * @extends dat.controllers.Controller
+ * @extends dat.controllers.Controller
-   *
+ *
-   * @param {Object} object The object to be manipulated
+ * @param {Object} object The object to be manipulated
-   * @param {string} property The name of the property to be manipulated
+ * @param {string} property The name of the property to be manipulated
-   *
+ *
-   * @member dat.controllers
+ * @member dat.controllers
-   */
+ */
-  var StringController = function(object, property) {
+class StringController extends Controller {
+  constructor(object, property) {
+    super(object, property);
 
-    StringController.superclass.call(this, object, property);
+    const _this = this;
 
-    var _this = this;
+    function onChange() {
+      _this.setValue(_this.__input.value);
+    }
+
+    function onBlur() {
+      if (_this.__onFinishChange) {
+        _this.__onFinishChange.call(_this, _this.getValue());
+      }
+    }
 
     this.__input = document.createElement('input');
     this.__input.setAttribute('type', 'text');
@@ -45,45 +52,19 @@ define([
       }
     });
 
-
-    function onChange() {
-      _this.setValue(_this.__input.value);
-    }
-
-    function onBlur() {
-      if (_this.__onFinishChange) {
-        _this.__onFinishChange.call(_this, _this.getValue());
-      }
-    }
-
     this.updateDisplay();
 
     this.domElement.appendChild(this.__input);
+  }
 
-  };
+  updateDisplay() {
+    // Stops the caret from moving on account of:
+    // keyup -> setValue -> updateDisplay
+    if (!dom.isActive(this.__input)) {
+      this.__input.value = this.getValue();
+    }
+    return super.updateDisplay();
+  }
+}
 
-  StringController.superclass = Controller;
+export default StringController;
-
-  common.extend(
-
-      StringController.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 StringController.superclass.prototype.updateDisplay.call(this);
-        }
-
-      }
-
-  );
-
-  return StringController;
-
-});

src/dat/controllers/factory.js

@@ -1,65 +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
- */
-
-define([
-  'dat/controllers/OptionController',
-  'dat/controllers/NumberControllerBox',
-  'dat/controllers/NumberControllerSlider',
-  'dat/controllers/StringController',
-  'dat/controllers/FunctionController',
-  'dat/controllers/BooleanController',
-  'dat/utils/common'
-],
-    function(OptionController, NumberControllerBox, NumberControllerSlider, StringController, FunctionController, BooleanController, common) {
-
-      return function(object, property) {
-
-        var initialValue = object[property];
-
-        // Providing options?
-        if (common.isArray(arguments[2]) || common.isObject(arguments[2])) {
-          return new OptionController(object, property, arguments[2]);
-        }
-
-        // Providing a map?
-
-        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)) {
-          return new StringController(object, property);
-        }
-
-        if (common.isFunction(initialValue)) {
-          return new FunctionController(object, property, '');
-        }
-
-        if (common.isBoolean(initialValue)) {
-          return new BooleanController(object, property);
-        }
-
-      }
-
-    });

src/dat/dom/CenteredDiv.js

@@ -11,14 +11,11 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+import dom from '../dom/dom';
-  'dat/dom/dom',
+import common from '../utils/common';
-  'dat/utils/common'
-], function(dom, common) {
-
-
-  var CenteredDiv = function() {
 
+class CenteredDiv {
+  constructor() {
     this.backgroundElement = document.createElement('div');
     common.extend(this.backgroundElement.style, {
       backgroundColor: 'rgba(0,0,0,0.8)',
@@ -48,17 +45,14 @@ define([
     document.body.appendChild(this.backgroundElement);
     document.body.appendChild(this.domElement);
 
-    var _this = this;
+    const _this = this;
     dom.bind(this.backgroundElement, 'click', function() {
       _this.hide();
     });
+  }
 
-
+  show() {
-  };
+    const _this = this;
-
-  CenteredDiv.prototype.show = function() {
-
-    var _this = this;
 
     this.backgroundElement.style.display = 'block';
 
@@ -74,22 +68,21 @@ define([
       _this.domElement.style.opacity = 1;
       _this.domElement.style.webkitTransform = 'scale(1)';
     });
+  }
 
-  };
+  /**
-
+   * Hide centered div
-  CenteredDiv.prototype.hide = function() {
+   */
-
+  hide() {
-    var _this = this;
+    const _this = this;
-
-    var hide = function() {
 
+    const hide = function() {
       _this.domElement.style.display = 'none';
       _this.backgroundElement.style.display = 'none';
 
       dom.unbind(_this.domElement, 'webkitTransitionEnd', hide);
       dom.unbind(_this.domElement, 'transitionend', hide);
       dom.unbind(_this.domElement, 'oTransitionEnd', hide);
-
     };
 
     dom.bind(this.domElement, 'webkitTransitionEnd', hide);
@@ -100,18 +93,12 @@ define([
 //    this.domElement.style.top = '48%';
     this.domElement.style.opacity = 0;
     this.domElement.style.webkitTransform = 'scale(1.1)';
-
-  };
-
-  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) {
-    console.log(e);
   }
 
-  return CenteredDiv;
+  layout() {
+    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';
+  }
+}
 
-});
+export default CenteredDiv;

src/dat/dom/dom.js

@@ -11,277 +11,282 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+import common from '../utils/common';
-  'dat/utils/common'
-], function(common) {
 
-  var EVENT_MAP = {
+const EVENT_MAP = {
-    'HTMLEvents': ['change'],
+  'HTMLEvents': ['change'],
-    'MouseEvents': ['click','mousemove','mousedown','mouseup', 'mouseover'],
+  'MouseEvents': ['click', 'mousemove', 'mousedown', 'mouseup', 'mouseover'],
-    'KeyboardEvents': ['keydown']
+  'KeyboardEvents': ['keydown']
-  };
+};
 
-  var EVENT_MAP_INV = {};
+const 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;
+    EVENT_MAP_INV[e] = k;
-    });
   });
+});
 
-  var CSS_VALUE_PIXELS = /(\d+(\.\d+)?)px/;
+const CSS_VALUE_PIXELS = /(\d+(\.\d+)?)px/;
-
-  function cssValueToPixels(val) {
-
-    if (val === '0' || common.isUndefined(val)) return 0;
-
-    var match = val.match(CSS_VALUE_PIXELS);
-
-    if (!common.isNull(match)) {
-      return parseFloat(match[1]);
-    }
-
-    // TODO ...ems? %?
 
+function cssValueToPixels(val) {
+  if (val === '0' || common.isUndefined(val)) {
     return 0;
-
   }
 
+  const match = val.match(CSS_VALUE_PIXELS);
+
+  if (!common.isNull(match)) {
+    return parseFloat(match[1]);
+  }
+
+  // TODO ...ems? %?
+
+  return 0;
+}
+
+/**
+ * @namespace
+ * @member dat.dom
+ */
+const dom = {
+
   /**
-   * @namespace
+   *
-   * @member dat.dom
+   * @param elem
+   * @param selectable
    */
-  var dom = {
+  makeSelectable: function(elem, selectable) {
+    if (elem === undefined || elem.style === undefined) return;
 
-    /**
+    elem.onselectstart = selectable ? function() {
-     * 
+      return false;
-     * @param elem
+    } : function() {
-     * @param selectable
+    };
-     */
-    makeSelectable: function(elem, selectable) {
 
-      if (elem === undefined || elem.style === undefined) return;
+    elem.style.MozUserSelect = selectable ? 'auto' : 'none';
+    elem.style.KhtmlUserSelect = selectable ? 'auto' : 'none';
+    elem.unselectable = selectable ? 'on' : 'off';
+  },
 
-      elem.onselectstart = selectable ? function() {
+  /**
-        return false;
+   *
-      } : function() {
+   * @param elem
-      };
+   * @param horizontal
+   * @param vert
+   */
+  makeFullscreen: function(elem, hor, vert) {
+    let vertical = vert;
+    let horizontal = hor;
 
-      elem.style.MozUserSelect = selectable ? 'auto' : 'none';
+    if (common.isUndefined(horizontal)) {
-      elem.style.KhtmlUserSelect = selectable ? 'auto' : 'none';
+      horizontal = true;
-      elem.unselectable = selectable ? 'on' : 'off';
-
-    },
-
-    /**
-     *
-     * @param elem
-     * @param horizontal
-     * @param vertical
-     */
-    makeFullscreen: function(elem, horizontal, vertical) {
-
-      if (common.isUndefined(horizontal)) horizontal = true;
-      if (common.isUndefined(vertical)) vertical = true;
-
-      elem.style.position = 'absolute';
-
-      if (horizontal) {
-        elem.style.left = 0;
-        elem.style.right = 0;
-      }
-      if (vertical) {
-        elem.style.top = 0;
-        elem.style.bottom = 0;
-      }
-
-    },
-
-    /**
-     *
-     * @param elem
-     * @param eventType
-     * @param params
-     */
-    fakeEvent: function(elem, eventType, params, aux) {
-      params = params || {};
-      var className = EVENT_MAP_INV[eventType];
-      if (!className) {
-        throw new Error('Event type ' + eventType + ' not supported.');
-      }
-      var evt = document.createEvent(className);
-      switch (className) {
-        case 'MouseEvents':
-          var clientX = params.x || params.clientX || 0;
-          var clientY = params.y || params.clientY || 0;
-          evt.initMouseEvent(eventType, params.bubbles || false,
-              params.cancelable || true, window, params.clickCount || 1,
-              0, //screen X
-              0, //screen Y
-              clientX, //client X
-              clientY, //client Y
-              false, false, false, false, 0, null);
-          break;
-        case 'KeyboardEvents':
-          var init = evt.initKeyboardEvent || evt.initKeyEvent; // webkit || moz
-          common.defaults(params, {
-            cancelable: true,
-            ctrlKey: false,
-            altKey: false,
-            shiftKey: false,
-            metaKey: false,
-            keyCode: undefined,
-            charCode: undefined
-          });
-          init(eventType, params.bubbles || false,
-              params.cancelable, window,
-              params.ctrlKey, params.altKey,
-              params.shiftKey, params.metaKey,
-              params.keyCode, params.charCode);
-          break;
-        default:
-          evt.initEvent(eventType, params.bubbles || false,
-              params.cancelable || true);
-          break;
-      }
-      common.defaults(evt, aux);
-      elem.dispatchEvent(evt);
-    },
-
-    /**
-     *
-     * @param elem
-     * @param event
-     * @param func
-     * @param bool
-     */
-    bind: function(elem, event, func, bool) {
-      bool = bool || false;
-      if (elem.addEventListener)
-        elem.addEventListener(event, func, bool);
-      else if (elem.attachEvent)
-        elem.attachEvent('on' + event, func);
-      return dom;
-    },
-
-    /**
-     *
-     * @param elem
-     * @param event
-     * @param func
-     * @param bool
-     */
-    unbind: function(elem, event, func, bool) {
-      bool = bool || false;
-      if (elem.removeEventListener)
-        elem.removeEventListener(event, func, bool);
-      else if (elem.detachEvent)
-        elem.detachEvent('on' + event, func);
-      return dom;
-    },
-
-    /**
-     *
-     * @param elem
-     * @param className
-     */
-    addClass: function(elem, className) {
-      if (elem.className === undefined) {
-        elem.className = className;
-      } else if (elem.className !== className) {
-        var classes = elem.className.split(/ +/);
-        if (classes.indexOf(className) == -1) {
-          classes.push(className);
-          elem.className = classes.join(' ').replace(/^\s+/, '').replace(/\s+$/, '');
-        }
-      }
-      return dom;
-    },
-
-    /**
-     *
-     * @param elem
-     * @param className
-     */
-    removeClass: function(elem, className) {
-      if (className) {
-        if (elem.className === undefined) {
-          // elem.className = className;
-        } else if (elem.className === className) {
-          elem.removeAttribute('class');
-        } else {
-          var classes = elem.className.split(/ +/);
-          var index = classes.indexOf(className);
-          if (index != -1) {
-            classes.splice(index, 1);
-            elem.className = classes.join(' ');
-          }
-        }
-      } else {
-        elem.className = undefined;
-      }
-      return dom;
-    },
-
-    hasClass: function(elem, className) {
-      return new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)').test(elem.className) || false;
-    },
-
-    /**
-     *
-     * @param elem
-     */
-    getWidth: function(elem) {
-
-      var style = getComputedStyle(elem);
-
-      return cssValueToPixels(style['border-left-width']) +
-          cssValueToPixels(style['border-right-width']) +
-          cssValueToPixels(style['padding-left']) +
-          cssValueToPixels(style['padding-right']) +
-          cssValueToPixels(style['width']);
-    },
-
-    /**
-     *
-     * @param elem
-     */
-    getHeight: function(elem) {
-
-      var style = getComputedStyle(elem);
-
-      return cssValueToPixels(style['border-top-width']) +
-          cssValueToPixels(style['border-bottom-width']) +
-          cssValueToPixels(style['padding-top']) +
-          cssValueToPixels(style['padding-bottom']) +
-          cssValueToPixels(style['height']);
-    },
-
-    /**
-     *
-     * @param elem
-     */
-    getOffset: function(elem) {
-      var offset = {left: 0, top:0};
-      if (elem.offsetParent) {
-        do {
-          offset.left += elem.offsetLeft;
-          offset.top += elem.offsetTop;
-        } while (elem = elem.offsetParent);
-      }
-      return offset;
-    },
-
-    // http://stackoverflow.com/posts/2684561/revisions
-    /**
-     * 
-     * @param elem
-     */
-    isActive: function(elem) {
-      return elem === document.activeElement && ( elem.type || elem.href );
     }
 
-  };
+    if (common.isUndefined(vertical)) {
+      vertical = true;
+    }
 
-  return dom;
+    elem.style.position = 'absolute';
 
-});
+    if (horizontal) {
+      elem.style.left = 0;
+      elem.style.right = 0;
+    }
+    if (vertical) {
+      elem.style.top = 0;
+      elem.style.bottom = 0;
+    }
+  },
+
+  /**
+   *
+   * @param elem
+   * @param eventType
+   * @param params
+   */
+  fakeEvent: function(elem, eventType, pars, aux) {
+    const params = pars || {};
+    const className = EVENT_MAP_INV[eventType];
+    if (!className) {
+      throw new Error('Event type ' + eventType + ' not supported.');
+    }
+    const evt = document.createEvent(className);
+    switch (className) {
+    case 'MouseEvents':
+      {
+        const clientX = params.x || params.clientX || 0;
+        const clientY = params.y || params.clientY || 0;
+        evt.initMouseEvent(eventType, params.bubbles || false,
+          params.cancelable || true, window, params.clickCount || 1,
+          0, // screen X
+          0, // screen Y
+          clientX, // client X
+          clientY, // client Y
+          false, false, false, false, 0, null);
+        break;
+      }
+    case 'KeyboardEvents':
+      {
+        const init = evt.initKeyboardEvent || evt.initKeyEvent; // webkit || moz
+        common.defaults(params, {
+          cancelable: true,
+          ctrlKey: false,
+          altKey: false,
+          shiftKey: false,
+          metaKey: false,
+          keyCode: undefined,
+          charCode: undefined
+        });
+        init(eventType, params.bubbles || false,
+          params.cancelable, window,
+          params.ctrlKey, params.altKey,
+          params.shiftKey, params.metaKey,
+          params.keyCode, params.charCode);
+        break;
+      }
+    default:
+      {
+        evt.initEvent(eventType, params.bubbles || false, params.cancelable || true);
+        break;
+      }
+    }
+    common.defaults(evt, aux);
+    elem.dispatchEvent(evt);
+  },
+
+  /**
+   *
+   * @param elem
+   * @param event
+   * @param func
+   * @param bool
+   */
+  bind: function(elem, event, func, newBool) {
+    const bool = newBool || false;
+    if (elem.addEventListener) {
+      elem.addEventListener(event, func, bool);
+    } else if (elem.attachEvent) {
+      elem.attachEvent('on' + event, func);
+    }
+    return dom;
+  },
+
+  /**
+   *
+   * @param elem
+   * @param event
+   * @param func
+   * @param bool
+   */
+  unbind: function(elem, event, func, newBool) {
+    const bool = newBool || false;
+    if (elem.removeEventListener) {
+      elem.removeEventListener(event, func, bool);
+    } else if (elem.detachEvent) {
+      elem.detachEvent('on' + event, func);
+    }
+    return dom;
+  },
+
+  /**
+   *
+   * @param elem
+   * @param className
+   */
+  addClass: function(elem, className) {
+    if (elem.className === undefined) {
+      elem.className = className;
+    } else if (elem.className !== className) {
+      const classes = elem.className.split(/ +/);
+      if (classes.indexOf(className) === -1) {
+        classes.push(className);
+        elem.className = classes.join(' ').replace(/^\s+/, '').replace(/\s+$/, '');
+      }
+    }
+    return dom;
+  },
+
+  /**
+   *
+   * @param elem
+   * @param className
+   */
+  removeClass: function(elem, className) {
+    if (className) {
+      if (elem.className === className) {
+        elem.removeAttribute('class');
+      } else {
+        const classes = elem.className.split(/ +/);
+        const index = classes.indexOf(className);
+        if (index !== -1) {
+          classes.splice(index, 1);
+          elem.className = classes.join(' ');
+        }
+      }
+    } else {
+      elem.className = undefined;
+    }
+    return dom;
+  },
+
+  hasClass: function(elem, className) {
+    return new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)').test(elem.className) || false;
+  },
+
+  /**
+   *
+   * @param elem
+   */
+  getWidth: function(elem) {
+    const style = getComputedStyle(elem);
+
+    return cssValueToPixels(style['border-left-width']) +
+      cssValueToPixels(style['border-right-width']) +
+      cssValueToPixels(style['padding-left']) +
+      cssValueToPixels(style['padding-right']) +
+      cssValueToPixels(style.width);
+  },
+
+  /**
+   *
+   * @param elem
+   */
+  getHeight: function(elem) {
+    const style = getComputedStyle(elem);
+
+    return cssValueToPixels(style['border-top-width']) +
+      cssValueToPixels(style['border-bottom-width']) +
+      cssValueToPixels(style['padding-top']) +
+      cssValueToPixels(style['padding-bottom']) +
+      cssValueToPixels(style.height);
+  },
+
+  /**
+   *
+   * @param el
+   */
+  getOffset: function(el) {
+    let elem = el;
+    const offset = {left: 0, top: 0};
+    if (elem.offsetParent) {
+      do {
+        offset.left += elem.offsetLeft;
+        offset.top += elem.offsetTop;
+        elem = elem.offsetParent;
+      } while (elem);
+    }
+    return offset;
+  },
+
+  // http://stackoverflow.com/posts/2684561/revisions
+  /**
+   *
+   * @param elem
+   */
+  isActive: function(elem) {
+    return elem === document.activeElement && ( elem.type || elem.href );
+  }
+
+};
+
+export default dom;

src/dat/gui/_structure.scss

@@ -16,12 +16,12 @@ $button-height: 20px;
 
   /* Auto-place container */
   &.ac {
-   position: fixed;
+    position: fixed;
-   top: 0;
+    top: 0;
-   left: 0;
+    left: 0;
-   right: 0;
+    right: 0;
-   height: 0;
+    height: 0;
-   z-index: 0;
+    z-index: 0;
   }
 
   &:not(.ac) .main {
@@ -53,7 +53,6 @@ $button-height: 20px;
       opacity: 1 !important;
     }
 
-
     &:hover .close-button,
     .close-button.drag {
       opacity: 1;
@@ -68,7 +67,7 @@ $button-height: 20px;
       line-height: $button-height - 1;
       height: $button-height;
 
-        /* TODO, these are style notes */
+      /* TODO, these are style notes */
       cursor: pointer;
       text-align: center;
       background-color: #000;
@@ -94,8 +93,6 @@ $button-height: 20px;
       }
     }
 
-
-
     .save-row {
       position: fixed;
       top: 0;
@@ -118,8 +115,8 @@ $button-height: 20px;
   }
 
   li.folder {
-      padding: 0;
+    padding: 0;
-      border-left: $nest-margin solid rgba(0,0,0,0);
+    border-left: $nest-margin solid rgba(0, 0, 0, 0);
 
   }
 
@@ -156,7 +153,7 @@ $button-height: 20px;
   }
 
   /** Controller-half (right) */
-  .c  {
+  .c {
     float: left;
     width: 60%;
   }
@@ -198,7 +195,7 @@ $button-height: 20px;
     margin-top: 5px;
   }
 
-	/** Ensure the entire boolean and function row shows a hand */
+  /** Ensure the entire boolean and function row shows a hand */
   .cr.function,
   .cr.function .property-name, /* Don't know why I need to be this explicit */
   .cr.function *,
@@ -207,7 +204,6 @@ $button-height: 20px;
     cursor: pointer;
   }
 
-
   .selector {
     display: none;
     position: absolute;
@@ -216,13 +212,11 @@ $button-height: 20px;
     z-index: 10;
   }
 
-
   .c:hover .selector,
   .selector.drag {
     display: block;
   }
 
-
   li.save-row {
 
     padding: 0;
@@ -242,7 +236,6 @@ $button-height: 20px;
     line-height: 15px;
   }
 
-
 }
 
 /* TODO Separate style and structure */
@@ -273,7 +266,7 @@ $button-height: 20px;
   margin-top: 10px;
   code {
     font-size: 10px;
-    }
+  }
 }
 
 #dat-gui-save-locally {

src/dat/gui/style.css

@@ -1,280 +0,0 @@
-.dg {
-  /** Clear list styles */
-  /* Auto-place container */
-  /* Auto-placed GUI's */
-  /* Line items that don't contain folders. */
-  /** Folder names */
-  /** Hides closed items */
-  /** Controller row */
-  /** Name-half (left) */
-  /** Controller-half (right) */
-  /** Controller placement */
-  /** Shorter number boxes when slider is present. */
-  /** Ensure the entire boolean and function row shows a hand */ }
-  .dg ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    clear: both; }
-  .dg.ac {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 0;
-    z-index: 0; }
-  .dg:not(.ac) .main {
-    /** Exclude mains in ac so that we don't hide close button */
-    overflow: hidden; }
-  .dg.main {
-    -webkit-transition: opacity 0.1s linear;
-    -o-transition: opacity 0.1s linear;
-    -moz-transition: opacity 0.1s linear;
-    transition: opacity 0.1s linear; }
-    .dg.main.taller-than-window {
-      overflow-y: auto; }
-      .dg.main.taller-than-window .close-button {
-        opacity: 1;
-        /* TODO, these are style notes */
-        margin-top: -1px;
-        border-top: 1px solid #2c2c2c; }
-    .dg.main ul.closed .close-button {
-      opacity: 1 !important; }
-    .dg.main:hover .close-button,
-    .dg.main .close-button.drag {
-      opacity: 1; }
-    .dg.main .close-button {
-      /*opacity: 0;*/
-      -webkit-transition: opacity 0.1s linear;
-      -o-transition: opacity 0.1s linear;
-      -moz-transition: opacity 0.1s linear;
-      transition: opacity 0.1s linear;
-      border: 0;
-      position: absolute;
-      line-height: 19px;
-      height: 20px;
-      /* TODO, these are style notes */
-      cursor: pointer;
-      text-align: center;
-      background-color: #000; }
-      .dg.main .close-button:hover {
-        background-color: #111; }
-  .dg.a {
-    float: right;
-    margin-right: 15px;
-    overflow-x: hidden; }
-    .dg.a.has-save > ul {
-      margin-top: 27px; }
-      .dg.a.has-save > ul.closed {
-        margin-top: 0; }
-    .dg.a .save-row {
-      position: fixed;
-      top: 0;
-      z-index: 1002; }
-  .dg li {
-    -webkit-transition: height 0.1s ease-out;
-    -o-transition: height 0.1s ease-out;
-    -moz-transition: height 0.1s ease-out;
-    transition: height 0.1s ease-out; }
-  .dg li:not(.folder) {
-    cursor: auto;
-    height: 27px;
-    line-height: 27px;
-    overflow: hidden;
-    padding: 0 4px 0 5px; }
-  .dg li.folder {
-    padding: 0;
-    border-left: 4px solid rgba(0, 0, 0, 0); }
-  .dg li.title {
-    cursor: pointer;
-    margin-left: -4px; }
-  .dg .closed li:not(.title),
-  .dg .closed ul li,
-  .dg .closed ul li > * {
-    height: 0;
-    overflow: hidden;
-    border: 0; }
-  .dg .cr {
-    clear: both;
-    padding-left: 3px;
-    height: 27px; }
-  .dg .property-name {
-    cursor: default;
-    float: left;
-    clear: left;
-    width: 40%;
-    overflow: hidden;
-    text-overflow: ellipsis; }
-  .dg .c {
-    float: left;
-    width: 60%; }
-  .dg .c input[type=text] {
-    border: 0;
-    margin-top: 4px;
-    padding: 3px;
-    width: 100%;
-    float: right; }
-  .dg .has-slider input[type=text] {
-    width: 30%;
-    /*display: none;*/
-    margin-left: 0; }
-  .dg .slider {
-    float: left;
-    width: 66%;
-    margin-left: -5px;
-    margin-right: 0;
-    height: 19px;
-    margin-top: 4px; }
-  .dg .slider-fg {
-    height: 100%; }
-  .dg .c input[type=checkbox] {
-    margin-top: 9px; }
-  .dg .c select {
-    margin-top: 5px; }
-  .dg .cr.function,
-  .dg .cr.function .property-name,
-  .dg .cr.function *,
-  .dg .cr.boolean,
-  .dg .cr.boolean * {
-    cursor: pointer; }
-  .dg .selector {
-    display: none;
-    position: absolute;
-    margin-left: -9px;
-    margin-top: 23px;
-    z-index: 10; }
-  .dg .c:hover .selector,
-  .dg .selector.drag {
-    display: block; }
-  .dg li.save-row {
-    padding: 0; }
-    .dg li.save-row .button {
-      display: inline-block;
-      padding: 0px 6px; }
-  .dg.dialogue {
-    background-color: #222;
-    width: 460px;
-    padding: 15px;
-    font-size: 13px;
-    line-height: 15px; }
-
-/* TODO Separate style and structure */
-#dg-new-constructor {
-  padding: 10px;
-  color: #222;
-  font-family: Monaco, monospace;
-  font-size: 10px;
-  border: 0;
-  resize: none;
-  box-shadow: inset 1px 1px 1px #888;
-  word-wrap: break-word;
-  margin: 12px 0;
-  display: block;
-  width: 440px;
-  overflow-y: scroll;
-  height: 100px;
-  position: relative; }
-
-#dg-local-explain {
-  display: none;
-  font-size: 11px;
-  line-height: 17px;
-  border-radius: 3px;
-  background-color: #333;
-  padding: 8px;
-  margin-top: 10px; }
-  #dg-local-explain code {
-    font-size: 10px; }
-
-#dat-gui-save-locally {
-  display: none; }
-
-/** Main type */
-.dg {
-  color: #eee;
-  font: 11px 'Lucida Grande', sans-serif;
-  text-shadow: 0 -1px 0 #111;
-  /** Auto place */
-  /* Controller row, <li> */
-  /** Controllers */ }
-  .dg.main {
-    /** Scrollbar */ }
-    .dg.main::-webkit-scrollbar {
-      width: 5px;
-      background: #1a1a1a; }
-    .dg.main::-webkit-scrollbar-corner {
-      height: 0;
-      display: none; }
-    .dg.main::-webkit-scrollbar-thumb {
-      border-radius: 5px;
-      background: #676767; }
-  .dg li:not(.folder) {
-    background: #1a1a1a;
-    border-bottom: 1px solid #2c2c2c; }
-  .dg li.save-row {
-    line-height: 25px;
-    background: #dad5cb;
-    border: 0; }
-    .dg li.save-row select {
-      margin-left: 5px;
-      width: 108px; }
-    .dg li.save-row .button {
-      margin-left: 5px;
-      margin-top: 1px;
-      border-radius: 2px;
-      font-size: 9px;
-      line-height: 7px;
-      padding: 4px 4px 5px 4px;
-      background: #c5bdad;
-      color: #fff;
-      text-shadow: 0 1px 0 #b0a58f;
-      box-shadow: 0 -1px 0 #b0a58f;
-      cursor: pointer; }
-      .dg li.save-row .button.gears {
-        background: #c5bdad url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQJJREFUeNpiYKAU/P//PwGIC/ApCABiBSAW+I8AClAcgKxQ4T9hoMAEUrxx2QSGN6+egDX+/vWT4e7N82AMYoPAx/evwWoYoSYbACX2s7KxCxzcsezDh3evFoDEBYTEEqycggWAzA9AuUSQQgeYPa9fPv6/YWm/Acx5IPb7ty/fw+QZblw67vDs8R0YHyQhgObx+yAJkBqmG5dPPDh1aPOGR/eugW0G4vlIoTIfyFcA+QekhhHJhPdQxbiAIguMBTQZrPD7108M6roWYDFQiIAAv6Aow/1bFwXgis+f2LUAynwoIaNcz8XNx3Dl7MEJUDGQpx9gtQ8YCueB+D26OECAAQDadt7e46D42QAAAABJRU5ErkJggg==) 2px 1px no-repeat;
-        height: 7px;
-        width: 8px; }
-      .dg li.save-row .button:hover {
-        background-color: #bab19e;
-        box-shadow: 0 -1px 0 #b0a58f; }
-  .dg li.folder {
-    border-bottom: 0; }
-  .dg li.title {
-    padding-left: 16px;
-    background: black url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat;
-    cursor: pointer;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
-  .dg .closed li.title {
-    background-image: url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==); }
-  .dg .cr.boolean {
-    border-left: 3px solid #806787; }
-  .dg .cr.function {
-    border-left: 3px solid #e61d5f; }
-  .dg .cr.number {
-    border-left: 3px solid #2fa1d6; }
-    .dg .cr.number input[type=text] {
-      color: #2fa1d6; }
-  .dg .cr.string {
-    border-left: 3px solid #1ed36f; }
-    .dg .cr.string input[type=text] {
-      color: #1ed36f; }
-  .dg .cr.function:hover, .dg .cr.boolean:hover {
-    background: #111; }
-  .dg .c input[type=text] {
-    background: #303030;
-    outline: none; }
-    .dg .c input[type=text]:hover {
-      background: #3c3c3c; }
-    .dg .c input[type=text]:focus {
-      background: #494949;
-      color: #fff; }
-  .dg .c .slider {
-    background: #303030;
-    cursor: ew-resize; }
-  .dg .c .slider-fg {
-    background: #2fa1d6; }
-  .dg .c .slider:hover {
-    background: #3c3c3c; }
-    .dg .c .slider:hover .slider-fg {
-      background: #44abda; }

src/dat/gui/style.scss

@@ -51,7 +51,6 @@ $input-color: lighten($background-color, 8.5%);
 /** Main type */
 .dg {
 
-
   color: #eee;
   font: 11px 'Lucida Grande', sans-serif;
   text-shadow: 0 -1px 0 #111;
@@ -135,6 +134,10 @@ $input-color: lighten($background-color, 8.5%);
       border-left: 3px solid $boolean-color;
     }
 
+    &.color {
+      border-left: 3px solid;
+    }
+
     &.function {
       border-left: 3px solid $function-color;
     }
@@ -153,19 +156,16 @@ $input-color: lighten($background-color, 8.5%);
       }
     }
 
-    &.function:hover ,
+    &.function:hover,
     &.boolean:hover {
       background: #111;
     }
 
   }
 
-
   /** Controllers */
   .c {
 
-
-
     input[type=text] {
 
       background: $input-color;
@@ -180,7 +180,6 @@ $input-color: lighten($background-color, 8.5%);
 
     }
 
-
     .slider {
       background: $input-color;
       cursor: ew-resize;

src/dat/index.js

@@ -0,0 +1,42 @@
+/**
+ * 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
+ */
+
+export default {
+  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')
+  },
+
+  GUI: require('./gui/GUI')
+};

src/dat/utils/common.js

@@ -11,130 +11,122 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-define([
+const ARR_EACH = Array.prototype.forEach;
-], function() {
+const 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/
+ */
 
-  /**
+const Common = {
-   * Band-aid methods for things that should be a lot easier in JavaScript.
+  BREAK: {},
-   * Implementation and structure inspired by underscore.js
-   * http://documentcloud.github.com/underscore/
-   */
-
-  return { 
-    
-    BREAK: {},
-  
-    extend: function(target) {
-      
-      this.each(ARR_SLICE.call(arguments, 1), function(obj) {
-        
-        for (var key in obj)
-          if (!this.isUndefined(obj[key])) 
-            target[key] = obj[key];
-        
-      }, this);
-      
-      return target;
-      
-    },
-    
-    defaults: function(target) {
-      
-      this.each(ARR_SLICE.call(arguments, 1), function(obj) {
-        
-        for (var key in obj)
-          if (this.isUndefined(target[key])) 
-            target[key] = obj[key];
-        
-      }, this);
-      
-      return target;
-    
-    },
-    
-    compose: function() {
-      var toCall = ARR_SLICE.call(arguments);
-            return function() {
-              var args = ARR_SLICE.call(arguments);
-              for (var i = toCall.length -1; i >= 0; i--) {
-                args = [toCall[i].apply(this, args)];
-              }
-              return args[0];
-            }
-    },
-    
-    each: function(obj, itr, scope) {
-
-      if (!obj) return;
-
-      if (ARR_EACH && obj.forEach && obj.forEach === ARR_EACH) { 
-        
-        obj.forEach(itr, scope);
-        
-      } else if (obj.length === obj.length + 0) { // Is number but not NaN
-        
-        for (var key = 0, l = obj.length; key < l; key++)
-          if (key in obj && itr.call(scope, obj[key], key) === this.BREAK) 
-            return;
-            
-      } else {
-
-        for (var key in obj) 
-          if (itr.call(scope, obj[key], key) === this.BREAK)
-            return;
 
+  extend: function(target) {
+    this.each(ARR_SLICE.call(arguments, 1), function(obj) {
+      for (const key in obj) {
+        if (!this.isUndefined(obj[key])) {
+          target[key] = obj[key];
+        }
       }
+    }, this);
 
-    },
+    return target;
+  },
 
-    defer: function(fnc) {
+  defaults: function(target) {
-      setTimeout(fnc, 0);
+    this.each(ARR_SLICE.call(arguments, 1), function(obj) {
-    },
+      for (const key in obj) {
+        if (this.isUndefined(target[key])) {
+          target[key] = obj[key];
+        }
+      }
+    }, this);
 
-    toArray: function(obj) {
+    return target;
-      if (obj.toArray) return obj.toArray();
+  },
-      return ARR_SLICE.call(obj);
-    },
 
-    isUndefined: function(obj) {
+  compose: function() {
-      return obj === undefined;
+    const toCall = ARR_SLICE.call(arguments);
-    },
+    return function() {
+      let args = ARR_SLICE.call(arguments);
+      for (let i = toCall.length - 1; i >= 0; i--) {
+        args = [toCall[i].apply(this, args)];
+      }
+      return args[0];
+    };
+  },
 
-    isNull: function(obj) {
+  each: function(obj, itr, scope) {
-      return obj === null;
+    if (!obj) {
-    },
+      return;
-    
-    isNaN: function(obj) {
-      return obj !== obj;
-    },
-    
-    isArray: Array.isArray || function(obj) {
-      return obj.constructor === Array;
-    },
-    
-    isObject: function(obj) {
-      return obj === Object(obj);
-    },
-    
-    isNumber: function(obj) {
-      return obj === obj+0;
-    },
-    
-    isString: function(obj) {
-      return obj === obj+'';
-    },
-    
-    isBoolean: function(obj) {
-      return obj === false || obj === true;
-    },
-    
-    isFunction: function(obj) {
-      return Object.prototype.toString.call(obj) === '[object Function]';
     }
 
-  };
+    if (ARR_EACH && obj.forEach && obj.forEach === ARR_EACH) {
+      obj.forEach(itr, scope);
+    } else if (obj.length === obj.length + 0) { // Is number but not NaN
+      let key;
+      let l;
+      for (key = 0, l = obj.length; key < l; key++) {
+        if (key in obj && itr.call(scope, obj[key], key) === this.BREAK) {
+          return;
+        }
+      }
+    } else {
+      for (const key in obj) {
+        if (itr.call(scope, obj[key], key) === this.BREAK) {
+          return;
+        }
+      }
+    }
+  },
 
-});
+  defer: function(fnc) {
+    setTimeout(fnc, 0);
+  },
+
+  toArray: function(obj) {
+    if (obj.toArray) return obj.toArray();
+    return ARR_SLICE.call(obj);
+  },
+
+  isUndefined: function(obj) {
+    return obj === undefined;
+  },
+
+  isNull: function(obj) {
+    return obj === null;
+  },
+
+  isNaN: function(obj) {
+    return isNaN(obj);
+  },
+
+  isArray: Array.isArray || function(obj) {
+    return obj.constructor === Array;
+  },
+
+  isObject: function(obj) {
+    return obj === Object(obj);
+  },
+
+  isNumber: function(obj) {
+    return obj === obj + 0;
+  },
+
+  isString: function(obj) {
+    return obj === obj + '';
+  },
+
+  isBoolean: function(obj) {
+    return obj === false || obj === true;
+  },
+
+  isFunction: function(obj) {
+    return Object.prototype.toString.call(obj) === '[object Function]';
+  }
+
+};
+
+export default Common;

src/dat/utils/css.js

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

src/dat/utils/requestAnimationFrame.js

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

tests/index.html

@@ -7,12 +7,11 @@
   <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 math = dat.color.math;
     var interpret = dat.color.interpret;
     var Color = dat.color.Color;

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

webpack/webpack.config.js

@@ -0,0 +1,62 @@
+/**
+ * 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 path = require("path");
+
+module.exports = {
+  target: 'web',
+
+  context: path.resolve(__dirname, '..', 'src'),
+
+  entry: {
+    main: '../index'
+  },
+
+  module: {
+    loaders: [
+      {
+        test: /\.jsx?$/,
+        exclude: /(node_modules|bower_components)/,
+        loader: 'babel'
+      },
+      {
+        test: /\.js$/,
+        loader: 'eslint-loader',
+        exclude: /(node_modules|bower_components)/
+      },
+      {
+        test: /\.css$/,
+        loader: 'style-loader!css-loader'
+      },
+      {
+        test: /\.png$/,
+        loader: 'url-loader?limit=100000'
+      },
+      {
+        test: /\.jpg$/,
+        loader: 'file-loader'
+      },
+      {
+        test: /\.scss$/,
+        loader: 'style!css!sass'
+      }
+    ]
+  },
+
+  output: {
+    path: path.join(__dirname, '..', 'build'),
+    filename: 'dat.gui.js',
+    library: ['dat'],
+    libraryTarget: 'umd'
+  }
+};

webpack/webpack.config.min.js

@@ -0,0 +1,31 @@
+/**
+ * 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 extend = require('extend'),
+    webpack = require('webpack'),
+    webpackConfig = require('./webpack.config');
+
+var config = {
+    plugins: [
+        new webpack.optimize.UglifyJsPlugin({
+          minimize: true,
+          comments: false
+        })
+    ],
+
+    output: {
+        filename: 'dat.gui.min.js'
+    }
+}
+
+module.exports = extend(true, webpackConfig, config);