From d76808c344895b0db2756585c2bc06c96fb6782a Mon Sep 17 00:00:00 2001
From: George Michael Brower
 <georgebrower@georgebrower-macbookpro2.roam.corp.google.com>
Date: Sun, 7 Sep 2014 19:55:40 -0400
Subject: [PATCH] option controller

---
 build/gui.html                                |  4 ++--
 build/gui.js                                  |  4 ++--
 elements/controller-base/controller-base.js   |  8 +++++--
 .../controller-number/controller-number.js    |  4 ++++
 .../controller-option/controller-option.html  |  8 +++----
 .../controller-option/controller-option.js    | 24 ++++++++++++++++++-
 elements/gui-panel/gui-panel.js               |  1 -
 examples/index.html                           |  2 +-
 8 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/build/gui.html b/build/gui.html
index 900466a..2315390 100644
--- a/build/gui.html
+++ b/build/gui.html
@@ -14,8 +14,8 @@ if(d?f=f.toModel:"function"==typeof f.toDOM&&(f=f.toDOM),"function"!=typeof f)re
 <div hidden>undefined</div>
 
 <!-- controllers -->
-<div hidden><script>Polymer("controller-base",{ready:function(){this.update()},update:function(){},init:function(){},watch:function(object,path){this.object=object;this.path=path;this.bind("value",new PathObserver(this.object,this.path))},valueChanged:function(){this.update();this.fire("change",this.value)},map:function(x,a,b,c,d){return(x-a)/(b-a)*(d-c)+c},listen:function(){Gui.warn("controller.listen() is deprecated. All controllers are listened for free.");return this},getValue:function(){return this.value},setValue:function(v){this.value=v;return this},onChange:function(v){this.addEventListener("change",function(e){v(e.detail)});return this}});</script><polymer-element name="controller-base" attributes="object path value" assetpath="../elements/controller-base/"></polymer-element><script>Gui.register("controller-number",function(value){return typeof value=="number"});Polymer("controller-number",{value:0,decimals:3,computed:{slider:"min !== undefined && max !== undefined"},ready:function(){var _this=this;window.addEventListener("keydown",function(e){if(e.keyCode==18)_this._alt=true},false);window.addEventListener("keyup",function(e){if(e.keyCode==18)_this._alt=false},false);this.super()},init:function(min,max,step){this.min=min;this.max=max;this.step=step},valueChanged:function(newValue){if(this.step!==undefined){this.value=Math.round(this.value/this.step)*this.step}if(this.min!==undefined){this.value=Math.max(this.value,this.min)}if(this.max!==undefined){this.value=Math.min(this.value,this.max)}this.super()},minChanged:function(){this.value=Math.max(this.value,this.min);this.update()},maxChanged:function(){this.value=Math.min(this.value,this.max);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");if(this.max>0){this.$.fill.style.left=0;this.$.fill.style.width=ratio*100+"%";this.$.fill.style.right=""}else{this.$.fill.style.left="";this.$.fill.style.width=(1-ratio)*100+"%";this.$.fill.style.right=0}}this.$.knob.style.left=ratio*100+"%";this.$.container.classList.toggle("positive",this.value>=0);this.$.container.classList.toggle("negative",this.value<0);this.super()},click:function(e){this.$.input.select()},keydown:function(e){if(e.keyCode==13){this.$.input.blur()}},down:function(e){e.preventDefault();this._rect=this.$.track.getBoundingClientRect();if(!this._alt)this.value=this.valueFromX(e.x)},up:function(e){},trackstart:function(e){this._dragFriction=1},trackx:function(e){if(this.step===undefined){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(.01,Math.min(1,this.map(e.dy,50,300,1,.1)))},blur:function(e){var v=parseFloat(this.$.input.value);if(v===v){this.value=v}},truncate:function(v){if(v%1!==0&&this.decimals!==undefined){return this.limitDecimals(v,this.decimals)}else{return v}},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)},valueFromDX:function(dx){return this.map(dx,0,this._rect.width,0,this.max-this.min)}});</script><polymer-element name="controller-number" attributes="min max value step" extends="controller-base" assetpath="../elements/controller-number/"><template><style>input{font:10px 'Lucida Grande',sans-serif;color:#ecebe0;-webkit-font-smoothing:antialiased;height:100%;width:100%;display:inline-block;background-color:transparent;border:0;-webkit-border-radius:0;border-radius:0;padding:0;outline:0;-webkit-transition:background-color .15s linear;-moz-transition:background-color .15s linear;-o-transition:background-color .15s linear;-ms-transition:background-color .15s linear;transition:background-color .15s linear;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:host-context(.touch-true) input{font-size:13.5px}input:focus{background:rgba(255,255,255,.05)}:host-context(.touch-false) input:hover{background:rgba(255,255,255,.05)}</style><style>#container{height:100%}#track-container{height:100%;padding:0 8px}#track{width:100%;height:1px;-webkit-border-radius:1px;border-radius:1px;display:inline-block;position:relative;background:rgba(255,255,255,.25)}#fill{height:1px;margin-top:0;margin-left:1px;-webkit-border-radius:100%;border-radius:100%;position:absolute;background:#25a0d8;pointer-events:none}#knob{width:.6em;height:.6em;margin-left:-.3em;margin-top:-.3em;-webkit-transition:-webkit-transform .1s cubic-bezier(0.25,.25,0,1);-moz-transition:-moz-transform .1s cubic-bezier(0.25,.25,0,1);-o-transition:-o-transform .1s cubic-bezier(0.25,.25,0,1);-ms-transition:-ms-transform .1s cubic-bezier(0.25,.25,0,1);transition:transform .1s cubic-bezier(0.25,.25,0,1);pointer-events:none;position:absolute;background-color:#25a0d8;-webkit-border-radius:100%;border-radius:100%}:host-context(.touch-false) #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{color:#25a0d8}input::selection{background-color:rgba(255,255,255,.25)}.slider-true input{text-align:center;width:26%;-webkit-transition:width .2s cubic-bezier(0.25,.25,0,1);-moz-transition:width .2s cubic-bezier(0.25,.25,0,1);-o-transition:width .2s cubic-bezier(0.25,.25,0,1);-ms-transition:width .2s cubic-bezier(0.25,.25,0,1);transition:width .2s cubic-bezier(0.25,.25,0,1);padding:0}:host-context(.touch-false) .slider-true input:hover{width:35%}.slider-true input:focus{width:50%}.slider-false input{padding-left:8px}</style><div id="container" class="transition slider-{{ slider }}" horizontal="" layout="" center=""><div id="track-container" on-down="{{ down }}" on-up="{{ up }}" on-trackx="{{ trackx }}" on-trackstart="{{ trackstart }}" horizontal="" layout="" center="" hidden?="{{ !slider }}" flex=""><div id="track"><div id="fill"></div><div id="knob"></div></div></div><input type="text" value="{{ truncate( value ) }}" on-click="{{ click }}" on-keydown="{{ keydown }}" on-blur="{{ blur }}" id="input"></div></template></polymer-element></div>
+<div hidden><script>Polymer("controller-base",{ready:function(){this.update()},update:function(){},init:function(){},watch:function(object,path){this.object=object;this.path=path;this.bind("value",new PathObserver(this.object,this.path))},valueChanged:function(){this.update();this.fire("change",this.value)},map:function(x,a,b,c,d){return(x-a)/(b-a)*(d-c)+c},on:function(event,listener){this.addEventListener(event,listener);return this},listen:function(){Gui.warn("controller.listen() is deprecated. All controllers are listened for free.");return this},getValue:function(){return this.value},setValue:function(v){this.value=v;return this},onChange:function(v){this.addEventListener("change",function(e){v(e.detail)});return this}});</script><polymer-element name="controller-base" attributes="object path value" assetpath="../elements/controller-base/"></polymer-element><script>Gui.register("controller-number",function(value){return typeof value=="number"});Polymer("controller-number",{value:0,decimals:3,computed:{slider:"min !== undefined && max !== undefined"},ready:function(){var _this=this;window.addEventListener("keydown",function(e){if(e.keyCode==18)_this._alt=true},false);window.addEventListener("keyup",function(e){if(e.keyCode==18)_this._alt=false},false);this.super()},init:function(min,max,step){this.min=min;this.max=max;this.step=step},valueChanged:function(newValue){if(this.step!==undefined){this.value=Math.round(this.value/this.step)*this.step}if(this.min!==undefined){this.value=Math.max(this.value,this.min)}if(this.max!==undefined){this.value=Math.min(this.value,this.max)}this.super()},minChanged:function(){this.value=Math.max(this.value,this.min);this.update()},maxChanged:function(){this.value=Math.min(this.value,this.max);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");if(this.max>0){this.$.fill.style.left=0;this.$.fill.style.width=ratio*100+"%";this.$.fill.style.right=""}else{this.$.fill.style.left="";this.$.fill.style.width=(1-ratio)*100+"%";this.$.fill.style.right=0}}this.$.knob.style.left=ratio*100+"%";this.$.container.classList.toggle("positive",this.value>=0);this.$.container.classList.toggle("negative",this.value<0);this.super()},click:function(e){this.$.input.select()},keydown:function(e){if(e.keyCode==13){this.$.input.blur()}},down:function(e){e.preventDefault();this._rect=this.$.track.getBoundingClientRect();if(!this._alt)this.value=this.valueFromX(e.x);this.fire("sliderDown")},up:function(e){this.fire("sliderUp")},trackstart:function(e){this._dragFriction=1},trackx:function(e){if(this.step===undefined){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(.01,Math.min(1,this.map(e.dy,50,300,1,.1)))},blur:function(e){var v=parseFloat(this.$.input.value);if(v===v){this.value=v}},truncate:function(v){if(v%1!==0&&this.decimals!==undefined){return this.limitDecimals(v,this.decimals)}else{return v}},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)},valueFromDX:function(dx){return this.map(dx,0,this._rect.width,0,this.max-this.min)}});</script><polymer-element name="controller-number" attributes="min max value step" extends="controller-base" assetpath="../elements/controller-number/"><template><style>input{font:10px 'Lucida Grande',sans-serif;color:#ecebe0;-webkit-font-smoothing:antialiased;height:100%;width:100%;display:inline-block;background-color:transparent;border:0;-webkit-border-radius:0;border-radius:0;padding:0;outline:0;-webkit-transition:background-color .15s linear;-moz-transition:background-color .15s linear;-o-transition:background-color .15s linear;-ms-transition:background-color .15s linear;transition:background-color .15s linear;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:host-context(.touch-true) input{font-size:13.5px}input:focus{background:rgba(255,255,255,.05)}:host-context(.touch-false) input:hover{background:rgba(255,255,255,.05)}</style><style>#container{height:100%}#track-container{height:100%;padding:0 8px}#track{width:100%;height:1px;-webkit-border-radius:1px;border-radius:1px;display:inline-block;position:relative;background:rgba(255,255,255,.25)}#fill{height:1px;margin-top:0;margin-left:1px;-webkit-border-radius:100%;border-radius:100%;position:absolute;background:#25a0d8;pointer-events:none}#knob{width:.6em;height:.6em;margin-left:-.3em;margin-top:-.3em;-webkit-transition:-webkit-transform .1s cubic-bezier(0.25,.25,0,1);-moz-transition:-moz-transform .1s cubic-bezier(0.25,.25,0,1);-o-transition:-o-transform .1s cubic-bezier(0.25,.25,0,1);-ms-transition:-ms-transform .1s cubic-bezier(0.25,.25,0,1);transition:transform .1s cubic-bezier(0.25,.25,0,1);pointer-events:none;position:absolute;background-color:#25a0d8;-webkit-border-radius:100%;border-radius:100%}:host-context(.touch-false) #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{color:#25a0d8}input::selection{background-color:rgba(255,255,255,.25)}.slider-true input{text-align:center;width:26%;-webkit-transition:width .2s cubic-bezier(0.25,.25,0,1);-moz-transition:width .2s cubic-bezier(0.25,.25,0,1);-o-transition:width .2s cubic-bezier(0.25,.25,0,1);-ms-transition:width .2s cubic-bezier(0.25,.25,0,1);transition:width .2s cubic-bezier(0.25,.25,0,1);padding:0}:host-context(.touch-false) .slider-true input:hover{width:35%}.slider-true input:focus{width:50%}.slider-false input{padding-left:8px}</style><div id="container" class="transition slider-{{ slider }}" horizontal="" layout="" center=""><div id="track-container" on-down="{{ down }}" on-up="{{ up }}" on-trackx="{{ trackx }}" on-trackstart="{{ trackstart }}" horizontal="" layout="" center="" hidden?="{{ !slider }}" flex=""><div id="track"><div id="fill"></div><div id="knob"></div></div></div><input type="text" value="{{ truncate( value ) }}" on-click="{{ click }}" on-keydown="{{ keydown }}" on-blur="{{ blur }}" id="input"></div></template></polymer-element></div>
 <div hidden><script>Gui.register("controller-string",function(value){return typeof value=="string"});Polymer("controller-string",{click:function(e){this.$.input.select()},keydown:function(e){if(e.keyCode==13){this.$.input.blur()}}});</script><polymer-element name="controller-string" extends="controller-base" assetpath="../elements/controller-string/"><template><style>input{font:10px 'Lucida Grande',sans-serif;color:#ecebe0;-webkit-font-smoothing:antialiased;height:100%;width:100%;display:inline-block;background-color:transparent;border:0;-webkit-border-radius:0;border-radius:0;padding:0;outline:0;-webkit-transition:background-color .15s linear;-moz-transition:background-color .15s linear;-o-transition:background-color .15s linear;-ms-transition:background-color .15s linear;transition:background-color .15s linear;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:host-context(.touch-true) input{font-size:13.5px}input:focus{background:rgba(255,255,255,.05)}:host-context(.touch-false) input:hover{background:rgba(255,255,255,.05)}</style><style>input{color:#1ebd6e;padding-left:8px}</style><input id="input" type="text" value="{{ value }}" on-click="{{ click }}" on-keydown="{{ keydown }}"></template></polymer-element></div>
 <div hidden><script>Gui.register("controller-boolean",function(value){return typeof value=="boolean"});Polymer("controller-boolean",{ready:function(){},toggle:function(){this.value=!this.value}});</script><polymer-element name="controller-boolean" extends="controller-base" assetpath="../elements/controller-boolean/"><template><style>input{font:10px 'Lucida Grande',sans-serif;color:#ecebe0;-webkit-font-smoothing:antialiased;height:100%;width:100%;display:inline-block;background-color:transparent;border:0;-webkit-border-radius:0;border-radius:0;padding:0;outline:0;-webkit-transition:background-color .15s linear;-moz-transition:background-color .15s linear;-o-transition:background-color .15s linear;-ms-transition:background-color .15s linear;transition:background-color .15s linear;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:host-context(.touch-true) input{font-size:13.5px}input:focus{background:rgba(255,255,255,.05)}:host-context(.touch-false) input:hover{background:rgba(255,255,255,.05)}</style><style>#container{height:100%;cursor:pointer;padding-left:8px}#switch-track{width:2em;height:.8em;background:rgba(255,255,255,.25);border-radius:999px;-webkit-transition:background .1s linear;-moz-transition:background .1s linear;-o-transition:background .1s linear;-ms-transition:background .1s linear;transition:background .1s linear}#switch-knob{height:.8em;width:.8em;border-radius:100%;background:#ecebe0;-webkit-transition:-webkit-transform .15s cubic-bezier(0.25,.25,0,1);-moz-transition:-moz-transform .15s cubic-bezier(0.25,.25,0,1);-o-transition:-o-transform .15s cubic-bezier(0.25,.25,0,1);-ms-transition:-ms-transform .15s cubic-bezier(0.25,.25,0,1);transition:transform .15s cubic-bezier(0.25,.25,0,1)}.value-true #switch-track{background:#864694}.value-true #switch-knob{-webkit-transform:translate3d(1.2em,0,0);-moz-transform:translate3d(1.2em,0,0);-o-transform:translate3d(1.2em,0,0);-ms-transform:translate3d(1.2em,0,0);transform:translate3d(1.2em,0,0)}:host-context(.touch-false) .value-false:hover #switch-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)}:host-context(.touch-false) .value-true:hover #switch-knob{-webkit-transform:translate3d(1.2em,0,0) scale(1.5);-moz-transform:translate3d(1.2em,0,0) scale(1.5);-o-transform:translate3d(1.2em,0,0) scale(1.5);-ms-transform:translate3d(1.2em,0,0) scale(1.5);transform:translate3d(1.2em,0,0) scale(1.5)}#text{margin-left:8px}.value-false #text{color:rgba(255,255,255,.25)}</style><div id="container" horizontal="" layout="" center="" on-tap="{{ toggle }}" class="value-{{ value }}"><div id="switch-track"><div id="switch-knob"></div></div></div></template></polymer-element></div>
 <div hidden><script>Gui.register("controller-function",function(value){return typeof value=="function"});Polymer("controller-function",{});</script><polymer-element name="controller-function" extends="controller-base" assetpath="../elements/controller-function/"><template><style>input{font:10px 'Lucida Grande',sans-serif;color:#ecebe0;-webkit-font-smoothing:antialiased;height:100%;width:100%;display:inline-block;background-color:transparent;border:0;-webkit-border-radius:0;border-radius:0;padding:0;outline:0;-webkit-transition:background-color .15s linear;-moz-transition:background-color .15s linear;-o-transition:background-color .15s linear;-ms-transition:background-color .15s linear;transition:background-color .15s linear;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:host-context(.touch-true) input{font-size:13.5px}input:focus{background:rgba(255,255,255,.05)}:host-context(.touch-false) input:hover{background:rgba(255,255,255,.05)}</style><style></style><div id="container"></div></template></polymer-element></div>
-<div hidden><script>Polymer("controller-option",{ready:function(){this.options={}},init:function(options){if(Array.isArray(options)){options.forEach(function(opt){this.options[opt]=opt},this)}else{this.options=options}},getKeys:function(object){if(object)return Object.keys(object)}});</script><polymer-element name="controller-option" extends="controller-base" attributes="options" assetpath="../elements/controller-option/"><template><style>#container{height:100%;cursor:pointer;padding-left:8px}select{outline:0}</style><div id="container" horizontal="" layout="" center=""><select value="{{ value }}"><template repeat="{{ name in options | getKeys }}"><option value="{{ options[ name ] }}">{{ name }}</option></template></select></div></template></polymer-element></div>
\ No newline at end of file
+<div hidden><script>Polymer("controller-option",{key:null,ready:function(){this.options={}},init:function(options){if(Array.isArray(options)){options.forEach(function(opt){this.options[opt]=opt},this)}else{this.options=options}},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)}});</script><polymer-element name="controller-option" extends="controller-base" attributes="options key" assetpath="../elements/controller-option/"><template><style>#container{height:100%;cursor:pointer;padding-left:8px}select{outline:0}</style><div id="container" horizontal="" layout="" center=""><select value="{{ key }}" on-change="{{ change }}"><template repeat="{{ name in options | keys }}"><option value="{{ name }}">{{ name }}</option></template></select></div></template></polymer-element></div>
\ No newline at end of file
diff --git a/build/gui.js b/build/gui.js
index 7ba03c4..f6e4e99 100644
--- a/build/gui.js
+++ b/build/gui.js
@@ -14,8 +14,8 @@ document.write(['<script>window.Platform=window.Platform||{},window.logFlags=win
 '<div hidden>undefined</div>',
 '',
 '<!-- controllers -->',
-'<div hidden><script>Polymer("controller-base",{ready:function(){this.update()},update:function(){},init:function(){},watch:function(object,path){this.object=object;this.path=path;this.bind("value",new PathObserver(this.object,this.path))},valueChanged:function(){this.update();this.fire("change",this.value)},map:function(x,a,b,c,d){return(x-a)/(b-a)*(d-c)+c},listen:function(){Gui.warn("controller.listen() is deprecated. All controllers are listened for free.");return this},getValue:function(){return this.value},setValue:function(v){this.value=v;return this},onChange:function(v){this.addEventListener("change",function(e){v(e.detail)});return this}});</script><polymer-element name="controller-base" attributes="object path value" assetpath="../elements/controller-base/"></polymer-element><script>Gui.register("controller-number",function(value){return typeof value=="number"});Polymer("controller-number",{value:0,decimals:3,computed:{slider:"min !== undefined && max !== undefined"},ready:function(){var _this=this;window.addEventListener("keydown",function(e){if(e.keyCode==18)_this._alt=true},false);window.addEventListener("keyup",function(e){if(e.keyCode==18)_this._alt=false},false);this.super()},init:function(min,max,step){this.min=min;this.max=max;this.step=step},valueChanged:function(newValue){if(this.step!==undefined){this.value=Math.round(this.value/this.step)*this.step}if(this.min!==undefined){this.value=Math.max(this.value,this.min)}if(this.max!==undefined){this.value=Math.min(this.value,this.max)}this.super()},minChanged:function(){this.value=Math.max(this.value,this.min);this.update()},maxChanged:function(){this.value=Math.min(this.value,this.max);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");if(this.max>0){this.$.fill.style.left=0;this.$.fill.style.width=ratio*100+"%";this.$.fill.style.right=""}else{this.$.fill.style.left="";this.$.fill.style.width=(1-ratio)*100+"%";this.$.fill.style.right=0}}this.$.knob.style.left=ratio*100+"%";this.$.container.classList.toggle("positive",this.value>=0);this.$.container.classList.toggle("negative",this.value<0);this.super()},click:function(e){this.$.input.select()},keydown:function(e){if(e.keyCode==13){this.$.input.blur()}},down:function(e){e.preventDefault();this._rect=this.$.track.getBoundingClientRect();if(!this._alt)this.value=this.valueFromX(e.x)},up:function(e){},trackstart:function(e){this._dragFriction=1},trackx:function(e){if(this.step===undefined){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(.01,Math.min(1,this.map(e.dy,50,300,1,.1)))},blur:function(e){var v=parseFloat(this.$.input.value);if(v===v){this.value=v}},truncate:function(v){if(v%1!==0&&this.decimals!==undefined){return this.limitDecimals(v,this.decimals)}else{return v}},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)},valueFromDX:function(dx){return this.map(dx,0,this._rect.width,0,this.max-this.min)}});</script><polymer-element name="controller-number" attributes="min max value step" extends="controller-base" assetpath="../elements/controller-number/"><template><style>input{font:10px \'Lucida Grande\',sans-serif;color:#ecebe0;-webkit-font-smoothing:antialiased;height:100%;width:100%;display:inline-block;background-color:transparent;border:0;-webkit-border-radius:0;border-radius:0;padding:0;outline:0;-webkit-transition:background-color .15s linear;-moz-transition:background-color .15s linear;-o-transition:background-color .15s linear;-ms-transition:background-color .15s linear;transition:background-color .15s linear;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:host-context(.touch-true) input{font-size:13.5px}input:focus{background:rgba(255,255,255,.05)}:host-context(.touch-false) input:hover{background:rgba(255,255,255,.05)}</style><style>#container{height:100%}#track-container{height:100%;padding:0 8px}#track{width:100%;height:1px;-webkit-border-radius:1px;border-radius:1px;display:inline-block;position:relative;background:rgba(255,255,255,.25)}#fill{height:1px;margin-top:0;margin-left:1px;-webkit-border-radius:100%;border-radius:100%;position:absolute;background:#25a0d8;pointer-events:none}#knob{width:.6em;height:.6em;margin-left:-.3em;margin-top:-.3em;-webkit-transition:-webkit-transform .1s cubic-bezier(0.25,.25,0,1);-moz-transition:-moz-transform .1s cubic-bezier(0.25,.25,0,1);-o-transition:-o-transform .1s cubic-bezier(0.25,.25,0,1);-ms-transition:-ms-transform .1s cubic-bezier(0.25,.25,0,1);transition:transform .1s cubic-bezier(0.25,.25,0,1);pointer-events:none;position:absolute;background-color:#25a0d8;-webkit-border-radius:100%;border-radius:100%}:host-context(.touch-false) #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{color:#25a0d8}input::selection{background-color:rgba(255,255,255,.25)}.slider-true input{text-align:center;width:26%;-webkit-transition:width .2s cubic-bezier(0.25,.25,0,1);-moz-transition:width .2s cubic-bezier(0.25,.25,0,1);-o-transition:width .2s cubic-bezier(0.25,.25,0,1);-ms-transition:width .2s cubic-bezier(0.25,.25,0,1);transition:width .2s cubic-bezier(0.25,.25,0,1);padding:0}:host-context(.touch-false) .slider-true input:hover{width:35%}.slider-true input:focus{width:50%}.slider-false input{padding-left:8px}</style><div id="container" class="transition slider-{{ slider }}" horizontal="" layout="" center=""><div id="track-container" on-down="{{ down }}" on-up="{{ up }}" on-trackx="{{ trackx }}" on-trackstart="{{ trackstart }}" horizontal="" layout="" center="" hidden?="{{ !slider }}" flex=""><div id="track"><div id="fill"></div><div id="knob"></div></div></div><input type="text" value="{{ truncate( value ) }}" on-click="{{ click }}" on-keydown="{{ keydown }}" on-blur="{{ blur }}" id="input"></div></template></polymer-element></div>',
+'<div hidden><script>Polymer("controller-base",{ready:function(){this.update()},update:function(){},init:function(){},watch:function(object,path){this.object=object;this.path=path;this.bind("value",new PathObserver(this.object,this.path))},valueChanged:function(){this.update();this.fire("change",this.value)},map:function(x,a,b,c,d){return(x-a)/(b-a)*(d-c)+c},on:function(event,listener){this.addEventListener(event,listener);return this},listen:function(){Gui.warn("controller.listen() is deprecated. All controllers are listened for free.");return this},getValue:function(){return this.value},setValue:function(v){this.value=v;return this},onChange:function(v){this.addEventListener("change",function(e){v(e.detail)});return this}});</script><polymer-element name="controller-base" attributes="object path value" assetpath="../elements/controller-base/"></polymer-element><script>Gui.register("controller-number",function(value){return typeof value=="number"});Polymer("controller-number",{value:0,decimals:3,computed:{slider:"min !== undefined && max !== undefined"},ready:function(){var _this=this;window.addEventListener("keydown",function(e){if(e.keyCode==18)_this._alt=true},false);window.addEventListener("keyup",function(e){if(e.keyCode==18)_this._alt=false},false);this.super()},init:function(min,max,step){this.min=min;this.max=max;this.step=step},valueChanged:function(newValue){if(this.step!==undefined){this.value=Math.round(this.value/this.step)*this.step}if(this.min!==undefined){this.value=Math.max(this.value,this.min)}if(this.max!==undefined){this.value=Math.min(this.value,this.max)}this.super()},minChanged:function(){this.value=Math.max(this.value,this.min);this.update()},maxChanged:function(){this.value=Math.min(this.value,this.max);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");if(this.max>0){this.$.fill.style.left=0;this.$.fill.style.width=ratio*100+"%";this.$.fill.style.right=""}else{this.$.fill.style.left="";this.$.fill.style.width=(1-ratio)*100+"%";this.$.fill.style.right=0}}this.$.knob.style.left=ratio*100+"%";this.$.container.classList.toggle("positive",this.value>=0);this.$.container.classList.toggle("negative",this.value<0);this.super()},click:function(e){this.$.input.select()},keydown:function(e){if(e.keyCode==13){this.$.input.blur()}},down:function(e){e.preventDefault();this._rect=this.$.track.getBoundingClientRect();if(!this._alt)this.value=this.valueFromX(e.x);this.fire("sliderDown")},up:function(e){this.fire("sliderUp")},trackstart:function(e){this._dragFriction=1},trackx:function(e){if(this.step===undefined){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(.01,Math.min(1,this.map(e.dy,50,300,1,.1)))},blur:function(e){var v=parseFloat(this.$.input.value);if(v===v){this.value=v}},truncate:function(v){if(v%1!==0&&this.decimals!==undefined){return this.limitDecimals(v,this.decimals)}else{return v}},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)},valueFromDX:function(dx){return this.map(dx,0,this._rect.width,0,this.max-this.min)}});</script><polymer-element name="controller-number" attributes="min max value step" extends="controller-base" assetpath="../elements/controller-number/"><template><style>input{font:10px \'Lucida Grande\',sans-serif;color:#ecebe0;-webkit-font-smoothing:antialiased;height:100%;width:100%;display:inline-block;background-color:transparent;border:0;-webkit-border-radius:0;border-radius:0;padding:0;outline:0;-webkit-transition:background-color .15s linear;-moz-transition:background-color .15s linear;-o-transition:background-color .15s linear;-ms-transition:background-color .15s linear;transition:background-color .15s linear;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:host-context(.touch-true) input{font-size:13.5px}input:focus{background:rgba(255,255,255,.05)}:host-context(.touch-false) input:hover{background:rgba(255,255,255,.05)}</style><style>#container{height:100%}#track-container{height:100%;padding:0 8px}#track{width:100%;height:1px;-webkit-border-radius:1px;border-radius:1px;display:inline-block;position:relative;background:rgba(255,255,255,.25)}#fill{height:1px;margin-top:0;margin-left:1px;-webkit-border-radius:100%;border-radius:100%;position:absolute;background:#25a0d8;pointer-events:none}#knob{width:.6em;height:.6em;margin-left:-.3em;margin-top:-.3em;-webkit-transition:-webkit-transform .1s cubic-bezier(0.25,.25,0,1);-moz-transition:-moz-transform .1s cubic-bezier(0.25,.25,0,1);-o-transition:-o-transform .1s cubic-bezier(0.25,.25,0,1);-ms-transition:-ms-transform .1s cubic-bezier(0.25,.25,0,1);transition:transform .1s cubic-bezier(0.25,.25,0,1);pointer-events:none;position:absolute;background-color:#25a0d8;-webkit-border-radius:100%;border-radius:100%}:host-context(.touch-false) #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{color:#25a0d8}input::selection{background-color:rgba(255,255,255,.25)}.slider-true input{text-align:center;width:26%;-webkit-transition:width .2s cubic-bezier(0.25,.25,0,1);-moz-transition:width .2s cubic-bezier(0.25,.25,0,1);-o-transition:width .2s cubic-bezier(0.25,.25,0,1);-ms-transition:width .2s cubic-bezier(0.25,.25,0,1);transition:width .2s cubic-bezier(0.25,.25,0,1);padding:0}:host-context(.touch-false) .slider-true input:hover{width:35%}.slider-true input:focus{width:50%}.slider-false input{padding-left:8px}</style><div id="container" class="transition slider-{{ slider }}" horizontal="" layout="" center=""><div id="track-container" on-down="{{ down }}" on-up="{{ up }}" on-trackx="{{ trackx }}" on-trackstart="{{ trackstart }}" horizontal="" layout="" center="" hidden?="{{ !slider }}" flex=""><div id="track"><div id="fill"></div><div id="knob"></div></div></div><input type="text" value="{{ truncate( value ) }}" on-click="{{ click }}" on-keydown="{{ keydown }}" on-blur="{{ blur }}" id="input"></div></template></polymer-element></div>',
 '<div hidden><script>Gui.register("controller-string",function(value){return typeof value=="string"});Polymer("controller-string",{click:function(e){this.$.input.select()},keydown:function(e){if(e.keyCode==13){this.$.input.blur()}}});</script><polymer-element name="controller-string" extends="controller-base" assetpath="../elements/controller-string/"><template><style>input{font:10px \'Lucida Grande\',sans-serif;color:#ecebe0;-webkit-font-smoothing:antialiased;height:100%;width:100%;display:inline-block;background-color:transparent;border:0;-webkit-border-radius:0;border-radius:0;padding:0;outline:0;-webkit-transition:background-color .15s linear;-moz-transition:background-color .15s linear;-o-transition:background-color .15s linear;-ms-transition:background-color .15s linear;transition:background-color .15s linear;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:host-context(.touch-true) input{font-size:13.5px}input:focus{background:rgba(255,255,255,.05)}:host-context(.touch-false) input:hover{background:rgba(255,255,255,.05)}</style><style>input{color:#1ebd6e;padding-left:8px}</style><input id="input" type="text" value="{{ value }}" on-click="{{ click }}" on-keydown="{{ keydown }}"></template></polymer-element></div>',
 '<div hidden><script>Gui.register("controller-boolean",function(value){return typeof value=="boolean"});Polymer("controller-boolean",{ready:function(){},toggle:function(){this.value=!this.value}});</script><polymer-element name="controller-boolean" extends="controller-base" assetpath="../elements/controller-boolean/"><template><style>input{font:10px \'Lucida Grande\',sans-serif;color:#ecebe0;-webkit-font-smoothing:antialiased;height:100%;width:100%;display:inline-block;background-color:transparent;border:0;-webkit-border-radius:0;border-radius:0;padding:0;outline:0;-webkit-transition:background-color .15s linear;-moz-transition:background-color .15s linear;-o-transition:background-color .15s linear;-ms-transition:background-color .15s linear;transition:background-color .15s linear;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:host-context(.touch-true) input{font-size:13.5px}input:focus{background:rgba(255,255,255,.05)}:host-context(.touch-false) input:hover{background:rgba(255,255,255,.05)}</style><style>#container{height:100%;cursor:pointer;padding-left:8px}#switch-track{width:2em;height:.8em;background:rgba(255,255,255,.25);border-radius:999px;-webkit-transition:background .1s linear;-moz-transition:background .1s linear;-o-transition:background .1s linear;-ms-transition:background .1s linear;transition:background .1s linear}#switch-knob{height:.8em;width:.8em;border-radius:100%;background:#ecebe0;-webkit-transition:-webkit-transform .15s cubic-bezier(0.25,.25,0,1);-moz-transition:-moz-transform .15s cubic-bezier(0.25,.25,0,1);-o-transition:-o-transform .15s cubic-bezier(0.25,.25,0,1);-ms-transition:-ms-transform .15s cubic-bezier(0.25,.25,0,1);transition:transform .15s cubic-bezier(0.25,.25,0,1)}.value-true #switch-track{background:#864694}.value-true #switch-knob{-webkit-transform:translate3d(1.2em,0,0);-moz-transform:translate3d(1.2em,0,0);-o-transform:translate3d(1.2em,0,0);-ms-transform:translate3d(1.2em,0,0);transform:translate3d(1.2em,0,0)}:host-context(.touch-false) .value-false:hover #switch-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)}:host-context(.touch-false) .value-true:hover #switch-knob{-webkit-transform:translate3d(1.2em,0,0) scale(1.5);-moz-transform:translate3d(1.2em,0,0) scale(1.5);-o-transform:translate3d(1.2em,0,0) scale(1.5);-ms-transform:translate3d(1.2em,0,0) scale(1.5);transform:translate3d(1.2em,0,0) scale(1.5)}#text{margin-left:8px}.value-false #text{color:rgba(255,255,255,.25)}</style><div id="container" horizontal="" layout="" center="" on-tap="{{ toggle }}" class="value-{{ value }}"><div id="switch-track"><div id="switch-knob"></div></div></div></template></polymer-element></div>',
 '<div hidden><script>Gui.register("controller-function",function(value){return typeof value=="function"});Polymer("controller-function",{});</script><polymer-element name="controller-function" extends="controller-base" assetpath="../elements/controller-function/"><template><style>input{font:10px \'Lucida Grande\',sans-serif;color:#ecebe0;-webkit-font-smoothing:antialiased;height:100%;width:100%;display:inline-block;background-color:transparent;border:0;-webkit-border-radius:0;border-radius:0;padding:0;outline:0;-webkit-transition:background-color .15s linear;-moz-transition:background-color .15s linear;-o-transition:background-color .15s linear;-ms-transition:background-color .15s linear;transition:background-color .15s linear;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:host-context(.touch-true) input{font-size:13.5px}input:focus{background:rgba(255,255,255,.05)}:host-context(.touch-false) input:hover{background:rgba(255,255,255,.05)}</style><style></style><div id="container"></div></template></polymer-element></div>',
-'<div hidden><script>Polymer("controller-option",{ready:function(){this.options={}},init:function(options){if(Array.isArray(options)){options.forEach(function(opt){this.options[opt]=opt},this)}else{this.options=options}},getKeys:function(object){if(object)return Object.keys(object)}});</script><polymer-element name="controller-option" extends="controller-base" attributes="options" assetpath="../elements/controller-option/"><template><style>#container{height:100%;cursor:pointer;padding-left:8px}select{outline:0}</style><div id="container" horizontal="" layout="" center=""><select value="{{ value }}"><template repeat="{{ name in options | getKeys }}"><option value="{{ options[ name ] }}">{{ name }}</option></template></select></div></template></polymer-element></div>',].join("\n"))
\ No newline at end of file
+'<div hidden><script>Polymer("controller-option",{key:null,ready:function(){this.options={}},init:function(options){if(Array.isArray(options)){options.forEach(function(opt){this.options[opt]=opt},this)}else{this.options=options}},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)}});</script><polymer-element name="controller-option" extends="controller-base" attributes="options key" assetpath="../elements/controller-option/"><template><style>#container{height:100%;cursor:pointer;padding-left:8px}select{outline:0}</style><div id="container" horizontal="" layout="" center=""><select value="{{ key }}" on-change="{{ change }}"><template repeat="{{ name in options | keys }}"><option value="{{ name }}">{{ name }}</option></template></select></div></template></polymer-element></div>',].join("\n"))
\ No newline at end of file
diff --git a/elements/controller-base/controller-base.js b/elements/controller-base/controller-base.js
index 2eb53f8..ad46bb3 100644
--- a/elements/controller-base/controller-base.js
+++ b/elements/controller-base/controller-base.js
@@ -4,7 +4,6 @@
 [ ] onFinishChange( )
 
 */
-
 Polymer('controller-base', {
 
     ready: function() {
@@ -26,7 +25,7 @@ Polymer('controller-base', {
         this.object = object;
         this.path = path;
 
-        this.bind('value', new PathObserver(this.object, this.path));
+        this.bind( 'value', new PathObserver( this.object, this.path ) );
 
     },
 
@@ -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
     // ------------------------------- 
diff --git a/elements/controller-number/controller-number.js b/elements/controller-number/controller-number.js
index 7bd5a07..72865a1 100644
--- a/elements/controller-number/controller-number.js
+++ b/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 ) {
diff --git a/elements/controller-option/controller-option.html b/elements/controller-option/controller-option.html
index b0d20f5..bdd0da9 100644
--- a/elements/controller-option/controller-option.html
+++ b/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>
diff --git a/elements/controller-option/controller-option.js b/elements/controller-option/controller-option.js
index 946c765..978cd9b 100644
--- a/elements/controller-option/controller-option.js
+++ b/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 );
 
diff --git a/elements/gui-panel/gui-panel.js b/elements/gui-panel/gui-panel.js
index 7434fbd..900f240 100644
--- a/elements/gui-panel/gui-panel.js
+++ b/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 );
diff --git a/examples/index.html b/examples/index.html
index 7eece07..9afa1c4 100644
--- a/examples/index.html
+++ b/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 );
            });
 
     } );