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

something broken, merge option controller

Browse Source
This commit is contained in:
George Michael Brower 2014-09-07 20:22:30 -04:00
commit 62dafb68f9
17 changed files with 694 additions and 658 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.editorconfig Normal file
View File

@ -0,0 +1,5 @@
# 2 space indentation
[*.js]
indent_style = space
indent_size = 2

20
.jscsrc Normal file
View 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
View 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
}

0
TODO → TODO.md
View File

12
build/gui.html
View File

File diff suppressed because one or more lines are too long

12
build/gui.js
View File

File diff suppressed because one or more lines are too long

45
demo.html
View File

@ -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>

233
elements/Gui.js
View File

@ -1,141 +1,138 @@
(function( scope ) { (function(scope) {
'use strict';
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 || {};
var panel = document.createElement( 'gui-panel' );
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 ) {
ready ? fnc() : readyHandlers.push( fnc );
};
// Error
// -------------------------------
Gui.error = function() {
var args = Array.prototype.slice.apply( arguments );
args.unshift( 'dat-gui ::' );
console.error.apply( console, args );
} }
Gui.warn = function() { params = params || {};
var args = Array.prototype.slice.apply( arguments );
args.unshift( 'dat-gui ::' ); var panel = document.createElement('gui-panel');
console.warn.apply( console, args );
panel.autoPlace = params.autoPlace !== false;
if (panel.autoPlace) {
document.body.appendChild(panel);
} }
return panel;
// Old namespaces };
// -------------------------------
var dat = {}; // Register custom controllers
// -------------------------------
dat.gui = {}; var controllers = {};
dat.gui.GUI = Gui;
dat.GUI = dat.gui.GUI;
dat.color = {}; Gui.register = function(elementName, test) {
dat.color.Color = function() {};
dat.dom = {}; controllers[elementName] = test;
dat.dom.dom = function() {};
dat.controllers = {}; };
dat.controllers.Controller = constructor( 'controller-base' );
dat.controllers.NumberController = constructor( 'controller-number' );
dat.controllers.FunctionController = constructor( 'controller-function' );
dat.controllers.ColorController = constructor( 'controller-color' );
dat.controllers.BooleanController = constructor( 'controller-boolean' );
dat.controllers.OptionController = constructor( 'controller-option' );
dat.controllers.NumberControllerBox = dat.controllers.NumberController; // Returns a controller based on a value
dat.controllers.NumberControllerSlider = dat.controllers.NumberController; // -------------------------------
function constructor( elementName ) { Gui.getController = function(value) {
return function( object, path ) { for (var type in controllers) {
var el = document.createElement( elementName );
el.watch( object, path ); var test = controllers[type];
return el;
}; if (test(value)) {
return document.createElement(type);
}
} }
};
// Export // Gui ready handler ... * shakes fist at polymer *
// ------------------------------- // -------------------------------
scope.dat = dat; var ready = false;
scope.Gui = Gui; var readyHandlers = [];
document.addEventListener('polymer-ready', function() {
})( this ); ready = true;
readyHandlers.forEach(function(fnc) {
fnc();
});
});
Gui.ready = function(fnc) {
if (ready) {
fnc();
} else {
readyHandlers.push(fnc);
}
};
// Error
// -------------------------------
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('controller-base');
dat.controllers.NumberController = constructor('controller-number');
dat.controllers.FunctionController = constructor('controller-function');
dat.controllers.ColorController = constructor('controller-color');
dat.controllers.BooleanController = constructor('controller-boolean');
dat.controllers.OptionController = constructor('controller-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);

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

@ -1,86 +1,86 @@
/* globals Gui, Polymer, PathObserver */
'use strict';
/* /*
[ ] onChange( ) [ ] onChange()
[ ] onFinishChange( ) [ ] onFinishChange()
*/ */
Polymer('controller-base', { Polymer('controller-base', {
ready: function() { ready: function() {
this.update(); this.update();
}, },
update: function() {}, update: function() {},
init: function() {}, init: function() {},
// Observers
// -------------------------------
// Observers watch: function(object, path) {
// -------------------------------
watch: function( object, path ) { this.object = object;
this.path = path;
this.object = object; this.bind('value', new PathObserver(this.object, this.path));
this.path = path;
this.bind( 'value', new PathObserver( this.object, this.path ) ); },
}, valueChanged: function() {
valueChanged: function() { this.update();
this.fire( 'change', this.value );
this.update(); },
this.fire( 'change', this.value );
}, // Helpers
// -------------------------------
on: function( event, listener ) {
this.addEventListener( event, listener );
return this;
},
// Helpers map: function(x, a, b, c, d) {
// ------------------------------- return (x - a) / (b - a) * (d - c) + c;
},
map: function( x, a, b, c, d ) { // Legacy
return ( x - a ) / ( b - a ) * ( d - c ) + c; // -------------------------------
},
on: function( event, listener ) { listen: function() {
this.addEventListener( event, listener );
return this;
},
Gui.warn('controller.listen() is deprecated. ' +
'All controllers are listened for free.');
return this;
// Legacy },
// -------------------------------
listen: function() { getValue: function() {
Gui.warn( 'controller.listen() is deprecated. All controllers are listened for free.' ); return this.value;
return this;
}, },
getValue: function() { setValue: function(v) {
return this.value; this.value = v;
return this;
}, },
setValue: function( v ) { onChange: function( v ) {
this.value = v; this.addEventListener( 'change', function( e ) {
return this; v( e.detail );
} );
}, return this;
onChange: function( v ) {
this.addEventListener( 'change', function( e ) {
v( e.detail );
} );
return this;
},
},
}); });

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

