This commit is contained in:
George Michael Brower 2014-10-11 15:39:16 -04:00
parent 59486459b2
commit e523c634c5
33 changed files with 270 additions and 85 deletions

18
TODO.md
View File

@ -1,24 +1,22 @@
PARITY
- [ ] folders
- [ ] function controller
- [x] folders
- [x] function controller
- [ ] color controller
- [ ] remember
- [ ] save server !!
- [ ] acknowledges save
- [ ] dat-gui server npm install -g ?
- [ ] remember gui.vars
- [ ] presets
- [ ] presets
- [x] save server !!
- [x] acknowledges save
- [x] dat-gui server npm install -g ?
- [x] remember gui.vars
- [x] remember option controller
- [x] debounce save
NEW FEATURES
- [ ] dividers
- [ ] * disable * listen
- [ ] override gui.var initialValues with url.js

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
!function(t){var n=function(){this.vars={},this.$={dockedContent:document.body},Object.defineProperties(this.$.dockedContent,{offsetWidth:{get:function(){return window.innerWidth}},offsetHeight:{get:function(){return window.innerHeight}}})};n.ready=function(t){return window.Promise&&0===arguments.length?new Promise(function(t){t()}):void t()},n.prototype.addEventListener=function(t,n){"resize"==t&&window.addEventListener(t,n)},n.prototype.var=function(t,n){return this.vars[t]=n,i},n.prototype.add=function(){return i};var e=function(){return this},i={on:e};t.Gui=n}(this);
!function(t){var n=function(){this.vars={},this.$={dockedContent:document.body},Object.defineProperties(this.$.dockedContent,{offsetWidth:{get:function(){return window.innerWidth}},offsetHeight:{get:function(){return window.innerHeight}}})};n.ready=function(t){return window.Promise&&0===arguments.length?new Promise(function(t){t()}):void t()},n.prototype.addEventListener=function(t,n){"resize"==t&&window.addEventListener(t,n)},n.prototype.var=function(t,n){return this.vars[t]=n,i},n.prototype.folder=function(){return this},n.prototype.add=function(){return i};var e=function(){return this},i={on:e,onChange:e,disable:e};t.Gui=n}(this);

View File

@ -53,7 +53,11 @@ Polymer( 'dat-gui-base', {
valueChanged: function() {
this.fire( 'change', this.value );
if ( this.__firstChange ) {
this.fire( 'change', this.value );
}
this.__firstChange = true;
this.update();
},
@ -102,6 +106,8 @@ Polymer( 'dat-gui-base', {
onChange: function( v ) {
var _this = this;
this.addEventListener( 'change', function( e ) {
v( e.detail );
@ -118,4 +124,16 @@ Polymer( 'dat-gui-base', {
},
disable: function( disabled ) {
if ( disabled === undefined ) {
disabled = true;
}
this.row.disabled = disabled;
return this;
}
} );

View File

@ -1,7 +1,6 @@
#container {
height: 100%;
cursor: pointer;
padding-left: 8px;
}
#switch-track {
width: 2em;
@ -50,7 +49,7 @@
transform: translate3d(1.2em, 0, 0) scale(1.5);
}
#text {
margin-left: 8px;
margin-left: 9px;
}
.value-false #text {
color: rgba(255,255,255,0.25);

View File

@ -7,7 +7,6 @@ border-radius = height
#container
height 100%
cursor pointer
padding-left padding
#switch-track
width width

View File

@ -0,0 +1,15 @@
#name {
padding: 9px;
padding-top: 18px;
border-bottom: 1px solid rgba(255,255,255,0.25);
font-weight: bold;
-webkit-font-smoothing: antialiased;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.open-false #controllers {
display: none;
}

View File

@ -0,0 +1,23 @@
<polymer-element
name="dat-gui-folder"
attributes="name open parent">
<template>
<link rel="stylesheet" href="dat-gui-folder.css">
<div id="container" class="open-{{ open }}" >
<div id="name" on-tap="{{ tap }}">{{ name }}</div>
<div id="controllers">
<content></content>
</div>
</div>
</template>
<script src="dat-gui-folder.js"></script>
</polymer-element>

View File

@ -0,0 +1,28 @@
/* globals Polymer */
Polymer( 'dat-gui-folder', {
parent: null,
open: false,
add: function() {
var controller = this.parent.add.apply( this.parent, arguments );
this.appendChild( controller.row );
return controller;
},
var: function() {
var controller = this.parent.var.apply( this.parent, arguments );
this.appendChild( controller.row );
return controller;
},
// Events
// -------------------------------
tap: function() {
this.open = !this.open
}
} );

View File

@ -0,0 +1,14 @@
@import '../shared/shared'
#name
padding padding
padding-top padding * 2
border-bottom 1px solid light
font-weight bold
-webkit-font-smoothing antialiased
cursor pointer
user-select none
.open-false
#controllers
display none

View File

@ -1,6 +1,5 @@
#container {
height: 100%;
padding-left: 8px;
}
button {
cursor: pointer;

View File

@ -2,7 +2,6 @@
#container
height 100%
padding-left padding
button
cursor pointer

View File

@ -3,7 +3,7 @@
}
#track-container {
height: 100%;
padding: 0 8px;
padding-right: 9px;
}
#track {
width: 100%;
@ -71,11 +71,11 @@ input::selection {
padding: 0;
}
:host-context(.touch-false) .slider-true input:hover {
width: 35%;
width: 50%;
}
.slider-true input:focus {
width: 50%;
}
.slider-false input {
padding-left: 8px;
padding-left: 9px;
}

