no message

.bowerrc

@@ -1,3 +1,3 @@
 {
-  "directory": "components"
+  "directory": "../components"
 }

README.html

@@ -1,10 +0,0 @@
-<h1 id="dat-gui">dat.gui</h1>
-<p>Quickly configurable controllers for the web. </p>
-<h2 id="usage">Usage</h2>
-<p>Include </p>
-<pre><code class="lang-html">&lt;script src=&quot;gui.js&quot;&gt;&lt;/script&gt;
-</code></pre>
-<p>With very little code, dat.GUI creates an interface that you can use to modify variables.</p>
-<pre><code class="lang-javascript">var gui = new dat.gui();
-gui.add( object, &#39;someNumber&#39;, 0, 1 );
-</code></pre>

README.md

@@ -1,19 +1,234 @@
-# dat.gui
+# dat-gui
 
-Quickly configurable controllers for the web. 
+With very little code, dat gui creates an interface that you can use to modify variables.
 
-## Usage
+## Basic Usage
 
-Include 
+Download the [minified library]( todo ) and include it in your html.
 
 ```html
 <script src="gui.js"></script>
 ```
 
-With very little code, dat gui creates an interface that you can use to modify variables.
+The following code makes a number box for the variable `object.someNumber`.
 
 ```javascript
-var gui = new dat.gui();
+var gui = new Gui();
-gui.add( object, 'someNumber', 0, 1 );
+gui.add( object, 'someNumber' );
 ```
 
+dat-gui decides what type of controller to use based on the variable's initial value.
+
+```javascript
+var gui = new Gui();
+gui.add( object, 'stringProperty' ); // Text box
+gui.add( object, 'booleanProperty' ); // Check box
+gui.add( object, 'functionProperty' ); // Button
+```
+
+## Constraining Input
+
+You can specify limits on numbers. A number with a min and max value becomes a slider.
+
+```javascript
+gui.add( text, 'growthSpeed', -5, 5 ); // Min and max
+gui.add( text, 'noiseStrength' ).step( 5 ); // Increment amount
+gui.add( text, 'maxSize' ).min( 0 ).step( 0.25 ); // Mix and match
+```
+
+You can also provide a list of accepted values for a dropdown.
+
+```javascript
+// Choose from accepted values
+gui.add( text, 'message', [ 'pizza', 'chrome', 'hooray' ] );
+
+// Choose from named values
+gui.add( text, 'speed', { Stopped: 0, Slow: 0.1, Fast: 5 } );
+```
+
+## Color Controllers
+
+dat-gui has a color selector and understands many different representations of color. The following creates color controllers for color variables of different formats.
+
+
+```javascript
+var FizzyText = function() {
+
+  this.color0 = "#ffae23"; // CSS string
+  this.color1 = [ 0, 128, 255 ]; // RGB array
+  this.color2 = [ 0, 128, 255, 0.3 ]; // RGB with alpha
+  this.color3 = { h: 350, s: 0.9, v: 0.3 }; // Hue, saturation, value
+
+  // Define render logic ...
+
+};
+
+window.onload = function() {
+
+  var text = new FizzyText();
+  var gui = new Gui();
+
+  gui.addColor(text, 'color0');
+  gui.addColor(text, 'color1');
+  gui.addColor(text, 'color2');
+  gui.addColor(text, 'color3');
+
+};
+```
+
+## Events
+
+You can listen for events on individual controllers using an event listener syntax.
+
+```javascript
+var controller = gui.add(fizzyText, 'maxSize', 0, 10);
+
+controller.onChange(function(value) {
+  // Fires on every change, drag, keypress, etc.
+});
+
+controller.onFinishChange(function(value) {
+  // Fires when a controller loses focus.
+  alert("The new value is " + value);
+});
+```
+
+## Folders
+
+You can nest as many Gui's as you want. Nested Gui's act as collapsible folders.
+
+```javascript
+var gui = new Gui();
+
+var f1 = gui.addFolder('Flow Field');
+f1.add(text, 'speed');
+f1.add(text, 'noiseStrength');
+
+var f2 = gui.addFolder('Letters');
+f2.add(text, 'growthSpeed');
+f2.add(text, 'maxSize');
+f2.add(text, 'message');
+
+f2.open();
+```
+
+
+## Saving Values
+
+Add a save menu to the interface by calling `gui.remember` on all the objects you've added to the Gui.
+
+```javascript
+var fizzyText = new FizzyText();
+var gui = new Gui();
+
+gui.remember(fizzyText);
+
+// Add controllers ...
+```
+
+Click the gear icon to change your save settings. You can either save your Gui's values to localStorage, or by copying and pasting a JSON object into your source code as follows:
+
+```javascript
+var fizzyText = new FizzyText();
+var gui = new Gui({ load: JSON });
+
+gui.remember(fizzyText);
+
+// Add controllers ...
+```
+
+## Save to disk
+
+dat-gui comes with a node server that listens for changes to your Gui and saves them to disk. This way you don't have to worry about losing your local storage or copying and pasting a JSON string.
+
+First, run the node script:
+
+```sh
+$ node gui-server
+```
+
+Next, instantiate your Gui with a path to a JSON file to store settings. 
+
+```javascript
+var gui = new Gui( { save: 'path/to/file.json' } );
+gui.remember( fizzyText );
+
+// Add controllers ...
+```
+
+## Custom Placement
+
+By default, Gui panels are created with fixed position, and are automatically appended to the body.
+
+You can change this behavior by setting the `autoPlace` parameter to `false`.
+
+```javascript
+var gui = new Gui( { autoPlace: false } );
+
+var customContainer = document.getElementById('my-gui-container');
+customContainer.appendChild(gui.domElement);
+```
+
+## HTML Elements
+
+Since dat-gui is built using [Web Components]( todo ), you can use HTML syntax to add controllers to the page.
+
+```html
+<body>
+  
+<controller-number id="my-controller" min="-2" max="2" step="1" value="0"></controller-number>
+
+<script>
+
+var controller = document.getElementById( 'my-controller' );
+controller.onChange( function() {
+
+    // react to UI changes ...
+
+} );
+
+</script>
+
+</body>
+```
+
+## Defining Custom Controllers
+
+dat-gui uses [Polymer]( todo ) under the hood to define custom elements. A dat-gui controller is just a [Polymer element]( todo ) with two important requirements:
+
+- Controllers must extend `<controller-base>`.
+- Controllers must be associated with a data type.
+
+Take for example this (simplified) source for dat-gui's `<controller-number>`:
+
+```javascript
+Polymer( 'controller-number', {
+
+  // Define element ...
+
+} );
+
+Gui.register( 'controller-number', function( value ) {
+
+    return typeof value == 'number';
+
+} );
+```
+
+`Gui.register` takes an element name and a test function. The call to `Gui.register` tells dat-gui to add a `<controller-number>` to the panel when the user adds a variable whose type is `'number'`.
+
+A test function takes a value added with `gui.add` and returns a boolean that determines if the controller is appropriate for the value. This example uses [duck typing]( todo ) to register `<vector-controller>` for values that have properties `x`, `y` and `z`.
+
+```javascript
+Gui.register( 'vector-controller', function( value ) {
+
+    return value.hasOwnProperty( 'x' ) &&
+           value.hasOwnProperty( 'y' ) &&
+           value.hasOwnProperty( 'z' );
+
+} );
+```
+
+## Publishing Custom Controllers
+
+You should use bower and format your plugin all nice and it should have a certain prefix yada yada.

build/gui.html

@@ -425,8 +425,9 @@ if(f)g=void 0;else if(f=g[this.name],!f)return void console.error("Cannot find f
   user-select: none;
   width: 100%;
   display: block;
-  font: 500 10px 'Lucida Grande', sans-serif;
+  font: 500 11px 'Roboto', sans-serif;
-  color: #eee;
+  color: #fff;
+  -webkit-font-smoothing: antialiased;
 }
 #comment {
   line-height: 16px;
@@ -565,8 +566,9 @@ Polymer('gui-row', {
 <template>
 
 <style>#closeButton {
-  font: 500 10px 'Lucida Grande', sans-serif;
+  font: 500 11px 'Roboto', sans-serif;
-  color: #eee;
+  color: #fff;
+  -webkit-font-smoothing: antialiased;
   font-size: 14px;
   cursor: pointer;
   text-align: center;
@@ -1102,8 +1104,9 @@ Polymer( 'controller-number', {
   transform: scale(1.5);
 }
 input {
-  font: 500 10px 'Lucida Grande', sans-serif;
+  font: 500 11px 'Roboto', sans-serif;
-  color: #eee;
+  color: #fff;
+  -webkit-font-smoothing: antialiased;
   height: 30px;
   display: inline-block;
   background: transparent;

components/core-component-page/.bower.json

@@ -1,19 +0,0 @@
-{
-  "name": "core-component-page",
-  "private": true,
-  "dependencies": {
-    "platform": "Polymer/platform#>=0.3.0 <1.0.0",
-    "polymer": "Polymer/polymer#>=0.3.0 <1.0.0"
-  },
-  "homepage": "https://github.com/Polymer/core-component-page",
-  "version": "0.3.5",
-  "_release": "0.3.5",
-  "_resolution": {
-    "type": "version",
-    "tag": "0.3.5",
-    "commit": "87617aa1282994eecf5f1f57ef149155ed96f7f1"
-  },
-  "_source": "git://github.com/Polymer/core-component-page.git",
-  "_target": ">=0.3.0 <1.0.0",
-  "_originalSource": "Polymer/core-component-page"
-}

components/core-component-page/README.md

@@ -1,6 +0,0 @@
-core-component-page
-===================
-
-See the [component page](http://polymer-project.org/docs/elements/core-elements.html#core-component-page) for more information.
-
-Note: this is the vulcanized version of [`core-component-page-dev`](https://github.com/Polymer/core-component-page-dev) (the source).

components/core-component-page/bower.json

@@ -1,8 +0,0 @@
-{
-  "name": "core-component-page",
-  "private": true,
-  "dependencies": {
-    "platform": "Polymer/platform#>=0.3.0 <1.0.0",
-    "polymer": "Polymer/polymer#>=0.3.0 <1.0.0"
-  }
-}

components/core-component-page/demo.html

@@ -1,23 +0,0 @@
-<!doctype html>
-<!--
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
-The complete set of authors may be found at http://polymer.github.io/AUTHORS
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
--->
-<html>
-<head>
-
-  <script src="../platform/platform.js"></script>
-  <link rel="import" href="../polymer/polymer.html">
-  <link rel="import" href="core-component-page.html">
-
-</head>
-<body unresolved>
-
-  <core-component-page></core-component-page>
-
-</body>
-</html>

components/core-component-page/index.html

@@ -1,22 +0,0 @@
-<!doctype html>
-<!--
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
-The complete set of authors may be found at http://polymer.github.io/AUTHORS
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
--->
-<html>
-<head>
-
-  <script src="../platform/platform.js"></script>
-  <link rel="import" href="../core-component-page/core-component-page.html">
-
-</head>
-<body unresolved>
-
-  <core-component-page></core-component-page>
-
-</body>
-</html>

components/platform/.bower.json

@@ -1,26 +0,0 @@
-{
-  "name": "platform",
-  "main": "platform.js",
-  "homepage": "https://github.com/Polymer/platform",
-  "authors": [
-    "The Polymer Authors"
-  ],
-  "description": "Integrate platform polyfills: load, build, test",
-  "keywords": [
-    "polymer",
-    "web",
-    "components"
-  ],
-  "license": "BSD",
-  "private": true,
-  "version": "0.3.5",
-  "_release": "0.3.5",
-  "_resolution": {
-    "type": "version",
-    "tag": "0.3.5",
-    "commit": "413707498b62d2c66f923dcac6809d56e7d6dab6"
-  },
-  "_source": "git://github.com/Polymer/platform.git",
-  "_target": ">=0.3.0 <1.0.0",
-  "_originalSource": "Polymer/platform"
-}

components/platform/README.md

@@ -1,6 +0,0 @@
-Platform
-========
-
-Aggregated polyfills the Polymer platform. 
-
-[![Analytics](https://ga-beacon.appspot.com/UA-39334307-2/Polymer/platform/README)](https://github.com/igrigorik/ga-beacon)

components/platform/bower.json

@@ -1,16 +0,0 @@
-{
-  "name": "platform",
-  "main": "platform.js",
-  "homepage": "https://github.com/Polymer/platform",
-  "authors": [
-    "The Polymer Authors"
-  ],
-  "description": "Integrate platform polyfills: load, build, test",
-  "keywords": [
-    "polymer",
-    "web",
-    "components"
-  ],
-  "license": "BSD",
-  "private": true
-}

components/platform/build.log

@@ -1,39 +0,0 @@
-BUILD LOG
----------
-Build Time: 2014-08-07T17:12:14
-
-NODEJS INFORMATION
-==================
-nodejs: v0.10.28
-chai: 1.9.1
-grunt: 0.4.4
-grunt-audit: 0.0.3
-grunt-concat-sourcemap: 0.4.1
-grunt-contrib-concat: 0.4.0
-grunt-contrib-uglify: 0.5.0
-grunt-contrib-yuidoc: 0.5.2
-grunt-karma: 0.8.3
-karma: 0.12.14
-karma-crbot-reporter: 0.0.4
-karma-firefox-launcher: 0.1.3
-karma-ie-launcher: 0.1.5
-karma-mocha: 0.1.4
-karma-safari-launcher: 0.1.1
-karma-script-launcher: 0.1.0
-mocha: 1.20.1
-Platform: 0.3.5
-
-REPO REVISIONS
-==============
-CustomElements: 7fb280cb30f9fe26ed60c0fdb75a1eebe4c9dab1
-HTMLImports: fe9a92700b7a0bc7a9d582f4767ab23ec195a423
-NodeBind: c47bc1b40d1cf0123b29620820a7111471e83ff3
-ShadowDOM: c4da63735ba6c00a7d6af5c1b118f84bd6a2e114
-TemplateBinding: f11e2e7faa074f54e711f5abb40e278f3005500d
-WeakMap: 6662df5cb7146707238b08e7a65cf70056ae516a
-observe-js: 08b8dfa21bf49d9ac60bc495e77a0bfa57f84cde
-platform-dev: e1453ea29013959ee3e1f893eaf97806629631dc
-
-BUILD HASHES
-============
-build/platform.js: d4d1dc11321913bf930bb5109da0b5ed434c0a00

components/polymer/.bower.json

@@ -1,19 +0,0 @@
-{
-  "name": "polymer",
-  "private": true,
-  "dependencies": {
-    "platform": "Polymer/platform#>=0.3.0 <1.0.0",
-    "core-component-page": "Polymer/core-component-page#>=0.3.0 <1.0.0"
-  },
-  "homepage": "https://github.com/Polymer/polymer",
-  "version": "0.3.5",
-  "_release": "0.3.5",
-  "_resolution": {
-    "type": "version",
-    "tag": "0.3.5",
-    "commit": "a09a0e689fdeab11b53b41eaed033781733bf1eb"
-  },
-  "_source": "git://github.com/Polymer/polymer.git",
-  "_target": "~0.3.5",
-  "_originalSource": "Polymer/polymer"
-}

components/polymer/README.md

@@ -1,17 +0,0 @@
-# Polymer
-
-[![Analytics](https://ga-beacon.appspot.com/UA-39334307-2/Polymer/polymer/README)](https://github.com/igrigorik/ga-beacon)
-
-Build Status: [http://build.chromium.org/p/client.polymer/waterfall](http://build.chromium.org/p/client.polymer/waterfall)
-
-## Brief Overview
-
-For more detailed info goto [http://polymer-project.org/](http://polymer-project.org/).
-
-Polymer is a new type of library for the web, designed to leverage the existing browser infrastructure to provide the encapsulation and extendability currently only available in JS libraries.
-
-Polymer is based on a set of future technologies, including [Shadow DOM](https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html), [Custom Elements](https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/index.html) and Model Driven Views. Currently these technologies are implemented as polyfills or shims, but as browsers adopt these features natively, the platform code that drives Polymer evacipates, leaving only the value-adds.
-
-## Tools & Testing
-
-For running tests or building minified files, consult the [tooling information](http://www.polymer-project.org/resources/tooling-strategy.html).

components/polymer/bower.json

@@ -1,8 +0,0 @@
-{
-  "name": "polymer",
-  "private": true,
-  "dependencies": {
-    "platform": "Polymer/platform#>=0.3.0 <1.0.0",
-    "core-component-page": "Polymer/core-component-page#>=0.3.0 <1.0.0"
-  }
-}

components/polymer/build.log

@@ -1,33 +0,0 @@
-BUILD LOG
----------
-Build Time: 2014-08-07T17:12:22
-
-NODEJS INFORMATION
-==================
-nodejs: v0.10.28
-chai: 1.9.1
-grunt: 0.4.4
-grunt-audit: 0.0.3
-grunt-contrib-uglify: 0.4.0
-grunt-contrib-yuidoc: 0.5.2
-grunt-karma: 0.8.3
-grunt-string-replace: 0.2.7
-karma: 0.12.14
-karma-crbot-reporter: 0.0.4
-karma-firefox-launcher: 0.1.3
-karma-ie-launcher: 0.1.5
-karma-mocha: 0.1.3
-karma-safari-launcher: 0.1.1
-karma-script-launcher: 0.1.0
-mocha: 1.18.2
-Polymer: 0.3.5
-
-REPO REVISIONS
-==============
-polymer-expressions: 529532103a215b641d4efd607536ce87ec7723f6
-polymer-gestures: 725191c5457b6e96c37a9db852e943fe3b40635f
-polymer-dev: 56417b55d75f0a69d19e313c218c86b23c1daf18
-
-BUILD HASHES
-============
-build/polymer.js: d1d70d03f791f2808e9dad16dc0e43bcbbd25c2d

components/polymer/layout.html

@@ -1,278 +0,0 @@
-<!--
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-<style shim-shadowdom>
-/*******************************
-          Flex Layout
-*******************************/
-
-html /deep/ [layout][horizontal], html /deep/ [layout][vertical] {
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-}
-
-html /deep/ [layout][horizontal][inline], html /deep/ [layout][vertical][inline] {
-  display: -ms-inline-flexbox;
-  display: -webkit-inline-flex;
-  display: inline-flex;
-}
-
-html /deep/ [layout][horizontal] {
-  -ms-flex-direction: row;
-  -webkit-flex-direction: row;
-  flex-direction: row;
-}
-
-html /deep/ [layout][horizontal][reverse] {
-  -ms-flex-direction: row-reverse;
-  -webkit-flex-direction: row-reverse;
-  flex-direction: row-reverse;
-}
-
-html /deep/ [layout][vertical] {
-  -ms-flex-direction: column;
-  -webkit-flex-direction: column;
-  flex-direction: column;
-}
-
-html /deep/ [layout][vertical][reverse] {
-  -ms-flex-direction: column-reverse;
-  -webkit-flex-direction: column-reverse;
-  flex-direction: column-reverse;
-}
-
-html /deep/ [layout][wrap] {
-  -ms-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-html /deep/ [layout][wrap-reverse] {
-  -ms-flex-wrap: wrap-reverse;
-  -webkit-flex-wrap: wrap-reverse;
-  flex-wrap: wrap-reverse;
-}
-
-html /deep/ [flex] {
-  -ms-flex: 1;
-  -webkit-flex: 1;
-  flex: 1;
-}
-
-html /deep/ [flex][auto] {
-  -ms-flex: 1 1 auto;
-  -webkit-flex: 1 1 auto;
-  flex: 1 1 auto;
-}
-
-html /deep/ [flex][none] {
-  -ms-flex: none;
-  -webkit-flex: none;
-  flex: none;
-}
-
-html /deep/ [flex][one] {
-  -ms-flex: 1;
-  -webkit-flex: 1;
-  flex: 1;
-}
-
-html /deep/ [flex][two] {
-  -ms-flex: 2;
-  -webkit-flex: 2;
-  flex: 2;
-}
-
-html /deep/ [flex][three] {
-  -ms-flex: 3;
-  -webkit-flex: 3;
-  flex: 3;
-}
-
-html /deep/ [flex][four] {
-  -ms-flex: 4;
-  -webkit-flex: 4;
-  flex: 4;
-}
-
-html /deep/ [flex][five] {
-  -ms-flex: 5;
-  -webkit-flex: 5;
-  flex: 5;
-}
-
-html /deep/ [flex][six] {
-  -ms-flex: 6;
-  -webkit-flex: 6;
-  flex: 6;
-}
-
-html /deep/ [flex][seven] {
-  -ms-flex: 7;
-  -webkit-flex: 7;
-  flex: 7;
-}
-
-html /deep/ [flex][eight] {
-  -ms-flex: 8;
-  -webkit-flex: 8;
-  flex: 8;
-}
-
-html /deep/ [flex][nine] {
-  -ms-flex: 9;
-  -webkit-flex: 9;
-  flex: 9;
-}
-
-html /deep/ [flex][ten] {
-  -ms-flex: 10;
-  -webkit-flex: 10;
-  flex: 10;
-}
-
-html /deep/ [flex][eleven] {
-  -ms-flex: 11;
-  -webkit-flex: 11;
-  flex: 11;
-}
-
-html /deep/ [flex][twelve] {
-  -ms-flex: 12;
-  -webkit-flex: 12;
-  flex: 12;
-}
-
-/* alignment in cross axis */
-
-html /deep/ [layout][start] {
-  -ms-flex-align: start;
-  -webkit-align-items: flex-start;
-  align-items: flex-start;
-}
-
-html /deep/ [layout][center], html /deep/ [layout][center-center] {
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  align-items: center;
-}
-
-html /deep/ [layout][end] {
-  -ms-flex-align: end;
-  -webkit-align-items: flex-end;
-  align-items: flex-end;
-}
-
-/* alignment in main axis */
-
-html /deep/ [layout][start-justified] {
-  -ms-flex-pack: start;
-  -webkit-justify-content: flex-start;
-  justify-content: flex-start;
-}
-
-html /deep/ [layout][center-justified], html /deep/ [layout][center-center] {
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-html /deep/ [layout][end-justified] {
-  -ms-flex-pack: end;
-  -webkit-justify-content: flex-end;
-  justify-content: flex-end;
-}
-
-html /deep/ [layout][around-justified] {
-  -ms-flex-pack: around;
-  -webkit-justify-content: space-around;
-  justify-content: space-around;
-}
-
-html /deep/ [layout][justified] {
-  -ms-flex-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-}
-
-/* self alignment */
-
-html /deep/ [self-start] {
-  -ms-align-self: flex-start;
-  -webkit-align-self: flex-start;
-  align-self: flex-start;
-}
-
-html /deep/ [self-center] {
-  -ms-align-self: center;
-  -webkit-align-self: center;
-  align-self: center;
-}
-
-html /deep/ [self-end] {
-  -ms-align-self: flex-end;
-  -webkit-align-self: flex-end;
-  align-self: flex-end;
-}
-
-html /deep/ [self-stretch] {
-  -ms-align-self: stretch;
-  -webkit-align-self: stretch;
-  align-self: stretch;
-}
-
-/*******************************
-          Other Layout
-*******************************/
-
-html /deep/ [block] {
-  display: block;
-}
-
-/* ie support for hidden */
-html /deep/ [hidden] {
-  display: none !important;
-}
-
-html /deep/ [relative] {
-  position: relative;
-}
-
-html /deep/ [fit] {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-body[fullbleed] {
-  margin: 0;
-  height: 100vh;
-}
-
-/*******************************
-            Other
-*******************************/
-
-html /deep/ [segment], html /deep/ segment {
-  display: block;
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  box-sizing: border-box;
-  margin: 1em 0.5em;
-  padding: 1em;
-  background-color: white;
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-  border-radius: 5px 5px 5px 5px;
-}
-
-</style>

components/polymer/polymer.html

@@ -1,13 +0,0 @@
-<!--
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-
-<link rel="import" href="layout.html">
-
-<script src="polymer.js"></script>
-<!--<link rel="import" href="../polymer-dev/polymer.html">--> 

elements/controller-base/controller-base.html

@@ -1,4 +1,4 @@
-<link rel="import" href="../../components/polymer/polymer.html">
+<link rel="import" href="../../../components/polymer/polymer.html">
 
 <script src="controller-base.js"></script>
 

elements/controller-number/controller-number.html

@@ -1,4 +1,4 @@
-<link rel="import" href="../../components/polymer/polymer.html">
+<link rel="import" href="../../../components/polymer/polymer.html">
 <link rel="import" href="../controller-base/controller-base.html">
 
 <script src="controller-number.js"></script>

elements/custom-example/controller-custom.html

@@ -1,34 +0,0 @@
-<link rel="import" href="../../components/polymer/polymer.html">
-<link rel="import" href="../controller-number/controller-number.html">
-
-<polymer-element name="controller-vector" extends="controller-base">
-
-<template>
-    <controller-number id="x" object="{{ value }}" path="x" min="-1"></controller-number>
-    <controller-number id="y" object="{{ value }}" path="y" min="-1"></controller-number>
-    <controller-number id="z" object="{{ value }}" path="z" min="-2"></controller-number>
-</template>
-
-<script>
-
-Gui.register( 'controller-vector', function( value ) {
-
-    return value instanceof THREE.Vector3;
-
-} );
-
-Polymer('controller-vector', {
-
-    ready: function() {
-
-    },
-
-    init: function() {
-
-    }
-
-});
-
-</script>
-
-</polymer-element>

elements/gui-panel/gui-panel.html

@@ -1,4 +1,4 @@
-<link rel="import" href="../../components/polymer/polymer.html">
+<link rel="import" href="../../../components/polymer/polymer.html">
 <link rel="import" href="../gui-row/gui-row.html">
 
 <polymer-element 

elements/gui-row/gui-row.html

@@ -1,4 +1,4 @@
-<link rel="import" href="../../components/polymer/polymer.html">
+<link rel="import" href="../../../components/polymer/polymer.html">
 
 <polymer-element name="gui-row" attributes="name comment">
 

gui.html

@@ -12,4 +12,3 @@
 <link rel="import" href="elements/gui-row/gui-row.html">
 
 <link rel="import" href="elements/controller-number/controller-number.html">
-<link rel="import" href="elements/custom-example/controller-custom.html">

gulpfile.js

@@ -5,7 +5,8 @@
 */
 
 var gulp    = require( 'gulp' ),
-    $       = require( 'gulp-load-plugins' )( { 'pattern': '*' } ); // need the star for nib ... 
+    fs      = require( 'fs' ),
+    $       = require( 'gulp-load-plugins' )( { 'pattern': '*' } );
 
 var paths = {
     main:   'gui.html',
@@ -36,14 +37,20 @@ gulp.task( 'vulcanize', function() {
 
 gulp.task( 'readme', function() {
         
-    gulp.src( 'README.md' ).pipe( $.markdown() ).pipe( gulp.dest( './' ) );
+
+    var content = {
+        readme: $.marked( fs.readFileSync( 'README.md', 'utf8' ) )
+    }
+
+    gulp.src( 'docs/template.html' )
+        .pipe( $.plates( content ) )
+        .pipe( $.rename( 'index.html' ) )
+        .pipe( gulp.dest( './' ) );
 
 } );
 
 gulp.task( 'test', function() {
 
-    return gulp.src( 'tests/legacy.html' ).pipe( $.qunit() );
-
 } );
 
 gulp.task( 'build', [ 'css', 'vulcanize', 'test' ] );
@@ -55,7 +62,7 @@ gulp.task( 'default', function() {
 
     // gulp.watch( [ paths.tests, 'test' ] ); // not working? 
 
-    gulp.watch( [ 'README.md' ], [ 'readme' ] );
+    gulp.watch( [ 'README.md', 'docs/template.html' ], [ 'readme' ] );
 
 
 } );

index.html

@@ -2,51 +2,267 @@
 <html lang="en">
 <head>
 
-    <!-- <link rel="import" href="build/gui.html"> -->
+<meta charset="UTF-8">
-    <link rel="import" href="gui.html">
+<title>dat-gui</title>
+
+<style>
+* { 
+    margin: 0;
+}
+
+body {
+    margin: 18px;
+}
+
+h1, h2, h3, p, pre { 
+    margin-bottom: 18px;
+}
+
+h1 { 
+    margin-bottom: 36px;
+}
+
+h2 {
+    padding: 18px 0;
+    margin-top: 36px;
+    margin-bottom: 36px;
+}
+
+h2.sticky {
+    border-bottom: 1px solid rgba( 0, 0, 0, 0.25 );
+    left: 0;
+    right: 0;
+    top: 0;
+    padding: 18px;
+    background: #fff;
+
+}
+</style>
 
 </head>
 <body>
 
-<script>
+<div id="readme"><h1 id="dat-gui">dat-gui</h1>
-var object = { 
+<p>With very little code, dat gui creates an interface that you can use to modify variables.</p>
-    "listen4Free": 332,
+<h2 id="basic-usage">Basic Usage</h2>
-    "zeroTo1": 0,
+<p>Download the <a href="todo">minified library</a> and include it in your html.</p>
-    "step": 10,
+<pre><code class="lang-html">&lt;script src=&quot;gui.js&quot;&gt;&lt;/script&gt;
-    "straddleZero": 0,
+</code></pre>
-    "maxIsNegative": -2,
+<p>The following code makes a number box for the variable <code>object.someNumber</code>.</p>
-    "hasComment": 0
+<pre><code class="lang-javascript">var gui = new Gui();
+gui.add( object, &#39;someNumber&#39; );
+</code></pre>
+<p>dat-gui decides what type of controller to use based on the variable&#39;s initial value.</p>
+<pre><code class="lang-javascript">var gui = new Gui();
+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>
+<h2 id="constraining-input">Constraining Input</h2>
+<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
+gui.add( text, &#39;maxSize&#39; ).min( 0 ).step( 0.25 ); // Mix and match
+</code></pre>
+<p>You can also provide a list of accepted values for a dropdown.</p>
+<pre><code class="lang-javascript">// Choose from accepted values
+gui.add( text, &#39;message&#39;, [ &#39;pizza&#39;, &#39;chrome&#39;, &#39;hooray&#39; ] );
+
+// Choose from named values
+gui.add( text, &#39;speed&#39;, { Stopped: 0, Slow: 0.1, Fast: 5 } );
+</code></pre>
+<h2 id="color-controllers">Color Controllers</h2>
+<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">var FizzyText = function() {
+
+  this.color0 = &quot;#ffae23&quot;; // CSS string
+  this.color1 = [ 0, 128, 255 ]; // RGB array
+  this.color2 = [ 0, 128, 255, 0.3 ]; // RGB with alpha
+  this.color3 = { h: 350, s: 0.9, v: 0.3 }; // Hue, saturation, value
+
+  // Define render logic ...
+
 };
 
-// How do we kill polymer-ready ... 
+window.onload = function() {
-document.addEventListener( 'polymer-ready', function() {
 
-    var gui = new dat.GUI();
+  var text = new FizzyText();
+  var gui = new Gui();
 
-    // gui.docked = true;
+  gui.addColor(text, &#39;color0&#39;);
+  gui.addColor(text, &#39;color1&#39;);
+  gui.addColor(text, &#39;color2&#39;);
+  gui.addColor(text, &#39;color3&#39;);
 
-    gui.add( object, 'listen4Free' );
+};
-    gui.add( object, 'listen4Free' );
+</code></pre>
-    gui.add( object, 'listen4Free' );
+<h2 id="events">Events</h2>
-    gui.add( object, 'zeroTo1', 0, 1 );
+<p>You can listen for events on individual controllers using an event listener syntax.</p>
-    
+<pre><code class="lang-javascript">var controller = gui.add(fizzyText, &#39;maxSize&#39;, 0, 10);
-    gui.add( object, 'hasComment' ).comment( 'Hi there.' );
-
-    gui.add( object, 'listen4Free' ).name( 'customName' )
-
-    gui.add( object, 'step', 0, 50, 5 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus, sed aliquet nulla fermentum nec. Sed massa felis, congue nec libero ut, condimentum hendrerit purus. Cras a cursus ante. Integer nec nibh vitae lacus convallis viverra in at urna. Donec hendrerit convallis lacus, nec condimentum neque aliquam ac. Sed suscipit leo vel ligula condimentum scelerisque. Aliquam fermentum sagittis nisi vitae accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In et dolor eros. Sed vel venenatis odio, quis porta mi. Ut sed commodo velit, in porta ante.' );
-
-    gui.add( object, 'straddleZero', -1, 1, 0.01 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus, sed aliquet nulla fermentum nec. ' );
-
-    gui.add( object, 'maxIsNegative', -5, -2 );
-
-    gui.anon( 'anonymousSlider', 0, -1, 1 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus');
-
-    // gui.add( 32, 'beats', 1, 64, 1 ).comment( 'The number of beats in the song.');
-    // gui.add( 0, 'loops', -2, 2, 1 ).comment( 'The number of times the gif loops in a cycle.' );
-    // gui.add( 0, 'start', -2, 2, 1 ).comment( 'The frame of the gif where the song should start.' );
 
+controller.onChange(function(value) {
+  // Fires on every change, drag, keypress, etc.
 });
+
+controller.onFinishChange(function(value) {
+  // Fires when a controller loses focus.
+  alert(&quot;The new value is &quot; + value);
+});
+</code></pre>
+<h2 id="folders">Folders</h2>
+<p>You can nest as many Gui&#39;s as you want. Nested Gui&#39;s act as collapsible folders.</p>
+<pre><code class="lang-javascript">var gui = new Gui();
+
+var f1 = gui.addFolder(&#39;Flow Field&#39;);
+f1.add(text, &#39;speed&#39;);
+f1.add(text, &#39;noiseStrength&#39;);
+
+var f2 = gui.addFolder(&#39;Letters&#39;);
+f2.add(text, &#39;growthSpeed&#39;);
+f2.add(text, &#39;maxSize&#39;);
+f2.add(text, &#39;message&#39;);
+
+f2.open();
+</code></pre>
+<h2 id="saving-values">Saving Values</h2>
+<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();
+
+gui.remember(fizzyText);
+
+// Add controllers ...
+</code></pre>
+<p>Click the gear icon to change your save settings. You can either save your Gui&#39;s values to localStorage, or by copying and pasting a JSON object into your source code as follows:</p>
+<pre><code class="lang-javascript">var fizzyText = new FizzyText();
+var gui = new Gui({ load: JSON });
+
+gui.remember(fizzyText);
+
+// Add controllers ...
+</code></pre>
+<h2 id="save-to-disk">Save to disk</h2>
+<p>dat-gui comes with a node server that listens for changes to your Gui and saves them to disk. This way you don&#39;t have to worry about losing your local storage or copying and pasting a JSON string.</p>
+<p>First, run the node script:</p>
+<pre><code class="lang-sh">$ node gui-server
+</code></pre>
+<p>Next, instantiate your Gui with a path to a JSON file to store settings. </p>
+<pre><code class="lang-javascript">var gui = new Gui( { save: &#39;path/to/file.json&#39; } );
+gui.remember( fizzyText );
+
+// Add controllers ...
+</code></pre>
+<h2 id="custom-placement">Custom Placement</h2>
+<p>By default, Gui panels are created with fixed position, and are automatically appended to the body.</p>
+<p>You can change this behavior by setting the <code>autoPlace</code> parameter to <code>false</code>.</p>
+<pre><code class="lang-javascript">var gui = new Gui( { autoPlace: false } );
+
+var customContainer = document.getElementById(&#39;my-gui-container&#39;);
+customContainer.appendChild(gui.domElement);
+</code></pre>
+<h2 id="html-elements">HTML Elements</h2>
+<p>Since dat-gui is built using <a href="todo">Web Components</a>, you can use HTML syntax to add controllers to the page.</p>
+<pre><code class="lang-html">&lt;body&gt;
+
+&lt;controller-number id=&quot;my-controller&quot; min=&quot;-2&quot; max=&quot;2&quot; step=&quot;1&quot; value=&quot;0&quot;&gt;&lt;/controller-number&gt;
+
+&lt;script&gt;
+
+var controller = document.getElementById( &#39;my-controller&#39; );
+controller.onChange( function() {
+
+    // react to UI changes ...
+
+} );
+
+&lt;/script&gt;
+
+&lt;/body&gt;
+</code></pre>
+<h2 id="defining-custom-controllers">Defining Custom Controllers</h2>
+<p>dat-gui uses <a href="todo">Polymer</a> under the hood to define custom elements. A dat-gui controller is just a <a href="todo">Polymer element</a> with two important requirements:</p>
+<ul>
+<li>Controllers must extend <code>&lt;controller-base&gt;</code>.</li>
+<li>Controllers must be associated with a data type.</li>
+</ul>
+<p>Take for example this (simplified) source for dat-gui&#39;s <code>&lt;controller-number&gt;</code>:</p>
+<pre><code class="lang-javascript">Polymer( &#39;controller-number&#39;, {
+
+  // Define element ...
+
+} );
+
+Gui.register( &#39;controller-number&#39;, function( value ) {
+
+    return typeof value == &#39;number&#39;;
+
+} );
+</code></pre>
+<p><code>Gui.register</code> takes an element name and a test function. The call to <code>Gui.register</code> tells dat-gui to add a <code>&lt;controller-number&gt;</code> to the panel when the user adds a variable whose type is <code>&#39;number&#39;</code>.</p>
+<p>A test function takes a value added with <code>gui.add</code> and returns a boolean that determines if the controller is appropriate for the value. This example uses <a href="todo">duck typing</a> to register <code>&lt;vector-controller&gt;</code> for values that have properties <code>x</code>, <code>y</code> and <code>z</code>.</p>
+<pre><code class="lang-javascript">Gui.register( &#39;vector-controller&#39;, function( value ) {
+
+    return value.hasOwnProperty( &#39;x&#39; ) &amp;&amp;
+           value.hasOwnProperty( &#39;y&#39; ) &amp;&amp;
+           value.hasOwnProperty( &#39;z&#39; );
+
+} );
+</code></pre>
+<h2 id="publishing-custom-controllers">Publishing Custom Controllers</h2>
+<p>You should use bower and format your plugin all nice and it should have a certain prefix yada yada.</p>
+<!-- Replaced with contents of README.md -->
+</div>
+
+<script>
+(function() {
+   
+    var selector = '#readme h2'; 
+    var elements = document.querySelectorAll( selector );
+    for ( var el, i = 0, l = elements.length; i < l; i++ ) {
+
+        el = elements[ i ];
+        el.top = el.offsetTop;
+
+        el.spacer = el.cloneNode( true );
+        el.spacer.id = '';
+        el.spacer.style.position = 'fixed';
+        el.spacer.style.visibility = 'hidden';
+        el.spacer.style.zIndex = i;
+        el.spacer.classList.add( 'sticky' );
+
+        el.parentElement.insertBefore( el.spacer, el );
+        el.spacer.height = el.spacer.offsetHeight;
+
+        if ( i > 0 ) {
+            elements[ i - 1 ].next = el;
+        }
+
+    }
+
+    function onScroll() {
+        
+        for ( var el, i = 0, l = elements.length; i < l; i++ ) {
+            
+            el = elements[ i ];
+
+            var sticky = window.scrollY > el.top && window.scrollY <= el.next.top;
+            el.spacer.style.visibility = sticky ? 'visible' : 'hidden';
+
+            if ( el.next && sticky ) {
+
+                var bottom = window.scrollY + el.spacer.height;
+                var marginTop = Math.round( Math.min( 0, el.next.top - bottom ) );
+                el.spacer.style.marginTop = marginTop + 'px';
+                el.spacer.classList.toggle( -marginTop );
+
+            }
+
+        }
+    }
+
+    document.addEventListener( 'scroll', onScroll );
+
+})();
 </script>
 
 </body>

package.json

@@ -5,11 +5,13 @@
     "gulp": "^3.8.7",
     "gulp-connect": "^2.0.6",
     "gulp-load-plugins": "^0.5.3",
-    "gulp-markdown": "^1.0.0",
+    "gulp-plates": "0.0.5",
     "gulp-qunit": "^0.3.3",
+    "gulp-rename": "^1.2.0",
     "gulp-stylus": "^1.3.0",
     "gulp-vulcanize": "^1.0.0",
     "gulp-watch": "^0.6.9",
+    "marked": "^0.3.2",
     "nib": "^1.0.3"
   }
 }