refactor Gui.js - element

TODO.md

@@ -24,7 +24,7 @@ BUILD
 REFACTOR
 
 - [x] gui.define* => gui.var*
-- [ ] Gui.js => gui-panel => dat-gui
+- [x] Gui.js => gui-panel => dat-gui
 - [x] controller-* => dat-gui-*
 - [x] kill strict
 - [x] Reorg gulpfile and add standardized formatting

dat-gui.html

@@ -1,5 +1,5 @@
 <!-- TODO: move this into dat-gui.html -->
-<script src="elements/Gui.js"></script>
+<!-- <script src="elements/Gui.js"></script> -->
 
 <!-- base elements -->
 <link rel="import" href="elements/dat-gui/dat-gui.html">

elements/Gui.js

@@ -1,231 +0,0 @@
-( function( scope ) {
-
-/* globals Path */
-
-var Gui = function( params ) {
-
-    if ( !ready ) {
-        Gui.error( 'Gui not ready. Put your code inside Gui.ready()' );
-    }
-
-    params = params || {};
-
-    // Properties
-
-    this.vars = {};
-    this.localStorage = params.localStorage || false;
-
-    // Make domElement
-
-    this.panel = document.createElement( 'dat-gui' );
-    this.panel.autoPlace = params.autoPlace !== false;
-
-    if ( this.panel.autoPlace ) {
-        document.body.appendChild( this.panel );
-    }
-
-};
-
-
-// Instance methods
-// -------------------------------
-
-Gui.prototype.add = function( object, path ) {
-
-    // Make controller
-
-    var value = Path.get( path ).getValueFrom( object );
-
-    if ( value === null || value === undefined ) {
-        return Gui.error( object + ' doesn\'t have a value for path "' + path + '".' );
-    }
-
-    var args = Array.prototype.slice.call( arguments, 2 );
-    var controller;
-
-    if ( args[ 0 ] instanceof Array || typeof args[ 0 ] == 'object' ) {
-        controller = document.createElement( 'dat-gui-option' );
-    } else {
-        controller = Gui.getController( value );
-    }
-
-    if ( !controller ) {
-        return Gui.error( 'Unrecognized type:', value );
-    }
-
-    controller.watch( object, path );
-    controller.init.apply( controller, args );
-
-    // Make row
-
-    var row = document.createElement( 'gui-row' );
-    row.name = path;
-
-    controller.row = row;
-
-    controller.name = function( name ) {
-        row.name = name;
-    };
-
-    controller.comment = function( comment ) {
-        row.comment = comment;
-    };
-
-    row.appendChild( controller );
-    this.panel.appendChild( row );
-
-    return controller;
-
-};
-
-Gui.prototype.remember = function( object ) {};
-
-Gui.prototype.var = function() {
-
-    var name, initialValue, args;
-
-    if ( arguments.length == 1 ) {
-        name = arguments[ 0 ];
-        return this.vars[ name ];
-    }
-
-    initialValue = arguments[ 1 ];
-    name = arguments[ 0 ];
-
-    args = [ this.vars, name ];
-    args = args.concat( Array.prototype.slice.call( arguments, 2 ) );
-
-    this.vars[ name ] = initialValue;
-
-    return this.add.apply( this, args );
-
-};
-
-Gui.prototype.listenAll = function() {
-
-    Gui.warn( 'controller.listenAll() is deprecated. All controllers are listened for free.' );
-
-};
-
-
-// Register custom controllers
-// -------------------------------
-
-var controllers = {};
-
-Gui.register = function( elementName, test ) {
-
-    controllers[ elementName ] = test;
-
-};
-
-
-// Returns a controller based on a value
-// -------------------------------
-
-Gui.getController = function( value ) {
-
-    for ( var type in controllers ) {
-
-        var test = controllers[ type ];
-
-        if ( test( value ) ) {
-
-            return document.createElement( type );
-
-        }
-
-    }
-
-};
-
-
-// Gui ready handler ... * shakes fist at polymer *
-// -------------------------------
-
-var ready = false;
-var readyHandlers = [];
-
-document.addEventListener( 'polymer-ready', function() {
-
-    ready = true;
-    readyHandlers.forEach( function( fnc ) {
-
-        fnc();
-
-    } );
-
-} );
-
-Gui.ready = function( fnc ) {
-
-    if ( ready ) {
-        fnc();
-    } else {
-        readyHandlers.push( fnc );
-    }
-
-};
-
-
-// Console
-// -------------------------------
-
-Gui.error = function() {
-    var args = Array.prototype.slice.apply( arguments );
-    args.unshift( 'dat-gui ::' );
-    console.error.apply( console, args );
-};
-
-Gui.warn = function() {
-    var args = Array.prototype.slice.apply( arguments );
-    args.unshift( 'dat-gui ::' );
-    console.warn.apply( console, args );
-};
-
-
-// Old namespaces
-// -------------------------------
-
-var dat = {};
-
-dat.gui = {};
-dat.gui.GUI = Gui;
-dat.GUI = dat.gui.GUI;
-
-dat.color = {};
-dat.color.Color = function() {};
-
-dat.dom = {};
-dat.dom.dom = function() {};
-
-dat.controllers = {};
-dat.controllers.Controller = constructor( 'dat-gui-base' );
-dat.controllers.NumberController = constructor( 'dat-gui-number' );
-dat.controllers.FunctionController = constructor( 'dat-gui-function' );
-dat.controllers.ColorController = constructor( 'dat-gui-color' );
-dat.controllers.BooleanController = constructor( 'dat-gui-boolean' );
-dat.controllers.OptionController = constructor( 'dat-gui-option' );
-
-dat.controllers.NumberControllerBox = dat.controllers.NumberController;
-dat.controllers.NumberControllerSlider = dat.controllers.NumberController;
-
-function constructor( elementName ) {
-
-    return function( object, path ) {
-        var el = document.createElement( elementName );
-        el.watch( object, path );
-        return el;
-    };
-
-}
-
-
-// Export
-// -------------------------------
-
-scope.dat = dat;
-scope.Gui = Gui;
-
-
-})( this );

