library-mirrors/dat.gui
1
0
Fork 0
mirror of https://github.com/dataarts/dat.gui.git synced 2024-12-12 04:08:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add gjslint style linter and updated javascript to match

Browse Source
This commit is contained in:
Doug Fritz 2014-09-03 16:33:28 -07:00
parent d3cec69596
commit 7f409799dd
10 changed files with 508 additions and 504 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
elements/Gui.js
View File

@ -1,19 +1,19 @@
(function( scope ) { (function(scope) {
var Gui = function( params ) { var Gui = function(params) {
if ( !ready ) { if (!ready) {
Gui.error( 'Gui not ready. Put your code inside Gui.ready()' ); Gui.error('Gui not ready. Put your code inside Gui.ready()');
} }
params = params || {}; params = params || {};
var panel = document.createElement( 'gui-panel' ); var panel = document.createElement('gui-panel');
panel.autoPlace = params.autoPlace !== false; panel.autoPlace = params.autoPlace !== false;
if ( panel.autoPlace ) { if (panel.autoPlace) {
document.body.appendChild( panel ); document.body.appendChild(panel);
} }
return panel; return panel;
@ -26,9 +26,9 @@
var controllers = {}; var controllers = {};
Gui.register = function( elementName, test ) { Gui.register = function(elementName, test) {
controllers[ elementName ] = test; controllers[elementName] = test;
}; };
@ -36,15 +36,15 @@
// Returns a controller based on a value // Returns a controller based on a value
// ------------------------------- // -------------------------------
Gui.getController = function( value ) { Gui.getController = function(value) {
for ( var type in controllers ) { for (var type in controllers) {
var test = controllers[ type ]; var test = controllers[type];
if ( test( value ) ) { if (test(value)) {
return document.createElement( type ); return document.createElement(type);
} }
@ -59,20 +59,20 @@
var ready = false; var ready = false;
var readyHandlers = []; var readyHandlers = [];
document.addEventListener( 'polymer-ready', function() { document.addEventListener('polymer-ready', function() {
ready = true; ready = true;
readyHandlers.forEach( function( fnc ) { readyHandlers.forEach(function(fnc) {
fnc(); fnc();
} ); });
} ); });
Gui.ready = function( fnc ) { Gui.ready = function(fnc) {
ready ? fnc() : readyHandlers.push( fnc ); ready ? fnc() : readyHandlers.push(fnc);
}; };
@ -81,16 +81,16 @@
// ------------------------------- // -------------------------------
Gui.error = function() { Gui.error = function() {
var args = Array.prototype.slice.apply( arguments ); var args = Array.prototype.slice.apply(arguments);
args.unshift( 'dat-gui ::' ); args.unshift('dat-gui ::');
console.error.apply( console, args ); console.error.apply(console, args);
} };
Gui.warn = function() { Gui.warn = function() {
var args = Array.prototype.slice.apply( arguments ); var args = Array.prototype.slice.apply(arguments);
args.unshift( 'dat-gui ::' ); args.unshift('dat-gui ::');
console.warn.apply( console, args ); console.warn.apply(console, args);
} };
// Old namespaces // Old namespaces
@ -109,21 +109,21 @@
dat.dom.dom = function() {}; dat.dom.dom = function() {};
dat.controllers = {}; dat.controllers = {};
dat.controllers.Controller = constructor( 'controller-base' ); dat.controllers.Controller = constructor('controller-base');
dat.controllers.NumberController = constructor( 'controller-number' ); dat.controllers.NumberController = constructor('controller-number');
dat.controllers.FunctionController = constructor( 'controller-function' ); dat.controllers.FunctionController = constructor('controller-function');
dat.controllers.ColorController = constructor( 'controller-color' ); dat.controllers.ColorController = constructor('controller-color');
dat.controllers.BooleanController = constructor( 'controller-boolean' ); dat.controllers.BooleanController = constructor('controller-boolean');
dat.controllers.OptionController = constructor( 'controller-option' ); dat.controllers.OptionController = constructor('controller-option');
dat.controllers.NumberControllerBox = dat.controllers.NumberController; dat.controllers.NumberControllerBox = dat.controllers.NumberController;
dat.controllers.NumberControllerSlider = dat.controllers.NumberController; dat.controllers.NumberControllerSlider = dat.controllers.NumberController;
function constructor( elementName ) { function constructor(elementName) {
return function( object, path ) { return function(object, path) {
var el = document.createElement( elementName ); var el = document.createElement(elementName);
el.watch( object, path ); el.watch(object, path);
return el; return el;
}; };
@ -137,5 +137,5 @@
scope.Gui = Gui; scope.Gui = Gui;
})( this ); })(this);

15
elements/controller-base/controller-base.js
View File

@ -1,7 +1,7 @@
/* /*
[ ] onChange( ) [ ] onChange()
[ ] onFinishChange( ) [ ] onFinishChange()
*/ */
@ -21,7 +21,7 @@ Polymer('controller-base', {
// Observers // Observers
// ------------------------------- // -------------------------------
watch: function( object, path ) { watch: function(object, path) {
this.object = object; this.object = object;
this.path = path; this.path = path;
@ -40,8 +40,8 @@ Polymer('controller-base', {
// Helpers // Helpers
// ------------------------------- // -------------------------------
map: function( x, a, b, c, d ) { map: function(x, a, b, c, d) {
return ( x - a ) / ( b - a ) * ( d - c ) + c; return (x - a) / (b - a) * (d - c) + c;
}, },
@ -50,7 +50,8 @@ Polymer('controller-base', {
listen: function() { 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; return this;
}, },
@ -61,7 +62,7 @@ Polymer('controller-base', {
}, },
setValue: function( v ) { setValue: function(v) {
this.value = v; this.value = v;

6
elements/controller-boolean/controller-boolean.js
View File

@ -1,10 +1,10 @@
Gui.register( 'controller-boolean', function( value ) { Gui.register('controller-boolean', function(value) {
return typeof value == 'boolean'; return typeof value == 'boolean';
} ); });
Polymer( 'controller-boolean', { Polymer('controller-boolean', {
ready: function() { ready: function() {

8
elements/controller-function/controller-function.js
View File

@ -1,9 +1,9 @@
Gui.register( 'controller-function', function( value ) { Gui.register('controller-function', function(value) {
return typeof value == 'function'; return typeof value == 'function';
} ); });
Polymer( 'controller-function', { Polymer('controller-function', {
} ); });

127
elements/controller-number/controller-number.js
View File

@ -1,7 +1,7 @@
/* /*
[ ] arrow keys [ ] arrow keys
[ ] min( ) max( ) step( ) commands of yore [ ] min() max() step() commands of yore
[x] only validate input box on blur, not on keydown [x] only validate input box on blur, not on keydown
[x] enter key blurs [x] enter key blurs
@ -13,13 +13,13 @@
*/ */
Gui.register( 'controller-number', function( value ) { Gui.register('controller-number', function(value) {
return typeof value == 'number'; return typeof value == 'number';
} ); });
Polymer( 'controller-number', { Polymer('controller-number', {
value: 0, value: 0,
decimals: 3, decimals: 3,
@ -33,19 +33,19 @@ Polymer( 'controller-number', {
var _this = this; var _this = this;
window.addEventListener( 'keydown', function( e ) { window.addEventListener('keydown', function(e) {
if ( e.keyCode == 18 ) _this._alt = true; if (e.keyCode == 18) _this._alt = true;
}, false ); }, false);
window.addEventListener( 'keyup', function( e ) { window.addEventListener('keyup', function(e) {
if ( e.keyCode == 18 ) _this._alt = false; if (e.keyCode == 18) _this._alt = false;
}, false ); }, false);
this.super(); this.super();
}, },
init: function( min, max, step ) { init: function(min, max, step) {
this.min = min; this.min = min;
this.max = max; this.max = max;
@ -56,18 +56,18 @@ Polymer( 'controller-number', {
// Observers // Observers
// ------------------------------- // -------------------------------
valueChanged: function( newValue ) { valueChanged: function(newValue) {
if ( this.step !== undefined ) { if (this.step !== undefined) {
this.value = Math.round( this.value / this.step ) * this.step; this.value = Math.round(this.value / this.step) * this.step;
} }
if ( this.min !== undefined ) { if (this.min !== undefined) {
this.value = Math.max( this.value, this.min ); this.value = Math.max(this.value, this.min);
} }
if ( this.max !== undefined ) { if (this.max !== undefined) {
this.value = Math.min( this.value, this.max ); this.value = Math.min(this.value, this.max);
} }
this.super(); this.super();
@ -75,29 +75,29 @@ Polymer( 'controller-number', {
minChanged: function() { minChanged: function() {
this.value = Math.max( this.value, this.min ); this.value = Math.max(this.value, this.min);
this.update(); this.update();
}, },
maxChanged: function() { maxChanged: function() {
this.value = Math.min( this.value, this.max ); this.value = Math.min(this.value, this.max);
this.update(); this.update();
}, },
update: function() { update: function() {
var ratio = this.map( this.value, this.min, this.max, 0, 1 ); var ratio = this.map(this.value, this.min, this.max, 0, 1);
if ( this.min < 0 && this.max > 0 ) { if (this.min < 0 && this.max > 0) {
this.$.container.classList.add( 'straddle-zero' ); this.$.container.classList.add('straddle-zero');
var zero = this.map( 0, this.min, this.max, 0, 1 ); var zero = this.map(0, this.min, this.max, 0, 1);
if ( this.value >= 0 ) { if (this.value >= 0) {
this.$.fill.style.left = zero * 100 + '%'; this.$.fill.style.left = zero * 100 + '%';
this.$.fill.style.width = (ratio - zero) * 100 + '%'; this.$.fill.style.width = (ratio - zero) * 100 + '%';
@ -107,15 +107,15 @@ Polymer( 'controller-number', {
this.$.fill.style.left = ''; this.$.fill.style.left = '';
this.$.fill.style.width = (zero - ratio) * 100 + '%'; this.$.fill.style.width = (zero - ratio) * 100 + '%';
this.$.fill.style.right = ( 1 - zero ) * 100 + '%'; this.$.fill.style.right = (1 - zero) * 100 + '%';
} }
} else { } else {
this.$.container.classList.remove( 'straddle-zero' ); this.$.container.classList.remove('straddle-zero');
if ( this.max > 0 ) { if (this.max > 0) {
this.$.fill.style.left = 0; this.$.fill.style.left = 0;
this.$.fill.style.width = ratio * 100 + '%'; this.$.fill.style.width = ratio * 100 + '%';
@ -124,7 +124,7 @@ Polymer( 'controller-number', {
} else { } else {
this.$.fill.style.left = ''; this.$.fill.style.left = '';
this.$.fill.style.width = ( 1 - ratio ) * 100 + '%'; this.$.fill.style.width = (1 - ratio) * 100 + '%';
this.$.fill.style.right = 0; this.$.fill.style.right = 0;
} }
@ -133,8 +133,8 @@ Polymer( 'controller-number', {
this.$.knob.style.left = ratio * 100 + '%'; this.$.knob.style.left = ratio * 100 + '%';
this.$.container.classList.toggle( 'positive', this.value >= 0 ); this.$.container.classList.toggle('positive', this.value >= 0);
this.$.container.classList.toggle( 'negative', this.value < 0 ); this.$.container.classList.toggle('negative', this.value < 0);
this.super(); this.super();
@ -144,69 +144,70 @@ Polymer( 'controller-number', {
// Events // Events
// ------------------------------- // -------------------------------
click: function( e ) { click: function(e) {
this.$.input.select(); this.$.input.select();
}, },
keydown: function( e ) { keydown: function(e) {
if ( e.keyCode == 13 ) { if (e.keyCode == 13) {
this.$.input.blur(); this.$.input.blur();
} }
}, },
down: function( e ) { down: function(e) {
e.preventDefault(); e.preventDefault();
this._rect = this.$.track.getBoundingClientRect(); this._rect = this.$.track.getBoundingClientRect();
if ( !this._alt ) this.value = this.valueFromX( e.x ); if (!this._alt) this.value = this.valueFromX(e.x);
}, },
up: function( e ) { up: function(e) {
// this.$.container.classList.add( 'transition' ); // this.$.container.classList.add( 'transition');
}, },
trackstart: function( e ) { trackstart: function(e) {
// this.$.container.classList.remove( 'transition' ); // this.$.container.classList.remove( 'transition');
this._dragFriction = 1; this._dragFriction = 1;
}, },
trackx: function( e ) { trackx: function(e) {
if ( this.step === undefined ) { if (this.step === undefined) {
var dv = this.valueFromDX( e.ddx ); var dv = this.valueFromDX(e.ddx);
if ( this._alt ) dv /= 10; if (this._alt) dv /= 10;
this.value += dv * this._dragFriction; this.value += dv * this._dragFriction;
} else { } else {
this.value = this.valueFromX( e.pageX ); this.value = this.valueFromX(e.pageX);
} }
}, },
tracky: function( e ) { tracky: function(e) {
this._dragFriction = Math.max( 0.01, Math.min( 1, this.map( e.dy, 50, 300, 1, 0.1 ) ) ); this._dragFriction = Math.max(0.01,
Math.min(1, this.map(e.dy, 50, 300, 1, 0.1)));
}, },
blur: function( e ) { blur: function(e) {
var v = parseFloat( this.$.input.value ); var v = parseFloat(this.$.input.value);
if ( v === v ) { if (v === v) {
this.value = v; this.value = v;
} }
@ -217,10 +218,10 @@ Polymer( 'controller-number', {
// Filters // Filters
// ------------------------------- // -------------------------------
truncate: function( v ) { truncate: function(v) {
if ( v % 1 !== 0 && this.decimals !== undefined ) { if (v % 1 !== 0 && this.decimals !== undefined) {
return this.limitDecimals( v, this.decimals ); return this.limitDecimals(v, this.decimals);
} else { } else {
return v; return v;
} }
@ -231,32 +232,32 @@ Polymer( 'controller-number', {
// Helpers // Helpers
// ------------------------------- // -------------------------------
limitDecimals: function( v, maxDecimals ) { limitDecimals: function(v, maxDecimals) {
var str = v.toString(); var str = v.toString();
var numDecimals = str.substring( str.indexOf( '.' ) + 1 ).length; var numDecimals = str.substring(str.indexOf('.') + 1).length;
str = v.toFixed( Math.min( numDecimals, this.decimals ) ); str = v.toFixed(Math.min(numDecimals, this.decimals));
for ( var z, i = 0, l = str.length; i < l; i++ ) { for (var z, i = 0, l = str.length; i < l; i++) {
if ( str.charAt( i ) !== '0' ) { if (str.charAt(i) !== '0') {
z = i; z = i;
} }
} }
return str.substring( 0, z+1 ); return str.substring(0, z + 1);
}, },
valueFromX: function( x ) { valueFromX: function(x) {
return this.map( x, this._rect.left, this._rect.right, this.min, this.max ); return this.map(x, this._rect.left, this._rect.right, this.min, this.max);
}, },
valueFromDX: function( dx ) { valueFromDX: function(dx) {
return this.map( dx, 0, this._rect.width, 0, this.max - this.min ); return this.map(dx, 0, this._rect.width, 0, this.max - this.min);
} }

12
elements/controller-string/controller-string.js
View File

@ -1,20 +1,20 @@
Gui.register( 'controller-string', function( value ) { Gui.register('controller-string', function(value) {
return typeof value == 'string'; return typeof value == 'string';
} ); });
Polymer( 'controller-string', { Polymer('controller-string', {
click: function( e ) { click: function(e) {
this.$.input.select(); this.$.input.select();
}, },
keydown: function( e ) { keydown: function(e) {
if ( e.keyCode == 13 ) { if (e.keyCode == 13) {
this.$.input.blur(); this.$.input.blur();
} }

63
elements/gui-panel/gui-panel.js
View File

@ -5,73 +5,75 @@ Polymer('gui-panel', {
docked: false, docked: false,
open: true, open: true,
touch: 'ontouchstart' in window || !!window.DocumentTouch && document instanceof DocumentTouch, touch: ('ontouchstart' in window) ||
(!!window.DocumentTouch && document instanceof DocumentTouch),
ready: function() { ready: function() {
this.anon.values = {}; this.anon.values = {};
// window.addEventListener( 'resize', this.checkHeight.bind( this ) ); // window.addEventListener( 'resize', this.checkHeight.bind( this));
}, },
anon: function() { anon: function() {
if ( arguments.length == 1 ) { if (arguments.length == 1) {
var name = arguments[ 0 ]; var name = arguments[0];
return this.anon.values[ name ]; return this.anon.values[name];
} }
var initialValue = arguments[ 0 ]; var initialValue = arguments[0];
var name = arguments[ 1 ]; var name = arguments[1];
var args = [ this.anon.values, name ]; var args = [this.anon.values, name];
args = args.concat( Array.prototype.slice.call( arguments, 2 ) ); args = args.concat(Array.prototype.slice.call(arguments, 2));
this.anon.values[ name ] = initialValue; this.anon.values[name] = initialValue;
return this.add.apply( this, args ); return this.add.apply(this, args);
}, },
add: function( object, path ) { add: function(object, path) {
// Make controller // Make controller
var value = Path.get( path ).getValueFrom( object ); var value = Path.get(path).getValueFrom(object);
if ( value == null || value == undefined ) { if (value == null || value == undefined) {
return Gui.error( object + ' doesn\'t have a value for path "' + path + '".' ); return Gui.error(object +
' doesn\'t have a value for path "' + path + '".');
} }
var args = Array.prototype.slice.call( arguments, 2 ); var args = Array.prototype.slice.call(arguments, 2);
var controller = Gui.getController( value, args ); var controller = Gui.getController(value, args);
if ( !controller ) { if (!controller) {
return Gui.error( 'Unrecognized type:', value ); return Gui.error('Unrecognized type:', value);
} }
controller.watch( object, path ) controller.watch(object, path);
controller.init.apply( controller, args ); controller.init.apply(controller, args);
// Make row // Make row
var row = document.createElement( 'gui-row' ); var row = document.createElement('gui-row');
row.name = path; row.name = path;
controller.row = row; controller.row = row;
controller.name = function( name ) { controller.name = function(name) {
row.name = name; row.name = name;
}; };
controller.comment = function( comment ) { controller.comment = function(comment) {
row.comment = comment; row.comment = comment;
}; };
row.appendChild( controller ); row.appendChild(controller);
this.appendChild( row ); this.appendChild(row);
return controller; return controller;
@ -83,7 +85,7 @@ Polymer('gui-panel', {
openChanged: function() { openChanged: function() {
if ( this.open || this.docked ) { if (this.open || this.docked) {
// let the style sheet take care of things // let the style sheet take care of things
@ -118,7 +120,7 @@ Polymer('gui-panel', {
// checkHeight: function() { // checkHeight: function() {
// if ( window.innerHeight < this.$.controllers.offsetHeight ) { // if ( window.innerHeight < this.$.controllers.offsetHeight) {
// this.docked = true; // this.docked = true;
// } else { // } else {
// this.docked = false; // this.docked = false;
@ -132,9 +134,10 @@ Polymer('gui-panel', {
listenAll: function() { listenAll: function() {
Gui.warn( 'controller.listenAll() is deprecated. All controllers are listened for free.' ); Gui.warn('controller.listenAll() is deprecated. ' +
'All controllers are listened for free.');
}, }
// todo: domElement // todo: domElement

6
gulpfile.js
View File

@ -49,9 +49,9 @@ gulp.task('vulcanize', ['css'], function() {
gulp.task('lint', function() { gulp.task('lint', function() {
return gulp.src('elements/**/*.js') return gulp.src('elements/**/*.js')
//.pipe($.reload({stream: true, once: true})) //.pipe($.reload({stream: true, once: true}))
.pipe($.jshint()) .pipe($.gjslint())
.pipe($.jshint.reporter('jshint-stylish')); .pipe($.gjslint.reporter('console', {}));
//.pipe($.if(!browserSync.active, $.jshint.reporter('fail'))); //.pipe($.if(!browserSync.active, $.gjslint.reporter('fail')));
}); });
gulp.task('css', function() { gulp.task('css', function() {

3
package.json
View File

@ -4,8 +4,8 @@
"devDependencies": { "devDependencies": {
"gulp": "^3.8.7", "gulp": "^3.8.7",
"gulp-clean": "^0.3.1", "gulp-clean": "^0.3.1",
"gulp-gjslint": "^0.1.2",
"gulp-insert": "^0.4.0", "gulp-insert": "^0.4.0",
"gulp-jshint": "^1.8.4",
"gulp-load-plugins": "^0.6.0", "gulp-load-plugins": "^0.6.0",
"gulp-plates": "0.0.5", "gulp-plates": "0.0.5",
"gulp-rename": "^1.2.0", "gulp-rename": "^1.2.0",
@ -13,7 +13,6 @@
"gulp-stylus": "^1.3.0", "gulp-stylus": "^1.3.0",
"gulp-vulcanize": "^1.0.0", "gulp-vulcanize": "^1.0.0",
"gulp-watch": "^0.6.9", "gulp-watch": "^0.6.9",
"jshint-stylish": "^0.4.0",
"karma": "^0.12.23", "karma": "^0.12.23",
"karma-chrome-launcher": "^0.1.4", "karma-chrome-launcher": "^0.1.4",
"karma-jasmine": "^0.1.5", "karma-jasmine": "^0.1.5",