option controller

This commit is contained in:
George Michael Brower 2014-09-07 19:55:40 -04:00
parent 1dca89383b
commit d76808c344
8 changed files with 42 additions and 13 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

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

View File

@ -1,5 +1,7 @@
Polymer( 'controller-option', { Polymer( 'controller-option', {
key: null,
ready: function() { ready: function() {
this.options = {}; 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 ); if ( object ) return Object.keys( object );

View File

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

View File

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