Merge branch 'polymer' of github.com:dataarts/dat.gui into polymer

TODO.md

@@ -14,6 +14,8 @@ NEW FEATURES
 - [ ] dividers
 - [ ] save server !!
 - [ ] * disable * listen
+- [ ] override gui.var initialValues with url.js
+- [x] docked container
 
 BUILD
 

elements/dat-gui/dat-gui.css

@@ -66,6 +66,16 @@
 .touch-true #closeButton {
   font-size: 13.5px;
 }
+#dockedContent:not(:empty) {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 245px;
+}
+.open-false #dockedContent:not(:empty) {
+  right: 0;
+}
 gui-button {
   font: 10px 'Lucida Grande', sans-serif;
   color: #ecebe0;

elements/dat-gui/dat-gui.html

@@ -12,6 +12,11 @@
 
 <div id="container" class="docked-{{ docked }} autoplace-{{ autoPlace }} open-{{ open }} touch-{{ touch }}" >
 
+    <div id="dockedContent">
+        
+
+    </div>
+
     <div id="panel">
 
         <div id="controllers">
@@ -22,8 +27,10 @@
 
     </div>
 
+    
 </div>
 
+
 </template>
 
 <script src="dat-gui.js"></script>

elements/dat-gui/dat-gui.js

@@ -12,6 +12,7 @@ Polymer( 'dat-gui', {
     ready: function() {
 
         this.vars = {};
+        this.domElement = this; // legacy
 
     },
 
@@ -124,6 +125,8 @@ Polymer( 'dat-gui', {
 
         }
 
+        this.asyncFire( 'resize' );
+
     },
 
     dockedChanged: function() {
@@ -215,26 +218,44 @@ Gui.getController = function( value ) {
 
 var ready = false;
 var readyHandlers = [];
+var readyPromise;
+
+function readyResolve( resolve ) {
+
+    readyHandlers.forEach( function( fnc ) {
+        fnc();
+    } );
+
+    if ( resolve !== undefined ) {
+        resolve();
+    }
+
+}
+
 
 document.addEventListener( 'polymer-ready', function() {
 
     ready = true;
-    readyHandlers.forEach( function( fnc ) {
+    if ( !readyPromise ) {
-
+        readyResolve();
-        fnc();
+    }
-
-    } );
 
 } );
 
 Gui.ready = function( fnc ) {
 
+    if ( window.Promise && arguments.length === 0 ) {
+        readyPromise = new Promise( readyResolve );
+        return readyPromise;
+    }
+
     if ( ready ) {
         fnc();
     } else {
         readyHandlers.push( fnc );
     }
 
+
 };
 
 

elements/dat-gui/dat-gui.styl

@@ -39,6 +39,7 @@ dur = 0.4s
 #controllers  
     
     panel-font()
+    
     .docked-true &
         position absolute
         width 100%
@@ -54,6 +55,20 @@ dur = 0.4s
     padding padding * 0.75 padding
 
 
+#dockedContent:not(:empty)
+    position: fixed
+    top: 0
+    left: 0
+    bottom: 0
+
+    // needs to be dynamic if we do panel resizing again
+    right: panel-width
+        
+    .open-false &
+        right: 0
+    
+
+
 gui-button
     panel-font()
     background color-panel
@@ -81,4 +96,4 @@ gui-button
 
     .docked-false & 
         right 0
-        left 0
+        left 0

examples/index.html

@@ -5,11 +5,11 @@
     <meta charset="utf-8">
     <title>dat-gui kitchen sink</title>
 
-    <script src="../build/dat-gui.js"></script>
+    <!-- // <script src="../build/dat-gui.js"></script> -->
-    <!--
+    
     <script src="../../platform/platform.js"></script>
     <link rel="import" href="../dat-gui.html">
-    -->
+    
 
     <meta name="viewport" content="width=device-width, user-scalable=no">
 
@@ -76,6 +76,15 @@
                 // console.log( val );
            });
 
+
+        var testElement = document.createElement( 'div' );
+        testElement.id = 'test';
+        testElement.innerHTML = 'test dock container';
+        testElement.style.left = '50%';
+        testElement.style.top = '50%';
+        testElement.style.position = 'absolute';
+        gui.$.dockedContent.appendChild( testElement );
+        
     } );
 
     </script>

gulpfile.js

@@ -77,7 +77,7 @@ gulp.task( 'watch', [ 'lint', 'build', 'test' ], function() {
         .pipe( $.esformatter( formattingOptions ) )
         .pipe( gulp.dest( './' ) )
         .pipe( $.jshint( '.jshintrc' ) )
-        .pipe( $.jshint.reporter( 'jshint-stylish' ) )
+        .pipe( $.jshint.reporter( 'default' ) )
         .pipe( $.jshint.reporter( 'fail' ) );
 
 } );
@@ -122,7 +122,7 @@ gulp.task( 'lint', [ 'fmt' ], function() {
             once: true
         } ) )
         .pipe( $.jshint( '.jshintrc' ) )
-        .pipe( $.jshint.reporter( 'jshint-stylish' ) )
+        .pipe( $.jshint.reporter( 'default' ) )
         .pipe( $.if( !browserSync.active, $.jshint.reporter( 'fail' ) ) );
 
 } );

package.json

@@ -23,7 +23,6 @@
     "gulp-watch": "^1.0.3",
     "gulp-wrap": "^0.3.0",
     "highlight.js": "^8.2.0",
-    "jshint-stylish": "^0.4.0",
     "karma": "^0.12.23",
     "karma-jasmine": "^0.1.5",
     "nib": "^1.0.3",