elements/dat-gui/dat-gui.js

@@ -1,4 +1,4 @@
-/* globals Polymer */
+/* globals Polymer, Path, Gui */
 
 // [ ] scrolling when docked
 // [ ] scrolling when window short and not docked
@@ -9,6 +9,100 @@ Polymer( 'dat-gui', {
     open: true,
     touch: ( 'ontouchstart' in window ) || ( !!window.DocumentTouch && document instanceof window.DocumentTouch ),
 
+    ready: function() {
+
+        this.vars = {};
+
+    },
+
+    // "Public" API
+    // ------------------------------- 
+
+    add: function( object, path ) {
+
+        // Make controller
+
+        var value = Path.get( path ).getValueFrom( object );
+
+        if ( value === null || value === undefined ) {
+            return Gui.error( object + ' doesn\'t have a value for path "' + path + '".' );
+        }
+
+        var args = Array.prototype.slice.call( arguments, 2 );
+        var controller;
+
+        if ( args[ 0 ] instanceof Array || typeof args[ 0 ] == 'object' ) {
+            controller = document.createElement( 'dat-gui-option' );
+        } else {
+            controller = Gui.getController( value );
+        }
+
+        if ( !controller ) {
+            return Gui.error( 'Unrecognized type:', value );
+        }
+
+        controller.watch( object, path );
+        controller.init.apply( controller, args );
+
+        // Make row
+
+        var row = document.createElement( 'gui-row' );
+        row.name = path;
+
+        controller.row = row;
+
+        controller.name = function( name ) {
+            row.name = name;
+        };
+
+        controller.comment = function( comment ) {
+            row.comment = comment;
+        };
+
+        row.appendChild( controller );
+        this.appendChild( row );
+
+        return controller;
+
+    },
+
+    var: function() {
+
+        var name, initialValue, args;
+
+        if ( arguments.length == 1 ) {
+            name = arguments[ 0 ];
+            return this.vars[ name ];
+        }
+
+        initialValue = arguments[ 1 ];
+        name = arguments[ 0 ];
+
+        args = [ this.vars, name ];
+        args = args.concat( Array.prototype.slice.call( arguments, 2 ) );
+
+        this.vars[ name ] = initialValue;
+
+        return this.add.apply( this, args );
+
+    },
+
+    remember: function( object ) {
+
+        // todo
+
+    },
+
+
+    // Legacy
+    // ------------------------------- 
+
+    listAll: function() {
+
+        Gui.warn( 'controller.listenAll() is deprecated. All controllers are listened for free.' );
+
+    },
+
 
     // Observers
     // -------------------------------
@@ -51,3 +145,157 @@ Polymer( 'dat-gui', {
     }
 
 } );
+
+( function( scope ) {
+
+/* globals Path */
+
+var Gui = function( params ) {
+
+
+    if ( !ready ) {
+        Gui.error( 'Gui not ready. Put your code inside Gui.ready()' );
+    }
+
+    params = params || {};
+
+    // Properties
+
+    this.localStorage = params.localStorage || false;
+
+    // Make domElement
+
+    var panel = document.createElement( 'dat-gui' );
+
+    panel.autoPlace = params.autoPlace !== false;
+
+    if ( panel.autoPlace ) {
+        document.body.appendChild( panel );
+    }
+
+    return panel;
+
+};
+
+
+// Register custom controllers
+// -------------------------------
+
+var controllers = {};
+
+Gui.register = function( elementName, test ) {
+
+    controllers[ elementName ] = test;
+
+};
+
+
+// Returns a controller based on a value
+// -------------------------------
+
+Gui.getController = function( value ) {
+
+    for ( var type in controllers ) {
+
+        var test = controllers[ type ];
+
+        if ( test( value ) ) {
+
+            return document.createElement( type );
+
+        }
+
+    }
+
+};
+
+
+// Gui ready handler ... * shakes fist at polymer *
+// -------------------------------
+
+var ready = false;
+var readyHandlers = [];
+
+document.addEventListener( 'polymer-ready', function() {
+
+    ready = true;
+    readyHandlers.forEach( function( fnc ) {
+
+        fnc();
+
+    } );
+
+} );
+
+Gui.ready = function( fnc ) {
+
+    if ( ready ) {
+        fnc();
+    } else {
+        readyHandlers.push( fnc );
+    }
+
+};
+
+
+// Console
+// -------------------------------
+
+Gui.error = function() {
+    var args = Array.prototype.slice.apply( arguments );
+    args.unshift( 'dat-gui ::' );
+    console.error.apply( console, args );
+};
+
+Gui.warn = function() {
+    var args = Array.prototype.slice.apply( arguments );
+    args.unshift( 'dat-gui ::' );
+    console.warn.apply( console, args );
+};
+
+
+// Old namespaces
+// -------------------------------
+
+var dat = {};
+
+dat.gui = {};
+dat.gui.GUI = Gui;
+dat.GUI = dat.gui.GUI;
+
+dat.color = {};
+dat.color.Color = function() {};
+
+dat.dom = {};
+dat.dom.dom = function() {};
+
+dat.controllers = {};
+dat.controllers.Controller = constructor( 'dat-gui-base' );
+dat.controllers.NumberController = constructor( 'dat-gui-number' );
+dat.controllers.FunctionController = constructor( 'dat-gui-function' );
+dat.controllers.ColorController = constructor( 'dat-gui-color' );
+dat.controllers.BooleanController = constructor( 'dat-gui-boolean' );
+dat.controllers.OptionController = constructor( 'dat-gui-option' );
+
+dat.controllers.NumberControllerBox = dat.controllers.NumberController;
+dat.controllers.NumberControllerSlider = dat.controllers.NumberController;
+
+function constructor( elementName ) {
+
+    return function( object, path ) {
+        var el = document.createElement( elementName );
+        el.watch( object, path );
+        return el;
+    };
+
+}
+
+
+// Export
+// -------------------------------
+
+scope.dat = dat;
+scope.Gui = Gui;
+
+
+})( this );

examples/index.html

@@ -43,11 +43,11 @@
 
         var gui = new Gui();
 
-        gui.panel.docked = true;
+        gui.docked = true;
 
-        gui.add( gui, 'panel.docked' );
+        gui.add( gui, 'docked' );
 
-        var r = gui.add( gui, 'panel.open' );
+        var r = gui.add( gui, 'open' );
         gui.add( r.row, 'name' );
 
         gui.add( object, 'boolean' );

gulpfile.js

@@ -31,7 +31,7 @@ var gulp = require( 'gulp' );
 
 gulp.task( 'default', [ 'dev' ] );
 
-gulp.task( 'build', [ 'readme', 'lint', 'vulcanize', 'shim' ], function() {
+gulp.task( 'build', [ 'readme', 'vulcanize', 'shim' ], function() {
     return gulp.src( 'build/dat-gui.html' )
         .pipe( $.replace( /\\/g, '\\\\' ) )
         .pipe( $.replace( /'/g, '\\\'' ) )
@@ -42,7 +42,7 @@ gulp.task( 'build', [ 'readme', 'lint', 'vulcanize', 'shim' ], function() {
 
 } );
 
-gulp.task( 'dev', [ 'watch', 'test', 'serve' ] );
+gulp.task( 'dev', [ 'watch', 'serve' ] );
 
 gulp.task( 'docs', [ 'style', 'readme' ] );
 
@@ -59,16 +59,16 @@ gulp.task( 'test', function() {
 
 } );
 
-gulp.task( 'watch', [ 'build' ], function() {
+gulp.task( 'watch', [ 'build', 'test' ], function() {
     // watches and builds all tasks
-    // gulp.watch( paths.html.concat(paths.styl).concat(paths.js).concat(paths.shim), [ 'build' ] );
 
+    gulp.watch( paths.build, [ 'build' ] );
     gulp.watch( paths.docs, [ 'readme' ] );
     gulp.watch( paths.styl, [ 'style' ] );
 
-    gulp.watch( paths.html.concat( paths.styl )
+    // gulp.watch( paths.html.concat( paths.styl )
-        .concat( paths.js ).concat( paths.shim )
+    //     .concat( paths.js ).concat( paths.shim )
-        .concat( paths.docs ), [ 'reload' ] );
+    //     .concat( paths.docs ), [ 'reload' ] );
 
     // fmt
     $.watch( paths.js, {
@@ -76,6 +76,7 @@ gulp.task( 'watch', [ 'build' ], function() {
     } )
         .pipe( $.esformatter( formattingOptions ) )
         .pipe( gulp.dest( './' ) );
+
 } );
 
 ////////////////////////////////////////////////
@@ -197,6 +198,12 @@ var paths = {
     test: [ 'build/dat-gui.js', 'tests/*.js' ]
 };
 
+paths.build = []
+    .concat( paths.html )
+    .concat( paths.styl )
+    .concat( paths.js )
+    .concat( paths.shim );
+
 var formattingOptions = {
     'preset': 'jquery',
     'plugins': [