View File

@ -9,7 +9,7 @@ knob-size = 0.6em
#track-container
height 100%
padding 0 padding
padding-right padding
#track
width 100%
@ -76,7 +76,7 @@ input
padding 0
+hover()
width 35%
width 50%
&:focus
width 50%

View File

@ -1,8 +1,37 @@
#container {
height: 100%;
cursor: pointer;
padding-left: 8px;
}
select {
outline: none;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
width: 100%;
cursor: pointer;
}
.key {
pointer-events: none;
color: #1ebd6e;
position: absolute;
margin-top: 7px;
}
.key span {
vertical-align: middle;
margin-top: 2px;
display: inline-block;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
svg {
width: 4px;
margin-right: 8px;
vertical-align: middle;
margin-top: 1px;
}
svg polygon {
fill: rgba(255,255,255,0.25);
}
:host-context(.touch-false) #container:hover svg polygon {
fill: #ecebe0;
}

View File

@ -9,7 +9,18 @@
<link rel="stylesheet" href="dat-gui-option.css">
<div id="container" horizontal layout center>
<div class="key">
<svg viewBox="0 0 10 24">
<polygon points="0,9.5 5,0.9 10,9.5 "></polygon>
<polygon points="10,16.75 5,24.7 0,16.75 "></polygon>
</svg>
<span>{{ key }}</span>
</div>
<select value="{{ key }}" on-change="{{ change }}">
<template repeat="{{ name in options | keys }}">
@ -18,6 +29,7 @@
</select>
</div>
</template>

View File

@ -3,8 +3,36 @@
#container
height 100%
cursor pointer
padding-left padding
select
outline none
opacity 0
width 100%
cursor pointer
.key
pointer-events none
color color-string
position absolute
margin-top 7px
span
vertical-align middle
margin-top 2px
display inline-block
overflow hidden
text-overflow ellipsis
svg
width 4px
margin-right 8px
vertical-align middle
margin-top 1px
polygon
fill light
#container
+hover()
svg
polygon
fill color-font

View File

@ -1,4 +1,3 @@
input {
color: #1ebd6e;
padding-left: 8px;
}

View File

@ -1,5 +1,4 @@
@import '../shared/shared'
input
color color-string
padding-left padding
color color-string

View File

@ -41,7 +41,6 @@
#controllers {
font: 10px 'Lucida Grande', sans-serif;
color: #ecebe0;
-webkit-font-smoothing: antialiased;
}
.touch-true #controllers {
font-size: 13.5px;
@ -49,19 +48,17 @@
.docked-true #controllers {
position: absolute;
width: 100%;
top: 4.35em;
}
#closeButton {
font: 10px 'Lucida Grande', sans-serif;
color: #ecebe0;
-webkit-font-smoothing: antialiased;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
text-align: center;
padding: 6px 8px;
padding: 6.75px 9px;
}
.touch-true #closeButton {
font-size: 13.5px;
@ -79,9 +76,8 @@
gui-button {
font: 10px 'Lucida Grande', sans-serif;
color: #ecebe0;
-webkit-font-smoothing: antialiased;
background: #282828;
height: 2.9em;
height: 3em;
position: absolute;
-webkit-transition: all 0.4s cubic-bezier(0, 0.8, 0, 1);
-moz-transition: all 0.4s cubic-bezier(0, 0.8, 0, 1);
@ -95,8 +91,8 @@ gui-button {
.docked-true gui-button {
top: 0;
right: 0;
width: 4.35em;
height: 4.35em;
width: 4.5em;
height: 4.5em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

View File

@ -1,4 +1,5 @@
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../dat-gui-folder/dat-gui-folder.html">
<link rel="import" href="../gui-row/gui-row.html">
<link rel="import" href="../gui-button/gui-button.html">
@ -20,7 +21,7 @@
<content></content>
</div>
<gui-button hidden?="{{ !autoPlace }}" on-tap="{{ toggleOpen }}" open="{{ open }}"></gui-button>
<!-- <gui-button hidden?="{{ !autoPlace }}" on-tap="{{ toggleOpen }}" open="{{ open }}"></gui-button> -->
</div>

View File

@ -66,10 +66,12 @@ Polymer( 'dat-gui', {
controller.name = function( name ) {
row.name = name;
return controller;
};
controller.comment = function( comment ) {
row.comment = comment;
return controller;
};
row.appendChild( controller );
@ -87,11 +89,24 @@ Polymer( 'dat-gui', {
objectControllers[ controller.path ] = controller;
return controller;
},
folder: function( name, open ) {
var folder = document.createElement( 'dat-gui-folder' );
folder.name = name;
folder.open = open === undefined ? true : open;
folder.parent = this;
this.appendChild( folder );
return folder;
},
remove: function( controller ) {
this.removeChild( controller );

View File

@ -10,7 +10,7 @@ dur = 0.4s
#panel
transition transform dur cubic-bezier( 0, 0.8, 0, 1 )
background color-panel
.autoplace-true &
width panel-width
position fixed
@ -44,8 +44,6 @@ dur = 0.4s
position absolute
width 100%
top row-height * 1.5
#closeButton
panel-font()
@ -56,10 +54,10 @@ dur = 0.4s
#dockedContent:not(:empty)
position: fixed
top: 0
left: 0
bottom: 0
position fixed
top 0
left 0
bottom 0
// needs to be dynamic if we do panel resizing again
right: panel-width

View File

@ -75,6 +75,10 @@ Gui.constructor = function( params ) {
}
// Docked
this.docked = params.docked || false;
};

View File

@ -1,8 +1,13 @@
#container.disabled-true {
opacity: 0.4;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
pointer-events: none;
}
#row {
font: 10px 'Lucida Grande', sans-serif;
color: #ecebe0;
-webkit-font-smoothing: antialiased;
height: 2.9em;
height: 3em;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
@ -13,6 +18,7 @@
-ms-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
border-bottom: 1px solid rgba(255,255,255,0.05);
padding: 0 9px;
}
:host-context(.touch-true) #row {
font-size: 13.5px;
@ -21,12 +27,13 @@
height: 100%;
}
#name {
padding: 0 8px;
padding-right: 9px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 38%;
cursor: default;
-webkit-font-smoothing: antialiased;
}
.comment-true #name {
cursor: pointer;
@ -43,7 +50,6 @@
#comment {
font: 10px 'Lucida Grande', sans-serif;
color: #ecebe0;
-webkit-font-smoothing: antialiased;
line-height: 1.6em;
background: #e0cf99;
color: #333;
@ -94,7 +100,7 @@
transition-delay: 200ms;
}
#commentInner {
padding: 8px;
padding: 9px;
}
.comment-true #nameInner {
display: inline-block;

