basecontroller

elements/base-controller.html

@@ -0,0 +1,66 @@
+<link rel="import" href="../components/polymer/polymer.html">
+
+<polymer-element name="base-controller">
+
+<template>
+
+<style>
+
+</style>
+
+
+
+</template>
+
+</div>
+
+<script>
+Polymer('base-controller', {
+
+    object: null,
+    property: null,
+
+    ready: function() {
+        this.update();
+    },
+
+    objectChanged: function() {
+        if ( this.object && this.property ) {
+            this.bindToObject();
+        }
+    },
+
+    propertyChanged: function() {
+        if ( this.object && this.property ) {
+            this.bindToObject();
+        }
+    },
+
+    valueChanged: function() {
+        if ( this._boundToObject ) this.object[ this.property ] = this.value;
+        else this.update();
+    },
+
+    bindToObject: function() {
+        
+        var _this = this;
+        
+        this._boundToObject = true;
+
+        Object.observe( this.object, function( changes ) {
+
+            changes.forEach( function( c ) {
+
+                if ( c.name == _this.property ) {
+                    _this.update()
+                }
+
+            } );
+
+        } );
+    },
+
+});
+</script>
+
+</polymer-element>

elements/gui-panel.html

@@ -0,0 +1,34 @@
+<link rel="import" href="../components/polymer/polymer.html">
+
+<polymer-element name="gui-panel">
+
+<template>
+
+<style>
+:host {
+    position: absolute;
+    top: 0;
+    right: 20px;
+    width: 300px;
+}
+</style>
+
+<div>
+    <content></content>
+</div>
+
+</template>
+
+</div>
+
+<script>
+Polymer('gui-panel', {
+
+    ready: function() {
+        
+    }
+
+});
+</script>
+
+</polymer-element>

elements/gui-row.html

@@ -0,0 +1,48 @@
+<link rel="import" href="../components/polymer/polymer.html">
+
+<polymer-element name="gui-row" attributes="name">
+
+<template>
+
+<style>
+
+#row { 
+    -webkit-text-select: none;
+    background: #e74400;
+}
+
+#name {
+    font: 11px 'Montserrat', sans-serif;
+    color: #fff;
+
+    -webkit-font-smoothing: antialiased;
+    width: 35%;
+    padding: 0 10px;
+    box-sizing: border-box;
+}
+
+
+</style>
+
+<div id="row" layout horizontal center>
+    <div id="name">{{ name }}</div>
+    <div id="controller" flex>
+        <content></content>
+    </div>
+</div>
+
+</template>
+
+</div>
+
+<script>
+Polymer('gui-row', {
+
+    ready: function() {
+        
+    }
+
+});
+</script>
+
+</polymer-element>

elements/number-controller.css

@@ -0,0 +1,97 @@
+:host {
+    display: block;
+    -webkit-text-select: none;
+    font-size: 0;
+    height: 100%;
+}
+
+:host * {
+    margin: 0;
+}
+
+#track-container { 
+    height: 100%;
+    width: 100%;
+    height: 30px;
+}
+
+#track { 
+    width: 100%;
+    height: 11px;
+    display: inline-block;
+    position: relative;
+    border-radius: 20px;
+    background: rgba( 0, 0, 0, 0.1 );
+
+}
+
+#fill {
+    height: 9px;
+    margin-top: 1px;
+    margin-left: 1px;
+    border-radius: 10px;
+    position: absolute;
+    background: #fff;
+    pointer-events: none;
+}
+
+
+#container.transition #knob {
+    -webkit-transition: left 0.1s ease-out;
+}
+
+#container.transition #fill {
+    -webkit-transition: width 0.1s ease-out;
+}
+
+.straddle-zero #knob { 
+    position: absolute;
+    pointer-events: none;
+    width: 9px;
+    height: 9px;
+    margin-top: 1px;
+    background-color: #fff;
+    border-radius: 100%;
+}
+
+.straddle-zero.negative #knob {
+    margin-left: -3px;
+}
+.straddle-zero.positive #knob {
+    margin-left: -5px;
+}
+
+/*
+.negative #knob,
+.negative #fill { 
+    background: #333;
+}
+*/
+input { 
+
+    font: 11px 'Montserrat', sans-serif;
+    color: #fff;
+    -webkit-font-smoothing: antialiased;
+
+    padding-left: 5px;
+    display: inline-block;
+    vertical-align: top;
+    background: transparent;
+    border-radius: 10px;
+    height: 30px;
+    border: 0;
+    text-align: center;
+    outline: none;
+    width: 20%;
+    -webkit-transition: width 0.24s cubic-bezier(.25,.25,0,1);
+}
+
+
+input:hover {
+    width: 28%;
+} 
+
+input:focus { 
+    width: 65%;
+}
+

elements/number-controller.html

