Merge branch 'master' into removefolder

API.md

@@ -0,0 +1,423 @@
+# dat.GUI API
+
+Details about the classes, methods, and properties provided by dat.GUI. For more
+hands-on examples, see the dat.GUI [tutorial](http://workshop.chromeexperiments.com/examples/gui).
+
+<!--- API BEGIN --->
+
+## Classes
+
+<dl>
+<dt><a href="#GUI">GUI</a></dt>
+<dd><p>A lightweight controller library for JavaScript. It allows you to easily
+manipulate variables and fire functions on the fly.</p>
+</dd>
+<dt><a href="#Controller">Controller</a></dt>
+<dd><p>An &quot;abstract&quot; class that represents a given property of an object.</p>
+</dd>
+<dt><a href="#NumberController">NumberController</a> ⇐ <code>dat.controllers.Controller</code></dt>
+<dd><p>Represents a given property of an object that is a number.</p>
+</dd>
+</dl>
+
+<a name="GUI"></a>
+
+## GUI
+A lightweight controller library for JavaScript. It allows you to easily
+manipulate variables and fire functions on the fly.
+
+**Kind**: global class  
+
+* [GUI](#GUI)
+    * [new GUI([params])](#new_GUI_new)
+    * [.domElement](#GUI+domElement) : <code>DOMElement</code>
+    * [.parent](#GUI+parent) : <code>dat.gui.GUI</code>
+    * [.autoPlace](#GUI+autoPlace) : <code>Boolean</code>
+    * [.closeOnTop](#GUI+closeOnTop) : <code>Boolean</code>
+    * [.preset](#GUI+preset) : <code>String</code>
+    * [.width](#GUI+width) : <code>Number</code>
+    * [.name](#GUI+name) : <code>String</code>
+    * [.closed](#GUI+closed) : <code>Boolean</code>
+    * [.load](#GUI+load) : <code>Object</code>
+    * [.useLocalStorage](#GUI+useLocalStorage) : <code>Boolean</code>
+    * [.add(object, property, [min], [max], [step])](#GUI+add) ⇒ [<code>Controller</code>](#Controller)
+    * [.addColor(object, property)](#GUI+addColor) ⇒ [<code>Controller</code>](#Controller)
+    * [.remove(controller)](#GUI+remove)
+    * [.destroy()](#GUI+destroy)
+    * [.addFolder(name)](#GUI+addFolder) ⇒ <code>dat.gui.GUI</code>
+    * [.open()](#GUI+open)
+    * [.close()](#GUI+close)
+    * [.getRoot()](#GUI+getRoot) ⇒ <code>dat.gui.GUI</code>
+    * [.getSaveObject()](#GUI+getSaveObject) ⇒ <code>Object</code>
+
+<a name="new_GUI_new"></a>
+
+### new GUI([params])
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [params] | <code>Object</code> |  |  |
+| [params.name] | <code>String</code> |  | The name of this GUI. |
+| [params.load] | <code>Object</code> |  | JSON object representing the saved state of this GUI. |
+| [params.auto] | <code>Boolean</code> | <code>true</code> |  |
+| [params.parent] | <code>dat.gui.GUI</code> |  | The GUI I'm nested in. |
+| [params.closed] | <code>Boolean</code> |  | If true, starts closed |
+| [params.closeOnTop] | <code>Boolean</code> |  | If true, close/open button shows on top of the GUI |
+
+**Example**  
+```js
+// Creating a GUI with options.
+var gui = new dat.GUI({name: 'My GUI'});
+```
+**Example**  
+```js
+// Creating a GUI and a subfolder.
+var gui = new dat.GUI();
+var folder1 = gui.addFolder('Flow Field');
+```
+<a name="GUI+domElement"></a>
+
+### gui.domElement : <code>DOMElement</code>
+Outermost DOM Element
+
+**Kind**: instance property of [<code>GUI</code>](#GUI)  
+<a name="GUI+parent"></a>
+
+### gui.parent : <code>dat.gui.GUI</code>
+The parent <code>GUI</code>
+
+**Kind**: instance property of [<code>GUI</code>](#GUI)  
+<a name="GUI+autoPlace"></a>
+
+### gui.autoPlace : <code>Boolean</code>
+Handles <code>GUI</code>'s element placement for you
+
+**Kind**: instance property of [<code>GUI</code>](#GUI)  
+<a name="GUI+closeOnTop"></a>
+
+### gui.closeOnTop : <code>Boolean</code>
+Handles <code>GUI</code>'s position of open/close button
+
+**Kind**: instance property of [<code>GUI</code>](#GUI)  
+<a name="GUI+preset"></a>
+
+### gui.preset : <code>String</code>
+The identifier for a set of saved values
+
+**Kind**: instance property of [<code>GUI</code>](#GUI)  
+<a name="GUI+width"></a>
+
+### gui.width : <code>Number</code>
+The width of <code>GUI</code> element
+
+**Kind**: instance property of [<code>GUI</code>](#GUI)  
+<a name="GUI+name"></a>
+
+### gui.name : <code>String</code>
+The name of <code>GUI</code>. Used for folders. i.e
+a folder's name
+
+**Kind**: instance property of [<code>GUI</code>](#GUI)  
+<a name="GUI+closed"></a>
+
+### gui.closed : <code>Boolean</code>
+Whether the <code>GUI</code> is collapsed or not
+
+**Kind**: instance property of [<code>GUI</code>](#GUI)  
+<a name="GUI+load"></a>
+
+### gui.load : <code>Object</code>
+Contains all presets
+
+**Kind**: instance property of [<code>GUI</code>](#GUI)  
+<a name="GUI+useLocalStorage"></a>
+
+### gui.useLocalStorage : <code>Boolean</code>
+Determines whether or not to use <a href="https://developer.mozilla.org/en/DOM/Storage#localStorage">localStorage</a> as the means for
+<code>remember</code>ing
+
+**Kind**: instance property of [<code>GUI</code>](#GUI)  
+<a name="GUI+add"></a>
+
+### gui.add(object, property, [min], [max], [step]) ⇒ [<code>Controller</code>](#Controller)
+Adds a new [Controller](#Controller) to the GUI. The type of controller created
+is inferred from the initial value of <code>object[property]</code>. For
+color properties, see [addColor](addColor).
+
+**Kind**: instance method of [<code>GUI</code>](#GUI)  
+**Returns**: [<code>Controller</code>](#Controller) - The controller that was added to the GUI.  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| object | <code>Object</code> | The object to be manipulated |
+| property | <code>String</code> | The name of the property to be manipulated |
+| [min] | <code>Number</code> | Minimum allowed value |
+| [max] | <code>Number</code> | Maximum allowed value |
+| [step] | <code>Number</code> | Increment by which to change value |
+
+**Example**  
+```js
+// Add a string controller.
+var person = {name: 'Sam'};
+gui.add(person, 'name');
+```
+**Example**  
+```js
+// Add a number controller slider.
+var person = {age: 45};
+gui.add(person, 'age', 0, 100);
+```
+<a name="GUI+addColor"></a>
+
+### gui.addColor(object, property) ⇒ [<code>Controller</code>](#Controller)
+Adds a new color controller to the GUI.
+
+**Kind**: instance method of [<code>GUI</code>](#GUI)  
+**Returns**: [<code>Controller</code>](#Controller) - The controller that was added to the GUI.  
+
+| Param |
+| --- |
+| object | 
+| property | 
+
+**Example**  
+```js
+var palette = {
+  color1: '#FF0000', // CSS string
+  color2: [ 0, 128, 255 ], // RGB array
+  color3: [ 0, 128, 255, 0.3 ], // RGB with alpha
+  color4: { h: 350, s: 0.9, v: 0.3 } // Hue, saturation, value
+};
+gui.addColor(palette, 'color1');
+gui.addColor(palette, 'color2');
+gui.addColor(palette, 'color3');
+gui.addColor(palette, 'color4');
+```
+<a name="GUI+remove"></a>
+
+### gui.remove(controller)
+Removes the given controller from the GUI.
+
+**Kind**: instance method of [<code>GUI</code>](#GUI)  
+
+| Param | Type |
+| --- | --- |
+| controller | [<code>Controller</code>](#Controller) | 
+
+<a name="GUI+destroy"></a>
+
+### gui.destroy()
+Removes the GUI from the document and unbinds all event listeners.
+
+**Kind**: instance method of [<code>GUI</code>](#GUI)  
+<a name="GUI+addFolder"></a>
+
+### gui.addFolder(name) ⇒ <code>dat.gui.GUI</code>
+Creates a new subfolder GUI instance.
+
+**Kind**: instance method of [<code>GUI</code>](#GUI)  
+**Returns**: <code>dat.gui.GUI</code> - The new folder.  
+**Throws**:
+
+- <code>Error</code> if this GUI already has a folder by the specified
+name
+
+
+| Param |
+| --- |
+| name | 
+
+<a name="GUI+open"></a>
+
+### gui.open()
+Opens the GUI.
+
+**Kind**: instance method of [<code>GUI</code>](#GUI)  
+<a name="GUI+close"></a>
+
+### gui.close()
+Closes the GUI.
+
+**Kind**: instance method of [<code>GUI</code>](#GUI)  
+<a name="GUI+getRoot"></a>
+
+### gui.getRoot() ⇒ <code>dat.gui.GUI</code>
+**Kind**: instance method of [<code>GUI</code>](#GUI)  
+**Returns**: <code>dat.gui.GUI</code> - the topmost parent GUI of a nested GUI.  
+<a name="GUI+getSaveObject"></a>
+
+### gui.getSaveObject() ⇒ <code>Object</code>
+**Kind**: instance method of [<code>GUI</code>](#GUI)  
+**Returns**: <code>Object</code> - a JSON object representing the current state of
+this GUI as well as its remembered properties.  
+<a name="Controller"></a>
+
+## Controller
+An "abstract" class that represents a given property of an object.
+
+**Kind**: global class  
+
+* [Controller](#Controller)
+    * [new Controller(object, property)](#new_Controller_new)
+    * [.domElement](#Controller+domElement) : <code>DOMElement</code>
+    * [.object](#Controller+object) : <code>Object</code>
+    * [.property](#Controller+property) : <code>String</code>
+    * [.onChange(fnc)](#Controller+onChange) ⇒ [<code>Controller</code>](#Controller)
+    * [.onFinishChange(fnc)](#Controller+onFinishChange) ⇒ [<code>Controller</code>](#Controller)
+    * [.setValue(newValue)](#Controller+setValue)
+    * [.getValue()](#Controller+getValue) ⇒ <code>Object</code>
+    * [.updateDisplay()](#Controller+updateDisplay) ⇒ [<code>Controller</code>](#Controller)
+    * [.isModified()](#Controller+isModified) ⇒ <code>Boolean</code>
+
+<a name="new_Controller_new"></a>
+
+### new Controller(object, property)
+
+| Param | Type | Description |
+| --- | --- | --- |
+| object | <code>Object</code> | The object to be manipulated |
+| property | <code>string</code> | The name of the property to be manipulated |
+
+<a name="Controller+domElement"></a>
+
+### controller.domElement : <code>DOMElement</code>
+Those who extend this class will put their DOM elements in here.
+
+**Kind**: instance property of [<code>Controller</code>](#Controller)  
+<a name="Controller+object"></a>
+
+### controller.object : <code>Object</code>
+The object to manipulate
+
+**Kind**: instance property of [<code>Controller</code>](#Controller)  
+<a name="Controller+property"></a>
+
+### controller.property : <code>String</code>
+The name of the property to manipulate
+
+**Kind**: instance property of [<code>Controller</code>](#Controller)  
+<a name="Controller+onChange"></a>
+
+### controller.onChange(fnc) ⇒ [<code>Controller</code>](#Controller)
+Specify that a function fire every time someone changes the value with
+this Controller.
+
+**Kind**: instance method of [<code>Controller</code>](#Controller)  
+**Returns**: [<code>Controller</code>](#Controller) - this  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| fnc | <code>function</code> | This function will be called whenever the value is modified via this Controller. |
+
+<a name="Controller+onFinishChange"></a>
+
+### controller.onFinishChange(fnc) ⇒ [<code>Controller</code>](#Controller)
+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.
+
+**Kind**: instance method of [<code>Controller</code>](#Controller)  
+**Returns**: [<code>Controller</code>](#Controller) - this  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| fnc | <code>function</code> | This function will be called whenever someone "finishes" changing the value via this Controller. |
+
+<a name="Controller+setValue"></a>
+
+### controller.setValue(newValue)
+Change the value of <code>object[property]</code>
+
+**Kind**: instance method of [<code>Controller</code>](#Controller)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| newValue | <code>Object</code> | The new value of <code>object[property]</code> |
+
+<a name="Controller+getValue"></a>
+
+### controller.getValue() ⇒ <code>Object</code>
+Gets the value of <code>object[property]</code>
+
+**Kind**: instance method of [<code>Controller</code>](#Controller)  
+**Returns**: <code>Object</code> - The current value of <code>object[property]</code>  
+<a name="Controller+updateDisplay"></a>
+
+### controller.updateDisplay() ⇒ [<code>Controller</code>](#Controller)
+Refreshes the visual display of a Controller in order to keep sync
+with the object's current value.
+
+**Kind**: instance method of [<code>Controller</code>](#Controller)  
+**Returns**: [<code>Controller</code>](#Controller) - this  
+<a name="Controller+isModified"></a>
+
+### controller.isModified() ⇒ <code>Boolean</code>
+**Kind**: instance method of [<code>Controller</code>](#Controller)  
+**Returns**: <code>Boolean</code> - true if the value has deviated from initialValue  
+<a name="NumberController"></a>
+
+## NumberController ⇐ <code>dat.controllers.Controller</code>
+Represents a given property of an object that is a number.
+
+**Kind**: global class  
+**Extends**: <code>dat.controllers.Controller</code>  
+
+* [NumberController](#NumberController) ⇐ <code>dat.controllers.Controller</code>
+    * [new NumberController(object, property, [params])](#new_NumberController_new)
+    * [.min(minValue)](#NumberController+min) ⇒ <code>dat.controllers.NumberController</code>
+    * [.max(maxValue)](#NumberController+max) ⇒ <code>dat.controllers.NumberController</code>
+    * [.step(stepValue)](#NumberController+step) ⇒ <code>dat.controllers.NumberController</code>
+
+<a name="new_NumberController_new"></a>
+
+### new NumberController(object, property, [params])
+
+| Param | Type | Description |
+| --- | --- | --- |
+| object | <code>Object</code> | The object to be manipulated |
+| property | <code>string</code> | The name of the property to be manipulated |
+| [params] | <code>Object</code> | Optional parameters |
+| [params.min] | <code>Number</code> | Minimum allowed value |
+| [params.max] | <code>Number</code> | Maximum allowed value |
+| [params.step] | <code>Number</code> | Increment by which to change value |
+
+<a name="NumberController+min"></a>
+
+### numberController.min(minValue) ⇒ <code>dat.controllers.NumberController</code>
+Specify a minimum value for <code>object[property]</code>.
+
+**Kind**: instance method of [<code>NumberController</code>](#NumberController)  
+**Returns**: <code>dat.controllers.NumberController</code> - this  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| minValue | <code>Number</code> | The minimum value for <code>object[property]</code> |
+
+<a name="NumberController+max"></a>
+
+### numberController.max(maxValue) ⇒ <code>dat.controllers.NumberController</code>
+Specify a maximum value for <code>object[property]</code>.
+
+**Kind**: instance method of [<code>NumberController</code>](#NumberController)  
+**Returns**: <code>dat.controllers.NumberController</code> - this  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| maxValue | <code>Number</code> | The maximum value for <code>object[property]</code> |
+
+<a name="NumberController+step"></a>
+
+### numberController.step(stepValue) ⇒ <code>dat.controllers.NumberController</code>
+Specify a step value that dat.controllers.NumberController
+increments by.
+
+**Kind**: instance method of [<code>NumberController</code>](#NumberController)  
+**Default**: <code>if minimum and maximum specified increment is 1% of the
+difference otherwise stepValue is 1</code>  
+**Returns**: <code>dat.controllers.NumberController</code> - this  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| stepValue | <code>Number</code> | The step value for dat.controllers.NumberController |
+
+<!--- API END --->

CHANGELOG.md

@@ -1,5 +1,11 @@
 ## Changelog
 
+### 0.6.5
+ * Add browserify support. #137
+
+### 0.6.4
+ * Fixed formatting issue on Windows. #136
+ * Fixed issue with color selector getting chopped off at bottom of gui. #136
 
 ### 0.6.3
  * Added ability to put close button on top of the menu [ex: var gui = new dat.gui.GUI({closeOnTop:true})]. #106 #122

README.md

@@ -1,7 +1,8 @@
 # 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.
+Get started with dat.GUI by reading the [tutorial](http://workshop.chromeexperiments.com/examples/gui)
+or the [API documentation](API.md).
 
 
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "dat.gui",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "homepage": "https://github.com/dataarts/dat.gui.git",
   "authors": [
     "Google Data Arts Team <dataarts@google.com>"

build/dat.gui.css

@@ -10,7 +10,8 @@
   /** Controller-half (right) */
   /** Controller placement */
   /** Shorter number boxes when slider is present. */
-  /** Ensure the entire boolean and function row shows a hand */ }
+  /** Ensure the entire boolean and function row shows a hand */
+  /** allow overflow for color selector */ }
   .dg ul {
     list-style: none;
     margin: 0;
@@ -66,7 +67,7 @@
   .dg.a {
     float: right;
     margin-right: 15px;
-    overflow-x: hidden; }
+    overflow-y: visible; }
     .dg.a.has-save > ul.close-top {
       margin-top: 0; }
     .dg.a.has-save > ul.close-bottom {
@@ -93,7 +94,6 @@
     cursor: auto;
     height: 27px;
     line-height: 27px;
-    overflow: visible;
     padding: 0 4px 0 5px; }
   .dg li.folder {
     padding: 0;
@@ -110,7 +110,8 @@
   .dg .cr {
     clear: both;
     padding-left: 3px;
-    height: 27px; }
+    height: 27px;
+    overflow: hidden; }
   .dg .property-name {
     cursor: default;
     float: left;
@@ -151,6 +152,8 @@
   .dg .cr.boolean,
   .dg .cr.boolean * {
     cursor: pointer; }
+  .dg .cr.color {
+    overflow: visible; }
   .dg .selector {
     display: none;
     position: absolute;

index.js

@@ -13,4 +13,4 @@
 
 import dat from './src/dat/index';
 
-module.exports = dat;
+export default dat;

package.json

@@ -1,16 +1,41 @@
 {
   "name": "dat.gui",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "description": "A lightweight graphical user interface for changing variables in JavaScript.",
   "main": "index.js",
   "directories": {
     "test": "tests"
   },
+  "browserify": {
+    "transform": [
+      [
+        "babelify",
+        {
+          "presets": [
+            "es2015"
+          ]
+        }
+      ],
+      [
+        "stringify",
+        {
+          "extensions": [
+            ".html"
+          ]
+        }
+      ],
+      [
+        "sassify"
+      ]
+    ]
+  },
   "scripts": {
     "dev": "webpack --progress --colors --watch --config webpack/webpack.config.js --devtool sourcemap",
     "build": "npm run build-js && npm run build-css",
     "build-js": "webpack --config ./webpack/webpack.config.js --devtool sourcemap && webpack --config ./webpack/webpack.config.min.js",
-    "build-css": "node-sass src/dat/gui/style.scss build/dat.gui.css"
+    "build-css": "node-sass src/dat/gui/style.scss build/dat.gui.css",
+    "build-docs": "jsdoc2md -f src/dat/gui/GUI.js src/dat/controllers/Controller.js src/dat/controllers/NumberController.js | replace-between --target API.md --token API",
+    "postversion": "git push && git push --tags && npm publish"
   },
   "repository": {
     "type": "git",
@@ -25,7 +50,7 @@
   "devDependencies": {
     "babel-core": "^6.14.0",
     "babel-loader": "^6.2.5",
-    "babel-preset-es2015": "^6.14.0",
+    "babel-plugin-add-module-exports": "^0.2.1",
     "babel-preset-stage-0": "^6.5.0",
     "css-loader": "^0.25.0",
     "eslint": "^3.5.0",
@@ -34,17 +59,24 @@
     "eslint-plugin-import": "^1.15.0",
     "extend": "^3.0.0",
     "html-loader": "^0.4.4",
+    "jsdoc-to-markdown": "^3.0.2",
     "node-sass": "^3.10.0",
+    "replace-between": "0.0.8",
     "sass-loader": "^4.0.2",
-    "webpack": "^1.13.2"
+    "webpack": "1.14.x"
+  },
+  "dependencies": {
+    "babel-preset-es2015": "^6.14.0",
+    "babelify": "^7.3.0",
+    "sassify": "^2.0.0",
+    "stringify": "^5.1.0"
   },
-  "dependencies": {},
   "eslintConfig": {
     "extends": "airbnb-base",
     "rules": {
       "comma-dangle": 0,
       "func-names": 0,
-      "no-alert": 1,
+      "no-alert": 0,
       "no-console": 1,
       "no-use-before-define": 0,
       "prefer-rest-params": 0,
@@ -59,7 +91,7 @@
       "max-len": 0,
       "no-param-reassign": 0,
       "consistent-return": 0,
-      "no-restricted-syntax": 1,
+      "no-restricted-syntax": 0,
       "no-bitwise": 0,
       "no-plusplus": 0
     }

src/dat/controllers/BooleanController.js

@@ -16,12 +16,11 @@ import dom from '../dom/dom';
 
 /**
  * @class Provides a checkbox input to alter the boolean property of an object.
+ *
  * @extends dat.controllers.Controller
  *
  * @param {Object} object The object to be manipulated
  * @param {string} property The name of the property to be manipulated
- *
- * @member dat.controllers
  */
 class BooleanController extends Controller {
   constructor(object, property) {

src/dat/controllers/ColorController.js

@@ -17,6 +17,11 @@ import Color from '../color/Color';
 import interpret from '../color/interpret';
 import common from '../utils/common';
 
+/**
+ * @class Represents a given property of an object that is a color.
+ * @param {Object} object
+ * @param {string} property
+ */
 class ColorController extends Controller {
   constructor(object, property) {
     super(object, property);

src/dat/controllers/Controller.js

@@ -16,8 +16,6 @@
  *
  * @param {Object} object The object to be manipulated
  * @param {string} property The name of the property to be manipulated
- *
- * @member dat.controllers
  */
 class Controller {
   constructor(object, property) {

src/dat/controllers/FunctionController.js

@@ -21,8 +21,6 @@ import dom from '../dom/dom';
  *
  * @param {Object} object The object to be manipulated
  * @param {string} property The name of the property to be manipulated
- *
- * @member dat.controllers
  */
 class FunctionController extends Controller {
   constructor(object, property, text) {

src/dat/controllers/NumberController.js

@@ -34,8 +34,6 @@ function numDecimals(x) {
  * @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) {
@@ -84,8 +82,8 @@ class NumberController extends Controller {
    * <code>object[property]</code>
    * @returns {dat.controllers.NumberController} this
    */
-  min(v) {
+  min(minValue) {
-    this.__min = v;
+    this.__min = minValue;
     return this;
   }
 
@@ -96,8 +94,8 @@ class NumberController extends Controller {
    * <code>object[property]</code>
    * @returns {dat.controllers.NumberController} this
    */
-  max(v) {
+  max(maxValue) {
-    this.__max = v;
+    this.__max = maxValue;
     return this;
   }
 
@@ -111,10 +109,10 @@ class NumberController extends Controller {
    * difference otherwise stepValue is 1
    * @returns {dat.controllers.NumberController} this
    */
-  step(v) {
+  step(stepValue) {
-    this.__step = v;
+    this.__step = stepValue;
-    this.__impliedStep = v;
+    this.__impliedStep = stepValue;
-    this.__precision = numDecimals(v);
+    this.__precision = numDecimals(stepValue);
     return this;
   }
 }

src/dat/controllers/NumberControllerBox.js

@@ -33,8 +33,6 @@ function roundToDecimal(value, decimals) {
  * @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 NumberControllerBox extends NumberController {
   constructor(object, property, params) {

src/dat/controllers/NumberControllerSlider.js

@@ -33,8 +33,6 @@ function map(v, i1, i2, o1, o2) {
  * @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) {

src/dat/controllers/OptionController.js

@@ -25,8 +25,6 @@ import common from '../utils/common';
  * @param {string} property The name of the property to be manipulated
  * @param {Object|string[]} options A map of labels to acceptable values, or
  * a list of acceptable string values.
- *
- * @member dat.controllers
  */
 class OptionController extends Controller {
   constructor(object, property, opts) {

src/dat/controllers/StringController.js

@@ -21,8 +21,6 @@ import dom from '../dom/dom';
  *
  * @param {Object} object The object to be manipulated
  * @param {string} property The name of the property to be manipulated
- *
- * @member dat.controllers
  */
 class StringController extends Controller {
   constructor(object, property) {

src/dat/gui/GUI.js

@@ -29,12 +29,12 @@ import styleSheet from './style.scss'; // CSS to embed in build
 
 css.inject(styleSheet);
 
-/** Outer-most className for GUI's */
+/** @ignore Outer-most className for GUI's */
 const CSS_NAMESPACE = 'dg';
 
 const HIDE_KEY_CODE = 72;
 
-/** The only value shared between the JS and SCSS. Use caution. */
+/** @ignore The only value shared between the JS and SCSS. Use caution. */
 const CLOSE_BUTTON_HEIGHT = 20;
 
 const DEFAULT_DEFAULT_PRESET_NAME = 'Default';
@@ -49,24 +49,32 @@ const SUPPORTS_LOCAL_STORAGE = (function() {
 
 let SAVE_DIALOGUE;
 
-/** Have we yet to create an autoPlace GUI? */
+/** @ignore Have we yet to create an autoPlace GUI? */
 let autoPlaceVirgin = true;
 
-/** Fixed position div that auto place GUI's go inside */
+/** @ignore Fixed position div that auto place GUI's go inside */
 let autoPlaceContainer;
 
-/** Are we hiding the GUI's ? */
+/** @ignore Are we hiding the GUI's ? */
 let hide = false;
 
-/** GUI's which should be hidden */
+/** @private GUI's which should be hidden */
 const hideableGuis = [];
 
 /**
- * A lightweight controller library for JavaScript. It allows you to easily
+ * @class A lightweight controller library for JavaScript. It allows you to easily
  * manipulate variables and fire functions on the fly.
- * @class
  *
- * @member dat.gui
+ * @typicalname gui
+ *
+ * @example
+ * // Creating a GUI with options.
+ * var gui = new dat.GUI({name: 'My GUI'});
+ *
+ * @example
+ * // Creating a GUI and a subfolder.
+ * var gui = new dat.GUI();
+ * var folder1 = gui.addFolder('Flow Field');
  *
  * @param {Object} [params]
  * @param {String} [params.name] The name of this GUI.
@@ -84,7 +92,7 @@ const GUI = function(pars) {
 
   /**
    * Outermost DOM Element
-   * @type DOMElement
+   * @type {DOMElement}
    */
   this.domElement = document.createElement('div');
   this.__ul = document.createElement('ul');
@@ -170,7 +178,7 @@ const GUI = function(pars) {
   let saveToLocalStorage;
 
   Object.defineProperties(this,
-    /** @lends dat.gui.GUI.prototype */
+    /** @lends GUI.prototype */
     {
       /**
        * The parent <code>GUI</code>
@@ -478,14 +486,31 @@ dom.bind(window, 'keydown', GUI._keydownHandler, false);
 common.extend(
   GUI.prototype,
 
-  /** @lends dat.gui.GUI */
+  /** @lends GUI.prototype */
   {
 
     /**
-     * @param object
+     * Adds a new {@link Controller} to the GUI. The type of controller created
-     * @param property
+     * is inferred from the initial value of <code>object[property]</code>. For
-     * @returns {dat.controllers.Controller} The new controller that was added.
+     * color properties, see {@link addColor}.
+     *
+     * @param {Object} object The object to be manipulated
+     * @param {String} property The name of the property to be manipulated
+     * @param {Number} [min] Minimum allowed value
+     * @param {Number} [max] Maximum allowed value
+     * @param {Number} [step] Increment by which to change value
+     * @returns {Controller} The controller that was added to the GUI.
      * @instance
+     *
+     * @example
+     * // Add a string controller.
+     * var person = {name: 'Sam'};
+     * gui.add(person, 'name');
+     *
+     * @example
+     * // Add a number controller slider.
+     * var person = {age: 45};
+     * gui.add(person, 'age', 0, 100);
      */
     add: function(object, property) {
       return add(
@@ -499,10 +524,24 @@ common.extend(
     },
 
     /**
+     * Adds a new color controller to the GUI.
+     *
      * @param object
      * @param property
-     * @returns {dat.controllers.ColorController} The new controller that was added.
+     * @returns {Controller} The controller that was added to the GUI.
      * @instance
+     *
+     * @example
+     * var palette = {
+     *   color1: '#FF0000', // CSS string
+     *   color2: [ 0, 128, 255 ], // RGB array
+     *   color3: [ 0, 128, 255, 0.3 ], // RGB with alpha
+     *   color4: { h: 350, s: 0.9, v: 0.3 } // Hue, saturation, value
+     * };
+     * gui.addColor(palette, 'color1');
+     * gui.addColor(palette, 'color2');
+     * gui.addColor(palette, 'color3');
+     * gui.addColor(palette, 'color4');
      */
     addColor: function(object, property) {
       return add(
@@ -516,7 +555,8 @@ common.extend(
     },
 
     /**
-     * @param controller
+     * Removes the given controller from the GUI.
+     * @param {Controller} controller
      * @instance
      */
     remove: function(controller) {
@@ -529,6 +569,10 @@ common.extend(
       });
     },
 
+    /**
+     * Removes the GUI from the document and unbinds all event listeners.
+     * @instance
+     */
     destroy: function() {
       if (this.autoPlace) {
         autoPlaceContainer.removeChild(this.domElement);
@@ -543,6 +587,7 @@ common.extend(
     },
 
     /**
+     * Creates a new subfolder GUI instance.
      * @param name
      * @returns {dat.gui.GUI} The new folder.
      * @throws {Error} if this GUI already has a folder by the specified
@@ -583,6 +628,11 @@ common.extend(
       return gui;
     },
 
+    /**
+     * Removes a subfolder GUI instance.
+     * {dat.gui.GUI} folder The folder to remove.
+     * @instance
+     */
     removeFolder: function(folder) {
       this.__ul.removeChild(folder.domElement.parentElement);
 
@@ -601,10 +651,16 @@ common.extend(
       });
     },
 
+    /**
+     * Opens the GUI.
+     */
     open: function() {
       this.closed = false;
     },
 
+    /**
+     * Closes the GUI.
+     */
     close: function() {
       this.closed = true;
     },
@@ -650,9 +706,10 @@ common.extend(
      * the GUI grows. When remembering new objects, append them to the end
      * of the list.
      *
-     * @param {Object...} objects
+     * @param {...Object} objects
      * @throws {Error} if not called on a top level GUI.
      * @instance
+     * @ignore
      */
     remember: function() {
       if (common.isUndefined(SAVE_DIALOGUE)) {
@@ -793,6 +850,8 @@ common.extend(
  * @param gui
  * @param [newDom] If specified, inserts the dom content in the new row
  * @param [liBefore] If specified, places the new row before another row
+ *
+ * @ignore
  */
 function addRow(gui, newDom, liBefore) {
   const li = document.createElement('li');
@@ -1290,4 +1349,4 @@ function updateDisplays(controllerArray) {
   });
 }
 
-module.exports = GUI;
+export default GUI;

src/dat/gui/_structure.scss

@@ -89,7 +89,7 @@ $button-height: 20px;
 
     float: right;
     margin-right: 15px;
-    overflow-x: hidden;
+    overflow-y:visible;
 
     &.has-save > ul {
 
@@ -130,7 +130,6 @@ $button-height: 20px;
     cursor: auto;
     height: $row-height;
     line-height: $row-height;
-    overflow: visible;
     padding: 0 4px 0 5px;
   }
 
@@ -160,6 +159,7 @@ $button-height: 20px;
     clear: both;
     padding-left: 3px;
     height: $row-height;
+    overflow: hidden;
   }
 
   /** Name-half (left) */
@@ -225,6 +225,11 @@ $button-height: 20px;
     cursor: pointer;
   }
 
+  /** allow overflow for color selector */
+  .cr.color {
+    overflow: visible;
+  }
+
   .selector {
     display: none;
     position: absolute;

webpack/webpack.config.js

@@ -37,7 +37,8 @@ module.exports = {
         loader: 'babel',
         exclude: /(node_modules|bower_components)/,
         query: {
-          presets: [["es2015", {"loose": true}], "stage-0"]
+          presets: [["es2015", {"loose": true}], "stage-0"],
+          plugins: ["add-module-exports"]
         }
       },
       {