From 0dfd9f1d1affb9c99bfe21e2fe284f7548b449aa Mon Sep 17 00:00:00 2001
From: George Michael Brower
 <georgebrower@georgebrower-macbookpro2.roam.corp.google.com>
Date: Sat, 16 Aug 2014 12:43:48 -0400
Subject: [PATCH] move controllers to their own folders, clean up gulpfile

---
 elements/base-controller.html                 |  3 -
 elements/controller-base/controller-base.html |  3 +
 .../controller-base.js}                       |  2 +-
 .../controller-number.html}                   | 13 ++-
 .../controller-number.js}                     | 47 +++++++---
 .../controller-number.styl}                   |  0
 elements/gui-panel.css                        |  6 --
 elements/{ => gui-panel}/gui-panel.html       |  2 +-
 elements/{ => gui-panel}/gui-panel.js         |  2 +-
 elements/{ => gui-panel}/gui-panel.styl       |  0
 elements/gui-row.css                          | 18 ----
 elements/{ => gui-row}/gui-row.html           |  5 +-
 elements/{ => gui-row}/gui-row.js             |  0
 elements/{ => gui-row}/gui-row.styl           |  0
 elements/number-controller.css                | 89 -------------------
 elements/shared.styl                          |  1 -
 gulpfile.js                                   | 27 ++++--
 index-built.html                              |  4 +-
 index.html                                    |  8 +-
 index.js                                      |  2 +-
 20 files changed, 75 insertions(+), 157 deletions(-)
 delete mode 100644 elements/base-controller.html
 create mode 100644 elements/controller-base/controller-base.html
 rename elements/{base-controller.js => controller-base/controller-base.js} (98%)
 rename elements/{number-controller.html => controller-number/controller-number.html} (71%)
 rename elements/{number-controller.js => controller-number/controller-number.js} (85%)
 rename elements/{number-controller.styl => controller-number/controller-number.styl} (100%)
 delete mode 100644 elements/gui-panel.css
 rename elements/{ => gui-panel}/gui-panel.html (78%)
 rename elements/{ => gui-panel}/gui-panel.js (93%)
 rename elements/{ => gui-panel}/gui-panel.styl (100%)
 delete mode 100644 elements/gui-row.css
 rename elements/{ => gui-row}/gui-row.html (74%)
 rename elements/{ => gui-row}/gui-row.js (100%)
 rename elements/{ => gui-row}/gui-row.styl (100%)
 delete mode 100644 elements/number-controller.css

diff --git a/elements/base-controller.html b/elements/base-controller.html
deleted file mode 100644
index 13d18e0..0000000
--- a/elements/base-controller.html
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/elements/controller-base/controller-base.html b/elements/controller-base/controller-base.html
new file mode 100644
index 0000000..632fd6e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/elements/base-controller.js b/elements/controller-base/controller-base.js
similarity index 98%
rename from elements/base-controller.js
rename to elements/controller-base/controller-base.js
index 808b4db..9838b60 100644
--- a/elements/base-controller.js
+++ b/elements/controller-base/controller-base.js
@@ -5,7 +5,7 @@
 
 */
 
-Polymer('base-controller', {
+Polymer('controller-base', {
 
     value: null,
     object: null,
diff --git a/elements/number-controller.html b/elements/controller-number/controller-number.html
similarity index 71%
rename from elements/number-controller.html
rename to elements/controller-number/controller-number.html
index 24c80ec..c6d304e 100644
--- a/elements/number-controller.html
+++ b/elements/controller-number/controller-number.html
@@ -1,18 +1,17 @@
-<link rel="import" href="../components/polymer/polymer.html">
-<link rel="import" href="base-controller.html">
+<link rel="import" href="../../components/polymer/polymer.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"
-    constructor="NumberController" 
+    extends="controller-base"
     >
 
 <template>
 
-<link rel="stylesheet" href="number-controller.css">
+<link rel="stylesheet" href="controller-number.css">
 
 <div id="container" class="transition" horizontal layout center>
 
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 @@
-<link rel="import" href="../components/polymer/polymer.html">
+<link rel="import" href="../../components/polymer/polymer.html">
 
 <polymer-element 
     name="gui-panel"
diff --git a/elements/gui-panel.js b/elements/gui-panel/gui-panel.js
similarity index 93%
rename from elements/gui-panel.js
rename to elements/gui-panel/gui-panel.js
index 9333293..bfa920c 100644
--- a/elements/gui-panel.js
+++ b/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 ];
diff --git a/elements/gui-panel.styl b/elements/gui-panel/gui-panel.styl
similarity index 100%
rename from elements/gui-panel.styl
rename to elements/gui-panel/gui-panel.styl
diff --git a/elements/gui-row.css b/elements/gui-row.css
deleted file mode 100644
index 9351f7f..0000000
--- a/elements/gui-row.css
+++ /dev/null
@@ -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;
-}
diff --git a/elements/gui-row.html b/elements/gui-row/gui-row.html
similarity index 74%
rename from elements/gui-row.html
rename to elements/gui-row/gui-row.html
index ff5f55c..4656752 100644
--- a/elements/gui-row.html
+++ b/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"
-    constructor="GUIRow">
+    attributes="name">
 
 <template>
 
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 @@
 <html lang="en">
 <head>
     
-<link rel="import" href="build/index.html">
+    <link rel="import" href="build/index.html">
 
 </head>
 <body>
 
-<script src="index.js"></script>
+    <script src="index.js"></script>
 
 </body>
 </html>
\ 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 @@
     
     <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-row.html">
-    <link rel="import" href="elements/number-controller.html">
+    <link rel="import" href="elements/gui-panel/gui-panel.html">
+    <link rel="import" href="elements/gui-row/gui-row.html">
+    <link rel="import" href="elements/controller-number/controller-number.html">
 
 </head>
 <body>
 
-<script src="index.js"></script>
+    <script src="index.js"></script>
 
 </body>
 </html>
\ No newline at end of file
diff --git a/index.js b/index.js
index 22eece4..326da70 100644
--- a/index.js
+++ b/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 );