@@ -0,0 +1,215 @@
+<!-- 
+
+todo:
+step
+decimals
+only validate input box on blur, not on keydown
+
+dy to drag friction
+
+ -->
+
+<link rel="import" href="../components/polymer/polymer.html">
+
+<polymer-element name="gui-number" attributes="min max value step" constructor="NumberController">
+
+<template>
+
+<link rel="stylesheet" href="number-controller.css">
+
+<div id="container" horizontal layout center>
+
+    <div id="track-container"
+         on-down="{{ down }}"
+         on-trackx="{{ trackx }}"
+         on-trackstart="{{ trackstart }}"
+         horizontal layout center
+         flex>
+
+        <div id="track">
+
+            <div id="fill">
+                
+            </div>
+
+            <div id="knob">
+                
+            </div>
+
+        </div>
+
+    </div>
+
+    <input type="text" 
+           value="{{ value }}"
+           on-click="{{ click }}"
+           id="input">
+
+    </template>
+
+</div>
+
+<script>
+Polymer('gui-number', {
+
+    min: 0,
+    max: 100,
+    step: 1,
+    value: 50,
+
+    object: null,
+    property: null,
+
+    ready: function() {
+
+        var _this = this;
+
+        window.addEventListener( 'keydown', function( e ) {
+            if ( e.keyCode == 18 ) _this._alt = true;
+            if ( e.keyCode == 16 ) _this._shift = true;
+        }, false );
+
+        window.addEventListener( 'keyup', function( e ) {
+            if ( e.keyCode == 18 ) _this._alt = false;
+            if ( e.keyCode == 16 ) _this._shift = false;
+        }, false );
+
+        this.update();
+
+    },
+
+    objectChanged: function() {
+        if ( this.object && this.property ) {
+            this.bindToObject();
+        }
+    },
+
+    propertyChanged: function() {
+        if ( this.object && this.property ) {
+            this.bindToObject();
+        }
+    },
+
+    valueChanged: function() {
+        this.value = Math.max( this.value, this.min );
+        this.value = Math.min( this.value, this.max );
+        if ( this._boundToObject ) this.object[ this.property ] = this.value;
+        else this.update();
+    },
+
+    minChanged: function() {
+        this.value = Math.max( this.value, this.min );
+        this.update();
+    },
+
+    maxChanged: function() {
+        this.value = Math.min( this.value, this.max );
+        this.update();
+    },
+
+    bindToObject: function() {
+        
+        var _this = this;
+        
+        this._boundToObject = true;
+
+        Object.observe( this.object, function( changes ) {
+
+            changes.forEach( function( c ) {
+
+                if ( c.name == _this.property ) {
+                    _this.update()
+                }
+
+            } );
+
+        } );
+    },
+
+    update: function() {
+        
+        var ratio = this.map( this.value, this.min, this.max, 0, 1 );
+
+        if ( this.min < 0 && this.max > 0 ) {
+
+            this.$.container.classList.add( 'straddle-zero' );
+
+            var zero = this.map( 0, this.min, this.max, 0, 1 );
+
+            if ( this.value >= 0 ) {
+
+                this.$.fill.style.left = zero * 100 + '%';
+                this.$.fill.style.width = (ratio - zero) * 100 + '%';
+                this.$.fill.style.right = '';
+
+            } else { 
+
+                this.$.fill.style.left = '';
+                this.$.fill.style.width = (zero - ratio) * 100 + '%';
+                this.$.fill.style.right = ( 1 - zero ) * 100 + '%';
+
+            }
+
+        } else { 
+
+            this.$.container.classList.remove( 'straddle-zero' );
+
+            this.$.fill.style.left = 0;
+            this.$.fill.style.width = ratio * 100 + '%';
+            this.$.fill.style.right = '';
+
+        }
+
+        this.$.knob.style.left = ratio * 100 + '%';
+
+        this.$.container.classList.toggle( 'positive', this.value >= 0 );
+        this.$.container.classList.toggle( 'negative', this.value < 0 );
+
+    },
+
+    // Events
+    // ------------------------------- 
+    
+    click: function( e ) {
+        this.$.input.select();
+    },
+
+    down: function( e ) {
+        e.preventDefault();
+        this.$.container.classList.add( 'transition' );
+        this._rect = this.$.track.getBoundingClientRect();
+        if ( !this._alt ) this.setValueFromX( e.x );
+    },
+
+    trackstart: function( e ) {
+        this.$.container.classList.remove( 'transition' );
+    },
+
+    trackx: function( e ) {
+        var dv = this.setValueFromDX( e.ddx );
+        if ( this._alt ) dv /= 10;
+        if ( this._shift ) dv /= 10;
+        this.value += dv;
+    },
+
+
+    // Helpers
+    // ------------------------------- 
+    
+    setValueFromX: function( x ) {
+        this.value = this.map( x, this._rect.left, this._rect.right, this.min, this.max );
+    },
+
+    setValueFromDX: function( dx ) {
+        return this.map( dx, 0, this._rect.width, 0, this.max - this.min );
+    },
+
+    map: function( x, a, b, c, d ) {
+        return ( x - a ) / ( b - a ) * ( d - c ) + c;
+    }
+    
+
+});
+</script>
+
+</polymer-element>