folders

TODO.md

@@ -1,24 +1,22 @@
 PARITY
 
-- [ ] folders
+- [x] folders
-- [ ] function controller
+- [x] function controller
 - [ ] color controller
 
 - [ ] remember
 
-    - [ ] save server !!
-        - [ ] acknowledges save
-        - [ ] dat-gui server npm install -g ?
-    - [ ] remember gui.vars
     - [ ] 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
 

build/dat-gui.shim.js

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

elements/dat-gui-base/dat-gui-base.js

@@ -53,7 +53,11 @@ Polymer( 'dat-gui-base', {
 
     valueChanged: function() {
 
+        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;
+
+    }
+
 } );

elements/dat-gui-boolean/dat-gui-boolean.css

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

elements/dat-gui-boolean/dat-gui-boolean.styl

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

elements/dat-gui-folder/dat-gui-folder.css

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

elements/dat-gui-folder/dat-gui-folder.html

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

elements/dat-gui-folder/dat-gui-folder.js

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

elements/dat-gui-folder/dat-gui-folder.styl

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

elements/dat-gui-function/dat-gui-function.css

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

elements/dat-gui-function/dat-gui-function.styl

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

elements/dat-gui-number/dat-gui-number.css

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

elements/dat-gui-number/dat-gui-number.styl

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

elements/dat-gui-option/dat-gui-option.css

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

elements/dat-gui-option/dat-gui-option.html

@@ -10,6 +10,17 @@
 
 <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>

elements/dat-gui-option/dat-gui-option.styl

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

elements/dat-gui-string/dat-gui-string.css

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

elements/dat-gui-string/dat-gui-string.styl

@@ -2,4 +2,3 @@
 
 input
     color color-string
-    padding-left padding

elements/dat-gui/dat-gui.css

@@ -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;
+  width: 4.5em;
-  height: 4.35em;
+  height: 4.5em;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

elements/dat-gui/dat-gui.html

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

elements/dat-gui/dat-gui.js

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

elements/dat-gui/dat-gui.styl

@@ -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
+    position fixed
-    top: 0
+    top 0
-    left: 0
+    left 0
-    bottom: 0
+    bottom 0
 
     // needs to be dynamic if we do panel resizing again
     right: panel-width

elements/dat-gui/static.js

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

elements/gui-row/gui-row.css

@@ -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: 3em;
-  height: 2.9em;
   -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;

elements/gui-row/gui-row.html

@@ -1,13 +1,13 @@
 <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">
 
+<div id="container" class="disabled-{{ disabled }}">
+
     <div id="row" class="comment-{{ comment != null }}" layout horizontal>
         
         <div 

elements/gui-row/gui-row.js

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

elements/gui-row/gui-row.styl

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

elements/shared/input.css

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

elements/shared/input.styl

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

elements/shared/shared.styl

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

elements/shim.js

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