-
-
-
-
-
+
-undefined
-
-
-
+},_register:function(){c(this.extends)&&!b(this.extends)&&console.warn("%s is attempting to extend %s, an unregistered element or one that was not registered with Polymer.",this.name,this.extends),this.register(this.name,this.extends),this.registered=!0},waitingForPrototype:function(a){return h(a)?void 0:(i(a,this),this.handleNoScript(a),!0)},handleNoScript:function(a){this.hasAttribute("noscript")&&!this.noscript&&(this.noscript=!0,Polymer(a))},waitingForResources:function(){return this._needsResources},waitingForQueue:function(){return f.enqueue(this,this.registerWhenReady,this._register)},loadResources:function(){this._needsResources=!0,this.loadStyles(function(){this._needsResources=!1,this.registerWhenReady()}.bind(this))}});e.publish(e.declaration,j),g(function(){document.body.removeAttribute("unresolved"),document.dispatchEvent(new CustomEvent("polymer-ready",{bubbles:!0}))}),document.registerElement("polymer-element",{prototype:j})}(Polymer),function(){var a=document.createElement("polymer-element");a.setAttribute("name","auto-binding"),a.setAttribute("extends","template"),a.init(),Polymer("auto-binding",{createdCallback:function(){this.syntax=this.bindingDelegate=this.makeSyntax(),Polymer.whenPolymerReady(function(){this.model=this,this.setAttribute("bind",""),this.async(function(){this.marshalNodeReferences(this.parentNode),this.fire("template-bound")})}.bind(this))},makeSyntax:function(){var a=Object.create(Polymer.api.declaration.events),b=this;a.findController=function(){return b.model};var c=new PolymerExpressions,d=c.prepareBinding;return c.prepareBinding=function(b,e,f){return a.prepareEventBinding(b,e,f)||d.call(c,b,e,f)},c}})}();
+
diff --git a/build/gui.js b/build/gui.js
old mode 100644
new mode 100755
index 16eaee5..0b0af98
--- a/build/gui.js
+++ b/build/gui.js
@@ -3,18 +3,11 @@ document.write(['',
-'',
-'',
-'',
-'',
-'',
+'',
'',
-'undefined
',
-'',
-'',
-'',
+'},_register:function(){c(this.extends)&&!b(this.extends)&&console.warn("%s is attempting to extend %s, an unregistered element or one that was not registered with Polymer.",this.name,this.extends),this.register(this.name,this.extends),this.registered=!0},waitingForPrototype:function(a){return h(a)?void 0:(i(a,this),this.handleNoScript(a),!0)},handleNoScript:function(a){this.hasAttribute("noscript")&&!this.noscript&&(this.noscript=!0,Polymer(a))},waitingForResources:function(){return this._needsResources},waitingForQueue:function(){return f.enqueue(this,this.registerWhenReady,this._register)},loadResources:function(){this._needsResources=!0,this.loadStyles(function(){this._needsResources=!1,this.registerWhenReady()}.bind(this))}});e.publish(e.declaration,j),g(function(){document.body.removeAttribute("unresolved"),document.dispatchEvent(new CustomEvent("polymer-ready",{bubbles:!0}))}),document.registerElement("polymer-element",{prototype:j})}(Polymer),function(){var a=document.createElement("polymer-element");a.setAttribute("name","auto-binding"),a.setAttribute("extends","template"),a.init(),Polymer("auto-binding",{createdCallback:function(){this.syntax=this.bindingDelegate=this.makeSyntax(),Polymer.whenPolymerReady(function(){this.model=this,this.setAttribute("bind",""),this.async(function(){this.marshalNodeReferences(this.parentNode),this.fire("template-bound")})}.bind(this))},makeSyntax:function(){var a=Object.create(Polymer.api.declaration.events),b=this;a.findController=function(){return b.model};var c=new PolymerExpressions,d=c.prepareBinding;return c.prepareBinding=function(b,e,f){return a.prepareEventBinding(b,e,f)||d.call(c,b,e,f)},c}})}();',
+'',
'',
'',
'',
diff --git a/elements/Gui.js b/elements/Gui.js
index d463a79..2b96e6e 100644
--- a/elements/Gui.js
+++ b/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() {
diff --git a/elements/controller-base/controller-base.js b/elements/controller-base/controller-base.js
index 2cc11c3..8729b68 100644
--- a/elements/controller-base/controller-base.js
+++ b/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;
},
diff --git a/elements/controller-number/controller-number.js b/elements/controller-number/controller-number.js
index 3ecffa2..519f209 100644
--- a/elements/controller-number/controller-number.js
+++ b/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 ) {
diff --git a/elements/gui-panel/gui-panel.js b/elements/gui-panel/gui-panel.js
index 8489c14..6e39ee2 100644
--- a/elements/gui-panel/gui-panel.js
+++ b/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,86 +7,9 @@ Polymer( 'gui-panel', {
docked: false,
open: true,
- 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;
-
- },
+ touch: ( 'ontouchstart' in window ) || ( !!window.DocumentTouch && document instanceof window.DocumentTouch ),
+
// 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.' );
-
}
-
} );
diff --git a/elements/gui-panel/gui-panel.styl b/elements/gui-panel/gui-panel.styl
index d00ed2f..35deb9b 100644
--- a/elements/gui-panel/gui-panel.styl
+++ b/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 )
diff --git a/examples/index.html b/examples/index.html
index 9afa1c4..78f10e3 100644
--- a/examples/index.html
+++ b/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' );
diff --git a/gulpfile.js b/gulpfile.js
index fe8f4ee..980d50f 100644
--- a/gulpfile.js
+++ b/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( /^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 ) );
}