tood

README.md

@@ -2,6 +2,13 @@
 
 dat-gui creates an interface that you can use to modify variables with very little code. 
 
+[ Basic Usage ]( #basic-usage ) •
+[ Limits ]( #limits ) •
+[ Colors ]( #colors ) •
+[ Events ]( #events ) •
+[ Folders ]( #folders ) •
+[ Saving ]( #saving )
+
 ### Basic Usage 
 
 Download the [minified library]( todo ) and include it in your html.
@@ -20,7 +27,7 @@ gui.add( object, 'booleanProperty' ); // Check box
 gui.add( object, 'functionProperty' ); // Button
 ```
 
-### Limiting Input 
+### Limits
 
 You can specify limits on numbers. A number with a min and max value becomes a slider.
 
@@ -40,7 +47,7 @@ gui.add( text, 'message', [ 'pizza', 'chrome', 'hooray' ] );
 gui.add( text, 'speed', { Stopped: 0, Slow: 0.1, Fast: 5 } );
 ```
 
-### Color Controllers 
+### Colors
 
 dat-gui has a color selector and understands many different representations of color. The following creates color controllers for color variables of different formats.
 
@@ -77,7 +84,7 @@ controller.onFinishChange(function(value) {
 });
 ```
 
-### Folders & Comments 
+### Folders
 
 You can nest as many dat-gui as you want. Nested dat-gui act as collapsible folders.
 
@@ -101,7 +108,7 @@ The comment method adds a tooltip to a controller.
 f2.add(text, 'message').comment( 'This is the comment.' );
 ```
 
-### Saving Values 
+### Saving 
 
 Add a save menu to the interface by calling `gui.remember` on all the objects you've added to the Gui.
 

TODO

@@ -1,10 +1,37 @@
+BUILD
+
+- [x] single import
+
+DOCS
+
+- [ ] table of contents ( is going to be really long )
+
+STYLE
+
+- [ ] sharing more styles
+- [ ] css linter?
+
+- [ ] touch styles: bigger please!
+- [ ] kill hover behavior if touch
+
+CLEANLINESS
+
 - [ ] can gui-row be baked into base-controller somehow? 
 
+- [ ] strip component-slider from number-controller
+- [ ] strip component-input from number-controller, unify with string-controller
+
+PARITY
 
 - [ ] folders
-
 - [ ] function controller
 - [ ] color controller
-
 - [x] string controller
 - [x] boolean controller
+
+- [ ] remember
+    - [ ] presets
+
+NEW FEATURES
+
+- [ ] save server

elements/controller-function/controller-function.html

@@ -12,8 +12,7 @@
 
 <link rel="stylesheet" href="controller-function.css">
 
-<div id="container">
+<div id="container"></div>
-</div>
 
 </template>
 

elements/controller-number/controller-number.html

@@ -40,9 +40,9 @@
            on-keydown="{{ keydown }}"
            on-blur="{{ blur }}"
            id="input">
-
-    </template>
-
 </div>
 
+</template>
+
+
 </polymer-element>

elements/controller-number/controller-number.styl

@@ -74,13 +74,13 @@ input {
     .slider-true & {
     
         text-align: center;
-        width: 25%;
+        width: 33%;
         transition: width 0.2s ease;
         padding: 0;
 
 
         &:hover {
-            width: 33%;
+            width: 40%;
         } 
 
         &:focus { 

elements/gui-panel/gui-panel.js

@@ -1,8 +1,5 @@
-/*
+// [ ] scrolling when docked
-
+// [ ] scrolling when window short and not docked
-[ ] kill horizontal scroll when docked
-
-*/
 
 Polymer('gui-panel', {
 

elements/gui-row/gui-row.styl

@@ -1,6 +1,5 @@
 @import '../shared';
 
-
 :host {
 
     panel-font()
@@ -11,7 +10,7 @@
 
     debug( blue )
     
-    height: min-row-height;
+    height: row-height;
     transition: background-color 0.2s linear;
     border-bottom: 1px solid lighter;
 
@@ -41,12 +40,9 @@
 
     debug( red );
 
-
     overflow: hidden;
     text-overflow: ellipsis;
     // word-wrap: break-word;
-    
-
 
 }
 

elements/shared.styl

@@ -12,10 +12,12 @@ debug( color )
 // constants
 
 panel-width = 245px
-min-row-height = 30px
+
+row-height = 29px
+// row-height-touch = 44px
 
 font-color = #ECEBE0
-panel-color = #1E1E1E
+panel-color = rgba( 30, 30, 30, 0.95 );
 
 number-color = #25A0D8
 boolean-color = #864694
@@ -31,7 +33,7 @@ ease = cubic-bezier( .25, .25, 0, 1 )
 // common
 
 panel-font( color = font-color )
-    font: 11px 'Lucida Grande', sans-serif;
+    font: 10px 'Lucida Grande', sans-serif;
     color: color;
     if ( color == font-color )
         -webkit-font-smoothing: antialiased;

examples/index.html

@@ -5,15 +5,9 @@
     <meta charset="utf-8">
     <title>dat-gui kitchen sink</title>
 
-    
-    <!-- // <script src="../../platform/platform.js"></script> -->
-
-    <!-- <link rel="import" href="../build/gui.html">  -->
     <script src="../build/gui.js"></script>
    
-
+    <meta name="viewport" content="width=device-width, user-scalable=no">
-
-
     
     <style type="text/css">
     body {

index.html

@@ -17,6 +17,12 @@
 <!-- Copied from README.md -->
 <div id="readme"><h1 id="dat-gui">dat-gui</h1>
 <p>dat-gui creates an interface that you can use to modify variables with very little code. </p>
+<p><a href="#basic-usage"> Basic Usage </a> •
+<a href="#limits"> Limits </a> •
+<a href="#colors"> Colors </a> •
+<a href="#events"> Events </a> •
+<a href="#folders"> Folders </a> •
+<a href="#saving"> Saving </a></p>
 <h3 id="basic-usage">Basic Usage</h3>
 <p>Download the <a href="todo">minified library</a> and include it in your html.</p>
 <pre><code class="lang-html">&lt;script src=&quot;gui.js&quot;&gt;&lt;/script&gt;
@@ -28,7 +34,7 @@ gui.add( object, &#39;stringProperty&#39; ); // Text box
 gui.add( object, &#39;booleanProperty&#39; ); // Check box
 gui.add( object, &#39;functionProperty&#39; ); // Button
 </code></pre>
-<h3 id="limiting-input">Limiting Input</h3>
+<h3 id="limits">Limits</h3>
 <p>You can specify limits on numbers. A number with a min and max value becomes a slider.</p>
 <pre><code class="lang-javascript">gui.add( text, &#39;growthSpeed&#39;, -5, 5 ); // Min and max
 gui.add( text, &#39;noiseStrength&#39; ).step( 5 ); // Increment amount
@@ -41,7 +47,7 @@ gui.add( text, &#39;message&#39;, [ &#39;pizza&#39;, &#39;chrome&#39;, &#39;hoor
 // Choose from named values
 gui.add( text, &#39;speed&#39;, { Stopped: 0, Slow: 0.1, Fast: 5 } );
 </code></pre>
-<h3 id="color-controllers">Color Controllers</h3>
+<h3 id="colors">Colors</h3>
 <p>dat-gui has a color selector and understands many different representations of color. The following creates color controllers for color variables of different formats.</p>
 <pre><code class="lang-javascript">text.color0 = &quot;#ffae23&quot;; // CSS string
 text.color1 = [ 0, 128, 255 ]; // RGB array
@@ -68,7 +74,7 @@ controller.onFinishChange(function(value) {
   alert(&quot;The new value is &quot; + value);
 });
 </code></pre>
-<h3 id="folders-comments">Folders &amp; Comments</h3>
+<h3 id="folders">Folders</h3>
 <p>You can nest as many dat-gui as you want. Nested dat-gui act as collapsible folders.</p>
 <pre><code class="lang-javascript">var gui = new Gui();
 
@@ -85,7 +91,7 @@ f2.open();
 <p>The comment method adds a tooltip to a controller.</p>
 <pre><code class="lang-javascript">f2.add(text, &#39;message&#39;).comment( &#39;This is the comment.&#39; );
 </code></pre>
-<h3 id="saving-values">Saving Values</h3>
+<h3 id="saving">Saving</h3>
 <p>Add a save menu to the interface by calling <code>gui.remember</code> on all the objects you&#39;ve added to the Gui.</p>
 <pre><code class="lang-javascript">var fizzyText = new FizzyText();
 var gui = new Gui();

tests/test.js

@@ -1,29 +0,0 @@
-describe('Gui', function() {
-
-    it( 'exists', function() {
-
-        expect( Gui ).toBeDefined();
-
-    });
-
-    it( 'has a ready callback', function() {
-
-        var ready = {
-            ready: function() {}
-        };
-
-        spyOn( ready, 'ready' );
-
-        runs( function() {
-            Gui.ready( ready.ready );
-        } );
-
-        waits( 10 );
-
-        runs( function() {
-            expect( ready.ready ).toHaveBeenCalled();
-        } );
-
-    } );
-  
-});