no message

.gitignore

@@ -1,2 +1,3 @@
-bower_components
+components
 node_modules
+*.css

elements/base-controller.js

@@ -1,3 +1,10 @@
+/*
+
+[ ] onChange( )
+[ ] onFinishChange( )
+
+*/
+
 Polymer('base-controller', {
 
     value: null,
@@ -7,19 +14,36 @@ Polymer('base-controller', {
     ready: function() {
 
         var _this = this;
-        this._observer = function( changes ) {
+        this.update();
 
-            changes.forEach( function( c ) {
+    },
 
-                if ( c.name == _this.property ) {
-                    _this.value = _this.object[ _this.property ];
+    bind: function() {
+
+        if ( this._observer ) {
+            this._observer.close();            
+            delete this._observer;
         }
 
+        var _this = this;
+
+        this._observer = new PathObserver( this.object, this.property );
+        this._observer.open( function( newValue ) {
+
+            _this.value = newValue;
+
         } );
 
-        };
 
-        this.update();
+        this.value = this.object[ this.property ];
+        
+    },
+
+    update: function() {},
+
+    listen: function() {
+
+        console.warn( 'controller.listen() is deprecated. All controllers are listened for free.' );
 
     },
 
@@ -29,9 +53,6 @@ Polymer('base-controller', {
 
     objectChanged: function( oldObject, newObject ) {
 
-        if ( oldObject && this.property ) {
-            this.unbind( oldObject );
-        }
 
         if ( newObject && this.property ) {
             this.bind();
@@ -41,10 +62,6 @@ Polymer('base-controller', {
 
     propertyChanged: function( oldProperty, newProperty ) {
 
-        if ( oldProperty && this.object ) {
-            this.unbind( this.object );
-        }
-
         if ( newProperty && this.object ) {
             this.bind();
         }
@@ -61,21 +78,6 @@ Polymer('base-controller', {
 
     },
 
-    bind: function() {
-
-        Object.observe( this.object, this._observer );
-        this.value = this.object[ this.property ];
-        
-    },
-
-    unbind: function( object ) {
-
-        Object.unobserve( object, this._observer );
-
-    },
-
-    update: function() {},
-
 
     // Helpers
     // ------------------------------- 

elements/gui-panel.js

@@ -2,6 +2,45 @@ Polymer('gui-panel', {
 
     ready: function() {
         
+        document.body.appendChild( this );
+
+    },
+
+    add: function( object, property ) {
+
+        var row = document.createElement( 'gui-row' );
+        row.name = property;
+
+        var controller; 
+
+        if ( typeof object[ property ] == 'number' ) {
+
+            controller = document.createElement( 'number-controller' );
+            
+            if ( arguments[ 2 ] !== undefined ) controller.min = arguments[ 2 ];
+            if ( arguments[ 3 ] !== undefined ) controller.max = arguments[ 3 ];
+            if ( arguments[ 4 ] !== undefined ) controller.step = arguments[ 4 ];
+
+        }
+
+        controller.object = object;
+        controller.property = property;
+
+        controller.name = function( name ) {
+            row.name = name;
+        };
+
+        row.appendChild( controller );
+        this.appendChild( row );
+
+        return controller;
+
+    },
+
+    listenAll: function() {
+
+        console.warn( 'controller.listenAll() is deprecated. All controllers are listened for free.' );
+
     }
 
 });

elements/gui-row.css

@@ -1,6 +1,6 @@
 #row {
   -webkit-text-select: none;
-  background: #e74400;
+  background: #1a1a1a;
 }
 #name {
   font: 500 11px 'Roboto', sans-serif;

elements/gui-row.html

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

elements/gui-row.styl

@@ -2,7 +2,7 @@
 
 #row { 
     -webkit-text-select: none;
-    background: #e74400;
+    background: #1a1a1a;
 }
 
 #name {

elements/number-controller.css

@@ -1,11 +1,13 @@
 :host {
   display: block;
-  text-select: none;
   font-size: 0;
   height: 100%;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 #track-container {
-  height: 100%;
   width: 100%;
   height: 30px;
 }
@@ -16,7 +18,7 @@
   border-radius: 1px;
   display: inline-block;
   position: relative;
-  background: rgba(0,0,0,0.1);
+  background: rgba(255,255,255,0.25);
 }
 #fill {
   height: 1px;
@@ -25,7 +27,7 @@
   -webkit-border-radius: 1px;
   border-radius: 1px;
   position: absolute;
-  background: #fff;
+  background: #25a0d8;
   pointer-events: none;
 }
 #knob {
@@ -33,37 +35,37 @@
   height: 6px;
   margin-left: -3px;
   margin-top: -3px;
-  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.25, 0.25, 0, 1);
-  -moz-transition: -moz-transform 0.2s cubic-bezier(0.25, 0.25, 0, 1);
-  -o-transition: -o-transform 0.2s cubic-bezier(0.25, 0.25, 0, 1);
-  -ms-transition: -ms-transform 0.2s cubic-bezier(0.25, 0.25, 0, 1);
-  transition: transform 0.2s cubic-bezier(0.25, 0.25, 0, 1);
+  -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: #fff;
+  background-color: #25a0d8;
   -webkit-border-radius: 100%;
   border-radius: 100%;
 }
 #track-container:hover #knob {
-  -webkit-transform: scale(1.8);
-  -moz-transform: scale(1.8);
-  -o-transform: scale(1.8);
-  -ms-transform: scale(1.8);
-  transform: scale(1.8);
+  -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.4);
-  -moz-transform: scale(1.4);
-  -o-transform: scale(1.4);
-  -ms-transform: scale(1.4);
-  transform: scale(1.4);
+  -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;
-  padding-left: 5px;
+  margin-left: 5px;
   display: inline-block;
   background: transparent;
   border: 0;
@@ -83,5 +85,5 @@ input:focus {
   width: 50%;
 }
 input::selection {
-  background-color: rgba(0,0,0,0.1);
+  background-color: rgba(255,255,255,0.25);
 }

elements/number-controller.html

@@ -1,19 +1,3 @@
-<!-- 
-
-[ ] step
-[ ] sig figs
-
-[ ] arrow keys
-
-[ ] only validate input box on blur, not on keydown
-[ ] enter key blurs
-
-[x] dy to drag friction
-[x] negative slider
-[x] hover behavior
-
--->
-
 <link rel="import" href="../components/polymer/polymer.html">
 <link rel="import" href="base-controller.html">
 
@@ -30,10 +14,11 @@
 
 <link rel="stylesheet" href="number-controller.css">
 
-<div id="container" horizontal layout center>
+<div id="container" class="transition" horizontal layout center>
 
     <div id="track-container"
          on-down="{{ down }}"
+         on-up="{{ up }}"
          on-trackx="{{ trackx }}"
          on-tracky="{{ tracky }}"
          on-trackstart="{{ trackstart }}"
@@ -50,8 +35,10 @@
     </div>
 
     <input type="text" 
-           value="{{ value }}"
+           value="{{ truncate( value ) }}"
            on-click="{{ click }}"
+           on-keydown="{{ keydown }}"
+           on-blur="{{ blur }}"
            id="input">
 
     </template>

elements/number-controller.js

@@ -1,8 +1,26 @@
+/*
+
+[ ] arrow keys
+
+[ ] only validate input box on blur, not on keydown
+[ ] enter key blurs
+
+[ ] min( ) max( ) step( ) commands of yore
+
+[x] sig figs
+[x] step
+[x] dy to drag friction
+[x] negative slider
+[x] hover behavior
+
+*/
+
 Polymer('number-controller', {
 
     min: 0,
     max: 100,
-    step: 1,
+    step: null,
+    decimals: 3,
     value: 50,
 
     ready: function() {
@@ -28,6 +46,9 @@ 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.super();
     },
 
@@ -105,31 +126,75 @@ Polymer('number-controller', {
     down: function( e ) {
         e.preventDefault();
         this._rect = this.$.track.getBoundingClientRect();
-        if ( !this._alt ) this.setValueFromX( e.x );
+        if ( !this._alt ) this.value = this.valueFromX( e.x );
+    },
+
+    up: function( e ) {
+        // this.$.container.classList.add( 'transition' );
     },
 
     trackstart: function( e ) {
+        // this.$.container.classList.remove( 'transition' );
         this._dragFriction = 1;
     },
 
     trackx: function( e ) {
-        var dv = this.setValueFromDX( e.ddx );
+
+        if ( this.step == null ) {
+
+            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 ) {
+        this.value = parseFloat( this.$.input.value );
+    },
+
+    keydown: function( e ) {
+        if ( e.keyCode == 13 ) {
+            this.$.input.blur();
+        }
+    },
+
+
+    // Filters
+    // ------------------------------- 
+
+    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 ) );
+
+        } else { 
+            return v;
+        }
+
+    },
+    
+
     // Helpers
     // ------------------------------- 
     
-    setValueFromX: function( x ) {
-        this.value = this.map( x, this._rect.left, this._rect.right, this.min, this.max );
+    valueFromX: function( x ) {
+        return this.map( x, this._rect.left, this._rect.right, this.min, this.max );
     },
 
-    setValueFromDX: function( dx ) {
+    valueFromDX: function( dx ) {
         return this.map( dx, 0, this._rect.width, 0, this.max - this.min );
     }
 

elements/number-controller.styl

@@ -1,5 +1,8 @@
 @import 'shared';
 
+fill-color = number-color
+track-color = light
+
 track-height = 30px
 track-size = 1px;
 fill-size = 1px;
@@ -7,13 +10,13 @@ knob-size = 6px
 
 :host {
     display: block;
-    text-select: none;
     font-size: 0;
     height: 100%;
+    user-select: none;
 }
 
+
 #track-container { 
-    height: 100%;
     width: 100%;
     height: track-height;
 }
@@ -24,7 +27,7 @@ knob-size = 6px
     border-radius: track-size;
     display: inline-block;
     position: relative;
-    background: dark;
+    background: track-color;
 }
 
 #fill {
@@ -33,7 +36,7 @@ knob-size = 6px
     margin-left: 1px;
     border-radius: fill-size;
     position: absolute;
-    background: #fff;
+    background: fill-color;
     pointer-events: none;
 }
 
@@ -46,35 +49,39 @@ knob-size = 6px
     margin-left: -( knob-size / 2 );
     margin-top: -( knob-size / 2 );
 
-    transition: transform 0.2s ease;
+    transition: transform 0.1s ease;
 
     pointer-events: none;
     position: absolute;
 
-    background-color: #fff;
+    background-color: fill-color;
     border-radius: 100%;
 
 }
 
 #track-container:hover #knob {
-
-    transform: scale( 1.8 )
-
+    transform: scale( 2 )
 }
 
 #track-container:active #knob {
-
-    transform: scale( 1.4 )
-
+    transform: scale( 1.5 )
 }
 
+// .transition #knob {
+//     transition: left 0.2s ease, transform 0.1s ease;
+// }
+
+// .transition #fill {
+//     transition: left 0.2s ease, right 0.2s ease, width 0.2s ease;
+// }
+
 input { 
 
     font();
 
     height: track-height;
 
-    padding-left: 5px;
+    margin-left: 5px;
     display: inline-block;
     background: transparent;
     border: 0;
@@ -94,5 +101,5 @@ input:focus {
 }
 
 input::selection { 
-    background-color: dark;
+    background-color: light;
 }

elements/shared.styl

@@ -1,8 +1,13 @@
 @import 'nib';
 
+number-color = #25a0d8
+
 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,33 +1,37 @@
-/* jshint node: true */
-"use strict";
+var gulp    = require( 'gulp' ),
+    stylus  = require( 'gulp-stylus' ),
+    nib     = require( 'nib' ),
+    watch   = require( 'gulp-watch' ),
+    vulcan  = require( 'gulp-vulcanize' );
     
-var gulp = require("gulp"),
-    stylus = require("gulp-stylus"),
-    nib = require("nib"),
-    watch = require("gulp-watch"),
-    argv = require("yargs").argv
-
-function compileCss() {
-    var deferred = Q.defer();
-
-    gulp.src("elements/*.styl")
-        .pipe(stylus({use: [nib()]}))
-        .pipe(gulp.dest("elements"))
-        .on("end", function() {
-            deferred.resolve();
-        });
-
-    return deferred.promise;
+var paths = {
+    style: './elements/*.styl'
 }
 
-gulp.task("stylus", function () {
-    if (argv.watch) {
-        watch({glob: "elements/*.styl"}, function(files) {
+function compileCSS( files ) {
     return files
         .pipe( stylus( { use: [ nib() ] } ) )
-                .pipe(gulp.dest("elements"));
-        });
-    } else {
-        return compileCss();
+        .pipe( gulp.dest( './elements/' ) );
 }
+
+// gulp.task( 'stylus', function() {
+//     watch( { glob: "./elements/*.styl" }, compileCSS );
+// });
+
+gulp.task( 'default', function() {
+
+    compileCSS( gulp.src( paths.style ) );
+
+    gulp.src( './index.html' )
+        .pipe( vulcan( { 
+            dest: 'build', 
+            inline: true, 
+            strip: true 
+        } ) );
+
+
+} );
+
+gulp.task( 'watch', function() {
+    watch( { glob: paths.style }, compileCSS );
 } );

index-built.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    
+<link rel="import" href="build/index.html">
+
+</head>
+<body>
+
+<script src="index.js"></script>
+
+</body>
+</html>

index.html

@@ -1,86 +1,17 @@
-<!doctype html>
-<html>
+<!DOCTYPE html>
+<html lang="en">
 <head>
-    <title></title>
-    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
     
     <script src="components/platform/platform.js"></script>
-
-    <link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
-
-    <link rel="import" href="elements/number-controller.html">
+    <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">
 
 </head>
-<body touch-action="auto">
+<body>
 
-    <!-- Added via DOM -->
-
-    <gui-panel>
-
-        <gui-row name="Number">
-            <number-controller id="test"></number-controller>
-        </gui-row>
-
-        <gui-row name="variableWithSeriousRange">
-            <number-controller value="5000" min="0" max="10000"></number-controller>
-        </gui-row>
-
-        <gui-row name="Straddle Zero">
-            <number-controller min="-1" max="1" value="0"></number-controller>
-        </gui-row>
-
-        <gui-row name="Weird Range">
-            <number-controller min="-1" max="2" value="0"></number-controller>
-        </gui-row>
-
-        <gui-row name="Negative">
-            <number-controller min="-1" max="0" value="0"></number-controller>
-        </gui-row>
-
-    </gui-panel>
-
-
-<script>
-
-var object = { "x": 25 };
-
-
-document.addEventListener("polymer-ready", function() {
-
-    // Added via JavaScript
-
-    // var test1 = new NumberController();
-    // test1.min = 0;
-    // test1.max = 60;
-    // test1.value = 50;
-    
-    // document.body.appendChild( test1 );
-
-    // var test2 = new NumberController();
-
-    var test2 = document.getElementById( 'test' );
-    test2.object = object
-    test2.property = "x";
-
-    window.test2 = test2;
-
-    console.log( test2 );
-    // Object.observe( object, function(changes) {
-    //     changes.forEach( function( c ) {
-    //         if ( c.name == "x" ) {
-    //             console.log( "object.x was changed to " + c.object.x, typeof c.object.x );
-    //         }
-    //     } );
-    // } );
-    
-    // document.body.appendChild( test2 );
-    // window.test2 = test2;
-
-});
-
-</script>
+<script src="index.js"></script>
 
 </body>
 </html>

index.js

@@ -0,0 +1,21 @@
+var object = { 
+    "listen4Free": 25,
+    "step": 10,
+    "straddleZero": 0,
+    "maxIsNegative": -2,
+};
+
+// How do we kill polymer-ready ... 
+document.addEventListener( 'polymer-ready', function() {
+
+    var gui = new GUI();
+    gui.add( object, 'listen4Free' );
+    gui.add( object, 'listen4Free' );
+    gui.add( object, 'listen4Free' );
+    gui.add( object, 'listen4Free' ).name( 'customName' );
+    gui.add( object, 'step', 0, 50, 5 );
+    gui.add( object, 'straddleZero', -5, 5 );
+
+    var c = gui.add( object, 'maxIsNegative', -5, -2 );
+
+});

package.json

@@ -4,8 +4,8 @@
   "devDependencies": {
     "gulp": "^3.8.7",
     "gulp-stylus": "^1.3.0",
+    "gulp-vulcanize": "^1.0.0",
     "gulp-watch": "^0.6.9",
-    "nib": "^1.0.3",
-    "yargs": "^1.3.1"
+    "nib": "^1.0.3"
   }
 }