mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
style
This commit is contained in:
George Michael Brower
parent
62dafb68f9
commit
d19dc2ef40
@ -1,5 +0,0 @@
|
||||
# 2 space indentation
|
||||
[*.js]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
||||
52
.jscsrc
52
.jscsrc
@ -1,20 +1,44 @@
|
||||
{
|
||||
"preset": "google",
|
||||
"fileExtensions": [ ".js" ],
|
||||
|
||||
"requireParenthesesAroundIIFE": true,
|
||||
"maximumLineLength": 120,
|
||||
"validateLineBreaks": "LF",
|
||||
"validateIndentation": 2,
|
||||
"fileExtensions": [".js", ".json"],
|
||||
"excludeFiles": ["node_modules/**", "build/**"],
|
||||
|
||||
"disallowKeywords": ["with"],
|
||||
"disallowSpacesInsideObjectBrackets": null,
|
||||
"disallowImplicitTypeConversion": ["string"],
|
||||
"disallowMultipleVarDecl": null,
|
||||
"maximumLineLength": 120,
|
||||
"validateLineBreaks": "LF",
|
||||
"validateIndentation": 4,
|
||||
|
||||
"safeContextKeyword": "_this",
|
||||
"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"],
|
||||
"disallowImplicitTypeConversion": ["string"]
|
||||
|
||||
"excludeFiles": [
|
||||
"test/data/**"
|
||||
]
|
||||
}
|
||||
40
bower.json
40
bower.json
@ -1,22 +1,22 @@
|
||||
{
|
||||
"name": "dat.gui",
|
||||
"version": "0.0.0",
|
||||
"description": "Attempt at revamping dat.gui with Polymer.",
|
||||
"keywords": [
|
||||
"gui"
|
||||
],
|
||||
"authors": [
|
||||
"George Michael Brower"
|
||||
],
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"tests",
|
||||
"docs"
|
||||
],
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#~0.3.5"
|
||||
}
|
||||
"name": "dat.gui",
|
||||
"version": "0.0.0",
|
||||
"description": "Attempt at revamping dat.gui with Polymer.",
|
||||
"keywords": [
|
||||
"gui"
|
||||
],
|
||||
"authors": [
|
||||
"George Michael Brower"
|
||||
],
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"tests",
|
||||
"docs"
|
||||
],
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#~0.3.5"
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
42
build/gui.js
42
build/gui.js
File diff suppressed because one or more lines are too long
25
docs/main.js
25
docs/main.js
@ -1,3 +1,5 @@
|
||||
'use strict';
|
||||
|
||||
Gui.ready( init );
|
||||
|
||||
function init() {
|
||||
@ -106,7 +108,7 @@ function sticky( elements ) {
|
||||
resize();
|
||||
onScroll();
|
||||
|
||||
});
|
||||
} );
|
||||
|
||||
onScroll();
|
||||
|
||||
@ -118,15 +120,18 @@ function sticky( elements ) {
|
||||
|
||||
var body = document.body, timer;
|
||||
|
||||
window.addEventListener('scroll', function() {
|
||||
clearTimeout(timer);
|
||||
if(!body.classList.contains('disable-hover')) {
|
||||
body.classList.add('disable-hover')
|
||||
}
|
||||
window.addEventListener('scroll', function() {
|
||||
|
||||
timer = setTimeout(function(){
|
||||
body.classList.remove('disable-hover')
|
||||
}, 150);
|
||||
}, false);
|
||||
clearTimeout( timer );
|
||||
|
||||
if ( !body.classList.contains('disable-hover') ) {
|
||||
body.classList.add('disable-hover')
|
||||
}
|
||||
|
||||
timer = setTimeout(function() {
|
||||
body.classList.remove('disable-hover')
|
||||
}, 150);
|
||||
|
||||
}, false);
|
||||
|
||||
})();
|
||||
|
||||
252
elements/Gui.js
252
elements/Gui.js
@ -1,138 +1,142 @@
|
||||
(function(scope) {
|
||||
'use strict';
|
||||
( function( scope ) {
|
||||
|
||||
var Gui = function(params) {
|
||||
'use strict';
|
||||
|
||||
if (!ready) {
|
||||
Gui.error('Gui not ready. Put your code inside Gui.ready()');
|
||||
}
|
||||
var Gui = function( params ) {
|
||||
|
||||
params = params || {};
|
||||
if ( !ready ) {
|
||||
Gui.error( 'Gui not ready. Put your code inside Gui.ready()' );
|
||||
}
|
||||
|
||||
var panel = document.createElement('gui-panel');
|
||||
params = params || {};
|
||||
|
||||
panel.autoPlace = params.autoPlace !== false;
|
||||
var panel = document.createElement( 'gui-panel' );
|
||||
|
||||
if (panel.autoPlace) {
|
||||
document.body.appendChild(panel);
|
||||
}
|
||||
panel.autoPlace = params.autoPlace !== false;
|
||||
|
||||
return panel;
|
||||
if ( panel.autoPlace ) {
|
||||
document.body.appendChild( panel );
|
||||
}
|
||||
|
||||
};
|
||||
return panel;
|
||||
|
||||
// Register custom controllers
|
||||
// -------------------------------
|
||||
|
||||
var controllers = {};
|
||||
|
||||
Gui.register = function(elementName, test) {
|
||||
|
||||
controllers[elementName] = test;
|
||||
|
||||
};
|
||||
|
||||
// Returns a controller based on a value
|
||||
// -------------------------------
|
||||
|
||||
Gui.getController = function(value) {
|
||||
|
||||
for (var type in controllers) {
|
||||
|
||||
var test = controllers[type];
|
||||
|
||||
if (test(value)) {
|
||||
|
||||
return document.createElement(type);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// Gui ready handler ... * shakes fist at polymer *
|
||||
// -------------------------------
|
||||
|
||||
var ready = false;
|
||||
var readyHandlers = [];
|
||||
|
||||
document.addEventListener('polymer-ready', function() {
|
||||
|
||||
ready = true;
|
||||
readyHandlers.forEach(function(fnc) {
|
||||
|
||||
fnc();
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
Gui.ready = function(fnc) {
|
||||
|
||||
if (ready) {
|
||||
fnc();
|
||||
} else {
|
||||
readyHandlers.push(fnc);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// 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
|
||||
// -------------------------------
|
||||
// Register custom controllers
|
||||
// -------------------------------
|
||||
|
||||
scope.dat = dat;
|
||||
scope.Gui = Gui;
|
||||
var controllers = {};
|
||||
|
||||
})(this);
|
||||
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() {
|
||||
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 );
|
||||
@ -1,86 +1,88 @@
|
||||
/* globals Gui, Polymer, PathObserver */
|
||||
'use strict';
|
||||
|
||||
/*
|
||||
// [ ] onFinishChange()
|
||||
|
||||
[ ] onChange()
|
||||
[ ] 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.path = path;
|
||||
|
||||
this.bind('value', new PathObserver(this.object, this.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;
|
||||
},
|
||||
on: function( event, listener ) {
|
||||
this.addEventListener( event, listener );
|
||||
return this;
|
||||
},
|
||||
|
||||
// Legacy
|
||||
// -------------------------------
|
||||
map: function( x, a, b, c, d ) {
|
||||
return ( x - a ) / ( b - a ) * ( d - c ) + c;
|
||||
},
|
||||
|
||||
listen: function() {
|
||||
|
||||
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;
|
||||
|
||||
return this.value;
|
||||
},
|
||||
|
||||
},
|
||||
getValue: function() {
|
||||
|
||||
setValue: function(v) {
|
||||
return this.value;
|
||||
|
||||
this.value = v;
|
||||
return this;
|
||||
},
|
||||
|
||||
},
|
||||
setValue: function( v ) {
|
||||
|
||||
onChange: function( v ) {
|
||||
this.value = v;
|
||||
return this;
|
||||
|
||||
this.addEventListener( 'change', function( e ) {
|
||||
v( e.detail );
|
||||
} );
|
||||
return this;
|
||||
},
|
||||
|
||||
},
|
||||
onChange: function( v ) {
|
||||
|
||||
});
|
||||
this.addEventListener( 'change', function( e ) {
|
||||
|
||||
v( e.detail );
|
||||
|
||||
} );
|
||||
|
||||
return this;
|
||||
|
||||
},
|
||||
|
||||
} );
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
/* globals Gui, Polymer */
|
||||
'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() {
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
toggle: function() {
|
||||
toggle: function() {
|
||||
|
||||
this.value = !this.value;
|
||||
this.value = !this.value;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
} );
|
||||
@ -1,12 +1,12 @@
|
||||
/* globals Gui, Polymer */
|
||||
'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', {
|
||||
|
||||
});
|
||||
} );
|
||||
|
||||
@ -6,265 +6,262 @@
|
||||
[ ] arrow keys
|
||||
[ ] 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,
|
||||
decimals: 3,
|
||||
computed: {
|
||||
value: 0,
|
||||
decimals: 3,
|
||||
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) {
|
||||
if (e.keyCode == 18) {
|
||||
_this._alt = true;
|
||||
}
|
||||
}, false);
|
||||
window.addEventListener( 'keydown', function( e ) {
|
||||
if ( e.keyCode == 18 ) {
|
||||
_this._alt = true;
|
||||
}
|
||||
}, false );
|
||||
|
||||
window.addEventListener('keyup', function(e) {
|
||||
if (e.keyCode == 18) {
|
||||
_this._alt = false;
|
||||
}
|
||||
}, false);
|
||||
window.addEventListener( 'keyup', function( e ) {
|
||||
if ( e.keyCode == 18 ) {
|
||||
_this._alt = false;
|
||||
}
|
||||
}, false );
|
||||
|
||||
// this.super();
|
||||
// this.super();
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
init: function(min, max, step) {
|
||||
init: function( min, max, step ) {
|
||||
|
||||
this.min = min;
|
||||
this.max = max;
|
||||
this.step = step;
|
||||
this.min = min;
|
||||
this.max = max;
|
||||
this.step = step;
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
// Observers
|
||||
// -------------------------------
|
||||
|
||||
valueChanged: function(newValue) {
|
||||
// Observers
|
||||
// -------------------------------
|
||||
|
||||
if (this.step !== undefined) {
|
||||
this.value = Math.round(this.value / this.step) * this.step;
|
||||
}
|
||||
valueChanged: function( newValue ) {
|
||||
|
||||
if (this.min !== undefined) {
|
||||
this.value = Math.max(this.value, this.min);
|
||||
}
|
||||
if ( this.step !== undefined ) {
|
||||
this.value = Math.round( this.value / this.step ) * this.step;
|
||||
}
|
||||
|
||||
if (this.max !== undefined) {
|
||||
this.value = Math.min(this.value, this.max);
|
||||
}
|
||||
if ( this.min !== undefined ) {
|
||||
this.value = Math.max( this.value, this.min );
|
||||
}
|
||||
|
||||
this.super();
|
||||
},
|
||||
if ( this.max !== undefined ) {
|
||||
this.value = Math.min( this.value, this.max );
|
||||
}
|
||||
|
||||
minChanged: function() {
|
||||
this.super();
|
||||
|
||||
this.value = Math.max(this.value, this.min);
|
||||
this.update();
|
||||
},
|
||||
|
||||
},
|
||||
minChanged: function() {
|
||||
|
||||
maxChanged: function() {
|
||||
this.value = Math.max( this.value, this.min );
|
||||
this.update();
|
||||
|
||||
this.value = Math.min(this.value, this.max);
|
||||
this.update();
|
||||
},
|
||||
|
||||
},
|
||||
maxChanged: function() {
|
||||
|
||||
update: function() {
|
||||
this.value = Math.min( this.value, this.max );
|
||||
this.update();
|
||||
|
||||
var ratio = this.map(this.value, this.min, this.max, 0, 1);
|
||||
},
|
||||
|
||||
if (this.min < 0 && this.max > 0) {
|
||||
update: function() {
|
||||
|
||||
this.$.container.classList.add('straddle-zero');
|
||||
var ratio = this.map( this.value, this.min, this.max, 0, 1 );
|
||||
|
||||
var zero = this.map(0, this.min, this.max, 0, 1);
|
||||
if ( this.min < 0 && this.max > 0 ) {
|
||||
|
||||
if (this.value >= 0) {
|
||||
this.$.container.classList.add( 'straddle-zero' );
|
||||
|
||||
this.$.fill.style.left = zero * 100 + '%';
|
||||
this.$.fill.style.width = (ratio - zero) * 100 + '%';
|
||||
this.$.fill.style.right = '';
|
||||
var zero = this.map( 0, this.min, this.max, 0, 1 );
|
||||
|
||||
} else {
|
||||
if ( this.value >= 0 ) {
|
||||
|
||||
this.$.fill.style.left = '';
|
||||
this.$.fill.style.width = (zero - ratio) * 100 + '%';
|
||||
this.$.fill.style.right = (1 - zero) * 100 + '%';
|
||||
this.$.fill.style.left = zero * 100 + '%';
|
||||
this.$.fill.style.width = ( ratio - zero ) * 100 + '%';
|
||||
this.$.fill.style.right = '';
|
||||
|
||||
}
|
||||
} else {
|
||||
|
||||
} else {
|
||||
this.$.fill.style.left = '';
|
||||
this.$.fill.style.width = ( zero - ratio ) * 100 + '%';
|
||||
this.$.fill.style.right = ( 1 - zero ) * 100 + '%';
|
||||
|
||||
this.$.container.classList.remove('straddle-zero');
|
||||
}
|
||||
|
||||
if (this.max > 0) {
|
||||
} else {
|
||||
|
||||
this.$.fill.style.left = 0;
|
||||
this.$.fill.style.width = ratio * 100 + '%';
|
||||
this.$.fill.style.right = '';
|
||||
this.$.container.classList.remove( 'straddle-zero' );
|
||||
|
||||
} else {
|
||||
if ( this.max > 0 ) {
|
||||
|
||||
this.$.fill.style.left = '';
|
||||
this.$.fill.style.width = (1 - ratio) * 100 + '%';
|
||||
this.$.fill.style.right = 0;
|
||||
this.$.fill.style.left = 0;
|
||||
this.$.fill.style.width = ratio * 100 + '%';
|
||||
this.$.fill.style.right = '';
|
||||
|
||||
}
|
||||
} else {
|
||||
|
||||
this.$.fill.style.left = '';
|
||||
this.$.fill.style.width = ( 1 - ratio ) * 100 + '%';
|
||||
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);
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
} );
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
/* globals Polymer, Object, Array */
|
||||
'use strict';
|
||||
|
||||
Polymer( 'controller-option', {
|
||||
|
||||
key: null,
|
||||
@ -10,7 +13,7 @@ Polymer( 'controller-option', {
|
||||
|
||||
init: function( options ) {
|
||||
|
||||
if ( Array.isArray( options ) ){
|
||||
if ( Array.isArray( options ) ) {
|
||||
|
||||
options.forEach( function( opt ) {
|
||||
|
||||
@ -48,10 +51,13 @@ Polymer( 'controller-option', {
|
||||
|
||||
keys: function( object ) {
|
||||
|
||||
if ( object ) return Object.keys( object );
|
||||
if ( object ) {
|
||||
|
||||
return Object.keys( object );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
} );
|
||||
@ -1,26 +1,28 @@
|
||||
/* globals Gui, Polymer */
|
||||
'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 ) {
|
||||
|
||||
this.$.input.blur();
|
||||
|
||||
}
|
||||
|
||||
if (e.keyCode == 13) {
|
||||
this.$.input.blur();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
} );
|
||||
|
||||
@ -4,153 +4,141 @@
|
||||
// [ ] scrolling when docked
|
||||
// [ ] scrolling when window short and not docked
|
||||
|
||||
Polymer('gui-panel', {
|
||||
Polymer( 'gui-panel', {
|
||||
|
||||
docked: false,
|
||||
open: true,
|
||||
touch: ('ontouchstart' in window) ||
|
||||
(!!window.DocumentTouch && document instanceof window.DocumentTouch),
|
||||
docked: false,
|
||||
open: true,
|
||||
touch: ( 'ontouchstart' in window ) ||
|
||||
( !!window.DocumentTouch && document instanceof window.DocumentTouch ),
|
||||
|
||||
ready: function() {
|
||||
ready: function() {
|
||||
|
||||
this.defined = {};
|
||||
this.domElement = this;
|
||||
|
||||
},
|
||||
this.defined = {};
|
||||
|
||||
},
|
||||
|
||||
define: function() {
|
||||
|
||||
var name, initialValue, args;
|
||||
|
||||
if ( arguments.length == 1 ) {
|
||||
var name = arguments[ 0 ];
|
||||
name = arguments[ 0 ];
|
||||
return this.defined[ name ];
|
||||
}
|
||||
|
||||
var initialValue = arguments[ 1 ];
|
||||
var name = arguments[ 0 ];
|
||||
initialValue = arguments[ 1 ];
|
||||
name = arguments[ 0 ];
|
||||
|
||||
var args = [ this.defined, name ];
|
||||
args = [ this.defined, name ];
|
||||
args = args.concat( Array.prototype.slice.call( arguments, 2 ) );
|
||||
|
||||
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) {
|
||||
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 controller;
|
||||
var args = Array.prototype.slice.call( arguments, 2 );
|
||||
var controller;
|
||||
|
||||
if ( args[ 0 ] instanceof Array || typeof args[ 0 ] == 'object' ) {
|
||||
controller = document.createElement( 'controller-option' );
|
||||
} else {
|
||||
controller = Gui.getController( value );
|
||||
}
|
||||
if ( args[ 0 ] instanceof Array || typeof args[ 0 ] == 'object' ) {
|
||||
controller = document.createElement( 'controller-option' );
|
||||
} else {
|
||||
controller = Gui.getController( value );
|
||||
}
|
||||
|
||||
if ( !controller ) {
|
||||
return Gui.error( 'Unrecognized type:', value );
|
||||
}
|
||||
if ( !controller ) {
|
||||
return Gui.error( 'Unrecognized type:', value );
|
||||
}
|
||||
|
||||
controller.watch(object, path);
|
||||
controller.init.apply(controller, args);
|
||||
controller.watch( object, path );
|
||||
controller.init.apply( controller, args );
|
||||
|
||||
// Make row
|
||||
// Make row
|
||||
|
||||
var row = document.createElement('gui-row');
|
||||
row.name = path;
|
||||
var row = document.createElement( 'gui-row' );
|
||||
row.name = path;
|
||||
|
||||
controller.row = row;
|
||||
controller.row = row;
|
||||
|
||||
controller.name = function(name) {
|
||||
row.name = name;
|
||||
};
|
||||
controller.name = function( name ) {
|
||||
row.name = name;
|
||||
};
|
||||
|
||||
controller.comment = function(comment) {
|
||||
row.comment = comment;
|
||||
};
|
||||
controller.comment = function( comment ) {
|
||||
row.comment = comment;
|
||||
};
|
||||
|
||||
row.appendChild(controller);
|
||||
this.appendChild(row);
|
||||
row.appendChild( controller );
|
||||
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.$.container.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 ...
|
||||
// wish i could pipe javascript variables into styl.
|
||||
|
||||
var y = -this.$.controllers.offsetHeight + 'px';
|
||||
this.$.container.style.transform = 'translate3d(0, ' + y + ', 0)';
|
||||
var y = -this.$.controllers.offsetHeight + 'px';
|
||||
this.$.container.style.transform = 'translate3d( 0, ' + y + ', 0 )';
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
dockedChanged: function() {
|
||||
dockedChanged: function() {
|
||||
|
||||
this.openChanged();
|
||||
this.openChanged();
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
// Events
|
||||
// -------------------------------
|
||||
// Events
|
||||
// -------------------------------
|
||||
|
||||
tapClose: function() {
|
||||
this.open = !this.open;
|
||||
},
|
||||
tapClose: function() {
|
||||
this.open = !this.open;
|
||||
},
|
||||
|
||||
toggleOpen: function() {
|
||||
this.open = !this.open;
|
||||
},
|
||||
|
||||
// checkHeight: function() {
|
||||
// Legacy
|
||||
// -------------------------------
|
||||
|
||||
// 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;
|
||||
// }
|
||||
listenAll: function() {
|
||||
|
||||
// },
|
||||
Gui.warn( 'controller.listenAll() is deprecated. ' +
|
||||
'All controllers are listened for free.' );
|
||||
|
||||
// Legacy
|
||||
// -------------------------------
|
||||
}
|
||||
|
||||
listenAll: function() {
|
||||
|
||||
Gui.warn('controller.listenAll() is deprecated. ' +
|
||||
'All controllers are listened for free.');
|
||||
|
||||
}
|
||||
|
||||
// todo: domElement
|
||||
|
||||
});
|
||||
} );
|
||||
@ -1,21 +1,21 @@
|
||||
/* globals Polymer */
|
||||
'use strict';
|
||||
|
||||
Polymer('gui-row', {
|
||||
Polymer( 'gui-row', {
|
||||
|
||||
comment: null,
|
||||
commentOpen: false,
|
||||
comment: null,
|
||||
commentOpen: false,
|
||||
|
||||
ready: function() {
|
||||
ready: function() {
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
openComment: function() {
|
||||
this.commentOpen = true;
|
||||
},
|
||||
openComment: function() {
|
||||
this.commentOpen = true;
|
||||
},
|
||||
|
||||
closeComment: function() {
|
||||
this.commentOpen = false;
|
||||
}
|
||||
closeComment: function() {
|
||||
this.commentOpen = false;
|
||||
}
|
||||
|
||||
});
|
||||
} );
|
||||
|
||||
145
gulpfile.js
145
gulpfile.js
@ -1,101 +1,106 @@
|
||||
var gulp = require('gulp'),
|
||||
$ = require('gulp-load-plugins')(),
|
||||
nib = require('nib'),
|
||||
fs = require('fs'),
|
||||
marked = require('marked'),
|
||||
karma = require('karma'),
|
||||
browserSync = require('browser-sync'),
|
||||
var gulp = require( 'gulp' ),
|
||||
$ = require( 'gulp-load-plugins' )(),
|
||||
nib = require( 'nib' ),
|
||||
fs = require( 'fs' ),
|
||||
marked = require( 'marked' ),
|
||||
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() {
|
||||
gulp.task( 'watch', ['default'], function() {
|
||||
|
||||
karma.server.start({
|
||||
frameworks: ['jasmine'],
|
||||
files: [
|
||||
'build/gui.js',
|
||||
'tests/*.js'
|
||||
]
|
||||
});
|
||||
karma.server.start( {
|
||||
frameworks: ['jasmine'],
|
||||
files: [
|
||||
'build/gui.js',
|
||||
'tests/*.js'
|
||||
]
|
||||
} );
|
||||
|
||||
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']);
|
||||
gulp.watch( ['README.md', 'docs/*'], ['docs'] );
|
||||
|
||||
});
|
||||
} );
|
||||
|
||||
gulp.task('build', ['vulcanize'], 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(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() {
|
||||
gulp.task( 'vulcanize', ['css'], function() {
|
||||
|
||||
return gulp.src('gui.html')
|
||||
.pipe($.vulcanize({
|
||||
dest: 'build',
|
||||
inline: true,
|
||||
strip: true
|
||||
}));
|
||||
return gulp.src( 'gui.html' )
|
||||
.pipe( $.vulcanize( {
|
||||
dest: 'build',
|
||||
inline: true,
|
||||
strip: true
|
||||
|
||||
});
|
||||
} ) );
|
||||
|
||||
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('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');
|
||||
} );
|
||||
|
||||
var content = {
|
||||
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( 'css', function() {
|
||||
|
||||
});
|
||||
return css( 'elements/**/*.styl', 'elements' );
|
||||
|
||||
gulp.task('clean', function() {
|
||||
} );
|
||||
|
||||
return gulp.src(['build/*', '**/*.css'])
|
||||
.pipe($.clean());
|
||||
gulp.task( 'docs', function() {
|
||||
|
||||
});
|
||||
css( 'docs/*.styl', 'docs' );
|
||||
|
||||
function css(src, dest) {
|
||||
var content = {
|
||||
readme: marked( fs.readFileSync( 'README.md', 'utf8' ) )
|
||||
};
|
||||
|
||||
return gulp.src(src)
|
||||
.pipe($.stylus({ use: [nib()] }))
|
||||
.pipe(gulp.dest(dest));
|
||||
return gulp.src( 'docs/template.html' )
|
||||
.pipe( $.plates( content ) )
|
||||
.pipe( $.rename( 'index.html' ) )
|
||||
.pipe( gulp.dest( './' ) );
|
||||
|
||||
} );
|
||||
|
||||
gulp.task( 'clean', function() {
|
||||
|
||||
return gulp.src( ['build/*', '**/*.css'] )
|
||||
.pipe( $.clean() );
|
||||
|
||||
} );
|
||||
|
||||
function css( src, dest ) {
|
||||
|
||||
return gulp.src( src )
|
||||
.pipe( $.stylus( { use: [nib()] } ) )
|
||||
.pipe( gulp.dest( dest ) );
|
||||
|
||||
}
|
||||
|
||||
50
package.json
50
package.json
@ -1,27 +1,27 @@
|
||||
{
|
||||
"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",
|
||||
"marked": "^0.3.2",
|
||||
"nib": "^1.0.3"
|
||||
}
|
||||
"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",
|
||||
"marked": "^0.3.2",
|
||||
"nib": "^1.0.3"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user