controller-option

elements/controller-base/controller-base.js

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

elements/controller-boolean/controller-boolean.html

@@ -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>

elements/controller-function/controller-function.html

@@ -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>

elements/controller-number/controller-number.html

@@ -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 }}"

elements/controller-option/controller-option.html

@@ -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>

elements/controller-option/controller-option.js

@@ -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 );
+
+    }
+    
+
+});
+    

elements/controller-option/controller-option.styl

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

elements/controller-string/controller-string.html

@@ -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>

elements/gui-button/gui-button.html

@@ -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>

elements/gui-button/gui-button.styl

@@ -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

elements/gui-panel/gui-panel.html

@@ -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,18 +10,18 @@
 
 <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="controllers">
+    <div id="panel">
-        <content></content>
+
+        <div id="controllers">
+            <content></content>
+        </div>
+
+        <gui-button hidden?="{{ !autoPlace }}" on-tap="{{ toggleOpen }}" open="{{ open }}"></gui-button>
+
     </div>
 
-    <div id="closeButton" on-tap="{{ tapClose }}" hidden?="{{ docked }}">{{ open ? 'Close' : 'Open' }} Controls</div>
-
-    <div id="closeButtonDocked" on-tap="{{ tapClose }}" hidden?="{{ !docked }}">
-        <div id="closeButtonDockedInner"></div>
-    </div>
-    
 </div>
 
 </template>

elements/gui-panel/gui-panel.js

@@ -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 initialValue = arguments[ 1 ];
-        var name = 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;
     },
     

elements/gui-panel/gui-panel.styl

@@ -1,84 +1,83 @@
 @import '../shared/shared'
 
-
 // redefine touch because we are the host ... 
 
 touch( val = true )
-    { '.touch-' + val } &
+     { '.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 &
-            right 20px
+        width panel-width-touch
-    
-        &.docked-true 
-            right 0
-            bottom 0
-            
-            #controllers  
-                position absolute
-                width 100%
-                bottom 0
-                top 0
-                overflow auto
-            
-            &.open-false  
-                transform translate3d( panel-width, 0, 0 )
 
-                &.touch-true
+    .docked-false &
-                    transform translate3d( panel-width-touch, 0, 0 )
+        right 20px
+
+    .docked-true &
+        right 0
+        bottom 0
+        overflow auto
+        -webkit-overflow-scrolling touch
+
+    .docked-true.open-false &
+        transform translate3d( panel-width, 0, 0 )
+        overflow visible
+
+    .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()
-        background color-panel
-    
 
-#closeButtonDocked  
+gui-button
-    
+    panel-font()
+    background color-panel
+    height row-height
     position absolute
-    right 100%
+    transition all dur cubic-bezier( 0, 0.8, 0, 1 )
-    
-    cursor pointer
 
-    top 0
+    // .open-false &
-    color black
+    //     transition-delay stagger * 0.5
+    .docked-true & 
+        top 0
+        right 0
+        width row-height*1.5
+        height row-height*1.5
+        box-sizing border-box
 
-    width 60px
+    .docked-true.open-false &
-    height 60px
+        transform translate3d( - panel-width, 0, 0 )
 
-    padding 10px
+    .docked-true.open-false.touch-true &
-    box-sizing border-box
+        transform translate3d( - panel-width-touch, 0, 0 )
 
-#closeButtonDockedInner 
-
-    border-radius 3px
-    background #fff
-
-    width 100%
-    height 100%
 
+    .docked-false & 
+        right 0
+        left 0

elements/gui-row/gui-row.styl

@@ -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
+    transform translate3d( 0, 20px, 0 )
     
     opacity 0
-    transform translate3d( 0, 20px, 0 )
-
     transition all 0.2s ease
 
 #comment.open-true  

elements/shared/input.styl

@@ -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

elements/shared/shared.styl

@@ -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
 

examples/index.html

@@ -4,9 +4,11 @@
 
     <meta charset="utf-8">
     <title>dat-gui kitchen sink</title>
+    
+    
+    <!-- <script src="../build/gui.js"></script> -->
+    <link rel="import" href="../gui.html">
 
-    <script src="../build/gui.js"></script>
-   
     <meta name="viewport" content="width=device-width, user-scalable=no">
     
     <style type="text/css">
@@ -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.add( object, 'optionController', { A: 'a', B: 'b', C: 'c'} );
-        gui.anon( 0, 'loops', -2, 2, 1 ).comment( 'The number of times the gif loops in a cycle.' );
+        gui.add( object, 'optionController', [ 'a', 'b', 'c' ] )
-        gui.anon( 0, 'start', -2, 2, 1 ).comment( 'The frame of the gif where the song should start.' );
+           .onChange( function( val ) {
+                console.log( val );
+           });
 
     } );
 

gui.html

@@ -11,4 +11,5 @@
 <link rel="import" href="elements/controller-number/controller-number.html">
 <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-function/controller-function.html">
+<link rel="import" href="elements/controller-option/controller-option.html">

tests/test.gui.js

@@ -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-option', 'hey', [ 'hey', 'hi', 'ho' ] );
-        expectController( 'controller-color', '#aba' );
+        expectController( 'controller-option', 'a', { a: 'a', b: 'b', c: 'c' } );
 
-        expectController( 'controller-color', 'rgba(255, 0, 255, 0.2)' );
+        // expectController( 'controller-color', '#00ff00' );
-        expectController( 'controller-color', 'rgb(255, 0, 255)' );
+        // expectController( 'controller-color', '#aba' );
 
-        expectController( 'controller-color', 'hsl(240, 100%, 50%)' );
+        // expectController( 'controller-color', 'rgba(255, 0, 255, 0.2)' );
-        expectController( 'controller-color', 'hsla(255, 100%, 40%, 0.5)' );
+        // 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 );
+
+    }
+
 } );