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

style

Browse Source
This commit is contained in:
George Michael Brower 2014-09-07 21:31:51 -04:00
parent 62dafb68f9
commit d19dc2ef40
17 changed files with 729 additions and 701 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.editorconfig
View File

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

48
.jscsrc
View File

@ -1,20 +1,44 @@
{ {
"preset": "google",
"fileExtensions": [ ".js" ],
"requireParenthesesAroundIIFE": true, "fileExtensions": [".js", ".json"],
"excludeFiles": ["node_modules/**", "build/**"],
"maximumLineLength": 120, "maximumLineLength": 120,
"validateLineBreaks": "LF", "validateLineBreaks": "LF",
"validateIndentation": 2, "validateIndentation": 4,
"requireSpaceAfterKeywords": [
"if",
"else",
"for",
"while",
"do",
"switch",
"return",
"try",
"catch"
],
"requireSpaceBeforeBlockStatements": true,
"requireSpacesInConditionalExpression": {
"afterTest": true,
"beforeConsequent": true,
"afterConsequent": true,
"beforeAlternate": true
},
"requireSpacesInsideParentheses": "allButNested",
"requireSpacesInsideObjectBrackets": "allButNested",
"requireSpacesInsideArrayBrackets": "allButNested",
"requireParenthesesAroundIIFE": true,
"disallowSpacesInFunctionExpression": {
"beforeOpeningRoundBrace": true
},
"disallowKeywords": ["with"], "disallowKeywords": ["with"],
"disallowSpacesInsideObjectBrackets": null, "disallowImplicitTypeConversion": ["string"]
"disallowImplicitTypeConversion": ["string"],
"disallowMultipleVarDecl": null,
"safeContextKeyword": "_this",
"excludeFiles": [
"test/data/**"
]
} }

6
build/gui.html
View File

File diff suppressed because one or more lines are too long

42
build/gui.js
View File

File diff suppressed because one or more lines are too long

17
docs/main.js
View File

@ -1,3 +1,5 @@
'use strict';
Gui.ready( init ); Gui.ready( init );
function init() { function init() {
@ -106,7 +108,7 @@ function sticky( elements ) {
resize(); resize();
onScroll(); onScroll();
}); } );
onScroll(); onScroll();
@ -118,15 +120,18 @@ function sticky( elements ) {
var body = document.body, timer; var body = document.body, timer;
window.addEventListener('scroll', function() { window.addEventListener('scroll', function() {
clearTimeout(timer);
if(!body.classList.contains('disable-hover')) { clearTimeout( timer );
if ( !body.classList.contains('disable-hover') ) {
body.classList.add('disable-hover') body.classList.add('disable-hover')
} }
timer = setTimeout(function(){ timer = setTimeout(function() {
body.classList.remove('disable-hover') body.classList.remove('disable-hover')
}, 150); }, 150);
}, false);
}, false);
})(); })();

86
elements/Gui.js
View File

@ -1,49 +1,52 @@
(function(scope) { ( function( scope ) {
'use strict'; '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 || {}; 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;
}; };
// Register custom controllers // Register custom controllers
// ------------------------------- // -------------------------------
var controllers = {}; var controllers = {};
Gui.register = function(elementName, test) { Gui.register = function( elementName, test ) {
controllers[elementName] = test; controllers[ elementName ] = test;
}; };
// 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 );
} }
@ -51,48 +54,47 @@
}; };
// Gui ready handler ... * shakes fist at polymer * // Gui ready handler ... * shakes fist at polymer *
// ------------------------------- // -------------------------------
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 ) {
if (ready) { ready ? fnc() : readyHandlers.push( fnc );
fnc();
} else {
readyHandlers.push(fnc);
}
}; };
// Error // Error
// ------------------------------- // -------------------------------
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,30 +111,32 @@
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;
}; };
} }
// Export // Export
// ------------------------------- // -------------------------------
scope.dat = dat; scope.dat = dat;
scope.Gui = Gui; scope.Gui = Gui;
})(this);
} )( this );

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

