mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
something broken, merge option controller
This commit is contained in:
George Michael Brower
commit
62dafb68f9
5
.editorconfig
Normal file
5
.editorconfig
Normal file
@ -0,0 +1,5 @@
|
||||
# 2 space indentation
|
||||
[*.js]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
||||
20
.jscsrc
Normal file
20
.jscsrc
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"preset": "google",
|
||||
"fileExtensions": [ ".js" ],
|
||||
|
||||
"requireParenthesesAroundIIFE": true,
|
||||
"maximumLineLength": 120,
|
||||
"validateLineBreaks": "LF",
|
||||
"validateIndentation": 2,
|
||||
|
||||
"disallowKeywords": ["with"],
|
||||
"disallowSpacesInsideObjectBrackets": null,
|
||||
"disallowImplicitTypeConversion": ["string"],
|
||||
"disallowMultipleVarDecl": null,
|
||||
|
||||
"safeContextKeyword": "_this",
|
||||
|
||||
"excludeFiles": [
|
||||
"test/data/**"
|
||||
]
|
||||
}
|
||||
14
.jshintrc
Normal file
14
.jshintrc
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"node": true,
|
||||
"esnext": true,
|
||||
"bitwise": true,
|
||||
"camelcase": true,
|
||||
"curly": true,
|
||||
"immed": true,
|
||||
"newcap": false,
|
||||
"noarg": true,
|
||||
"undef": true,
|
||||
"unused": "vars",
|
||||
"strict": true,
|
||||
"browser": true
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
12
build/gui.js
12
build/gui.js
File diff suppressed because one or more lines are too long
45
demo.html
45
demo.html
@ -1,45 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>dat-gui</title>
|
||||
|
||||
<script src="build/gui.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
|
||||
Gui.ready( init );
|
||||
|
||||
var object;
|
||||
|
||||
function init() {
|
||||
|
||||
var gui = new Gui();
|
||||
|
||||
object = {
|
||||
numberProperty: 0,
|
||||
stringProperty: 'hey',
|
||||
booleanProperty: false,
|
||||
functionProperty: function() {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
gui.add( object, 'numberProperty', 0, 1 ); // Slider
|
||||
gui.add( object, 'stringProperty' ); // Text box
|
||||
gui.add( object, 'booleanProperty' ); // Check box
|
||||
gui.add( object, 'functionProperty' ); // Button
|
||||
|
||||
console.log( gui );
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,4 +1,5 @@
|
||||
(function(scope) {
|
||||
'use strict';
|
||||
|
||||
var Gui = function(params) {
|
||||
|
||||
@ -20,7 +21,6 @@
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Register custom controllers
|
||||
// -------------------------------
|
||||
|
||||
@ -32,7 +32,6 @@
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Returns a controller based on a value
|
||||
// -------------------------------
|
||||
|
||||
@ -52,7 +51,6 @@
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Gui ready handler ... * shakes fist at polymer *
|
||||
// -------------------------------
|
||||
|
||||
@ -72,11 +70,14 @@
|
||||
|
||||
Gui.ready = function(fnc) {
|
||||
|
||||
ready ? fnc() : readyHandlers.push( fnc );
|
||||
if (ready) {
|
||||
fnc();
|
||||
} else {
|
||||
readyHandlers.push(fnc);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Error
|
||||
// -------------------------------
|
||||
|
||||
@ -84,14 +85,13 @@
|
||||
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
|
||||
// -------------------------------
|
||||
@ -129,13 +129,10 @@
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Export
|
||||
// -------------------------------
|
||||
|
||||
scope.dat = dat;
|
||||
scope.Gui = Gui;
|
||||
|
||||
|
||||
})(this);
|
||||
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
/* globals Gui, Polymer, PathObserver */
|
||||
'use strict';
|
||||
|
||||
/*
|
||||
|
||||
[ ] onChange()
|
||||
@ -16,7 +19,6 @@ Polymer('controller-base', {
|
||||
|
||||
init: function() {},
|
||||
|
||||
|
||||
// Observers
|
||||
// -------------------------------
|
||||
|
||||
@ -36,26 +38,25 @@ Polymer('controller-base', {
|
||||
|
||||
},
|
||||
|
||||
|
||||
// Helpers
|
||||
// -------------------------------
|
||||
|
||||
map: function( x, a, b, c, d ) {
|
||||
return ( x - a ) / ( b - a ) * ( d - c ) + c;
|
||||
},
|
||||
|
||||
on: function( event, listener ) {
|
||||
this.addEventListener( event, listener );
|
||||
return this;
|
||||
},
|
||||
|
||||
map: function(x, a, b, c, d) {
|
||||
return (x - a) / (b - a) * (d - c) + c;
|
||||
},
|
||||
|
||||
// Legacy
|
||||
// -------------------------------
|
||||
|
||||
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;
|
||||
|
||||
},
|
||||
@ -82,5 +83,4 @@ Polymer('controller-base', {
|
||||
|
||||
},
|
||||
|
||||
|
||||
});
|
||||
@ -1,3 +1,6 @@
|
||||
/* globals Gui, Polymer */
|
||||
'use strict';
|
||||
|
||||
Gui.register('controller-boolean', function(value) {
|
||||
|
||||
return typeof value == 'boolean';
|
||||
@ -8,7 +11,6 @@ Polymer( 'controller-boolean', {
|
||||
|
||||
ready: function() {
|
||||
|
||||
|
||||
},
|
||||
|
||||
toggle: function() {
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
/* globals Gui, Polymer */
|
||||
'use strict';
|
||||
|
||||
Gui.register('controller-function', function(value) {
|
||||
|
||||
return typeof value == 'function';
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
/* globals Gui, Polymer */
|
||||
'use strict';
|
||||
|
||||
/*
|
||||
|
||||
[ ] arrow keys
|
||||
@ -34,14 +37,18 @@ Polymer( 'controller-number', {
|
||||
var _this = this;
|
||||
|
||||
window.addEventListener('keydown', function(e) {
|
||||
if ( e.keyCode == 18 ) _this._alt = true;
|
||||
if (e.keyCode == 18) {
|
||||
_this._alt = true;
|
||||
}
|
||||
}, false);
|
||||
|
||||
window.addEventListener('keyup', function(e) {
|
||||
if ( e.keyCode == 18 ) _this._alt = false;
|
||||
if (e.keyCode == 18) {
|
||||
_this._alt = false;
|
||||
}
|
||||
}, false);
|
||||
|
||||
this.super();
|
||||
// this.super();
|
||||
|
||||
},
|
||||
|
||||
@ -140,7 +147,6 @@ Polymer( 'controller-number', {
|
||||
|
||||
},
|
||||
|
||||
|
||||
// Events
|
||||
// -------------------------------
|
||||
|
||||
@ -162,7 +168,7 @@ Polymer( 'controller-number', {
|
||||
|
||||
e.preventDefault();
|
||||
this._rect = this.$.track.getBoundingClientRect();
|
||||
if ( !this._alt ) this.value = this.valueFromX( e.x );
|
||||
if (!this._alt) { this.value = this.valueFromX(e.x); }
|
||||
|
||||
this.fire( 'sliderDown' );
|
||||
|
||||
@ -171,7 +177,6 @@ Polymer( 'controller-number', {
|
||||
up: function(e) {
|
||||
|
||||
// this.$.container.classList.add( 'transition');
|
||||
|
||||
this.fire( 'sliderUp' );
|
||||
|
||||
},
|
||||
@ -189,7 +194,7 @@ Polymer( 'controller-number', {
|
||||
|
||||
var dv = this.valueFromDX(e.ddx);
|
||||
|
||||
if ( this._alt ) dv /= 10;
|
||||
if (this._alt) { dv /= 10; }
|
||||
|
||||
this.value += dv * this._dragFriction;
|
||||
|
||||
@ -202,7 +207,8 @@ Polymer( 'controller-number', {
|
||||
|
||||
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)));
|
||||
|
||||
},
|
||||
|
||||
@ -216,8 +222,6 @@ Polymer( 'controller-number', {
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
// Filters
|
||||
// -------------------------------
|
||||
|
||||
@ -231,7 +235,6 @@ Polymer( 'controller-number', {
|
||||
|
||||
},
|
||||
|
||||
|
||||
// Helpers
|
||||
// -------------------------------
|
||||
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
/* globals Gui, Polymer */
|
||||
'use strict';
|
||||
|
||||
Gui.register('controller-string', function(value) {
|
||||
|
||||
return typeof value == 'string';
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
/* globals Polymer, Path, Gui */
|
||||
'use strict';
|
||||
|
||||
// [ ] scrolling when docked
|
||||
// [ ] scrolling when window short and not docked
|
||||
|
||||
@ -5,12 +8,12 @@ Polymer('gui-panel', {
|
||||
|
||||
docked: false,
|
||||
open: true,
|
||||
touch: 'ontouchstart' in window || !!window.DocumentTouch && document instanceof DocumentTouch,
|
||||
touch: ('ontouchstart' in window) ||
|
||||
(!!window.DocumentTouch && document instanceof window.DocumentTouch),
|
||||
|
||||
ready: function() {
|
||||
|
||||
this.defined = {};
|
||||
// window.addEventListener( 'resize', this.checkHeight.bind( this ) );
|
||||
|
||||
},
|
||||
|
||||
@ -39,12 +42,13 @@ Polymer('gui-panel', {
|
||||
|
||||
var value = Path.get(path).getValueFrom(object);
|
||||
|
||||
if ( value == null || value == undefined ) {
|
||||
return Gui.error( object + ' doesn\'t have a value for path "' + path + '".' );
|
||||
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 controllers;
|
||||
var controller;
|
||||
|
||||
if ( args[ 0 ] instanceof Array || typeof args[ 0 ] == 'object' ) {
|
||||
controller = document.createElement( 'controller-option' );
|
||||
@ -56,7 +60,7 @@ Polymer('gui-panel', {
|
||||
return Gui.error( 'Unrecognized type:', value );
|
||||
}
|
||||
|
||||
controller.watch( object, path )
|
||||
controller.watch(object, path);
|
||||
controller.init.apply(controller, args);
|
||||
|
||||
// Make row
|
||||
@ -81,7 +85,6 @@ Polymer('gui-panel', {
|
||||
|
||||
},
|
||||
|
||||
|
||||
// Observers
|
||||
// -------------------------------
|
||||
|
||||
@ -91,6 +94,7 @@ Polymer('gui-panel', {
|
||||
|
||||
// let the style sheet take care of things
|
||||
|
||||
this.$.container.style.transform = '';
|
||||
this.$.panel.style.transform = '';
|
||||
|
||||
} else {
|
||||
@ -99,11 +103,10 @@ Polymer('gui-panel', {
|
||||
// wish i could pipe javascript variables into styl.
|
||||
|
||||
var y = -this.$.controllers.offsetHeight + 'px';
|
||||
this.$.panel.style.transform = 'translate3d(0, ' + y + ', 0)';
|
||||
this.$.container.style.transform = 'translate3d(0, ' + y + ', 0)';
|
||||
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
dockedChanged: function() {
|
||||
@ -112,10 +115,13 @@ Polymer('gui-panel', {
|
||||
|
||||
},
|
||||
|
||||
|
||||
// Events
|
||||
// -------------------------------
|
||||
|
||||
tapClose: function() {
|
||||
this.open = !this.open;
|
||||
},
|
||||
|
||||
toggleOpen: function() {
|
||||
this.open = !this.open;
|
||||
},
|
||||
@ -127,18 +133,23 @@ Polymer('gui-panel', {
|
||||
// } else {
|
||||
// this.docked = false;
|
||||
// }
|
||||
// if ( window.innerHeight < this.$.controllers.offsetHeight) {
|
||||
// this.docked = true;
|
||||
// } else {
|
||||
// this.docked = false;
|
||||
// }
|
||||
|
||||
// },
|
||||
|
||||
|
||||
// Legacy
|
||||
// -------------------------------
|
||||
|
||||
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
|
||||
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
/* globals Polymer */
|
||||
'use strict';
|
||||
|
||||
Polymer('gui-row', {
|
||||
|
||||
comment: null,
|
||||
|
||||
53
gulpfile.js
53
gulpfile.js
@ -1,17 +1,13 @@
|
||||
var gulp = require('gulp'),
|
||||
stylus = require( 'gulp-stylus' ),
|
||||
plates = require( 'gulp-plates' ),
|
||||
rename = require( 'gulp-rename' ),
|
||||
vulcan = require( 'gulp-vulcanize' ),
|
||||
insert = require( 'gulp-insert' ),
|
||||
replace = require( 'gulp-replace' ),
|
||||
clean = require( 'gulp-clean' ),
|
||||
$ = require('gulp-load-plugins')(),
|
||||
nib = require('nib'),
|
||||
fs = require('fs'),
|
||||
marked = require('marked'),
|
||||
karma = require( 'karma' );
|
||||
karma = require('karma'),
|
||||
browserSync = require('browser-sync'),
|
||||
reload = browserSync.reload;
|
||||
|
||||
gulp.task( 'default', [ 'docs', 'build' ] );
|
||||
gulp.task('default', ['docs', 'build'])
|
||||
|
||||
gulp.task('watch', ['default'], function() {
|
||||
|
||||
@ -23,7 +19,9 @@ gulp.task( 'watch', [ 'default' ], function() {
|
||||
]
|
||||
});
|
||||
|
||||
gulp.watch( [ 'elements/**/*.styl', 'elements/**/*.html', 'elements/**/*.js', 'gui.html' ], [ 'build' ] );
|
||||
gulp.watch(['elements/**/*.styl', 'elements/**/*.html',
|
||||
'elements/**/*.js', 'gui.html'], ['build']);
|
||||
|
||||
gulp.watch(['README.md', 'docs/*'], ['docs']);
|
||||
|
||||
});
|
||||
@ -31,11 +29,11 @@ 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($.replace(/\\/g, '\\\\'))
|
||||
.pipe($.replace(/'/g, '\\\''))
|
||||
.pipe($.replace(/^(.*)$/gm, '\'$1\','))
|
||||
.pipe($.insert.wrap('document.write([', '].join("\\n"))'))
|
||||
.pipe($.rename('gui.js'))
|
||||
.pipe(gulp.dest('build'));
|
||||
|
||||
});
|
||||
@ -43,7 +41,7 @@ gulp.task( 'build', [ 'vulcanize' ], function() {
|
||||
gulp.task('vulcanize', ['css'], function() {
|
||||
|
||||
return gulp.src('gui.html')
|
||||
.pipe( vulcan( {
|
||||
.pipe($.vulcanize({
|
||||
dest: 'build',
|
||||
inline: true,
|
||||
strip: true
|
||||
@ -51,6 +49,21 @@ gulp.task( 'vulcanize', [ 'css' ], function() {
|
||||
|
||||
});
|
||||
|
||||
gulp.task('jscs', function() {
|
||||
return gulp.src('elements/**/*.js')
|
||||
.pipe($.jscs());
|
||||
});
|
||||
|
||||
gulp.task('jshint', function() {
|
||||
return gulp.src('elements/**/*.js')
|
||||
.pipe(reload({stream: true, once: true}))
|
||||
.pipe($.jshint('.jshintrc'))
|
||||
.pipe($.jshint.reporter('jshint-stylish'))
|
||||
.pipe($.if(!browserSync.active, $.jshint.reporter('fail')));
|
||||
});
|
||||
|
||||
gulp.task('lint', ['jscs', 'jshint']);
|
||||
|
||||
gulp.task('css', function() {
|
||||
|
||||
return css('elements/**/*.styl', 'elements');
|
||||
@ -66,8 +79,8 @@ gulp.task( 'docs', function() {
|
||||
};
|
||||
|
||||
return gulp.src('docs/template.html')
|
||||
.pipe( plates( content ) )
|
||||
.pipe( rename( 'index.html' ) )
|
||||
.pipe($.plates(content))
|
||||
.pipe($.rename('index.html'))
|
||||
.pipe(gulp.dest('./'));
|
||||
|
||||
});
|
||||
@ -75,14 +88,14 @@ gulp.task( 'docs', function() {
|
||||
gulp.task('clean', function() {
|
||||
|
||||
return gulp.src(['build/*', '**/*.css'])
|
||||
.pipe( clean() );
|
||||
.pipe($.clean());
|
||||
|
||||
});
|
||||
|
||||
function css(src, dest) {
|
||||
|
||||
return gulp.src(src)
|
||||
.pipe( stylus( { use: [ nib() ] } ) )
|
||||
.pipe($.stylus({ use: [nib()] }))
|
||||
.pipe(gulp.dest(dest));
|
||||
|
||||
}
|
||||
@ -2,15 +2,22 @@
|
||||
"name": "dat.gui",
|
||||
"version": "0.0.0",
|
||||
"devDependencies": {
|
||||
"browser-sync": "^1.3.6",
|
||||
"gulp": "^3.8.7",
|
||||
"gulp-clean": "^0.3.1",
|
||||
"gulp-if": "^1.2.4",
|
||||
"gulp-insert": "^0.4.0",
|
||||
"gulp-jscs": "^1.1.2",
|
||||
"gulp-jshint": "^1.8.4",
|
||||
"gulp-load-plugins": "^0.6.0",
|
||||
"gulp-plates": "0.0.5",
|
||||
"gulp-reload": "0.0.4",
|
||||
"gulp-rename": "^1.2.0",
|
||||
"gulp-replace": "^0.4.0",
|
||||
"gulp-stylus": "^1.3.0",
|
||||
"gulp-vulcanize": "^1.0.0",
|
||||
"gulp-watch": "^0.6.9",
|
||||
"jshint-stylish": "^0.4.0",
|
||||
"karma": "^0.12.23",
|
||||
"karma-chrome-launcher": "^0.1.4",
|
||||
"karma-jasmine": "^0.1.5",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user