gulpfile

elements/Gui.js

@@ -1,5 +1,6 @@
 ( function( scope ) {
 
+    /* globals Path */    
     'use strict';
 
     var Gui = function( params ) {
@@ -10,15 +11,103 @@
 
         params = params || {};
 
-        var panel = document.createElement( 'gui-panel' );
+        // Properties
 
-        panel.autoPlace = params.autoPlace !== false;
+        this.defined = {};
+        this.localStorage = params.localStorage || false;
 
-        if ( panel.autoPlace ) {
-            document.body.appendChild( panel );
+        // Make domElement
+
+        this.panel = document.createElement( 'gui-panel' );
+        this.panel.autoPlace = params.autoPlace !== false;
+
+        if ( this.panel.autoPlace ) {
+            document.body.appendChild( this.panel );
         }
 
-        return 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( 'controller-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.define = function() {
+
+        var name, initialValue, args;
+
+        if ( arguments.length == 1 ) {
+            name = arguments[ 0 ];
+            return this.defined[ name ];
+        }
+
+        initialValue = arguments[ 1 ];
+        name = arguments[ 0 ];
+
+        args = [ this.defined, name ];
+        args = args.concat( Array.prototype.slice.call( arguments, 2 ) );
+
+        this.defined[ name ] = initialValue;
+
+        return this.add.apply( this, args );
+
+    };
+
+    Gui.prototype.listenAll = function() {
+
+        Gui.warn( 'controller.listenAll() is deprecated. All controllers are listened for free.' );
 
     };
 
@@ -83,7 +172,7 @@
     };
 
 
-    // Error
+    // Console
     // -------------------------------
 
     Gui.error = function() {

elements/controller-base/controller-base.js

@@ -54,8 +54,8 @@ Polymer( 'controller-base', {
 
     listen: function() {
 
-        Gui.warn( 'controller.listen() is deprecated. ' +
-           'All controllers are listened for free.' );
+        Gui.warn( 'controller.listen() is deprecated. All controllers are listened for free.' );
+        
         return this;
 
     },

elements/controller-number/controller-number.js

@@ -1,12 +1,7 @@
 /* globals Gui, Polymer */
 
-
-/*
-
-[ ] arrow keys
-[ ] min() max() step() commands of yore
-
-*/
+// [ ] arrow keys
+// [ ] min() max() step() commands of yore
 
 Gui.register( 'controller-number', function( value ) {
 

elements/gui-panel/gui-panel.js

@@ -1,5 +1,4 @@
-/* globals Polymer, Path, Gui */
-
+/* globals Polymer */
 
 // [ ] scrolling when docked
 // [ ] scrolling when window short and not docked
@@ -8,85 +7,8 @@ Polymer( 'gui-panel', {
 
     docked: false,
     open: true,
-    touch: ( 'ontouchstart' in window ) ||
-    ( !!window.DocumentTouch && document instanceof window.DocumentTouch ),
+    touch: ( 'ontouchstart' in window ) || ( !!window.DocumentTouch && document instanceof window.DocumentTouch ),
 
-    ready: function() {
-
-        this.domElement = this;
-
-        this.defined = {};
-
-    },
-
-    define: function() {
-
-        var name, initialValue, args;
-
-        if ( arguments.length == 1 ) {
-            name = arguments[ 0 ];
-            return this.defined[ name ];
-        }
-
-        initialValue = arguments[ 1 ];
-        name = arguments[ 0 ];
-
-        args = [ this.defined, name ];
-        args = args.concat( Array.prototype.slice.call( arguments, 2 ) );
-
-        this.defined[ name ] = initialValue;
-
-        return this.add.apply( this, args );
-
-    },
-
-    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( 'controller-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;
-
-    },
     
     // Observers
     // -------------------------------
@@ -96,7 +18,6 @@ Polymer( 'gui-panel', {
         if ( this.open || this.docked ) {
 
             // let the style sheet take care of things
-
             this.$.container.style.transform = '';
             this.$.panel.style.transform = '';
 
@@ -104,7 +25,6 @@ Polymer( 'gui-panel', {
 
             // todo: need the rest of the vendor prefixes ...
             // wish i could pipe javascript variables into styl.
-
             var y = -this.$.controllers.offsetHeight + 'px';
             this.$.container.style.transform = 'translate3d( 0, ' + y + ', 0 )';
 
@@ -118,6 +38,7 @@ Polymer( 'gui-panel', {
 
     },
 
+
     // Events
     // -------------------------------
 
@@ -127,16 +48,6 @@ Polymer( 'gui-panel', {
 
     toggleOpen: function() {
         this.open = !this.open;
-    },
-
-    // Legacy
-    // -------------------------------
-
-    listenAll: function() {
-
-        Gui.warn( 'controller.listenAll() is deprecated. All controllers are listened for free.' );
-
     }
 
-
 } );

elements/gui-panel/gui-panel.styl

@@ -1,7 +1,6 @@
 @import '../shared/shared'
 
 // redefine touch because we are the host ... 
-
 touch( val = true )
      { '.touch-' + val } &
         { block }
@@ -70,6 +69,8 @@ gui-button
         width row-height*1.5
         height row-height*1.5
         box-sizing border-box
+        background color-panel
+
 
     .docked-true.open-false &
         transform translate3d( - panel-width, 0, 0 )

examples/index.html

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

gulpfile.js

@@ -1,15 +1,11 @@
-'use strict';
-
 var gulp        = require( 'gulp' ),
     nib         = require( 'nib' ),
     fs          = require( 'fs' ),
     marked      = require( 'marked' ),
     karma       = require( 'karma' ),
     browserSync = require( 'browser-sync' ),
-    reload      = browserSync.reload,
     $           = require( 'gulp-load-plugins' )();
 
-
 var paths = {
     build:  [ 'elements/**/*.styl', 'elements/**/*.html', 'elements/**/*.js' , 'gui.html' ],
     lint:   [ 'gulpfile.js', 'elements/**/*.js' ],
@@ -36,23 +32,28 @@ gulp.task( 'watch', [ 'default' ], function() {
 gulp.task( 'build', [ 'vulcanize' ], function() {
 
     return gulp.src( 'build/gui.html' )
-               .pipe( $.replace( /\\/g, '\\\\' ) )
-               .pipe( $.replace( /'/g, '\\\'' ) )
-               .pipe( $.replace( /^(.*)$/gm, '\'$1\',' ) )
-               .pipe( $.insert.wrap( 'document.write([', '].join("\\n"))' ) )
-               .pipe( $.rename( 'gui.js' ) )
-               .pipe( gulp.dest( 'build' ) );
+       .pipe( $.replace( /\\/g, '\\\\' ) )
+       .pipe( $.replace( /'/g, '\\\'' ) )
+       .pipe( $.replace( /^(.*)$/gm, '\'$1\',' ) )
+       .pipe( $.insert.wrap( 'document.write([', '].join("\\n"))' ) )
+       .pipe( $.rename( 'gui.js' ) )
+       .pipe( gulp.dest( 'build' ) );
 
 } );
 
 gulp.task( 'vulcanize', [ 'css' ], function() {
 
     return gulp.src( 'gui.html' )
-    .pipe( $.vulcanize( {
-        dest: 'build',
-        inline: true,
-        strip: true
-    } ) );
+        .pipe( $.vulcanize( {
+            dest: 'build',
+            inline: true,
+            strip: true
+        } ) )
+       // clean up some vulcanize ... 
+       .pipe( $.replace( /\n\n/gm, '' ) )
+       .pipe( $.replace( /<!-- .* -->/gm, '' ) )
+       .pipe( $.replace( /^<div hidden>undefined<\/div>\n/gm, '' ) )
+       .pipe( gulp.dest( 'build' ) );
 
 } );
 
@@ -61,17 +62,17 @@ gulp.task( 'lint', [ 'jscs', 'jshint' ] );
 gulp.task( 'jscs', function() {
 
     return gulp.src( paths.lint )
-               .pipe( $.jscs() );
+       .pipe( $.jscs() );
 
 } );
 
 gulp.task( 'jshint', function() {
 
     return gulp.src( paths.lint )
-    .pipe( reload( { stream: true, once: true } ) )
-    .pipe( $.jshint( '.jshintrc' ) )
-    .pipe( $.jshint.reporter( 'jshint-stylish' ) )
-    .pipe( $.if( !browserSync.active, $.jshint.reporter( 'fail' ) ) );
+        .pipe( browserSync.reload( { stream: true, once: true } ) )
+        .pipe( $.jshint( '.jshintrc' ) )
+        .pipe( $.jshint.reporter( 'jshint-stylish' ) )
+        .pipe( $.if( !browserSync.active, $.jshint.reporter( 'fail' ) ) );
 
 } );
 
@@ -91,23 +92,23 @@ gulp.task( 'docs', function() {
     };
 
     return gulp.src( 'docs/template.html' )
-    .pipe( $.plates( content ) )
-    .pipe( $.rename( 'index.html' ) )
-    .pipe( gulp.dest( './' ) );
+        .pipe( $.plates( content ) )
+        .pipe( $.rename( 'index.html' ) )
+        .pipe( gulp.dest( './' ) );
 
 } );
 
 gulp.task( 'clean', function() {
 
     return gulp.src( paths.clean )
-    .pipe( $.rimraf() );
+        .pipe( $.rimraf() );
 
 } );
 
 function css( src, dest ) {
 
     return gulp.src( src )
-    .pipe( $.stylus( { use: [ nib() ] } ) )
-    .pipe( gulp.dest( dest ) );
+        .pipe( $.stylus( { use: [ nib() ] } ) )
+        .pipe( gulp.dest( dest ) );
 
 }