@ -1,13 +1,9 @@
/* globals Gui, Polymer, PathObserver */ /* globals Gui, Polymer, PathObserver */
'use strict'; 'use strict';
/* // [ ] onFinishChange()
[ ] onChange() Polymer( 'controller-base', {
[ ] onFinishChange()
*/
Polymer('controller-base', {
ready: function() { ready: function() {
@ -19,15 +15,16 @@ Polymer('controller-base', {
init: function() {}, init: function() {},
// Observers // Observers
// ------------------------------- // -------------------------------
watch: function(object, path) { watch: function( object, path ) {
this.object = object; this.object = object;
this.path = path; this.path = path;
this.bind('value', new PathObserver(this.object, this.path)); this.bind( 'value', new PathObserver( this.object, this.path ));
}, },
@ -38,6 +35,7 @@ Polymer('controller-base', {
}, },
// Helpers // Helpers
// ------------------------------- // -------------------------------
@ -46,17 +44,18 @@ Polymer('controller-base', {
return this; return this;
}, },
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;
}, },
// Legacy // Legacy
// ------------------------------- // -------------------------------
listen: function() { listen: function() {
Gui.warn('controller.listen() is deprecated. ' + Gui.warn( 'controller.listen() is deprecated. ' +
'All controllers are listened for free.'); 'All controllers are listened for free.' );
return this; return this;
}, },
@ -67,7 +66,7 @@ Polymer('controller-base', {
}, },
setValue: function(v) { setValue: function( v ) {
this.value = v; this.value = v;
return this; return this;
@ -77,10 +76,13 @@ Polymer('controller-base', {
onChange: function( v ) { onChange: function( v ) {
this.addEventListener( 'change', function( e ) { this.addEventListener( 'change', function( e ) {
v( e.detail ); v( e.detail );
} ); } );
return this; return this;
}, },
}); } );

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

@ -1,13 +1,13 @@
/* globals Gui, Polymer */ /* globals Gui, Polymer */
'use strict'; 'use strict';
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() {
@ -19,4 +19,4 @@ Polymer('controller-boolean', {
} }
}); } );

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

@ -1,12 +1,12 @@
/* globals Gui, Polymer */ /* globals Gui, Polymer */
'use strict'; 'use strict';
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', {
}); } );

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

@ -6,23 +6,15 @@
[ ] 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] enter key blurs
[x] decimals
[x] step
[x] dy to drag friction
[x] negative slider
[x] hover behavior
*/ */
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,
@ -36,23 +28,23 @@ Polymer('controller-number', {
var _this = this; var _this = this;
window.addEventListener('keydown', function(e) { window.addEventListener( 'keydown', function( e ) {
if (e.keyCode == 18) { if ( e.keyCode == 18 ) {
_this._alt = true; _this._alt = true;
} }
}, false); }, false );
window.addEventListener('keyup', function(e) { window.addEventListener( 'keyup', function( e ) {
if (e.keyCode == 18) { if ( e.keyCode == 18 ) {
_this._alt = false; _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;
@ -60,69 +52,71 @@ 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();
}, },
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 + '%';
@ -131,7 +125,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;
} }
@ -140,131 +134,134 @@ 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();
}, },
// 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 ); }
this.fire( 'sliderDown' ); this.fire( 'sliderDown' );
}, },
up: function(e) { up: function( e ) {
// this.$.container.classList.add( 'transition'); // this.$.container.classList.add( 'transition' );
this.fire( 'sliderUp' ); this.fire( 'sliderUp' );
}, },
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) {
this._dragFriction = Math.max(0.01,
Math.min(1, this.map(e.dy, 50, 300, 1, 0.1)));
}, },
blur: function(e) { tracky: function( e ) {
var v = parseFloat(this.$.input.value); this._dragFriction = Math.max( 0.01, Math.min( 1, this.map( e.dy, 50, 300, 1, 0.1 )) );
if (v === v) { },
blur: function( e ) {
var v = parseFloat( this.$.input.value );
if ( v === v ) {
this.value = v; this.value = v;
} }
}, },
// 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;
} }
}, },
// 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 );
} }
}); } );