@ -1,20 +1,22 @@
Gui.register( 'controller-boolean', function( value ) { /* globals Gui, Polymer */
'use strict';
return typeof value == 'boolean'; Gui.register('controller-boolean', function(value) {
} ); return typeof value == 'boolean';
Polymer( 'controller-boolean', { });
ready: function() { Polymer('controller-boolean', {
ready: function() {
},
},
toggle: function() {
toggle: function() {
this.value = !this.value;
this.value = !this.value;
}
}
}); });

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

@ -1,9 +1,12 @@
Gui.register( 'controller-function', function( value ) { /* globals Gui, Polymer */
'use strict';
return typeof value == 'function'; Gui.register('controller-function', function(value) {
} ); return typeof value == 'function';
Polymer( 'controller-function', { });
} ); Polymer('controller-function', {
});

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

@ -1,7 +1,10 @@
/* globals Gui, Polymer */
'use strict';
/* /*
[ ] 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,255 +16,255 @@
*/ */
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,
computed: { computed: {
slider: 'min !== undefined && max !== undefined' slider: 'min !== undefined && max !== undefined'
}, },
ready: function() { ready: function() {
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) {
}, false ); _this._alt = true;
}
}, false);
window.addEventListener( 'keyup', function( e ) { window.addEventListener('keyup', function(e) {
if ( e.keyCode == 18 ) _this._alt = false; if (e.keyCode == 18) {
}, false ); _this._alt = 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;
this.step = step; this.step = step;
}, },
// 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();
}, },
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 + '%';
this.$.fill.style.right = ''; this.$.fill.style.right = '';
} else { } else {
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 + '%';
this.$.fill.style.right = ''; this.$.fill.style.right = '';
} 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;
} }
}
this.$.knob.style.left = ratio * 100 + '%';
this.$.container.classList.toggle( 'positive', this.value >= 0 );
this.$.container.classList.toggle( 'negative', this.value < 0 );
this.super();
},
// Events
// -------------------------------
click: function( e ) {
this.$.input.select();
},
keydown: function( e ) {
if ( e.keyCode == 13 ) {
this.$.input.blur();
}
},
down: function( e ) {
e.preventDefault();
this._rect = this.$.track.getBoundingClientRect();
if ( !this._alt ) this.value = this.valueFromX( e.x );
this.fire( 'sliderDown' );
},
up: function( e ) {
// this.$.container.classList.add( 'transition' );
this.fire( 'sliderUp' );
},
trackstart: function( e ) {
// this.$.container.classList.remove( 'transition' );
this._dragFriction = 1;
},
trackx: function( e ) {
if ( this.step === undefined ) {
var dv = this.valueFromDX( e.ddx );
if ( this._alt ) dv /= 10;
this.value += dv * this._dragFriction;
} else {
this.value = this.valueFromX( e.pageX );
}
},
tracky: function( e ) {
this._dragFriction = Math.max( 0.01, Math.min( 1, this.map( e.dy, 50, 300, 1, 0.1 ) ) );
},
blur: function( e ) {
var v = parseFloat( this.$.input.value );
if ( v === v ) {
this.value = v;
}
},
// Filters
// -------------------------------
truncate: function( v ) {
if ( v % 1 !== 0 && this.decimals !== undefined ) {
return this.limitDecimals( v, this.decimals );
} else {
return v;
}
},
// Helpers
// -------------------------------
limitDecimals: function( v, maxDecimals ) {
var str = v.toString();
var numDecimals = str.substring( str.indexOf( '.' ) + 1 ).length;
str = v.toFixed( Math.min( numDecimals, this.decimals ) );
for ( var z, i = 0, l = str.length; i < l; i++ ) {
if ( str.charAt( i ) !== '0' ) {
z = i;
}
}
return str.substring( 0, z+1 );
},
valueFromX: function( x ) {
return this.map( x, this._rect.left, this._rect.right, this.min, this.max );
},
valueFromDX: function( dx ) {
return this.map( dx, 0, this._rect.width, 0, this.max - this.min );
} }
this.$.knob.style.left = ratio * 100 + '%';
this.$.container.classList.toggle('positive', this.value >= 0);
this.$.container.classList.toggle('negative', this.value < 0);
this.super();
},
// Events
// -------------------------------
click: function(e) {
this.$.input.select();
},
keydown: function(e) {
if (e.keyCode == 13) {
this.$.input.blur();
}
},
down: function(e) {
e.preventDefault();
this._rect = this.$.track.getBoundingClientRect();
if (!this._alt) { this.value = this.valueFromX(e.x); }
this.fire( 'sliderDown' );
},
up: function(e) {
// this.$.container.classList.add( 'transition');
this.fire( 'sliderUp' );
},
trackstart: function(e) {
// this.$.container.classList.remove( 'transition');
this._dragFriction = 1;
},
trackx: function(e) {
if (this.step === undefined) {
var dv = this.valueFromDX(e.ddx);
if (this._alt) { dv /= 10; }
this.value += dv * this._dragFriction;
} else {
this.value = this.valueFromX(e.pageX);
}
},
tracky: function(e) {
this._dragFriction = Math.max(0.01,
Math.min(1, this.map(e.dy, 50, 300, 1, 0.1)));
},
blur: function(e) {
var v = parseFloat(this.$.input.value);
if (v === v) {
this.value = v;
}
},
// Filters
// -------------------------------
truncate: function(v) {
if (v % 1 !== 0 && this.decimals !== undefined) {
return this.limitDecimals(v, this.decimals);
} else {
return v;
}
},
// Helpers
// -------------------------------
limitDecimals: function(v, maxDecimals) {
var str = v.toString();
var numDecimals = str.substring(str.indexOf('.') + 1).length;
str = v.toFixed(Math.min(numDecimals, this.decimals));
for (var z, i = 0, l = str.length; i < l; i++) {
if (str.charAt(i) !== '0') {
z = i;
}
}
return str.substring(0, z + 1);
},
valueFromX: function(x) {
return this.map(x, this._rect.left, this._rect.right, this.min, this.max);
},
valueFromDX: function(dx) {
return this.map(dx, 0, this._rect.width, 0, this.max - this.min);
}
}); });

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

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

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

