Fixing dat.gui issues

.eslintrc

@@ -1,3 +1,8 @@
 {
-  "extends": "eslint-config-airbnb"
+  "extends": "eslint-config-airbnb",
+  "rules": {
+    "comma-dangle": 0,
+    "func-names": 0,
+    "no-alert": 0
+  }
 }

bower.json

@@ -1,12 +1,12 @@
 {
-  "name": "dat-gui",
-  "version": "0.5.0",
+  "name": "dat.gui",
+  "version": "0.6.0",
   "homepage": "https://github.com/dataarts/dat.gui",
   "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

@@ -41,7 +41,16 @@
     };
 
     var gui = new dat.gui.GUI();
-    gui.add(obj.example, 'message');
+
+    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');

package.json

@@ -26,8 +26,11 @@
     "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",

src/dat/color/Color.js

@@ -74,7 +74,6 @@ defineHSVComponent(Color.prototype, 's');
 defineHSVComponent(Color.prototype, 'v');
 
 Object.defineProperty(Color.prototype, 'a', {
-
   get: function () {
     return this.__state.a;
   },
@@ -100,7 +99,6 @@ Object.defineProperty(Color.prototype, 'hex', {
 });
 
 function defineRGBComponent(target, component, componentHexIndex) {
-
   Object.defineProperty(target, component, {
     get: function () {
       if (this.__state.space === 'RGB') {
@@ -126,8 +124,9 @@ function defineRGBComponent(target, component, componentHexIndex) {
 function defineHSVComponent(target, component) {
   Object.defineProperty(target, component, {
     get: function () {
-      if (this.__state.space === 'HSV')
+      if (this.__state.space === 'HSV') {
         return this.__state[component];
+      }
 
       Color.recalculateHSV(this);
 

src/dat/color/interpret.js

@@ -11,46 +11,20 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-import * as toString from './toString';
+import toString from './toString';
 import common from '../utils/common';
 
-var result, toReturn;
-
-var interpret = function () {
-  toReturn = false;
-
-  var 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;
-};
-
-var INTERPRETATIONS = [
+const 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;
+        read: function(original) {
+          const test = original.match(/^#([A-F0-9])([A-F0-9])([A-F0-9])$/i);
+          if (test === null) {
+            return false;
+          }
 
           return {
             space: 'HEX',
@@ -58,35 +32,35 @@ var INTERPRETATIONS = [
               '0x' +
               test[1].toString() + test[1].toString() +
               test[2].toString() + test[2].toString() +
-              test[3].toString() + test[3].toString())
+              test[3].toString() + test[3].toString(), 0)
           };
-
         },
 
         write: toString
       },
 
       SIX_CHAR_HEX: {
-        read: function (original) {
-
-          var test = original.match(/^#([A-F0-9]{6})$/i);
-          if (test === null) return false;
+        read: function(original) {
+          const test = original.match(/^#([A-F0-9]{6})$/i);
+          if (test === null) {
+            return false;
+          }
 
           return {
             space: 'HEX',
-            hex: parseInt('0x' + test[1].toString())
+            hex: parseInt('0x' + test[1].toString(), 0)
           };
-
         },
 
         write: toString
       },
 
       CSS_RGB: {
-        read: function (original) {
-
-          var test = original.match(/^rgb\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/);
-          if (test === null) return false;
+        read: function(original) {
+          const test = original.match(/^rgb\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/);
+          if (test === null) {
+            return false;
+          }
 
           return {
             space: 'RGB',
@@ -94,17 +68,17 @@ var INTERPRETATIONS = [
             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;
+        read: function(original) {
+          const test = original.match(/^rgba\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\,\s*(.+)\s*\)/);
+          if (test === null) {
+            return false;
+          }
 
           return {
             space: 'RGB',
@@ -127,15 +101,15 @@ var INTERPRETATIONS = [
     conversions: {
 
       HEX: {
-        read: function (original) {
+        read: function(original) {
           return {
             space: 'HEX',
             hex: original,
             conversionName: 'HEX'
-          }
+          };
         },
 
-        write: function (color) {
+        write: function(color) {
           return color.hex;
         }
       }
@@ -148,10 +122,12 @@ var INTERPRETATIONS = [
   {
     litmus: common.isArray,
     conversions: {
-
       RGB_ARRAY: {
-        read: function (original) {
-          if (original.length != 3) return false;
+        read: function(original) {
+          if (original.length !== 3) {
+            return false;
+          }
+
           return {
             space: 'RGB',
             r: original[0],
@@ -160,14 +136,14 @@ var INTERPRETATIONS = [
           };
         },
 
-        write: function (color) {
+        write: function(color) {
           return [color.r, color.g, color.b];
         }
       },
 
       RGBA_ARRAY: {
-        read: function (original) {
-          if (original.length != 4) return false;
+        read: function(original) {
+          if (original.length !== 4) return false;
           return {
             space: 'RGB',
             r: original[0],
@@ -177,7 +153,7 @@ var INTERPRETATIONS = [
           };
         },
 
-        write: function (color) {
+        write: function(color) {
           return [color.r, color.g, color.b, color.a];
         }
       }
@@ -186,13 +162,11 @@ var INTERPRETATIONS = [
 
   // Objects
   {
-
     litmus: common.isObject,
-
     conversions: {
 
       RGBA_OBJ: {
-        read: function (original) {
+        read: function(original) {
           if (common.isNumber(original.r) &&
             common.isNumber(original.g) &&
             common.isNumber(original.b) &&
@@ -203,23 +177,23 @@ var INTERPRETATIONS = [
               g: original.g,
               b: original.b,
               a: original.a
-            }
+            };
           }
           return false;
         },
 
-        write: function (color) {
+        write: function(color) {
           return {
             r: color.r,
             g: color.g,
             b: color.b,
             a: color.a
-          }
+          };
         }
       },
 
       RGB_OBJ: {
-        read: function (original) {
+        read: function(original) {
           if (common.isNumber(original.r) &&
             common.isNumber(original.g) &&
             common.isNumber(original.b)) {
@@ -228,22 +202,22 @@ var INTERPRETATIONS = [
               r: original.r,
               g: original.g,
               b: original.b
-            }
+            };
           }
           return false;
         },
 
-        write: function (color) {
+        write: function(color) {
           return {
             r: color.r,
             g: color.g,
             b: color.b
-          }
+          };
         }
       },
 
       HSVA_OBJ: {
-        read: function (original) {
+        read: function(original) {
           if (common.isNumber(original.h) &&
             common.isNumber(original.s) &&
             common.isNumber(original.v) &&
@@ -254,23 +228,23 @@ var INTERPRETATIONS = [
               s: original.s,
               v: original.v,
               a: original.a
-            }
+            };
           }
           return false;
         },
 
-        write: function (color) {
+        write: function(color) {
           return {
             h: color.h,
             s: color.s,
             v: color.v,
             a: color.a
-          }
+          };
         }
       },
 
       HSV_OBJ: {
-        read: function (original) {
+        read: function(original) {
           if (common.isNumber(original.h) &&
             common.isNumber(original.s) &&
             common.isNumber(original.v)) {
@@ -279,21 +253,48 @@ var INTERPRETATIONS = [
               h: original.h,
               s: original.s,
               v: original.v
-            }
+            };
           }
           return false;
         },
 
-        write: function (color) {
+        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/toString.js

@@ -13,17 +13,14 @@
 
 import common from '../utils/common';
 
-var colorToString = function (color) {
-  if (color.a == 1 || common.isUndefined(color.a)) {
-    var s = color.hex.toString(16);
+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;
-  } else {
-    return 'rgba(' + Math.round(color.r) + ',' + Math.round(color.g) + ',' + Math.round(color.b) + ',' + color.a + ')';
   }
-};
 
-export default colorToString;
+  return 'rgba(' + Math.round(color.r) + ',' + Math.round(color.g) + ',' + Math.round(color.b) + ',' + color.a + ')';
+};

src/dat/controllers/Controller.js

@@ -64,7 +64,7 @@ class Controller {
    *
    * @param {Function} fnc This function will be called whenever the value
    * is modified via this Controller.
-   * @returns {dat.controllers.Controller} this
+   * @returns {Controller} this
    */
   onChange(fnc) {
     this.__onChange = fnc;
@@ -78,7 +78,7 @@ class Controller {
    *
    * @param {Function} fnc This function will be called whenever
    * someone "finishes" changing the value via this Controller.
-   * @returns {dat.controllers.Controller} this
+   * @returns {Controller} this
    */
   onFinishChange(fnc) {
     this.__onFinishChange = fnc;
@@ -95,6 +95,7 @@ class Controller {
     if (this.__onChange) {
       this.__onChange.call(this, newValue);
     }
+
     this.updateDisplay();
     return this;
   }
@@ -111,7 +112,7 @@ class Controller {
   /**
    * Refreshes the visual display of a Controller in order to keep sync
    * with the object's current value.
-   * @returns {dat.controllers.Controller} this
+   * @returns {Controller} this
    */
   updateDisplay() {
     return this;

src/dat/controllers/FunctionController.js

@@ -33,6 +33,7 @@ class FunctionController extends Controller{
 
     this.__button = document.createElement('div');
     this.__button.innerHTML = text === undefined ? 'Fire' : text;
+
     dom.bind(this.__button, 'click', function (e) {
       e.preventDefault();
       _this.fire();

src/dat/dom/CenteredDiv.js

@@ -14,96 +14,97 @@
 import dom from '../dom/dom';
 import common from '../utils/common';
 
-var CenteredDiv = function () {
+class CenteredDiv {
+  constructor() {
 
-  this.backgroundElement = document.createElement('div');
-  common.extend(this.backgroundElement.style, {
-    backgroundColor: 'rgba(0,0,0,0.8)',
-    top: 0,
-    left: 0,
-    display: 'none',
-    zIndex: '1000',
-    opacity: 0,
-    WebkitTransition: 'opacity 0.2s linear',
-    transition: 'opacity 0.2s linear'
-  });
+    this.backgroundElement = document.createElement('div');
+    common.extend(this.backgroundElement.style, {
+      backgroundColor: 'rgba(0,0,0,0.8)',
+      top: 0,
+      left: 0,
+      display: 'none',
+      zIndex: '1000',
+      opacity: 0,
+      WebkitTransition: 'opacity 0.2s linear',
+      transition: 'opacity 0.2s linear'
+    });
 
-  dom.makeFullscreen(this.backgroundElement);
-  this.backgroundElement.style.position = 'fixed';
+    dom.makeFullscreen(this.backgroundElement);
+    this.backgroundElement.style.position = 'fixed';
 
-  this.domElement = document.createElement('div');
-  common.extend(this.domElement.style, {
-    position: 'fixed',
-    display: 'none',
-    zIndex: '1001',
-    opacity: 0,
-    WebkitTransition: '-webkit-transform 0.2s ease-out, opacity 0.2s linear',
-    transition: 'transform 0.2s ease-out, opacity 0.2s linear'
-  });
+    this.domElement = document.createElement('div');
+    common.extend(this.domElement.style, {
+      position: 'fixed',
+      display: 'none',
+      zIndex: '1001',
+      opacity: 0,
+      WebkitTransition: '-webkit-transform 0.2s ease-out, opacity 0.2s linear',
+      transition: 'transform 0.2s ease-out, opacity 0.2s linear'
+    });
 
 
-  document.body.appendChild(this.backgroundElement);
-  document.body.appendChild(this.domElement);
+    document.body.appendChild(this.backgroundElement);
+    document.body.appendChild(this.domElement);
 
-  var _this = this;
-  dom.bind(this.backgroundElement, 'click', function () {
-    _this.hide();
-  });
+    var _this = this;
+    dom.bind(this.backgroundElement, 'click', function () {
+      _this.hide();
+    });
+  }
 
+  show() {
+    var _this = this;
 
-};
+    this.backgroundElement.style.display = 'block';
 
-CenteredDiv.prototype.show = function () {
-
-  var _this = this;
-
-  this.backgroundElement.style.display = 'block';
-
-  this.domElement.style.display = 'block';
-  this.domElement.style.opacity = 0;
+    this.domElement.style.display = 'block';
+    this.domElement.style.opacity = 0;
 //    this.domElement.style.top = '52%';
-  this.domElement.style.webkitTransform = 'scale(1.1)';
+    this.domElement.style.webkitTransform = 'scale(1.1)';
 
-  this.layout();
+    this.layout();
 
-  common.defer(function () {
-    _this.backgroundElement.style.opacity = 1;
-    _this.domElement.style.opacity = 1;
-    _this.domElement.style.webkitTransform = 'scale(1)';
-  });
-
-};
-
-CenteredDiv.prototype.hide = function () {
-
-  var _this = this;
-
-  var 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);
+    common.defer(function () {
+      _this.backgroundElement.style.opacity = 1;
+      _this.domElement.style.opacity = 1;
+      _this.domElement.style.webkitTransform = 'scale(1)';
+    });
 
   };
 
-  dom.bind(this.domElement, 'webkitTransitionEnd', hide);
-  dom.bind(this.domElement, 'transitionend', hide);
-  dom.bind(this.domElement, 'oTransitionEnd', hide);
+  /**
+   * Hide centered div
+   */
+  hide() {
+    var _this = this;
 
-  this.backgroundElement.style.opacity = 0;
+    var 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);
+    dom.bind(this.domElement, 'transitionend', hide);
+    dom.bind(this.domElement, 'oTransitionEnd', hide);
+
+    this.backgroundElement.style.opacity = 0;
 //    this.domElement.style.top = '48%';
-  this.domElement.style.opacity = 0;
-  this.domElement.style.webkitTransform = 'scale(1.1)';
+    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';
-};
+  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';
+  }
+}
 
 function lockScroll(e) {
   console.log(e);

src/dat/utils/common.js

@@ -67,6 +67,7 @@ const Common = {
       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;

webpack/webpack.config.js

@@ -1,43 +1,48 @@
 var path = require("path");
 
 module.exports = {
-    target: 'web',
+  target: 'web',
 
-    context: path.resolve(__dirname, '..', 'src'),
+  context: path.resolve(__dirname, '..', 'src'),
 
-    entry: {
-        main: '../index'
-    },
+  entry: {
+    main: '../index'
+  },
 
-    module: {
-        loaders: [
-            {
-                test: /\.jsx?$/,
-                exclude: /(node_modules|bower_components)/,
-                loader: 'babel'
-            },
-            {
-                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'
-            }
-        ]
-    },
+  module: {
+    loaders: [
+      {
+        test: /\.jsx?$/,
+        exclude: /(node_modules|bower_components)/,
+        loader: 'babel'
+      },
+      /*
+      {
+        test: /\.js$/, loader: 'eslint-loader', exclude: /node_modules/
+      },
+      //*/
+      {
+        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'
-    }
+  output: {
+    path: path.join(__dirname, '..', 'build'),
+    filename: 'dat.gui.js',
+    library: ['dat'],
+    libraryTarget: 'umd'
+  }
 };