14
elements/controller-option/controller-option.js
View File

@ -1,3 +1,6 @@
/* globals Polymer, Object, Array */
'use strict';
Polymer( 'controller-option', { Polymer( 'controller-option', {
key: null, key: null,
@ -10,7 +13,7 @@ Polymer( 'controller-option', {
init: function( options ) { init: function( options ) {
if ( Array.isArray( options ) ){ if ( Array.isArray( options ) ) {
options.forEach( function( opt ) { options.forEach( function( opt ) {
@ -48,10 +51,13 @@ Polymer( 'controller-option', {
keys: function( object ) { keys: function( object ) {
if ( object ) return Object.keys( object ); if ( object ) {
return Object.keys( object );
}
} }
}); } );

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

@ -1,26 +1,28 @@
/* globals Gui, Polymer */ /* globals Gui, Polymer */
'use strict'; 'use strict';
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();
} }
} }
}); } );

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

@ -4,47 +4,51 @@
// [ ] 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) || touch: ( 'ontouchstart' in window ) ||
(!!window.DocumentTouch && document instanceof window.DocumentTouch), ( !!window.DocumentTouch && document instanceof window.DocumentTouch ),
ready: function() { ready: function() {
this.domElement = this;
this.defined = {}; this.defined = {};
}, },
define: function() { define: function() {
var name, initialValue, args;
if ( arguments.length == 1 ) { if ( arguments.length == 1 ) {
var name = arguments[ 0 ]; name = arguments[ 0 ];
return this.defined[ name ]; return this.defined[ name ];
} }
var initialValue = arguments[ 1 ]; initialValue = arguments[ 1 ];
var name = arguments[ 0 ]; name = arguments[ 0 ];
var args = [ this.defined, name ]; args = [ this.defined, name ];
args = args.concat( Array.prototype.slice.call( arguments, 2 ) ); args = args.concat( Array.prototype.slice.call( arguments, 2 ) );
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 + return Gui.error( object +
' doesn\'t have a value for path "' + path + '".'); ' doesn\'t have a value for path "' + path + '".' );
} }
var args = Array.prototype.slice.call( arguments, 2 ); var args = Array.prototype.slice.call( arguments, 2 );
@ -60,26 +64,26 @@ Polymer('gui-panel', {
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;
@ -90,7 +94,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
@ -103,7 +107,7 @@ Polymer('gui-panel', {
// wish i could pipe javascript variables into styl. // wish i could pipe javascript variables into styl.
var y = -this.$.controllers.offsetHeight + 'px'; var y = -this.$.controllers.offsetHeight + 'px';
this.$.container.style.transform = 'translate3d(0, ' + y + ', 0)'; this.$.container.style.transform = 'translate3d( 0, ' + y + ', 0 )';
} }
@ -126,31 +130,15 @@ Polymer('gui-panel', {
this.open = !this.open; this.open = !this.open;
}, },
// checkHeight: function() {
// if ( window.innerHeight < this.$.controllers.offsetHeight ) {
// this.docked = true;
// } else {
// 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. ' + Gui.warn( 'controller.listenAll() is deprecated. ' +
'All controllers are listened for free.'); 'All controllers are listened for free.' );
} }
// todo: domElement
}); } );

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

@ -1,7 +1,7 @@
/* globals Polymer */ /* globals Polymer */
'use strict'; 'use strict';
Polymer('gui-row', { Polymer( 'gui-row', {
comment: null, comment: null,
commentOpen: false, commentOpen: false,
@ -18,4 +18,4 @@ Polymer('gui-row', {
this.commentOpen = false; this.commentOpen = false;
} }
}); } );

125
gulpfile.js
View File