@ -1,18 +1,21 @@
/* globals Polymer, Path, Gui */
'use strict';
// [ ] scrolling when docked // [ ] scrolling when docked
// [ ] scrolling when window short and not docked // [ ] scrolling when window short and not docked
Polymer('gui-panel', { 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 window.DocumentTouch),
ready: function() { ready: function() {
this.defined = {}; this.defined = {};
// window.addEventListener( 'resize', this.checkHeight.bind( this ) );
}, },
define: function() { define: function() {
@ -29,92 +32,95 @@ Polymer('gui-panel', {
this.defined[ name ] = initialValue; this.defined[ 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 controllers; var controller;
if ( args[ 0 ] instanceof Array || typeof args[ 0 ] == 'object' ) { if ( args[ 0 ] instanceof Array || typeof args[ 0 ] == 'object' ) {
controller = document.createElement( 'controller-option' ); controller = document.createElement( 'controller-option' );
} else { } else {
controller = Gui.getController( value ); controller = Gui.getController( value );
} }
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;
}, },
// Observers
// -------------------------------
// Observers 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 this.$.container.style.transform = '';
this.$.panel.style.transform = '';
this.$.panel.style.transform = ''; } else {
} else { // todo: need the rest of the vendor prefixes ...
// wish i could pipe javascript variables into styl.
// todo: need the rest of the vendor prefixes ... var y = -this.$.controllers.offsetHeight + 'px';
// wish i could pipe javascript variables into styl. this.$.container.style.transform = 'translate3d(0, ' + y + ', 0)';
var y = -this.$.controllers.offsetHeight + 'px'; }
this.$.panel.style.transform = 'translate3d(0, ' + y + ', 0)';
} },
dockedChanged: function() {
}, this.openChanged();
dockedChanged: function() { },
this.openChanged(); // Events
// -------------------------------
}, tapClose: function() {
this.open = !this.open;
},
// Events
// -------------------------------
toggleOpen: function() { toggleOpen: function() {
this.open = !this.open; this.open = !this.open;
@ -127,19 +133,24 @@ Polymer('gui-panel', {
// } else { // } else {
// this.docked = false; // this.docked = false;
// } // }
// if ( window.innerHeight < this.$.controllers.offsetHeight) {
// this.docked = true;
// } else {
// this.docked = false;
// }
// }, // },
// Legacy
// -------------------------------
// Legacy 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
}); });

23
elements/gui-row/gui-row.js
View File

