controller-option

This commit is contained in:
George Michael Brower 2014-09-07 16:18:36 -04:00
parent a5fa1bb98d
commit 1dca89383b
21 changed files with 362 additions and 116 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

@ -33,6 +33,7 @@ Polymer('controller-base', {
valueChanged: function() {
this.update();
this.fire( 'change', this.value );
},
@ -64,8 +65,18 @@ Polymer('controller-base', {
setValue: function( v ) {
this.value = v;
return this;
}
},
onChange: function( v ) {
this.addEventListener( 'change', function( e ) {
v( e.detail );
} );
return this;
},
});

View File

@ -1,4 +1,3 @@
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../controller-base/controller-base.html">
<script src="controller-boolean.js"></script>

View File

@ -1,4 +1,3 @@
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../controller-base/controller-base.html">
<script src="controller-function.js"></script>

View File

@ -1,4 +1,3 @@
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../controller-base/controller-base.html">
<script src="controller-number.js"></script>
@ -20,7 +19,6 @@
on-down="{{ down }}"
on-up="{{ up }}"
on-trackx="{{ trackx }}"
on-tracky="{{ tracky }}"
on-trackstart="{{ trackstart }}"
horizontal layout center
hidden?="{{ !slider }}"

View File

@ -0,0 +1,25 @@
<link rel="import" href="../controller-base/controller-base.html">
<script src="controller-option.js"></script>
<polymer-element name="controller-option" extends="controller-base" attributes="options">
<template>
<link rel="stylesheet" href="controller-option.css">
<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>

View File

@ -0,0 +1,35 @@
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 );
}
});

View File

@ -0,0 +1,10 @@
@import '../shared/shared'
#container
height 100%
cursor pointer
padding-left padding
select
outline: none

View File

@ -1,4 +1,3 @@
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../controller-base/controller-base.html">
<script src="controller-string.js"></script>

View File

@ -0,0 +1,19 @@
<link rel="import" href="../../../polymer/polymer.html">
<polymer-element name="gui-button" attributes="open" noscript>
<template>
<link rel="stylesheet" href="gui-button.css">
<div id="container" layout horizontal center>
<div id="button" class="open-{{ open }}">
<div class="slider one"></div>
<div class="slider two"></div>
<div class="slider three"></div>
</div>
</div>
</template>
</polymer-element>

View File

@ -0,0 +1,103 @@
@import '../shared/shared'
size = 21px
stroke = 1px
knob = 5px
pw = 0px
ph = 4px
border-radius = 0// 100%
dur = 200ms
ease = cubic-bezier(0, 0.5, 0, 1)
fg = color-font//white//#777
bg = transparent
knob-dur = 200ms
stagger = 0ms
delay = 200ms
l = 70%
r = 30%
spacing = ( ( ( size - ph*2 ) - stroke * 3 ) / 2 )
xlen = 11px
#container
// font-size 0
// border: 1px solid blue
height: 100%
cursor: pointer
#button
width size
height size
box-sizing border-box
border-radius border-radius
padding ph pw
position relative
background bg
margin 0 auto
&.open-true
.one
transform translate3d(4px, 0, 0) rotate(45deg) translate3d(3.5px, 0, 0)
width xlen
.three
transform translate3d(4px, 0, 0) rotate(-45deg) translate3d(3.5px, 0, 0)
width xlen
.two
width 0
.slider
&:before
width 0
height 0
.slider
width size - pw * 2
border-radius stroke * 2
height stroke
background fg
position absolute
transform-origin stroke * 0.5 stroke * 0.5
transition all dur delay ease
&:before
width knob
height knob
margin-top -( ( knob - stroke ) / 2 )
margin-left -( ( knob ) / 2 )
border-radius knob
background fg
display inline-block
content ' '
position absolute
left l
transition left knob-dur cubic-bezier(0, 0.5, 0, 1), width 0.001s delay, height 0.001s delay
// #container:hover &
// left r
&.two
margin-top spacing + stroke
&:before
left r
transition-delay: stagger, delay, delay
// #container:hover &
// left l
&.three
margin-top spacing * 2 + stroke * 2
&:before
left l
transition-delay: stagger * 2, delay, delay
// #container:hover &
// left r

View File

@ -1,5 +1,6 @@
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../gui-row/gui-row.html">
<link rel="import" href="../gui-button/gui-button.html">
<polymer-element
name="gui-panel"
@ -9,16 +10,16 @@
<link rel="stylesheet" href="gui-panel.css">
<div id="container" class="docked-{{ docked }} autoplace-{{ autoPlace }} open-{{ open }} touch-{{ touch }}">
<div id="container" class="docked-{{ docked }} autoplace-{{ autoPlace }} open-{{ open }} touch-{{ touch }}" >
<div id="panel">
<div id="controllers">
<content></content>
</div>
<div id="closeButton" on-tap="{{ tapClose }}" hidden?="{{ docked }}">{{ open ? 'Close' : 'Open' }} Controls</div>
<gui-button hidden?="{{ !autoPlace }}" on-tap="{{ toggleOpen }}" open="{{ open }}"></gui-button>
<div id="closeButtonDocked" on-tap="{{ tapClose }}" hidden?="{{ !docked }}">
<div id="closeButtonDockedInner"></div>
</div>
</div>

