From 1dca89383b55fe31e7cc2768b97723094ede46bc Mon Sep 17 00:00:00 2001 From: George Michael Brower Date: Sun, 7 Sep 2014 16:18:36 -0400 Subject: [PATCH] controller-option --- build/gui.html | 11 +- build/gui.js | 11 +- elements/controller-base/controller-base.js | 13 ++- .../controller-boolean.html | 1 - .../controller-function.html | 1 - .../controller-number/controller-number.html | 2 - .../controller-option/controller-option.html | 25 +++++ .../controller-option/controller-option.js | 35 ++++++ .../controller-option/controller-option.styl | 10 ++ .../controller-string/controller-string.html | 1 - elements/gui-button/gui-button.html | 19 ++++ elements/gui-button/gui-button.styl | 103 +++++++++++++++++ elements/gui-panel/gui-panel.html | 21 ++-- elements/gui-panel/gui-panel.js | 29 +++-- elements/gui-panel/gui-panel.styl | 105 +++++++++--------- elements/gui-row/gui-row.styl | 6 +- elements/shared/input.styl | 1 + elements/shared/shared.styl | 6 +- examples/index.html | 21 ++-- gui.html | 3 +- tests/test.gui.js | 54 +++++++-- 21 files changed, 362 insertions(+), 116 deletions(-) create mode 100644 elements/controller-option/controller-option.html create mode 100644 elements/controller-option/controller-option.js create mode 100644 elements/controller-option/controller-option.styl create mode 100644 elements/gui-button/gui-button.html create mode 100644 elements/gui-button/gui-button.styl diff --git a/build/gui.html b/build/gui.html index c54828c..900466a 100644 --- a/build/gui.html +++ b/build/gui.html @@ -10,11 +10,12 @@ var e,f,g,h=b.type;if("load"===h&&!b.bubbles){var i=c;i instanceof Q.Document&&( +},_register:function(){c(this.extends)&&!b(this.extends)&&console.warn("%s is attempting to extend %s, an unregistered element or one that was not registered with Polymer.",this.name,this.extends),this.register(this.name,this.extends),this.registered=!0},waitingForPrototype:function(a){return h(a)?void 0:(i(a,this),this.handleNoScript(a),!0)},handleNoScript:function(a){this.hasAttribute("noscript")&&!this.noscript&&(this.noscript=!0,Polymer(a))},waitingForResources:function(){return this._needsResources},waitingForQueue:function(){return f.enqueue(this,this.registerWhenReady,this._register)},loadResources:function(){this._needsResources=!0,this.loadStyles(function(){this._needsResources=!1,this.registerWhenReady()}.bind(this))}});e.publish(e.declaration,j),g(function(){document.body.removeAttribute("unresolved"),document.dispatchEvent(new CustomEvent("polymer-ready",{bubbles:!0}))}),document.registerElement("polymer-element",{prototype:j})}(Polymer),function(){var a=document.createElement("polymer-element");a.setAttribute("name","auto-binding"),a.setAttribute("extends","template"),a.init(),Polymer("auto-binding",{createdCallback:function(){this.syntax=this.bindingDelegate=this.makeSyntax(),Polymer.whenPolymerReady(function(){this.model=this,this.setAttribute("bind",""),this.async(function(){this.marshalNodeReferences(this.parentNode),this.fire("template-bound")})}.bind(this))},makeSyntax:function(){var a=Object.create(Polymer.api.declaration.events),b=this;a.findController=function(){return b.model};var c=new PolymerExpressions,d=c.prepareBinding;return c.prepareBinding=function(b,e,f){return a.prepareEventBinding(b,e,f)||d.call(c,b,e,f)},c}})}(); - - - - \ No newline at end of file + + + + + \ No newline at end of file diff --git a/build/gui.js b/build/gui.js index 822a39a..7ba03c4 100644 --- a/build/gui.js +++ b/build/gui.js @@ -10,11 +10,12 @@ document.write(['', +'},_register:function(){c(this.extends)&&!b(this.extends)&&console.warn("%s is attempting to extend %s, an unregistered element or one that was not registered with Polymer.",this.name,this.extends),this.register(this.name,this.extends),this.registered=!0},waitingForPrototype:function(a){return h(a)?void 0:(i(a,this),this.handleNoScript(a),!0)},handleNoScript:function(a){this.hasAttribute("noscript")&&!this.noscript&&(this.noscript=!0,Polymer(a))},waitingForResources:function(){return this._needsResources},waitingForQueue:function(){return f.enqueue(this,this.registerWhenReady,this._register)},loadResources:function(){this._needsResources=!0,this.loadStyles(function(){this._needsResources=!1,this.registerWhenReady()}.bind(this))}});e.publish(e.declaration,j),g(function(){document.body.removeAttribute("unresolved"),document.dispatchEvent(new CustomEvent("polymer-ready",{bubbles:!0}))}),document.registerElement("polymer-element",{prototype:j})}(Polymer),function(){var a=document.createElement("polymer-element");a.setAttribute("name","auto-binding"),a.setAttribute("extends","template"),a.init(),Polymer("auto-binding",{createdCallback:function(){this.syntax=this.bindingDelegate=this.makeSyntax(),Polymer.whenPolymerReady(function(){this.model=this,this.setAttribute("bind",""),this.async(function(){this.marshalNodeReferences(this.parentNode),this.fire("template-bound")})}.bind(this))},makeSyntax:function(){var a=Object.create(Polymer.api.declaration.events),b=this;a.findController=function(){return b.model};var c=new PolymerExpressions,d=c.prepareBinding;return c.prepareBinding=function(b,e,f){return a.prepareEventBinding(b,e,f)||d.call(c,b,e,f)},c}})}();', '', '', '', -'', -'', -'', -'',].join("\n")) \ No newline at end of file +'', +'', +'', +'', +'',].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 92405ce..2eb53f8 100644 --- a/elements/controller-base/controller-base.js +++ b/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; + + }, }); \ No newline at end of file diff --git a/elements/controller-boolean/controller-boolean.html b/elements/controller-boolean/controller-boolean.html index 1c9c696..dd01e37 100644 --- a/elements/controller-boolean/controller-boolean.html +++ b/elements/controller-boolean/controller-boolean.html @@ -1,4 +1,3 @@ - diff --git a/elements/controller-function/controller-function.html b/elements/controller-function/controller-function.html index fcb0c45..505ebbc 100644 --- a/elements/controller-function/controller-function.html +++ b/elements/controller-function/controller-function.html @@ -1,4 +1,3 @@ - diff --git a/elements/controller-number/controller-number.html b/elements/controller-number/controller-number.html index b596910..e40eed0 100644 --- a/elements/controller-number/controller-number.html +++ b/elements/controller-number/controller-number.html @@ -1,4 +1,3 @@ - @@ -20,7 +19,6 @@ on-down="{{ down }}" on-up="{{ up }}" on-trackx="{{ trackx }}" - on-tracky="{{ tracky }}" on-trackstart="{{ trackstart }}" horizontal layout center hidden?="{{ !slider }}" diff --git a/elements/controller-option/controller-option.html b/elements/controller-option/controller-option.html new file mode 100644 index 0000000..b0d20f5 --- /dev/null +++ b/elements/controller-option/controller-option.html @@ -0,0 +1,25 @@ + + + + + + + + + \ No newline at end of file diff --git a/elements/controller-option/controller-option.js b/elements/controller-option/controller-option.js new file mode 100644 index 0000000..946c765 --- /dev/null +++ b/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 ); + + } + + +}); + \ No newline at end of file diff --git a/elements/controller-option/controller-option.styl b/elements/controller-option/controller-option.styl new file mode 100644 index 0000000..f0eada2 --- /dev/null +++ b/elements/controller-option/controller-option.styl @@ -0,0 +1,10 @@ +@import '../shared/shared' + + +#container + height 100% + cursor pointer + padding-left padding + +select + outline: none diff --git a/elements/controller-string/controller-string.html b/elements/controller-string/controller-string.html index 65f7493..fad1ef1 100644 --- a/elements/controller-string/controller-string.html +++ b/elements/controller-string/controller-string.html @@ -1,4 +1,3 @@ - diff --git a/elements/gui-button/gui-button.html b/elements/gui-button/gui-button.html new file mode 100644 index 0000000..d87d1f6 --- /dev/null +++ b/elements/gui-button/gui-button.html @@ -0,0 +1,19 @@ + + + + + + + \ No newline at end of file diff --git a/elements/gui-button/gui-button.styl b/elements/gui-button/gui-button.styl new file mode 100644 index 0000000..3826580 --- /dev/null +++ b/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 diff --git a/elements/gui-panel/gui-panel.html b/elements/gui-panel/gui-panel.html index dbc219f..b2856a6 100644 --- a/elements/gui-panel/gui-panel.html +++ b/elements/gui-panel/gui-panel.html @@ -1,5 +1,6 @@ + -
- -
- +
+ +
+ +
+ +
+ + +
-
{{ open ? 'Close' : 'Open' }} Controls
- -
-
-
-
diff --git a/elements/gui-panel/gui-panel.js b/elements/gui-panel/gui-panel.js index 8d23360..7434fbd 100644 --- a/elements/gui-panel/gui-panel.js +++ b/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 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; }, diff --git a/elements/gui-panel/gui-panel.styl b/elements/gui-panel/gui-panel.styl index d9d79c1..d00ed2f 100644 --- a/elements/gui-panel/gui-panel.styl +++ b/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 - right 20px - - &.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 ) + .autoplace-true.touch-true & + width panel-width-touch - &.touch-true - transform translate3d( panel-width-touch, 0, 0 ) + .docked-false & + 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% - - cursor pointer + transition all dur cubic-bezier( 0, 0.8, 0, 1 ) - top 0 - color black + // .open-false & + // 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 - height 60px + .docked-true.open-false & + transform translate3d( - panel-width, 0, 0 ) - padding 10px - box-sizing border-box + .docked-true.open-false.touch-true & + transform translate3d( - panel-width-touch, 0, 0 ) -#closeButtonDockedInner - - border-radius 3px - background #fff - - width 100% - height 100% + .docked-false & + right 0 + left 0 \ No newline at end of file diff --git a/elements/gui-row/gui-row.styl b/elements/gui-row/gui-row.styl index af00789..a433807 100644 --- a/elements/gui-row/gui-row.styl +++ b/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 diff --git a/elements/shared/input.styl b/elements/shared/input.styl index 7dadd0d..6881a24 100644 --- a/elements/shared/input.styl +++ b/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 diff --git a/elements/shared/shared.styl b/elements/shared/shared.styl index 4302344..2746825 100644 --- a/elements/shared/shared.styl +++ b/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 diff --git a/examples/index.html b/examples/index.html index c66fac5..7eece07 100644 --- a/examples/index.html +++ b/examples/index.html @@ -4,9 +4,11 @@ dat-gui kitchen sink + + + + - -