move controllers to their own folders, clean up gulpfile

elements/base-controller.html

@@ -1,3 +0,0 @@
-<link rel="import" href="../components/polymer/polymer.html">
-<script src="base-controller.js"></script>
-<polymer-element name="base-controller"></polymer-element>

elements/controller-base/controller-base.html

@@ -0,0 +1,3 @@
+<link rel="import" href="../../components/polymer/polymer.html">
+<script src="controller-base.js"></script>
+<polymer-element name="controller-base"></polymer-element>

elements/controller-base/controller-base.js

@@ -5,7 +5,7 @@
 
 */
 
-Polymer('base-controller', {
+Polymer('controller-base', {
 
     value: null,
     object: null,

elements/controller-number/controller-number.html

@@ -1,18 +1,17 @@
-<link rel="import" href="../components/polymer/polymer.html">
+<link rel="import" href="../../components/polymer/polymer.html">
-<link rel="import" href="base-controller.html">
+<link rel="import" href="../controller-base/controller-base.html">
 
-<script src="number-controller.js"></script>
+<script src="controller-number.js"></script>
 
 <polymer-element 
-    name="number-controller" 
+    name="controller-number" 
     attributes="min max value step" 
-    extends="base-controller"
+    extends="controller-base"
-    constructor="NumberController" 
     >
 
 <template>
 
-<link rel="stylesheet" href="number-controller.css">
+<link rel="stylesheet" href="controller-number.css">
 
 <div id="container" class="transition" horizontal layout center>
 

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 ) {
-
+            return this.limitDecimals( v, this.decimals );
-            var s = v.toString();
-            var numDecimals = s.substring( s.indexOf( '.' ) ).length;
-
-            return v.toFixed( Math.min( numDecimals, this.decimals ) );
-
         } else { 
             return v;
         }
@@ -190,6 +192,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 );
     },

elements/gui-panel.css

@@ -1,6 +0,0 @@
-:host {
-  position: absolute;
-  top: 0;
-  right: 20px;
-  width: 300px;
-}

elements/gui-panel/gui-panel.html

@@ -1,4 +1,4 @@
-<link rel="import" href="../components/polymer/polymer.html">
+<link rel="import" href="../../components/polymer/polymer.html">
 
 <polymer-element 
     name="gui-panel"

elements/gui-panel/gui-panel.js

@@ -15,7 +15,7 @@ Polymer('gui-panel', {
 
         if ( typeof object[ property ] == 'number' ) {
 
-            controller = document.createElement( 'number-controller' );
+            controller = document.createElement( 'controller-number' );
             
             if ( arguments[ 2 ] !== undefined ) controller.min = arguments[ 2 ];
             if ( arguments[ 3 ] !== undefined ) controller.max = arguments[ 3 ];

elements/gui-row.css

@@ -1,18 +0,0 @@
-#row {
-  -webkit-text-select: none;
-  background: #1a1a1a;
-}
-#name {
-  font: 500 11px 'Roboto', sans-serif;
-  color: #fff;
-  -webkit-font-smoothing: antialiased;
-  -o-text-overflow: ellipsis;
-  text-overflow: ellipsis;
-  word-wrap: break-word;
-  overflow: hidden;
-  width: 33%;
-  padding: 0 10px;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}

elements/gui-row/gui-row.html

@@ -1,9 +1,8 @@
-<link rel="import" href="../components/polymer/polymer.html">
+<link rel="import" href="../../components/polymer/polymer.html">
 
 <polymer-element 
     name="gui-row" 
-    attributes="name"
+    attributes="name">
-    constructor="GUIRow">
 
 <template>
 

elements/number-controller.css

@@ -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);
-}

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;

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 );
+
 } );
+
+
+gulp.task( 'default', [ 'styles', 'vulcanize' ]);

index.html

@@ -4,9 +4,9 @@
     
     <script src="components/platform/platform.js"></script>
     <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto" type="text/css">
-    <link rel="import" href="elements/gui-panel.html">
+    <link rel="import" href="elements/gui-panel/gui-panel.html">
-    <link rel="import" href="elements/gui-row.html">
+    <link rel="import" href="elements/gui-row/gui-row.html">
-    <link rel="import" href="elements/number-controller.html">
+    <link rel="import" href="elements/controller-number/controller-number.html">
 
 </head>
 <body>

index.js

@@ -14,7 +14,7 @@ document.addEventListener( 'polymer-ready', function() {
     gui.add( object, 'listen4Free' );
     gui.add( object, 'listen4Free' ).name( 'customName' );
     gui.add( object, 'step', 0, 50, 5 );
-    gui.add( object, 'straddleZero', -5, 5 );
+    gui.add( object, 'straddleZero', -1, 1, 0.01 );
 
     var c = gui.add( object, 'maxIsNegative', -5, -2 );