View File

@ -9,26 +9,25 @@ Polymer('gui-panel', {
ready: function() {
this.anon.values = {};
this.defined = {};
// window.addEventListener( 'resize', this.checkHeight.bind( this ) );
},
anon: function() {
define: function() {
if ( arguments.length == 1 ) {
var name = arguments[ 0 ];
return this.anon.values[ name ];
return this.defined[ name ];
}
var initialValue = arguments[ 0 ];
var name = arguments[ 1 ];
var initialValue = arguments[ 1 ];
var name = arguments[ 0 ];
var args = [ this.anon.values, name ];
var args = [ this.defined, name ];
args = args.concat( Array.prototype.slice.call( arguments, 2 ) );
this.anon.values[ name ] = initialValue;
this.defined[ name ] = initialValue;
return this.add.apply( this, args );
@ -36,6 +35,7 @@ Polymer('gui-panel', {
add: function( object, path ) {
// Make controller
var value = Path.get( path ).getValueFrom( object );
@ -45,8 +45,13 @@ Polymer('gui-panel', {
}
var args = Array.prototype.slice.call( arguments, 2 );
var controllers;
var controller = Gui.getController( value, args );
if ( args[ 0 ] instanceof Array || typeof args[ 0 ] == 'object' ) {
controller = document.createElement( 'controller-option' );
} else {
controller = Gui.getController( value );
}
if ( !controller ) {
return Gui.error( 'Unrecognized type:', value );
@ -87,7 +92,7 @@ Polymer('gui-panel', {
// let the style sheet take care of things
this.$.container.style.transform = '';
this.$.panel.style.transform = '';
} else {
@ -95,7 +100,7 @@ Polymer('gui-panel', {
// wish i could pipe javascript variables into styl.
var y = -this.$.controllers.offsetHeight + 'px';
this.$.container.style.transform = 'translate3d(0, ' + y + ', 0)';
this.$.panel.style.transform = 'translate3d(0, ' + y + ', 0)';
}
@ -112,7 +117,7 @@ Polymer('gui-panel', {
// Events
// -------------------------------
tapClose: function() {
toggleOpen: function() {
this.open = !this.open;
},

View File

@ -1,84 +1,83 @@
@import '../shared/shared'
// redefine touch because we are the host ...
touch( val = true )
{ '.touch-' + val } &
{ block }
dur = 0.4s
#container
#panel
transition transform dur cubic-bezier( 0, 0.8, 0, 1 )
background color-panel
transition transform 0.4s cubic-bezier( 0, 0.8, 0, 1 )
&.autoplace-true
.autoplace-true &
width panel-width
&.touch-true
width panel-width-touch
position fixed
top 0
&.docked-false
.autoplace-true.touch-true &
width panel-width-touch
.docked-false &
right 20px
&.docked-true
.docked-true &
right 0
bottom 0
#controllers
position absolute
width 100%
bottom 0
top 0
overflow auto
-webkit-overflow-scrolling touch
&.open-false
.docked-true.open-false &
transform translate3d( panel-width, 0, 0 )
overflow visible
&.touch-true
.docked-true.open-false.touch-true &
transform translate3d( panel-width-touch, 0, 0 )
#closeButton
#controllers
panel-font()
.docked-true &
position absolute
width 100%
top row-height * 1.5
#closeButton
panel-font()
user-select none
cursor pointer
text-align center
padding padding * 0.75 padding
background black
+hover()
gui-button
panel-font()
background color-panel
#closeButtonDocked
height row-height
position absolute
right 100%
cursor pointer
transition all dur cubic-bezier( 0, 0.8, 0, 1 )
// .open-false &
// transition-delay stagger * 0.5
.docked-true &
top 0
color black
width 60px
height 60px
padding 10px
right 0
width row-height*1.5
height row-height*1.5
box-sizing border-box
#closeButtonDockedInner
.docked-true.open-false &
transform translate3d( - panel-width, 0, 0 )
border-radius 3px
background #fff
.docked-true.open-false.touch-true &
transform translate3d( - panel-width-touch, 0, 0 )
width 100%
height 100%
.docked-false &
right 0
left 0

View File

@ -19,6 +19,9 @@
cursor default
.comment-true &
cursor pointer
+touch()
font-size 11px
width 30%
#nameInner
overflow hidden
@ -40,10 +43,9 @@
position absolute
z-index 999
pointer-events none
opacity 0
transform translate3d( 0, 20px, 0 )
opacity 0
transition all 0.2s ease
#comment.open-true

View File

@ -7,6 +7,7 @@ input
display inline-block
background-color transparent
border 0
border-radius 0
padding 0
outline none
transition background-color 0.15s linear

View File

@ -3,10 +3,10 @@
/* sizes */
font-size = 10px
touch-scale = 1.25
touch-scale = 1.35
panel-width = 245px
panel-width-touch = 300px
panel-width-touch = 320px
row-height = 2.9em
row-name-width = 38%
@ -16,7 +16,7 @@ padding = 8px
/* colors */
color-font = #ECEBE0
color-panel = rgba( 30, 30, 30, 0.95 )
color-panel = rgba( 40, 40, 40, 1 )
color-comment = #E0CF99

View File

@ -5,7 +5,9 @@
<meta charset="utf-8">
<title>dat-gui kitchen sink</title>
<script src="../build/gui.js"></script>
<!-- <script src="../build/gui.js"></script> -->
<link rel="import" href="../gui.html">
<meta name="viewport" content="width=device-width, user-scalable=no">
@ -29,7 +31,8 @@
"step": 10,
"straddleZero": 0,
"maxIsNegative": -2,
"hasComment": 0
"hasComment": 0,
"optionController": 'a'
};
// How do we kill polymer-ready ...
@ -56,17 +59,19 @@
gui.add( object, 'listen4Free' ).name( 'customName' )
gui.add( object, 'step', 0, 50, 5 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus, sed aliquet nulla fermentum nec. Sed massa felis, congue nec libero ut, condimentum hendrerit purus. Cras a cursus ante. Integer nec nibh vitae lacus convallis viverra in at urna. Donec hendrerit convallis lacus, nec condimentum neque aliquam ac. Sed suscipit leo vel ligula condimentum scelerisque. Aliquam fermentum sagittis nisi vitae accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In et dolor eros. Sed vel venenatis odio, quis porta mi. Ut sed commodo velit, in porta ante.' );
gui.add( object, 'step', 0, 50, 5 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus, sed aliquet nulla fermentum nec. Sed massa felis, congue nec libero ut.' );
gui.add( object, 'straddleZero', -1, 1, 0.01 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus, sed aliquet nulla fermentum nec.' );
gui.add( object, 'maxIsNegative', -5, -2 );
gui.anon( 0, 'anonymousSlider', -1, 1 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus');
gui.define( 'anonymousSlider', 0, -1, 1 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus');
gui.anon( 32, 'beats', 1, 64, 1 ).comment( 'The number of beats in the song.');
gui.anon( 0, 'loops', -2, 2, 1 ).comment( 'The number of times the gif loops in a cycle.' );
gui.anon( 0, 'start', -2, 2, 1 ).comment( 'The frame of the gif where the song should start.' );
gui.add( object, 'optionController', { A: 'a', B: 'b', C: 'c'} );
gui.add( object, 'optionController', [ 'a', 'b', 'c' ] )
.onChange( function( val ) {
console.log( val );
});
} );

View File

@ -12,3 +12,4 @@
<link rel="import" href="elements/controller-string/controller-string.html">
<link rel="import" href="elements/controller-boolean/controller-boolean.html">
<link rel="import" href="elements/controller-function/controller-function.html">
<link rel="import" href="elements/controller-option/controller-option.html">

View File

@ -14,6 +14,8 @@ describe( 'Gui', function() {
spyOn( ready, 'ready' );
expect( Gui.ready ).toBeDefined();
runs( function() {
Gui.ready( ready.ready );
} );
@ -28,24 +30,54 @@ describe( 'Gui', function() {
it( 'picks the right controller for the job', function() {
function expectController( controllerType, value ) {
expect( Gui.getController( value ).nodeName.toLowerCase() ).toBe( controllerType );
}
expectController( 'controller-number', 1234 );
expectController( 'controller-string', 'string value' );
expectController( 'controller-function', function(){} );
expectController( 'controller-boolean', true );
expectController( 'controller-color', '#00ff00' );
expectController( 'controller-color', '#aba' );
expectController( 'controller-option', 'hey', [ 'hey', 'hi', 'ho' ] );
expectController( 'controller-option', 'a', { a: 'a', b: 'b', c: 'c' } );
expectController( 'controller-color', 'rgba(255, 0, 255, 0.2)' );
expectController( 'controller-color', 'rgb(255, 0, 255)' );
// expectController( 'controller-color', '#00ff00' );
// expectController( 'controller-color', '#aba' );
expectController( 'controller-color', 'hsl(240, 100%, 50%)' );
expectController( 'controller-color', 'hsla(255, 100%, 40%, 0.5)' );
// expectController( 'controller-color', 'rgba(255, 0, 255, 0.2)' );
// expectController( 'controller-color', 'rgb(255, 0, 255)' );
// expectController( 'controller-color', 'hsl(240, 100%, 50%)' );
// expectController( 'controller-color', 'hsla(255, 100%, 40%, 0.5)' );
} );
function expectController( controllerType, value ) {
var gui = new Gui();
// test using gui.add
var params = {
'name': value
};
var args = Array.prototype.slice.call( arguments, 2 );
args.unshift( 'name' );
args.unshift( params );
var controller = gui.add.apply( gui, args );
expect( controller.nodeName.toLowerCase() ).toBe( controllerType );
// test using gui.anon
var gui = new Gui();
args = Array.prototype.slice.call( arguments, 2 );
args.unshift( value );
args.unshift( 'name' );
controller = gui.define.apply( gui, args );
expect( controller.nodeName.toLowerCase() ).toBe( controllerType );
}
} );