@ -1,18 +1,21 @@
/* globals Polymer */
'use strict';
Polymer('gui-row', { Polymer('gui-row', {
comment: null, comment: null,
commentOpen: false, commentOpen: false,
ready: function() { ready: function() {
}, },
openComment: function() { openComment: function() {
this.commentOpen = true; this.commentOpen = true;
}, },
closeComment: function() { closeComment: function() {
this.commentOpen = false; this.commentOpen = false;
} }
}); });

137
gulpfile.js
View File

@ -1,88 +1,101 @@
var gulp = require( 'gulp' ), var gulp = require('gulp'),
stylus = require( 'gulp-stylus' ), $ = require('gulp-load-plugins')(),
plates = require( 'gulp-plates' ), nib = require('nib'),
rename = require( 'gulp-rename' ), fs = require('fs'),
vulcan = require( 'gulp-vulcanize' ), marked = require('marked'),
insert = require( 'gulp-insert' ), karma = require('karma'),
replace = require( 'gulp-replace' ), browserSync = require('browser-sync'),
clean = require( 'gulp-clean' ), reload = browserSync.reload;
nib = require( 'nib' ),
fs = require( 'fs' ),
marked = require( 'marked' ),
karma = require( 'karma' );
gulp.task( 'default', [ 'docs', 'build' ] ); gulp.task('default', ['docs', 'build'])
gulp.task( 'watch', [ 'default' ], function() { gulp.task('watch', ['default'], function() {
karma.server.start( { karma.server.start({
frameworks: [ 'jasmine' ], frameworks: ['jasmine'],
files: [ files: [
'build/gui.js', 'build/gui.js',
'tests/*.js' 'tests/*.js'
] ]
} ); });
gulp.watch( [ 'elements/**/*.styl', 'elements/**/*.html', 'elements/**/*.js', 'gui.html' ], [ 'build' ] ); gulp.watch(['elements/**/*.styl', 'elements/**/*.html',
gulp.watch( [ 'README.md', 'docs/*' ], [ 'docs' ] ); 'elements/**/*.js', 'gui.html'], ['build']);
} ); gulp.watch(['README.md', 'docs/*'], ['docs']);
gulp.task( 'build', [ 'vulcanize' ], function() { });
return gulp.src( 'build/gui.html' ) gulp.task('build', ['vulcanize'], function() {
.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' ) );
} ); 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'));
gulp.task( 'vulcanize', [ 'css' ], function() { });
return gulp.src( 'gui.html' ) gulp.task('vulcanize', ['css'], function() {
.pipe( vulcan( {
dest: 'build',
inline: true,
strip: true
} ) );
} ); return gulp.src('gui.html')
.pipe($.vulcanize({
dest: 'build',
inline: true,
strip: true
}));
gulp.task( 'css', function() { });
return css( 'elements/**/*.styl', 'elements' ); 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( 'docs', function() { gulp.task('lint', ['jscs', 'jshint']);
css( 'docs/*.styl', 'docs' ); gulp.task('css', function() {
var content = { return css('elements/**/*.styl', 'elements');
readme: marked( fs.readFileSync( 'README.md', 'utf8' ) )
};
return gulp.src( 'docs/template.html' ) });
.pipe( plates( content ) )
.pipe( rename( 'index.html' ) )
.pipe( gulp.dest( './' ) );
} ); gulp.task('docs', function() {
gulp.task( 'clean', function() { css('docs/*.styl', 'docs');
return gulp.src( [ 'build/*', '**/*.css' ] ) var content = {
.pipe( clean() ); readme: marked(fs.readFileSync('README.md', 'utf8'))
};
} ); return gulp.src('docs/template.html')
.pipe($.plates(content))
.pipe($.rename('index.html'))
.pipe(gulp.dest('./'));
function css( src, dest ) { });
return gulp.src( src ) gulp.task('clean', function() {
.pipe( stylus( { use: [ nib() ] } ) )
.pipe( gulp.dest( dest ) ); return gulp.src(['build/*', '**/*.css'])
.pipe($.clean());
});
function css(src, dest) {
return gulp.src(src)
.pipe($.stylus({ use: [nib()] }))
.pipe(gulp.dest(dest));
} }

7
package.json
View File

@ -2,15 +2,22 @@
"name": "dat.gui", "name": "dat.gui",
"version": "0.0.0", "version": "0.0.0",
"devDependencies": { "devDependencies": {
"browser-sync": "^1.3.6",
"gulp": "^3.8.7", "gulp": "^3.8.7",
"gulp-clean": "^0.3.1", "gulp-clean": "^0.3.1",
"gulp-if": "^1.2.4",
"gulp-insert": "^0.4.0", "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-plates": "0.0.5",
"gulp-reload": "0.0.4",
"gulp-rename": "^1.2.0", "gulp-rename": "^1.2.0",
"gulp-replace": "^0.4.0", "gulp-replace": "^0.4.0",
"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",