mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
refactor Gui.js - element
This commit is contained in:
parent
b19422d278
commit
8f5504eb85
2
TODO.md
2
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
|
||||
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -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">
|
||||
|
231
elements/Gui.js
231
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 );
|
@ -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 );
|
||||
|
@ -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' );
|
||||
|
21
gulpfile.js
21
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 )
|
||||
.concat( paths.js ).concat( paths.shim )
|
||||
.concat( paths.docs ), [ 'reload' ] );
|
||||
// gulp.watch( paths.html.concat( paths.styl )
|
||||
// .concat( paths.js ).concat( paths.shim )
|
||||
// .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': [
|
||||
|
Loading…
Reference in New Issue
Block a user