@ -1,101 +1,106 @@
var gulp = require('gulp'), var gulp = require( 'gulp' ),
$ = require('gulp-load-plugins')(), $ = require( 'gulp-load-plugins' )(),
nib = require('nib'), nib = require( 'nib' ),
fs = require('fs'), fs = require( 'fs' ),
marked = require('marked'), marked = require( 'marked' ),
karma = require('karma'), karma = require( 'karma' ),
browserSync = require('browser-sync'), browserSync = require( 'browser-sync' ),
reload = browserSync.reload; reload = browserSync.reload;
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', gulp.watch( ['elements/**/*.styl', 'elements/**/*.html', 'elements/**/*.js', 'gui.html'], ['build'] );
'elements/**/*.js', 'gui.html'], ['build']);
gulp.watch(['README.md', 'docs/*'], ['docs']); gulp.watch( ['README.md', 'docs/*'], ['docs'] );
}); } );
gulp.task('build', ['vulcanize'], function() { gulp.task( 'build', ['vulcanize'], function() {
return gulp.src('build/gui.html') return gulp.src( 'build/gui.html' )
.pipe($.replace(/\\/g, '\\\\')) .pipe( $.replace( /\\/g, '\\\\' ) )
.pipe($.replace(/'/g, '\\\'')) .pipe( $.replace( /'/g, '\\\'' ) )
.pipe($.replace(/^(.*)$/gm, '\'$1\',')) .pipe( $.replace( /^( .* )$/gm, '\'$1\',' ) )
.pipe($.insert.wrap('document.write([', '].join("\\n"))')) .pipe( $.insert.wrap( 'document.write( [', '].join( "\\n" ) )' ) )
.pipe($.rename('gui.js')) .pipe( $.rename( 'gui.js' ) )
.pipe(gulp.dest('build')); .pipe( gulp.dest( 'build' ) );
}); } );
gulp.task('vulcanize', ['css'], function() { gulp.task( 'vulcanize', ['css'], function() {
return gulp.src('gui.html') return gulp.src( 'gui.html' )
.pipe($.vulcanize({ .pipe( $.vulcanize( {
dest: 'build', dest: 'build',
inline: true, inline: true,
strip: true strip: true
}));
}); } ) );
gulp.task('jscs', function() { } );
return gulp.src('elements/**/*.js')
.pipe($.jscs());
});
gulp.task('jshint', function() { gulp.task( 'lint', ['jscs', 'jshint'] );
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( 'jscs', function() {
gulp.task('css', function() { return gulp.src( 'elements/**/*.js', '*.json', '*.js' )
.pipe( $.jscs() );
return css('elements/**/*.styl', 'elements'); } );
}); gulp.task( 'jshint', function() {
gulp.task('docs', function() { return gulp.src( 'elements/**/*.js', '*.json', '*.js' )
.pipe( reload( { stream: true, once: true } ) )
.pipe( $.jshint( '.jshintrc' ) )
.pipe( $.jshint.reporter( 'jshint-stylish' ) )
.pipe( $.if( !browserSync.active, $.jshint.reporter( 'fail' ) ) );
css('docs/*.styl', 'docs'); } );
gulp.task( 'css', function() {
return css( 'elements/**/*.styl', 'elements' );
} );
gulp.task( 'docs', function() {
css( 'docs/*.styl', 'docs' );
var content = { var content = {
readme: marked(fs.readFileSync('README.md', 'utf8')) readme: marked( fs.readFileSync( 'README.md', 'utf8' ) )
}; };
return gulp.src('docs/template.html') return gulp.src( 'docs/template.html' )
.pipe($.plates(content)) .pipe( $.plates( content ) )
.pipe($.rename('index.html')) .pipe( $.rename( 'index.html' ) )
.pipe(gulp.dest('./')); .pipe( gulp.dest( './' ) );
}); } );
gulp.task('clean', function() { gulp.task( 'clean', function() {
return gulp.src(['build/*', '**/*.css']) return gulp.src( ['build/*', '**/*.css'] )
.pipe($.clean()); .pipe( $.clean() );
}); } );
function css(src, dest) { function css( src, dest ) {
return gulp.src(src) return gulp.src( src )
.pipe($.stylus({ use: [nib()] })) .pipe( $.stylus( { use: [nib()] } ) )
.pipe(gulp.dest(dest)); .pipe( gulp.dest( dest ) );
} }