diff --git a/elements/number-controller.js b/elements/controller-number/controller-number.js
similarity index 85%
rename from elements/number-controller.js
rename to elements/controller-number/controller-number.js
index df0dbdd..b11ceee 100644
--- a/elements/number-controller.js
+++ b/elements/controller-number/controller-number.js
@@ -2,12 +2,11 @@
[ ] arrow keys
-[ ] only validate input box on blur, not on keydown
-[ ] enter key blurs
-
[ ] min( ) max( ) step( ) commands of yore
-[x] sig figs
+[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
@@ -15,7 +14,7 @@
*/
-Polymer('number-controller', {
+Polymer('controller-number', {
min: 0,
max: 100,
@@ -44,11 +43,14 @@ Polymer('number-controller', {
// -------------------------------
valueChanged: function() {
- this.value = Math.max( this.value, this.min );
- this.value = Math.min( this.value, this.max );
+
if ( this.step !== null ) {
this.value = Math.round( this.value / this.step ) * this.step;
}
+
+ this.value = Math.max( this.value, this.min );
+ this.value = Math.min( this.value, this.max );
+
this.super();
},
@@ -154,11 +156,16 @@ Polymer('number-controller', {
},
tracky: function( e ) {
+
this._dragFriction = Math.max( 0.01, Math.min( 1, this.map( e.dy, 50, 300, 1, 0.1 ) ) );
+
},
blur: function( e ) {
- this.value = parseFloat( this.$.input.value );
+ var v = parseFloat( this.$.input.value );
+ if ( v === v ) {
+ this.value = v;
+ }
},
keydown: function( e ) {
@@ -174,12 +181,7 @@ Polymer('number-controller', {
truncate: function( v ) {
if ( v % 1 !== 0 && this.decimals !== null ) {
-
- var s = v.toString();
- var numDecimals = s.substring( s.indexOf( '.' ) ).length;
-
- return v.toFixed( Math.min( numDecimals, this.decimals ) );
-
+ return this.limitDecimals( v, this.decimals );
} else {
return v;
}
@@ -189,6 +191,23 @@ Polymer('number-controller', {
// 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 );
diff --git a/elements/number-controller.styl b/elements/controller-number/controller-number.styl
similarity index 100%
rename from elements/number-controller.styl
rename to elements/controller-number/controller-number.styl
diff --git a/elements/gui-panel.css b/elements/gui-panel.css
deleted file mode 100644
index 022e7de..0000000
--- a/elements/gui-panel.css
+++ /dev/null
@@ -1,6 +0,0 @@
-:host {
- position: absolute;
- top: 0;
- right: 20px;
- width: 300px;
-}
diff --git a/elements/gui-panel.html b/elements/gui-panel/gui-panel.html
similarity index 78%
rename from elements/gui-panel.html
rename to elements/gui-panel/gui-panel.html
index ce86945..52712da 100644
--- a/elements/gui-panel.html
+++ b/elements/gui-panel/gui-panel.html
@@ -1,4 +1,4 @@
-
+
+
+ attributes="name">
diff --git a/elements/gui-row.js b/elements/gui-row/gui-row.js
similarity index 100%
rename from elements/gui-row.js
rename to elements/gui-row/gui-row.js
diff --git a/elements/gui-row.styl b/elements/gui-row/gui-row.styl
similarity index 100%
rename from elements/gui-row.styl
rename to elements/gui-row/gui-row.styl
diff --git a/elements/number-controller.css b/elements/number-controller.css
deleted file mode 100644
index dceacb7..0000000
--- a/elements/number-controller.css
+++ /dev/null
@@ -1,89 +0,0 @@
-:host {
- display: block;
- font-size: 0;
- height: 100%;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-#track-container {
- width: 100%;
- height: 30px;
-}
-#track {
- width: 100%;
- height: 1px;
- -webkit-border-radius: 1px;
- border-radius: 1px;
- display: inline-block;
- position: relative;
- background: rgba(255,255,255,0.25);
-}
-#fill {
- height: 1px;
- margin-top: 0px;
- margin-left: 1px;
- -webkit-border-radius: 1px;
- border-radius: 1px;
- position: absolute;
- background: #25a0d8;
- pointer-events: none;
-}
-#knob {
- width: 6px;
- height: 6px;
- margin-left: -3px;
- margin-top: -3px;
- -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.25, 0.25, 0, 1);
- -moz-transition: -moz-transform 0.1s cubic-bezier(0.25, 0.25, 0, 1);
- -o-transition: -o-transform 0.1s cubic-bezier(0.25, 0.25, 0, 1);
- -ms-transition: -ms-transform 0.1s cubic-bezier(0.25, 0.25, 0, 1);
- transition: transform 0.1s cubic-bezier(0.25, 0.25, 0, 1);
- pointer-events: none;
- position: absolute;
- background-color: #25a0d8;
- -webkit-border-radius: 100%;
- border-radius: 100%;
-}
-#track-container:hover #knob {
- -webkit-transform: scale(2);
- -moz-transform: scale(2);
- -o-transform: scale(2);
- -ms-transform: scale(2);
- transform: scale(2);
-}
-#track-container:active #knob {
- -webkit-transform: scale(1.5);
- -moz-transform: scale(1.5);
- -o-transform: scale(1.5);
- -ms-transform: scale(1.5);
- transform: scale(1.5);
-}
-input {
- font: 500 11px 'Roboto', sans-serif;
- color: #fff;
- -webkit-font-smoothing: antialiased;
- height: 30px;
- margin-left: 5px;
- display: inline-block;
- background: transparent;
- border: 0;
- text-align: center;
- outline: none;
- width: 20%;
- -webkit-transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1);
- -moz-transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1);
- -o-transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1);
- -ms-transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1);
- transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1);
-}
-input:hover {
- width: 28%;
-}
-input:focus {
- width: 50%;
-}
-input::selection {
- background-color: rgba(255,255,255,0.25);
-}
diff --git a/elements/shared.styl b/elements/shared.styl
index a86f435..ad04acc 100644
--- a/elements/shared.styl
+++ b/elements/shared.styl
@@ -7,7 +7,6 @@ ease = cubic-bezier( .25, .25, 0, 1 )
light = rgba( 255, 255, 255, 0.25 )
dark = rgba( 0, 0, 0, 0.1 );
-
font()
font: 500 11px 'Roboto', sans-serif;
color: #fff;
diff --git a/gulpfile.js b/gulpfile.js
index 5616b9f..66ae250 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,3 +1,9 @@
+/*
+
+[ ] build without polymer bundled
+
+*/
+
var gulp = require( 'gulp' ),
stylus = require( 'gulp-stylus' ),
nib = require( 'nib' ),
@@ -5,29 +11,38 @@ var gulp = require( 'gulp' ),
vulcan = require( 'gulp-vulcanize' );
var paths = {
- style: './elements/*.styl'
+ style: 'elements/**/*.styl'
}
function compileCSS( files ) {
return files
.pipe( stylus( { use: [ nib() ] } ) )
- .pipe( gulp.dest( './elements/' ) );
+ .pipe( gulp.dest( 'elements' ) );
}
-gulp.task( 'default', function() {
+
+gulp.task( 'styles', function() {
compileCSS( gulp.src( paths.style ) );
- gulp.src( './index.html' )
+} );
+
+gulp.task( 'vulcanize', function() {
+
+ gulp.src( 'index.html' )
.pipe( vulcan( {
dest: 'build',
inline: true,
strip: true
} ) );
-
} );
gulp.task( 'watch', function() {
+
watch( { glob: paths.style }, compileCSS );
-} );
\ No newline at end of file
+
+} );
+
+
+gulp.task( 'default', [ 'styles', 'vulcanize' ]);
\ No newline at end of file
diff --git a/index-built.html b/index-built.html
index 5f86cb7..3b19201 100644
--- a/index-built.html
+++ b/index-built.html
@@ -2,12 +2,12 @@
-
+
-
+
\ No newline at end of file
diff --git a/index.html b/index.html
index 1922857..cdba9a5 100644
--- a/index.html
+++ b/index.html
@@ -4,14 +4,14 @@
-
-
-
+
+
+
-
+