option controller

elements/controller-base/controller-base.js

@@ -4,7 +4,6 @@
 [ ] onFinishChange( )
 
 */
-
 Polymer('controller-base', {
 
     ready: function() {
@@ -45,6 +44,11 @@ Polymer('controller-base', {
         return ( x - a ) / ( b - a ) * ( d - c ) + c;
     },
 
+    on: function( event, listener ) {
+        this.addEventListener( event, listener );
+        return this;
+    },
+    
 
     // Legacy
     // ------------------------------- 

elements/controller-number/controller-number.js

@@ -164,12 +164,16 @@ Polymer( 'controller-number', {
         this._rect = this.$.track.getBoundingClientRect();
         if ( !this._alt ) this.value = this.valueFromX( e.x );
 
+        this.fire( 'sliderDown' );
+
     },
 
     up: function( e ) {
 
         // this.$.container.classList.add( 'transition' );
 
+        this.fire( 'sliderUp' );
+
     },
 
     trackstart: function( e ) {

elements/controller-option/controller-option.html

@@ -2,7 +2,7 @@
 
 <script src="controller-option.js"></script>
 
-<polymer-element name="controller-option" extends="controller-base" attributes="options">
+<polymer-element name="controller-option" extends="controller-base" attributes="options key">
 
 <template>
 
@@ -10,10 +10,10 @@
 
 <div id="container" horizontal layout center>
     
-    <select value="{{ value }}">
+    <select value="{{ key }}" on-change="{{ change }}">
 
-        <template repeat="{{ name in options | getKeys }}">
-            <option value="{{ options[ name ] }}">{{ name }}</option>
+        <template repeat="{{ name in options | keys }}">
+            <option value="{{ name }}">{{ name }}</option>
         </template>
 
     </select>

elements/controller-option/controller-option.js

@@ -1,5 +1,7 @@
 Polymer( 'controller-option', {
 
+    key: null,
+
     ready: function() {
       
         this.options = {};
@@ -24,7 +26,27 @@ Polymer( 'controller-option', {
 
     },
 
-    getKeys: function( object ) {
+    valueChanged: function() {
+        
+        for ( var i in this.options ) {
+            if ( this.options[ i ] === this.value ) {
+                this.key = i;
+                break;
+            }
+        }
+
+
+        this.super();
+        
+    },
+
+    keyChanged: function() {
+
+        this.value = this.options[ this.key ];
+
+    },
+
+    keys: function( object ) {
 
         if ( object ) return Object.keys( object );
 

elements/gui-panel/gui-panel.js

@@ -35,7 +35,6 @@ Polymer('gui-panel', {
 
     add: function( object, path ) {
 
-
         // Make controller
 
         var value = Path.get( path ).getValueFrom( object );

examples/index.html

@@ -70,7 +70,7 @@
         gui.add( object, 'optionController', { A: 'a', B: 'b', C: 'c'} );
         gui.add( object, 'optionController', [ 'a', 'b', 'c' ] )
            .onChange( function( val ) {
-                console.log( val );
+                // console.log( val );
            });
 
     } );