View File

@ -1,12 +1,12 @@
<link rel="import" href="../../../polymer/polymer.html">
<polymer-element name="gui-row" attributes="name comment">
<polymer-element name="gui-row" attributes="name comment disabled">
<template>
<div>
<link rel="stylesheet" href="gui-row.css">
<link rel="stylesheet" href="gui-row.css">
<div id="container" class="disabled-{{ disabled }}">
<div id="row" class="comment-{{ comment != null }}" layout horizontal>

View File

@ -4,6 +4,7 @@ Polymer( 'gui-row', {
comment: null,
commentOpen: false,
disabled: false,
ready: function() {},

View File

@ -1,22 +1,28 @@
@import '../shared/shared'
#container.disabled-true
opacity 0.4
pointer-events none
#row
panel-font()
height row-height
user-select none
transition background-color 0.2s linear
border-bottom 1px solid lighter
padding 0 padding
// overflow hidden
#controller
height 100%
#name
// overflow hidden
padding 0 padding
padding-right padding
box-sizing border-box
width row-name-width
cursor default
-webkit-font-smoothing antialiased
.comment-true &
cursor pointer
+touch()

View File

@ -1,7 +1,6 @@
input {
font: 10px 'Lucida Grande', sans-serif;
color: #ecebe0;
-webkit-font-smoothing: antialiased;
height: 100%;
width: 100%;
display: inline-block;
@ -23,9 +22,3 @@ input {
:host-context(.touch-true) input {
font-size: 13.5px;
}
input:focus {
background: rgba(255,255,255,0.05);
}
:host-context(.touch-false) input:hover {
background: rgba(255,255,255,0.05);
}

View File

@ -12,7 +12,7 @@ input
outline none
transition background-color 0.15s linear
box-sizing border-box
&:focus
background lighter
+hover()
background lighter
// &:focus
// background lighter
// +hover()
// background lighter

View File

@ -8,10 +8,10 @@ touch-scale = 1.35
panel-width = 245px
panel-width-touch = 320px
row-height = 2.9em
row-height = 3em
row-name-width = 38%
padding = 8px
padding = 9px
/* colors */
@ -38,8 +38,6 @@ ease = cubic-bezier( .25, .25, 0, 1 )
panel-font( color = color-font )
font font-size 'Lucida Grande', sans-serif
color color
if ( color == color-font )
-webkit-font-smoothing antialiased
+touch()
font-size font-size * touch-scale

View File

@ -59,6 +59,12 @@ Gui.prototype.var = function( name, value ) {
};
Gui.prototype.folder = function( name ) {
return this;
};
Gui.prototype.add = function( object, path ) {
return controllerShim;
@ -70,7 +76,9 @@ var identity = function() {
};
var controllerShim = {
on: identity
on: identity,
onChange: identity,
disable: identity
};
scope.Gui = Gui;