merge

.editorconfig

@@ -1,4 +1,21 @@
-[*.js]
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
 indent_style = space
 indent_size = 4
 
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -1,2 +1 @@
 node_modules
-*.css

.jscsrc

@@ -1,44 +0,0 @@
-{
-
-    "fileExtensions": [".js", ".json"],
-    "excludeFiles": ["node_modules/**", "build/**"],
-
-    "maximumLineLength": 120,
-    "validateLineBreaks": "LF",
-    "validateIndentation": 4,
-
-    "requireSpaceAfterKeywords": [
-        "if",
-        "else",
-        "for",
-        "while",
-        "do",
-        "switch",
-        "return",
-        "try",
-        "catch"
-    ],
-
-    "requireSpaceBeforeBlockStatements": true,
-    
-    "requireSpacesInConditionalExpression": {
-        "afterTest": true,
-        "beforeConsequent": true,
-        "afterConsequent": true,
-        "beforeAlternate": true
-    },
-
-    "requireSpacesInsideParentheses": "all",
-    "requireSpacesInsideObjectBrackets": "all",
-    "requireSpacesInsideArrayBrackets": "all",
-
-    "requireParenthesesAroundIIFE": true,
-
-    "disallowSpacesInFunctionExpression": {
-        "beforeOpeningRoundBrace": true
-    },
-
-    "disallowKeywords": ["with"],
-    "disallowImplicitTypeConversion": ["string"]
-
-}

TODO.md

@@ -18,15 +18,16 @@ NEW FEATURES
 BUILD
 
 - [x] single import
-- [ ] browsersync
+- [x] browsersync
+- [x] remove platform, dependent on fix of bug in gulp-vulcanize
 
 REFACTOR
 
-- [ ] gui.define* => gui.var*
+- [x] gui.define* => gui.var*
 - [ ] Gui.js => gui-panel => dat-gui
-- [ ] bake gui-row into each controller
 - [x] controller-* => dat-gui-*
 - [x] kill strict
+- [x] Reorg gulpfile and add standardized formatting
 
 DOCS
 
@@ -34,7 +35,6 @@ DOCS
 - [ ] Auto generatated polymer docs
 
 STYLE
-
 - [x] touch styles: bigger please!
 - [x] kill hover behavior if touch
 - [x] sharing more styles

bower.json

@@ -10,6 +10,7 @@
   ],
   "license": "MIT",
   "private": true,
+  "main": "dat-gui.html",
   "ignore": [
     "**/.*",
     "node_modules",
@@ -17,6 +18,12 @@
     "docs"
   ],
   "dependencies": {
-        "polymer": "Polymer/polymer#~0.3.5"
+    "polymer": "Polymer/polymer#>=0.4.0",
+    "platform": "Polymer/platform#>=0.4.0"
+  },
+  "resolutions": {
+    "core-action-icons": "0.2.4",
+    "platform": ">=0.4.0 <1.0.0",
+    "core-component-page": ">=0.4.0 <1.0.0"
   }
 }

build/dat-gui.shim.js

@@ -0,0 +1 @@
+!function(t){"use strict";var n=function(){this.vars={}};n.ready=function(t){t()},n.prototype.var=function(t,n){return this.vars[t]=n,i},n.prototype.add=function(){return i};var r=function(){return this},i={on:r};t.Gui=n}(this);

build/gui.shim.js

@@ -1 +0,0 @@
-!function(n){var t=function(){this.defined={}};t.ready=function(n){n()},t.prototype.define=function(n,t){return this.defined[n]=t,e},t.prototype.add=function(){return e};var i=function(){return this},e={on:i};n.Gui=t}(this);

dat-gui.html

@@ -1,6 +1,4 @@
-<script src="../platform/platform.js"></script>
+<!-- TODO: move this into dat-gui.html -->
-
-<!-- src -->
 <script src="elements/Gui.js"></script>
 
 <!-- base elements -->

docs/main.js

@@ -70,7 +70,7 @@ function sticky( elements ) {
             var sticky = window.scrollY > el.top && window.scrollY <= el.next.top;
             el.sticky.style.visibility = sticky ? 'visible' : 'hidden';
 
-            el.example.classList.toggle( 'sticky', sticky || el.bumped );
+            el.example.panel.classList.toggle( 'sticky', sticky || el.bumped );
 
             if ( el.next ) el.next.bumped = false;
 
@@ -86,8 +86,8 @@ function sticky( elements ) {
 
                 if ( bumped ) {
 
-                    el.example.classList.remove( 'sticky' );
+                    el.example.panel.classList.remove( 'sticky' );
-                    el.next.example.classList.add( 'sticky' );
+                    el.next.example.panel.classList.add( 'sticky' );
                     el.next.bumped = true;
 
                 }
@@ -114,22 +114,22 @@ function sticky( elements ) {
 
 // Smooth scroll
 
-(function() {
+( function() {
 
     var body = document.body, timer;
 
-    window.addEventListener('scroll', function() {
+    window.addEventListener( 'scroll', function() {
 
         clearTimeout( timer );
 
-        if ( !body.classList.contains('disable-hover') ) {
+        if ( !body.classList.contains( 'disable-hover' ) ) {
-            body.classList.add('disable-hover')
+            body.classList.add( 'disable-hover' )
         }
 
-        timer = setTimeout(function() {
+        timer = setTimeout( function() {
-            body.classList.remove('disable-hover')
+            body.classList.remove( 'disable-hover' )
-        }, 150);
+        }, 150 );
 
-    }, false);
+    }, false );
 
-})();
+} )();

docs/style.css

@@ -0,0 +1,79 @@
+* {
+  margin: 0;
+}
+body {
+  margin: 36px;
+  line-height: 24px;
+}
+.disable-hover,
+.disable-hover * {
+  pointer-events: none !important;
+}
+h1,
+h2,
+h3,
+h4,
+p,
+pre {
+  margin-bottom: 18px;
+}
+pre {
+  width: 100%;
+  margin-bottom: 36px;
+  line-height: 20px;
+}
+h1 {
+  margin-bottom: 54px;
+}
+h3 {
+  padding: 18px 0;
+  margin-bottom: 36px;
+  border-bottom: 1px solid rgba(0,0,0,0.2);
+  -webkit-transition: border-color 0.2s linear, color 0.2s linear;
+  -moz-transition: border-color 0.2s linear, color 0.2s linear;
+  -o-transition: border-color 0.2s linear, color 0.2s linear;
+  -ms-transition: border-color 0.2s linear, color 0.2s linear;
+  transition: border-color 0.2s linear, color 0.2s linear;
+}
+h3.sticky {
+  left: 36px;
+  right: 317px;
+  top: 0;
+  background: #fff;
+}
+h3.sticky.sticky-prev {
+  color: #eee;
+  border-bottom: 1px solid rgba(0,0,0,0);
+}
+#readme {
+  margin-right: 281px;
+}
+dat-gui {
+  position: fixed;
+  width: 245px;
+  top: 0px;
+  right: 18px;
+  z-index: 9999;
+  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.5, 1, 0, 1);
+  -moz-transition: -moz-transform 0.4s cubic-bezier(0.5, 1, 0, 1);
+  -o-transition: -o-transform 0.4s cubic-bezier(0.5, 1, 0, 1);
+  -ms-transition: -ms-transform 0.4s cubic-bezier(0.5, 1, 0, 1);
+  transition: transform 0.4s cubic-bezier(0.5, 1, 0, 1);
+  -webkit-transform: translate3d(0, -200px, 0);
+  -moz-transform: translate3d(0, -200px, 0);
+  -o-transform: translate3d(0, -200px, 0);
+  -ms-transform: translate3d(0, -200px, 0);
+  transform: translate3d(0, -200px, 0);
+}
+dat-gui.sticky {
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  -webkit-transition-delay: 400ms;
+  -moz-transition-delay: 400ms;
+  -o-transition-delay: 400ms;
+  -ms-transition-delay: 400ms;
+  transition-delay: 400ms;
+}

docs/style.styl

@@ -28,7 +28,6 @@ h1
     margin-bottom unit * 3
 
 h3 
-
     padding unit 0
     margin-bottom unit * 2
 

docs/template.html

@@ -6,7 +6,7 @@
 
 <title>dat-gui</title>
 
-<script src="build/gui.js"></script>
+<script src="build/dat-gui.js"></script>
 <link rel="stylesheet" href="docs/style.css">
 
 </style>
@@ -15,7 +15,9 @@
 <body>
 
 <!-- Copied from README.md -->
-<div id="readme"></div>
+<div id="readme">
+	<%= contents %>
+</div>
 
 <script src="docs/main.js"></script>
 <script src="docs/examples.js"></script>

elements/Gui.js

@@ -1,8 +1,8 @@
 ( function( scope ) {
 
-    /* globals Path */
+/* globals Path */
 
-    var Gui = function( params ) {
+var Gui = function( params ) {
 
     if ( !ready ) {
         Gui.error( 'Gui not ready. Put your code inside Gui.ready()' );
@@ -12,7 +12,7 @@
 
     // Properties
 
-        this.defined = {};
+    this.vars = {};
     this.localStorage = params.localStorage || false;
 
     // Make domElement
@@ -24,13 +24,13 @@
         document.body.appendChild( this.panel );
     }
 
-    };
+};
 
 
-    // Instance methods
+// Instance methods
-    // -------------------------------
+// -------------------------------
 
-    Gui.prototype.add = function( object, path ) {
+Gui.prototype.add = function( object, path ) {
 
     // Make controller
 
@@ -76,57 +76,54 @@
 
     return controller;
 
-    };
+};
 
-    Gui.prototype.remember = function( object ) {
+Gui.prototype.remember = function( object ) {};
 
-
+Gui.prototype.var = function() {
-    };
-
-    Gui.prototype.define = function() {
 
     var name, initialValue, args;
 
     if ( arguments.length == 1 ) {
         name = arguments[ 0 ];
-            return this.defined[ name ];
+        return this.vars[ name ];
     }
 
     initialValue = arguments[ 1 ];
     name = arguments[ 0 ];
 
-        args = [ this.defined, name ];
+    args = [ this.vars, name ];
     args = args.concat( Array.prototype.slice.call( arguments, 2 ) );
 
-        this.defined[ name ] = initialValue;
+    this.vars[ name ] = initialValue;
 
     return this.add.apply( this, args );
 
-    };
+};
 
-    Gui.prototype.listenAll = function() {
+Gui.prototype.listenAll = function() {
 
     Gui.warn( 'controller.listenAll() is deprecated. All controllers are listened for free.' );
 
-    };
+};
 
 
-    // Register custom controllers
+// Register custom controllers
-    // -------------------------------
+// -------------------------------
 
-    var controllers = {};
+var controllers = {};
 
-    Gui.register = function( elementName, test ) {
+Gui.register = function( elementName, test ) {
 
     controllers[ elementName ] = test;
 
-    };
+};
 
 
-    // Returns a controller based on a value
+// Returns a controller based on a value
-    // -------------------------------
+// -------------------------------
 
-    Gui.getController = function( value ) {
+Gui.getController = function( value ) {
 
     for ( var type in controllers ) {
 
@@ -140,16 +137,16 @@
 
     }
 
-    };
+};
 
 
-    // Gui ready handler ... * shakes fist at polymer *
+// Gui ready handler ... * shakes fist at polymer *
-    // -------------------------------
+// -------------------------------
 
-    var ready = false;
+var ready = false;
-    var readyHandlers = [];
+var readyHandlers = [];
 
-    document.addEventListener( 'polymer-ready', function() {
+document.addEventListener( 'polymer-ready', function() {
 
     ready = true;
     readyHandlers.forEach( function( fnc ) {
@@ -158,9 +155,9 @@
 
     } );
 
-    } );
+} );
 
-    Gui.ready = function( fnc ) {
+Gui.ready = function( fnc ) {
 
     if ( ready ) {
         fnc();
@@ -168,52 +165,52 @@
         readyHandlers.push( fnc );
     }
 
-    };
+};
 
 
-    // Console
+// Console
-    // -------------------------------
+// -------------------------------
 
-    Gui.error = function() {
+Gui.error = function() {
     var args = Array.prototype.slice.apply( arguments );
     args.unshift( 'dat-gui ::' );
     console.error.apply( console, args );
-    };
+};
 
-    Gui.warn = function() {
+Gui.warn = function() {
     var args = Array.prototype.slice.apply( arguments );
     args.unshift( 'dat-gui ::' );
     console.warn.apply( console, args );
-    };
+};
 
 
-    // Old namespaces
+// Old namespaces
-    // -------------------------------
+// -------------------------------
 
-    var dat = {};
+var dat = {};
 
-    dat.gui = {};
+dat.gui = {};
-    dat.gui.GUI = Gui;
+dat.gui.GUI = Gui;
-    dat.GUI = dat.gui.GUI;
+dat.GUI = dat.gui.GUI;
 
-    dat.color = {};
+dat.color = {};
-    dat.color.Color = function() {};
+dat.color.Color = function() {};
 
-    dat.dom = {};
+dat.dom = {};
-    dat.dom.dom = function() {};
+dat.dom.dom = function() {};
 
-    dat.controllers = {};
+dat.controllers = {};
-    dat.controllers.Controller          = constructor( 'dat-gui-base' );
+dat.controllers.Controller = constructor( 'dat-gui-base' );
-    dat.controllers.NumberController    = constructor( 'dat-gui-number' );
+dat.controllers.NumberController = constructor( 'dat-gui-number' );
-    dat.controllers.FunctionController  = constructor( 'dat-gui-function' );
+dat.controllers.FunctionController = constructor( 'dat-gui-function' );
-    dat.controllers.ColorController     = constructor( 'dat-gui-color' );
+dat.controllers.ColorController = constructor( 'dat-gui-color' );
-    dat.controllers.BooleanController   = constructor( 'dat-gui-boolean' );
+dat.controllers.BooleanController = constructor( 'dat-gui-boolean' );
-    dat.controllers.OptionController    = constructor( 'dat-gui-option' );
+dat.controllers.OptionController = constructor( 'dat-gui-option' );
 
-    dat.controllers.NumberControllerBox = dat.controllers.NumberController;
+dat.controllers.NumberControllerBox = dat.controllers.NumberController;
-    dat.controllers.NumberControllerSlider = dat.controllers.NumberController;
+dat.controllers.NumberControllerSlider = dat.controllers.NumberController;
 
-    function constructor( elementName ) {
+function constructor( elementName ) {
 
     return function( object, path ) {
         var el = document.createElement( elementName );
@@ -221,14 +218,14 @@
         return el;
     };
 
-    }
+}
 
 
-    // Export
+// Export
-    // -------------------------------
+// -------------------------------
 
-    scope.dat = dat;
+scope.dat = dat;
-    scope.Gui = Gui;
+scope.Gui = Gui;
 
 
-} )( this );
+})( this );

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

@@ -0,0 +1,57 @@
+#container {
+  height: 100%;
+  cursor: pointer;
+  padding-left: 8px;
+}
+#switch-track {
+  width: 2em;
+  height: 0.8em;
+  background: rgba(255,255,255,0.25);
+  border-radius: 999px;
+  -webkit-transition: background 0.1s linear;
+  -moz-transition: background 0.1s linear;
+  -o-transition: background 0.1s linear;
+  -ms-transition: background 0.1s linear;
+  transition: background 0.1s linear;
+}
+#switch-knob {
+  height: 0.8em;
+  width: 0.8em;
+  border-radius: 100%;
+  background: #ecebe0;
+  -webkit-transition: -webkit-transform 0.15s cubic-bezier(0.25, 0.25, 0, 1);
+  -moz-transition: -moz-transform 0.15s cubic-bezier(0.25, 0.25, 0, 1);
+  -o-transition: -o-transform 0.15s cubic-bezier(0.25, 0.25, 0, 1);
+  -ms-transition: -ms-transform 0.15s cubic-bezier(0.25, 0.25, 0, 1);
+  transition: transform 0.15s cubic-bezier(0.25, 0.25, 0, 1);
+}
+.value-true #switch-track {
+  background: #864694;
+}
+.value-true #switch-knob {
+  -webkit-transform: translate3d(1.2em, 0, 0);
+  -moz-transform: translate3d(1.2em, 0, 0);
+  -o-transform: translate3d(1.2em, 0, 0);
+  -ms-transform: translate3d(1.2em, 0, 0);
+  transform: translate3d(1.2em, 0, 0);
+}
+:host-context(.touch-false) .value-false:hover #switch-knob {
+  -webkit-transform: scale(1.5);
+  -moz-transform: scale(1.5);
+  -o-transform: scale(1.5);
+  -ms-transform: scale(1.5);
+  transform: scale(1.5);
+}
+:host-context(.touch-false) .value-true:hover #switch-knob {
+  -webkit-transform: translate3d(1.2em, 0, 0) scale(1.5);
+  -moz-transform: translate3d(1.2em, 0, 0) scale(1.5);
+  -o-transform: translate3d(1.2em, 0, 0) scale(1.5);
+  -ms-transform: translate3d(1.2em, 0, 0) scale(1.5);
+  transform: translate3d(1.2em, 0, 0) scale(1.5);
+}
+#text {
+  margin-left: 8px;
+}
+.value-false #text {
+  color: rgba(255,255,255,0.25);
+}

elements/dat-gui-boolean/dat-gui-boolean.js

@@ -9,9 +9,7 @@ Gui.register( 'dat-gui-boolean', function( value ) {
 
 Polymer( 'dat-gui-boolean', {
 
-    ready: function() {
+    ready: function() {},
-
-    },
 
     toggle: function() {
 

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

@@ -0,0 +1,81 @@
+#container {
+  height: 100%;
+}
+#track-container {
+  height: 100%;
+  padding: 0 8px;
+}
+#track {
+  width: 100%;
+  height: 1px;
+  -webkit-border-radius: 1px;
+  border-radius: 1px;
+  display: inline-block;
+  position: relative;
+  background: rgba(255,255,255,0.25);
+}
+#fill {
+  height: 1px;
+  margin-top: 0px;
+  margin-left: 1px;
+  -webkit-border-radius: 100%;
+  border-radius: 100%;
+  position: absolute;
+  background: #25a0d8;
+  pointer-events: none;
+}
+#knob {
+  width: 0.6em;
+  height: 0.6em;
+  margin-left: -0.3em;
+  margin-top: -0.3em;
+  -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.25, 0.25, 0, 1);
+  -moz-transition: -moz-transform 0.1s cubic-bezier(0.25, 0.25, 0, 1);
+  -o-transition: -o-transform 0.1s cubic-bezier(0.25, 0.25, 0, 1);
+  -ms-transition: -ms-transform 0.1s cubic-bezier(0.25, 0.25, 0, 1);
+  transition: transform 0.1s cubic-bezier(0.25, 0.25, 0, 1);
+  pointer-events: none;
+  position: absolute;
+  background-color: #25a0d8;
+  -webkit-border-radius: 100%;
+  border-radius: 100%;
+}
+:host-context(.touch-false) #track-container:hover #knob {
+  -webkit-transform: scale(2);
+  -moz-transform: scale(2);
+  -o-transform: scale(2);
+  -ms-transform: scale(2);
+  transform: scale(2);
+}
+#track-container:active #knob {
+  -webkit-transform: scale(1.5);
+  -moz-transform: scale(1.5);
+  -o-transform: scale(1.5);
+  -ms-transform: scale(1.5);
+  transform: scale(1.5);
+}
+input {
+  color: #25a0d8;
+}
+input::selection {
+  background-color: rgba(255,255,255,0.25);
+}
+.slider-true input {
+  text-align: center;
+  width: 26%;
+  -webkit-transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1);
+  -moz-transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1);
+  -o-transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1);
+  -ms-transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1);
+  transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1);
+  padding: 0;
+}
+:host-context(.touch-false) .slider-true input:hover {
+  width: 35%;
+}
+.slider-true input:focus {
+  width: 50%;
+}
+.slider-false input {
+  padding-left: 8px;
+}

elements/dat-gui-number/dat-gui-number.js

@@ -158,7 +158,9 @@ Polymer( 'dat-gui-number', {
 
         e.preventDefault();
         this._rect = this.$.track.getBoundingClientRect();
-        if ( !this._alt ) { this.value = this.valueFromX( e.x ); }
+        if ( !this._alt ) {
+            this.value = this.valueFromX( e.x );
+        }
 
         this.fire( 'sliderDown' );
 
@@ -184,7 +186,9 @@ Polymer( 'dat-gui-number', {
 
             var dv = this.valueFromDX( e.ddx );
 
-            if ( this._alt ) { dv /= 10; }
+            if ( this._alt ) {
+                dv /= 10;
+            }
 
             this.value += dv * this._dragFriction;
 

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

@@ -0,0 +1,8 @@
+#container {
+  height: 100%;
+  cursor: pointer;
+  padding-left: 8px;
+}
+select {
+  outline: none;
+}

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

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

elements/dat-gui/dat-gui.css

@@ -0,0 +1,112 @@
+#panel {
+  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0, 0.8, 0, 1);
+  -moz-transition: -moz-transform 0.4s cubic-bezier(0, 0.8, 0, 1);
+  -o-transition: -o-transform 0.4s cubic-bezier(0, 0.8, 0, 1);
+  -ms-transition: -ms-transform 0.4s cubic-bezier(0, 0.8, 0, 1);
+  transition: transform 0.4s cubic-bezier(0, 0.8, 0, 1);
+  background: #282828;
+}
+.autoplace-true #panel {
+  width: 245px;
+  position: fixed;
+  top: 0;
+}
+.autoplace-true.touch-true #panel {
+  width: 320px;
+}
+.docked-false #panel {
+  right: 20px;
+}
+.docked-true #panel {
+  right: 0;
+  bottom: 0;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.docked-true.open-false #panel {
+  -webkit-transform: translate3d(245px, 0, 0);
+  -moz-transform: translate3d(245px, 0, 0);
+  -o-transform: translate3d(245px, 0, 0);
+  -ms-transform: translate3d(245px, 0, 0);
+  transform: translate3d(245px, 0, 0);
+  overflow: visible;
+}
+.docked-true.open-false.touch-true #panel {
+  -webkit-transform: translate3d(320px, 0, 0);
+  -moz-transform: translate3d(320px, 0, 0);
+  -o-transform: translate3d(320px, 0, 0);
+  -ms-transform: translate3d(320px, 0, 0);
+  transform: translate3d(320px, 0, 0);
+}
+#controllers {
+  font: 10px 'Lucida Grande', sans-serif;
+  color: #ecebe0;
+  -webkit-font-smoothing: antialiased;
+}
+.touch-true #controllers {
+  font-size: 13.5px;
+}
+.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;
+}
+.touch-true #closeButton {
+  font-size: 13.5px;
+}
+gui-button {
+  font: 10px 'Lucida Grande', sans-serif;
+  color: #ecebe0;
+  -webkit-font-smoothing: antialiased;
+  background: #282828;
+  height: 2.9em;
+  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);
+  -o-transition: all 0.4s cubic-bezier(0, 0.8, 0, 1);
+  -ms-transition: all 0.4s cubic-bezier(0, 0.8, 0, 1);
+  transition: all 0.4s cubic-bezier(0, 0.8, 0, 1);
+}
+.touch-true gui-button {
+  font-size: 13.5px;
+}
+.docked-true gui-button {
+  top: 0;
+  right: 0;
+  width: 4.35em;
+  height: 4.35em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: #282828;
+}
+.docked-true.open-false gui-button {
+  -webkit-transform: translate3d(-245px, 0, 0);
+  -moz-transform: translate3d(-245px, 0, 0);
+  -o-transform: translate3d(-245px, 0, 0);
+  -ms-transform: translate3d(-245px, 0, 0);
+  transform: translate3d(-245px, 0, 0);
+}
+.docked-true.open-false.touch-true gui-button {
+  -webkit-transform: translate3d(-320px, 0, 0);
+  -moz-transform: translate3d(-320px, 0, 0);
+  -o-transform: translate3d(-320px, 0, 0);
+  -ms-transform: translate3d(-320px, 0, 0);
+  transform: translate3d(-320px, 0, 0);
+}
+.docked-false gui-button {
+  right: 0;
+  left: 0;
+}

elements/gui-button/gui-button.css

@@ -0,0 +1,95 @@
+#container {
+  height: 100%;
+  cursor: pointer;
+}
+#button {
+  width: 21px;
+  height: 21px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  border-radius: 0;
+  padding: 4px 0px;
+  position: relative;
+  background: transparent;
+  margin: 0 auto;
+}
+#button.open-true .one {
+  -webkit-transform: translate3d(4px, 0, 0) rotate(45deg) translate3d(3.5px, 0, 0);
+  -moz-transform: translate3d(4px, 0, 0) rotate(45deg) translate3d(3.5px, 0, 0);
+  -o-transform: translate3d(4px, 0, 0) rotate(45deg) translate3d(3.5px, 0, 0);
+  -ms-transform: translate3d(4px, 0, 0) rotate(45deg) translate3d(3.5px, 0, 0);
+  transform: translate3d(4px, 0, 0) rotate(45deg) translate3d(3.5px, 0, 0);
+  width: 11px;
+}
+#button.open-true .three {
+  -webkit-transform: translate3d(4px, 0, 0) rotate(-45deg) translate3d(3.5px, 0, 0);
+  -moz-transform: translate3d(4px, 0, 0) rotate(-45deg) translate3d(3.5px, 0, 0);
+  -o-transform: translate3d(4px, 0, 0) rotate(-45deg) translate3d(3.5px, 0, 0);
+  -ms-transform: translate3d(4px, 0, 0) rotate(-45deg) translate3d(3.5px, 0, 0);
+  transform: translate3d(4px, 0, 0) rotate(-45deg) translate3d(3.5px, 0, 0);
+  width: 11px;
+}
+#button.open-true .two {
+  width: 0;
+}
+#button.open-true .slider:before {
+  width: 0;
+  height: 0;
+}
+.slider {
+  width: 21px;
+  border-radius: 2px;
+  height: 1px;
+  background: #ecebe0;
+  position: absolute;
+  -webkit-transform-origin: 0.5px 0.5px;
+  -moz-transform-origin: 0.5px 0.5px;
+  -o-transform-origin: 0.5px 0.5px;
+  -ms-transform-origin: 0.5px 0.5px;
+  transform-origin: 0.5px 0.5px;
+  -webkit-transition: all 200ms 200ms cubic-bezier(0, 0.5, 0, 1);
+  -moz-transition: all 200ms 200ms cubic-bezier(0, 0.5, 0, 1);
+  -o-transition: all 200ms 200ms cubic-bezier(0, 0.5, 0, 1);
+  -ms-transition: all 200ms 200ms cubic-bezier(0, 0.5, 0, 1);
+  transition: all 200ms 200ms cubic-bezier(0, 0.5, 0, 1);
+}
+.slider:before {
+  width: 5px;
+  height: 5px;
+  margin-top: -2px;
+  margin-left: -2.5px;
+  border-radius: 5px;
+  background: #ecebe0;
+  display: inline-block;
+  content: ' ';
+  position: absolute;
+  left: 70%;
+  -webkit-transition: left 200ms cubic-bezier(0, 0.5, 0, 1), width 0.001s 200ms, height 0.001s 200ms;
+  -moz-transition: left 200ms cubic-bezier(0, 0.5, 0, 1), width 0.001s 200ms, height 0.001s 200ms;
+  -o-transition: left 200ms cubic-bezier(0, 0.5, 0, 1), width 0.001s 200ms, height 0.001s 200ms;
+  -ms-transition: left 200ms cubic-bezier(0, 0.5, 0, 1), width 0.001s 200ms, height 0.001s 200ms;
+  transition: left 200ms cubic-bezier(0, 0.5, 0, 1), width 0.001s 200ms, height 0.001s 200ms;
+}
+.slider.two {
+  margin-top: 6px;
+}
+.slider.two:before {
+  left: 30%;
+  -webkit-transition-delay: 0ms, 200ms, 200ms;
+  -moz-transition-delay: 0ms, 200ms, 200ms;
+  -o-transition-delay: 0ms, 200ms, 200ms;
+  -ms-transition-delay: 0ms, 200ms, 200ms;
+  transition-delay: 0ms, 200ms, 200ms;
+}
+.slider.three {
+  margin-top: 12px;
+}
+.slider.three:before {
+  left: 70%;
+  -webkit-transition-delay: 0ms, 200ms, 200ms;
+  -moz-transition-delay: 0ms, 200ms, 200ms;
+  -o-transition-delay: 0ms, 200ms, 200ms;
+  -ms-transition-delay: 0ms, 200ms, 200ms;
+  transition-delay: 0ms, 200ms, 200ms;
+}

elements/gui-row/gui-row.css

@@ -0,0 +1,102 @@
+#row {
+  font: 10px 'Lucida Grande', sans-serif;
+  color: #ecebe0;
+  -webkit-font-smoothing: antialiased;
+  height: 2.9em;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-transition: background-color 0.2s linear;
+  -moz-transition: background-color 0.2s linear;
+  -o-transition: background-color 0.2s linear;
+  -ms-transition: background-color 0.2s linear;
+  transition: background-color 0.2s linear;
+  border-bottom: 1px solid rgba(255,255,255,0.05);
+}
+:host-context(.touch-true) #row {
+  font-size: 13.5px;
+}
+#controller {
+  height: 100%;
+}
+#name {
+  padding: 0 8px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 38%;
+  cursor: default;
+}
+.comment-true #name {
+  cursor: pointer;
+}
+:host-context(.touch-true) #name {
+  font-size: 11px;
+  width: 30%;
+}
+#nameInner {
+  overflow: hidden;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+}
+#comment {
+  font: 10px 'Lucida Grande', sans-serif;
+  color: #ecebe0;
+  -webkit-font-smoothing: antialiased;
+  line-height: 1.6em;
+  background: #e0cf99;
+  color: #333;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: hidden;
+  -webkit-transition: height 0.15s cubic-bezier(0.25, 0.25, 0, 1);
+  -moz-transition: height 0.15s cubic-bezier(0.25, 0.25, 0, 1);
+  -o-transition: height 0.15s cubic-bezier(0.25, 0.25, 0, 1);
+  -ms-transition: height 0.15s cubic-bezier(0.25, 0.25, 0, 1);
+  transition: height 0.15s cubic-bezier(0.25, 0.25, 0, 1);
+  position: absolute;
+  z-index: 999;
+  pointer-events: none;
+  -webkit-transform: translate3d(0, 20px, 0);
+  -moz-transform: translate3d(0, 20px, 0);
+  -o-transform: translate3d(0, 20px, 0);
+  -ms-transform: translate3d(0, 20px, 0);
+  transform: translate3d(0, 20px, 0);
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  filter: alpha(opacity=0);
+  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.25, 0, 1);
+  -moz-transition: all 0.2s cubic-bezier(0.25, 0.25, 0, 1);
+  -o-transition: all 0.2s cubic-bezier(0.25, 0.25, 0, 1);
+  -ms-transition: all 0.2s cubic-bezier(0.25, 0.25, 0, 1);
+  transition: all 0.2s cubic-bezier(0.25, 0.25, 0, 1);
+}
+:host-context(.touch-true) #comment {
+  font-size: 13.5px;
+}
+#comment.open-true {
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+:host-context(.touch-false) #comment.open-true {
+  -webkit-transition-delay: 200ms;
+  -moz-transition-delay: 200ms;
+  -o-transition-delay: 200ms;
+  -ms-transition-delay: 200ms;
+  transition-delay: 200ms;
+}
+#commentInner {
+  padding: 8px;
+}
+.comment-true #nameInner {
+  display: inline-block;
+  border-bottom: 1px dotted rgba(255,255,255,0.25);
+}

elements/gui-row/gui-row.js

@@ -5,9 +5,7 @@ Polymer( 'gui-row', {
     comment: null,
     commentOpen: false,
 
-    ready: function() {
+    ready: function() {},
-
-    },
 
     openComment: function() {
         this.commentOpen = true;

elements/shared/input.css

@@ -0,0 +1,31 @@
+input {
+  font: 10px 'Lucida Grande', sans-serif;
+  color: #ecebe0;
+  -webkit-font-smoothing: antialiased;
+  height: 100%;
+  width: 100%;
+  display: inline-block;
+  background-color: transparent;
+  border: 0;
+  -webkit-border-radius: 0;
+  border-radius: 0;
+  padding: 0;
+  outline: none;
+  -webkit-transition: background-color 0.15s linear;
+  -moz-transition: background-color 0.15s linear;
+  -o-transition: background-color 0.15s linear;
+  -ms-transition: background-color 0.15s linear;
+  transition: background-color 0.15s linear;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+: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/shared.css

@@ -0,0 +1,4 @@
+/* sizes */
+/* colors */
+/* other */
+/* mixins */

elements/shim.js

@@ -1,37 +1,40 @@
 // Use gui.shim.js in production when you want to use dat.gui to recall values without any of the interface.
 ( function( scope ) {
+'use strict';
 
-    var Gui = function() {
+var Gui = function() {
 
-        this.defined = {};
+    this.vars = {};
 
-    };
+};
 
-    Gui.ready = function( fnc ) {
+Gui.ready = function( fnc ) {
 
     fnc();
 
-    };
+};
 
-    Gui.prototype.define = function( name, value ) {
+Gui.prototype.var = function( name, value ) {
 
-        this.defined[ name ] = value;
+    this.vars[ name ] = value;
     return controllerShim;
 
-    };
+};
 
-    Gui.prototype.add = function( object, path ) {
+Gui.prototype.add = function( object, path ) {
 
     return controllerShim;
 
-    };
+};
 
-    var identity = function() { return this; };
+var identity = function() {
+    return this;
+};
 
-    var controllerShim = {
+var controllerShim = {
     on: identity
-    };
+};
 
-    scope.Gui = Gui;
+scope.Gui = Gui;
 
-} )( this );
+})( this );

examples/index.html

@@ -5,9 +5,11 @@
     <meta charset="utf-8">
     <title>dat-gui kitchen sink</title>
 
-    
+    <script src="../build/dat-gui.js"></script>
-    <!-- // <script src="../build/gui.js"></script> -->
+    <!--
-    <link rel="import" href="../gui.html">
+    <script src="../../platform/platform.js"></script>
+    <link rel="import" href="../dat-gui.html">
+    -->
 
     <meta name="viewport" content="width=device-width, user-scalable=no">
 
@@ -23,6 +25,7 @@
     body content.
 
     <script>
+    /* globals Gui */
 
     var object = {
         "boolean": false,
@@ -38,7 +41,7 @@
     // How do we kill polymer-ready ...
     Gui.ready( function() {
 
-        gui = new Gui();
+        var gui = new Gui();
 
         gui.panel.docked = true;
 
@@ -65,7 +68,7 @@
 
         gui.add( object, 'maxIsNegative', -5, -2 );
 
-        gui.define( 'anonymousSlider', 0, -1, 1 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus');
+        gui.var( 'anonymousSlider', 0, -1, 1 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus');
 
         gui.add( object, 'optionController', { A: 'a', B: 'b', C: 'c'} );
         gui.add( object, 'optionController', [ 'a', 'b', 'c' ] )

gulpfile.js

@@ -1,51 +1,174 @@
-var gulp        = require( 'gulp' ),
+/*
-    nib         = require( 'nib' ),
-    fs          = require( 'fs' ),
-    marked      = require( 'marked' ),
-    karma       = require( 'karma' ),
-    browserSync = require( 'browser-sync' ),
-    $           = require( 'gulp-load-plugins' )();
 
-var paths = {
+Main Gulp tasks
-    build:  [ 'elements/**/*.styl', 'elements/**/*.html', 'elements/**/*.js' , 'gui.html' ],
+-----------------
-    lint:   [ 'gulpfile.js', 'elements/**/*.js' ],
-    test:   [ 'build/gui.js', 'tests/*.js' ],
-    clean:  [ 'build/*', '**/*.css' ],
-    docs:   [ 'README.md', 'docs/*' ],
-    shim:   [ 'elements/shim.js' ]
-};
 
-gulp.task( 'default', [ 'docs', 'lint', 'shim', 'build' ] );
+    * default - dev
     
-gulp.task( 'watch', [ 'default' ], function() {
+    * build - create a vulcanized compiled version after linting and formatting
+    * dev - launch server, watch for code changes, lint, format
+    * docs - compile the docs and update gh-pages
+    * release - build js and docs and update version tag
+    * test - run the tests
+    * watch - watch for code changes and update styles but serve it yourself
+
+Gulp tasks used by the main gulp tasks
+--------------------------------------
+
+    * clean - remove build files
+    * style - convert stylus to css
+    * fmt - format the js with esformater
+    * lint - lint the js with jshint
+    * readme - convert the readme.md into interactive html doc
+    * reload - reload the webserver
+    * serve - start the webserver
+    * shim - create the shim loader
+    * vulcanize - vulcanize the into one file
+
+*/
+
+var gulp = require( 'gulp' );
+
+gulp.task( 'default', [ 'dev' ] );
+
+gulp.task( 'build', [ 'readme', 'lint', 'vulcanize', 'shim' ], function() {
+    return gulp.src( 'build/dat-gui.html' )
+        .pipe( $.replace( /\\/g, '\\\\' ) )
+        .pipe( $.replace( /'/g, '\\\'' ) )
+        .pipe( $.replace( /^(.*)$/gm, '\'$1\',' ) )
+        .pipe( $.insert.wrap( 'document.write([', '].join("\\n"))' ) )
+        .pipe( $.rename( 'dat-gui.js' ) )
+        .pipe( gulp.dest( 'build' ) );
+
+} );
+
+gulp.task( 'dev', [ 'watch', 'test', 'serve' ] );
+
+gulp.task( 'docs', [ 'style', 'readme' ] );
+
+gulp.task( 'release', function() {
+    console.log( 'Task not yet implemented.' );
+} );
+
+gulp.task( 'test', function() {
 
     karma.server.start( {
         frameworks: [ 'jasmine' ],
         files: paths.test
     } );
 
-    gulp.watch( paths.docs, [ 'docs' ] );
+} );
-    gulp.watch( paths.lint, [ 'lint' ] );
+
-    gulp.watch( paths.build, [ 'build' ] );
+gulp.task( 'watch', [ 'build' ], function() {
-    gulp.watch( paths.shim, [ 'shim' ] );
+    // watches and builds all tasks
+    // gulp.watch( paths.html.concat(paths.styl).concat(paths.js).concat(paths.shim), [ 'build' ] );
+
+    gulp.watch( paths.docs, [ 'readme' ] );
+    gulp.watch( paths.styl, [ 'style' ] );
+
+    gulp.watch( paths.html.concat( paths.styl )
+        .concat( paths.js ).concat( paths.shim )
+        .concat( paths.docs ), [ 'reload' ] );
+
+    // fmt
+    $.watch( paths.js, {
+        base: './'
+    } )
+        .pipe( $.esformatter( formattingOptions ) )
+        .pipe( gulp.dest( './' ) );
+} );
+
+////////////////////////////////////////////////
+
+gulp.task( 'clean', function() {
+    return gulp.src( 'build/*' )
+        .pipe( $.rimraf() );
+} );
+
+gulp.task( 'style', function() {
+    return gulp.src( paths.styl, {
+        base: './'
+    } )
+        .pipe( $.stylus( {
+            use: [ nib() ]
+        } ) )
+        .pipe( gulp.dest( './' ) )
+        .pipe( $.filter( '**/*.css' ) )
+        .pipe( $.if( browserSync.active, browserSync.reload( {
+            stream: true
+        } ) ) );
 
 } );
 
-gulp.task( 'build', [ 'vulcanize' ], function() {
+gulp.task( 'fmt', function() {
 
-    return gulp.src( 'build/gui.html' )
+    return gulp.src( paths.js, {
-       .pipe( $.replace( /\\/g, '\\\\' ) )
+        base: './'
-       .pipe( $.replace( /'/g, '\\\'' ) )
+    } )
-       .pipe( $.replace( /^(.*)$/gm, '\'$1\',' ) )
+        .pipe( $.esformatter( formattingOptions ) )
-       .pipe( $.insert.wrap( 'document.write([', '].join("\\n"))' ) )
+        .pipe( gulp.dest( './' ) );
-       .pipe( $.rename( 'gui.js' ) )
+
+} );
+
+gulp.task( 'lint', [ 'fmt' ], function() {
+
+    return gulp.src( paths.js )
+        .pipe( browserSync.reload( {
+            stream: true,
+            once: true
+        } ) )
+        .pipe( $.jshint( '.jshintrc' ) )
+        .pipe( $.jshint.reporter( 'jshint-stylish' ) )
+        .pipe( $.if( !browserSync.active, $.jshint.reporter( 'fail' ) ) );
+
+} );
+
+gulp.task( 'readme', function() {
+    return gulp.src( 'README.md' )
+        .pipe( $.marked( { // convert the markdown
+            gfm: true, // use github flavor markdown
+            highlight: function( code ) { // highlight the code
+                return highlight.highlightAuto( code ).value;
+            }
+        } ) )
+        .pipe( $.wrap( {
+            src: 'docs/template.html'
+        } ) )
+        .pipe( $.rename( 'index.html' ) )
+        .pipe( gulp.dest( './' ) );
+
+} );
+
+gulp.task( 'reload', function() {
+    if ( browserSync.active ) {
+        browserSync.reload();
+    }
+} );
+
+gulp.task( 'serve', function() {
+    browserSync.init( null, {
+        browser: [ 'google-chrome', 'google chrome' ], // linux uses the -
+        server: {
+            baseDir: [ '..' ]
+        },
+        startPath: '/dat.gui/'
+    } );
+} );
+
+gulp.task( 'shim', function() {
+
+    return gulp.src( paths.shim )
+        .pipe( $.uglify() )
+        .pipe( $.rename( 'dat-gui.shim.js' ) )
         .pipe( gulp.dest( 'build' ) );
 
 } );
 
-gulp.task( 'vulcanize', [ 'css' ], function() {
+gulp.task( 'vulcanize', [ 'style' ], function() {
 
-    return gulp.src( 'gui.html' )
+    return gulp.src( 'dat-gui.html' )
+        // must use the latest version of gulp-vulcanize otherwise it grabs the file from disk
+        .pipe( $.insert.prepend( '<script src="../platform/platform.js"></script>\n' ) )
         .pipe( $.vulcanize( {
             dest: 'build',
             inline: true,
@@ -59,66 +182,46 @@ gulp.task( 'vulcanize', [ 'css' ], function() {
 
 } );
 
-gulp.task( 'lint', [ 'jscs', 'jshint' ] );
+var nib = require( 'nib' ),
+    highlight = require( 'highlight.js' ),
+    karma = require( 'karma' ),
+    browserSync = require( 'browser-sync' ),
+    $ = require( 'gulp-load-plugins' )();
 
-gulp.task( 'jscs', function() {
+var paths = {
+    docs: [ 'README.md', 'docs/template.html' ],
+    js: [ 'gulpfile.js', 'elements/**/*.js' ],
+    html: [ 'dat-gui.html', 'elements/**/*.html' ],
+    shim: [ 'elements/shim.js' ],
+    styl: [ 'docs/*.styl', 'elements/**/*.styl' ],
+    test: [ 'build/dat-gui.js', 'tests/*.js' ]
+};
 
-    return gulp.src( paths.lint )
+var formattingOptions = {
-       .pipe( $.jscs() );
+    'preset': 'jquery',
+    'plugins': [
+        'esformatter-quotes',
+        'esformatter-semicolons',
+        'esformatter-braces'
+    ],
+    'quotes': {
+        'type': 'single',
+        'avoidEscape': false
+    },
+    'indent': {
+        'value': '    '
+    },
+    'whiteSpace': {
+        'before': {
+            'ArgumentListObjectExpression': 1,
+            'ArgumentListFunctionExpression': 1,
+            'ArgumentListArrayExpression': 1
+        },
+        'after': {
+            'ArgumentListObjectExpression': 1,
+            'ArgumentListFunctionExpression': 1,
+            'ArgumentListArrayExpression': 1
+        }
+    }
+};
 
-} );
-
-gulp.task( 'jshint', function() {
-
-    return gulp.src( paths.lint )
-        .pipe( browserSync.reload( { stream: true, once: true } ) )
-        .pipe( $.jshint( '.jshintrc' ) )
-        .pipe( $.jshint.reporter( 'jshint-stylish' ) )
-        .pipe( $.if( !browserSync.active, $.jshint.reporter( 'fail' ) ) );
-
-} );
-
-gulp.task( 'css', function() {
-
-    return css( 'elements/**/*.styl', 'elements' );
-
-} );
-
-gulp.task( 'shim', function() {
-    
-    return gulp.src( paths.shim )
-        .pipe( $.uglify() )
-        .pipe( $.rename( 'gui.shim.js' ) )
-        .pipe( gulp.dest( 'build' ) );
-
-} );
-
-gulp.task( 'docs', function() {
-
-    css( 'docs/*.styl', 'docs' );
-
-    var content = {
-        readme: marked( fs.readFileSync( 'README.md', 'utf8' ) )
-    };
-
-    return gulp.src( 'docs/template.html' )
-        .pipe( $.plates( content ) )
-        .pipe( $.rename( 'index.html' ) )
-        .pipe( gulp.dest( './' ) );
-
-} );
-
-gulp.task( 'clean', function() {
-
-    return gulp.src( paths.clean )
-        .pipe( $.rimraf() );
-
-} );
-
-function css( src, dest ) {
-
-    return gulp.src( src )
-        .pipe( $.stylus( { use: [ nib() ] } ) )
-        .pipe( gulp.dest( dest ) );
-
-}

index.html

@@ -6,7 +6,7 @@
 
 <title>dat-gui</title>
 
-<script src="build/gui.js"></script>
+<script src="build/dat-gui.js"></script>
 <link rel="stylesheet" href="docs/style.css">
 
 </style>
@@ -15,7 +15,8 @@
 <body>
 
 <!-- Copied from README.md -->
-<div id="readme"><h1 id="dat-gui">dat-gui</h1>
+<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> •
@@ -25,72 +26,64 @@
 <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;
+<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"gui.js"</span>&gt;</span><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span></code></pre>
-</code></pre>
 <p>Create controllers by adding objects and their properties. dat-gui chooses a controller based on the variable&#39;s initial value.</p>
-<pre><code class="lang-javascript">var gui = new Gui();
+<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> gui = <span class="hljs-keyword">new</span> Gui();
-gui.add( object, &#39;numberProperty&#39;, 0, 1 ); // Slider
+gui.<span class="hljs-keyword">add</span>( object, <span class="hljs-string">'numberProperty'</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span> ); <span class="hljs-comment">// Slider</span>
-gui.add( object, &#39;stringProperty&#39; ); // Text box
+gui.<span class="hljs-keyword">add</span>( object, <span class="hljs-string">'stringProperty'</span> ); <span class="hljs-comment">// Text box</span>
-gui.add( object, &#39;booleanProperty&#39; ); // Check box
+gui.<span class="hljs-keyword">add</span>( object, <span class="hljs-string">'booleanProperty'</span> ); <span class="hljs-comment">// Check box</span>
-gui.add( object, &#39;functionProperty&#39; ); // Button
+gui.<span class="hljs-keyword">add</span>( object, <span class="hljs-string">'functionProperty'</span> ); <span class="hljs-comment">// Button</span></code></pre>
-</code></pre>
 <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
+<pre><code class="lang-javascript"><span class="hljs-keyword">gui</span>.<span class="hljs-built_in">add</span>( text, <span class="hljs-string">'growthSpeed'</span>, -<span class="hljs-number">5</span>, <span class="hljs-number">5</span> ); // Min <span class="hljs-built_in">and</span> <span class="hljs-built_in">max</span>
-gui.add( text, &#39;noiseStrength&#39; ).step( 5 ); // Increment amount
+<span class="hljs-keyword">gui</span>.<span class="hljs-built_in">add</span>( text, <span class="hljs-string">'noiseStrength'</span> ).step( <span class="hljs-number">5</span> ); // Increment amount
-gui.add( text, &#39;maxSize&#39; ).min( 0 ).step( 0.25 ); // Mix and match
+<span class="hljs-keyword">gui</span>.<span class="hljs-built_in">add</span>( text, <span class="hljs-string">'maxSize'</span> ).<span class="hljs-built_in">min</span>( <span class="hljs-number">0</span> ).step( <span class="hljs-number">0.25</span> ); // Mix <span class="hljs-built_in">and</span> <span class="hljs-built_in">match</span></code></pre>
-</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
+<pre><code class="lang-javascript"><span class="hljs-comment">// Choose from accepted values</span>
-gui.add( text, &#39;message&#39;, [ &#39;pizza&#39;, &#39;chrome&#39;, &#39;hooray&#39; ] );
+gui.add( text, <span class="hljs-string">'message'</span>, [ <span class="hljs-string">'pizza'</span>, <span class="hljs-string">'chrome'</span>, <span class="hljs-string">'hooray'</span> ] );
 
-// Choose from named values
+<span class="hljs-comment">// Choose from named values</span>
-gui.add( text, &#39;speed&#39;, { Stopped: 0, Slow: 0.1, Fast: 5 } );
+gui.add( text, <span class="hljs-string">'speed'</span>, { <span class="hljs-string">Stopped:</span> <span class="hljs-number">0</span>, <span class="hljs-string">Slow:</span> <span class="hljs-number">0.1</span>, <span class="hljs-string">Fast:</span> <span class="hljs-number">5</span> } );</code></pre>
-</code></pre>
 <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
+<pre><code class="lang-javascript"><span class="hljs-keyword">text</span>.color0 = <span class="hljs-string">"#ffae23"</span>; <span class="hljs-comment">// CSS string</span>
-text.color1 = [ 0, 128, 255 ]; // RGB array
+<span class="hljs-keyword">text</span>.color1 = [ <span class="hljs-number">0</span>, <span class="hljs-number">128</span>, <span class="hljs-number">255</span> ]; <span class="hljs-comment">// RGB array</span>
-text.color2 = [ 0, 128, 255, 0.3 ]; // RGB with alpha
+<span class="hljs-keyword">text</span>.color2 = [ <span class="hljs-number">0</span>, <span class="hljs-number">128</span>, <span class="hljs-number">255</span>, <span class="hljs-number">0.3</span> ]; <span class="hljs-comment">// RGB with alpha</span>
-text.color3 = { h: 350, s: 0.9, v: 0.3 }; // Hue, saturation, value
+<span class="hljs-keyword">text</span>.color3 = { h: <span class="hljs-number">350</span>, s: <span class="hljs-number">0.9</span>, v: <span class="hljs-number">0.3</span> }; <span class="hljs-comment">// Hue, saturation, value</span>
 
 var gui = new Gui();
 
-gui.addColor(text, &#39;color0&#39;);
+gui.addColor(<span class="hljs-keyword">text</span>, <span class="hljs-string">'color0'</span>);
-gui.addColor(text, &#39;color1&#39;);
+gui.addColor(<span class="hljs-keyword">text</span>, <span class="hljs-string">'color1'</span>);
-gui.addColor(text, &#39;color2&#39;);
+gui.addColor(<span class="hljs-keyword">text</span>, <span class="hljs-string">'color2'</span>);
-gui.addColor(text, &#39;color3&#39;);
+gui.addColor(<span class="hljs-keyword">text</span>, <span class="hljs-string">'color3'</span>);</code></pre>
-</code></pre>
 <h3 id="events">Events</h3>
 <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);
+<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> controller = gui.add(fizzyText, <span class="hljs-string">'maxSize'</span>, <span class="hljs-number">0</span>, <span class="hljs-number">10</span>);
 
-controller.onChange(function(value) {
+controller.onChange(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(value)</span> </span>{
-  // Fires on every change, drag, keypress, etc.
+  <span class="hljs-comment">// Fires on every change, drag, keypress, etc.</span>
 });
 
-controller.onFinishChange(function(value) {
+controller.onFinishChange(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(value)</span> </span>{
-  // Fires when a controller loses focus.
+  <span class="hljs-comment">// Fires when a controller loses focus.</span>
-  alert(&quot;The new value is &quot; + value);
+  alert(<span class="hljs-string">"The new value is "</span> + value);
-});
+});</code></pre>
-</code></pre>
 <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();
+<pre><code class="lang-javascript">var <span class="hljs-keyword">gui</span> = <span class="hljs-keyword">new</span> Gui();
 
-var f1 = gui.addFolder(&#39;Flow Field&#39;);
+var f1 = <span class="hljs-keyword">gui</span>.addFolder(<span class="hljs-string">'Flow Field'</span>);
-f1.add(text, &#39;speed&#39;);
+f1.<span class="hljs-built_in">add</span>(text, <span class="hljs-string">'speed'</span>);
-f1.add(text, &#39;noiseStrength&#39;);
+f1.<span class="hljs-built_in">add</span>(text, <span class="hljs-string">'noiseStrength'</span>);
 
-var f2 = gui.addFolder(&#39;Letters&#39;);
+var f2 = <span class="hljs-keyword">gui</span>.addFolder(<span class="hljs-string">'Letters'</span>);
-f2.add(text, &#39;growthSpeed&#39;);
+f2.<span class="hljs-built_in">add</span>(text, <span class="hljs-string">'growthSpeed'</span>);
-f2.add(text, &#39;maxSize&#39;);
+f2.<span class="hljs-built_in">add</span>(text, <span class="hljs-string">'maxSize'</span>);
 
-f2.open();
+f2.<span class="hljs-keyword">open</span>();</code></pre>
-</code></pre>
 <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; );
+<pre><code class="lang-javascript">f2.add(text, <span class="hljs-attribute">'message</span>').comment( <span class="hljs-attribute">'This</span> <span class="hljs-keyword">is</span> the comment.' );</code></pre>
-</code></pre>
 <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();
@@ -98,59 +91,52 @@ var gui = new Gui();
 
 gui.remember(fizzyText);
 
-// Add controllers ...
+// Add controllers <span class="hljs-keyword">...</span></code></pre>
-</code></pre>
 <p>Click the gear icon to change your save settings. You can either save your dat-gui 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 ...
+// Add controllers <span class="hljs-keyword">...</span></code></pre>
-</code></pre>
 <h3 id="presets">Presets</h3>
 <p>The save menu also allows you to save all of your settings as presets. Click Save to modify the current preset, or New to create a new preset from existing settings. Clicking Revert will clear all unsaved changes to the current preset.</p>
 <p>Switch between presets using the dropdown in the save menu. You can specify the default like this:</p>
-<pre><code class="lang-javascript">var gui = new Gui({
+<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> gui = <span class="hljs-keyword">new</span> Gui({
-  load: JSON,
+  load: <span class="hljs-built_in">JSON</span>,
-  preset: &#39;Flow&#39;
+  preset: <span class="hljs-string">'Flow'</span>
-});
+});</code></pre>
-</code></pre>
 <p>A word of caution about localStorage:</p>
 <p>Paste the JSON save object into your source frequently. Using localStorage to save presets can make you faster, but its easy to lose your settings by clearing browsing data, changing browsers, or even by changing the URL of the page you&#39;re working on.</p>
 <h3 id="save-to-disk">Save to Disk</h3>
 <p>dat-gui comes with a node server that saves your settings to disk. This way you don&#39;t have to worry about losing your values to 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
+<pre><code class="lang-sh"><span class="hljs-variable">$ </span>node gui-server</code></pre>
-</code></pre>
 <p>Next, instantiate your Gui with a path to a JSON file to store settings. dat-gui will read from this file on load and write to this file on change.</p>
-<pre><code class="lang-javascript">var gui = new Gui( { load: &#39;path/to/file.json&#39; } );
+<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> gui = <span class="hljs-keyword">new</span> Gui( { load: <span class="hljs-string">'path/to/file.json'</span> } );</code></pre>
-</code></pre>
 <h3 id="custom-placement">Custom Placement</h3>
 <p>By default, Gui panels are created with fixed position, and are automatically appended to the body. 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 } );
+<pre><code class="lang-javascript"><span class="hljs-reserved">var</span> gui = <span class="hljs-keyword">new</span> Gui( { <span class="hljs-attribute">autoPlace</span>: <span class="hljs-literal">false</span> } );
 
-var customContainer = document.getElementById(&#39;my-gui-container&#39;);
+<span class="hljs-reserved">var</span> customContainer = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'my-gui-container'</span>);
-customContainer.appendChild(gui.domElement);
+customContainer.appendChild(gui.domElement);</code></pre>
-</code></pre>
 <p>Since dat-gui is built using <a href="todo">Web Components</a>, you can also use HTML syntax to add controllers to the page.</p>
-<pre><code class="lang-html">&lt;body&gt;
+<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">body</span>&gt;</span>
 
-&lt;dat-gui-number min=&quot;-2&quot; max=&quot;2&quot; step=&quot;1&quot; value=&quot;0&quot;&gt;&lt;/dat-gui-number&gt;
+<span class="hljs-tag">&lt;<span class="hljs-title">dat-gui-number</span> <span class="hljs-attribute">min</span>=<span class="hljs-value">"-2"</span> <span class="hljs-attribute">max</span>=<span class="hljs-value">"2"</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">"1"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"0"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">dat-gui-number</span>&gt;</span>
 
-&lt;script&gt;
+<span class="hljs-tag">&lt;<span class="hljs-title">script</span>&gt;</span><span class="javascript">
 
-var controller = document.querySelector( &#39;dat-gui-number&#39; );
+<span class="hljs-keyword">var</span> controller = <span class="hljs-built_in">document</span>.querySelector( <span class="hljs-string">'dat-gui-number'</span> );
-controller.onChange( function() {
+controller.onChange( <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
 
-    // react to UI changes ...
+    <span class="hljs-comment">// react to UI changes ...</span>
 
 } );
 
-&lt;/script&gt;
+</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
 
-&lt;/body&gt;
+<span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span></code></pre>
-</code></pre>
 <h3 id="defining-custom-controllers">Defining Custom Controllers</h3>
 <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>
@@ -158,37 +144,34 @@ controller.onChange( function() {
 <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;dat-gui-number&gt;</code>:</p>
-<pre><code class="lang-javascript">Polymer( &#39;dat-gui-number&#39;, {
+<pre><code class="lang-javascript">Polymer( <span class="hljs-string">'dat-gui-number'</span>, {
 
-  // Define element ...
+  // Define element <span class="hljs-keyword">...</span>
 
 } );
 
-Gui.register( &#39;dat-gui-number&#39;, function( value ) {
+Gui.register( <span class="hljs-string">'dat-gui-number'</span>, <span class="hljs-keyword">function</span>( value ) {
 
-    return typeof value == &#39;number&#39;;
+    <span class="hljs-keyword">return</span> typeof value == <span class="hljs-string">'number'</span>;
 
-} );
+} );</code></pre>
-</code></pre>
 <p><code>Gui.register</code> takes an element name and a test function. The test function tells dat-gui to add a <code>&lt;dat-gui-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 determines if a controller is appropriate for a given value. This example registers <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 ) {
+<pre><code class="lang-javascript">Gui.register( <span class="hljs-string">'vector-controller'</span>, function( <span class="hljs-keyword">value</span> ) {
 
-    return value.hasOwnProperty( &#39;x&#39; ) &amp;&amp;
+    <span class="hljs-keyword">return</span> <span class="hljs-keyword">value</span>.hasOwnProperty( <span class="hljs-string">'x'</span> ) &amp;&amp;
-           value.hasOwnProperty( &#39;y&#39; ) &amp;&amp;
+           <span class="hljs-keyword">value</span>.hasOwnProperty( <span class="hljs-string">'y'</span> ) &amp;&amp;
-           value.hasOwnProperty( &#39;z&#39; );
+           <span class="hljs-keyword">value</span>.hasOwnProperty( <span class="hljs-string">'z'</span> );
 
-} );
+} );</code></pre>
-</code></pre>
 <h3 id="publishing-custom-controllers">Publishing Custom Controllers</h3>
 <p>You should use <a href="todo">Bower</a> and format your plugin all nice and it should have a certain prefix yada yada.</p>
 <p>Installing third-party controllers ... </p>
-<pre><code class="lang-sh">$ bower install gui-three
+<pre><code class="lang-sh"><span class="hljs-variable">$ </span>bower install gui-three</code></pre>
-</code></pre>
 <p>Include the source for the third-party controllers after dat-gui.</p>
-<pre><code class="lang-html">&lt;script src=&quot;gui.js&quot;&gt;&lt;/script&gt;
+<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"gui.js"</span>&gt;</span><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
-&lt;script src=&quot;gui-three.js&quot;&gt;&lt;/script&gt;
+<span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"gui-three.js"</span>&gt;</span><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span></code></pre>
-</code></pre>
+
 </div>
 
 <script src="docs/main.js"></script>

package.json

@@ -3,26 +3,30 @@
   "version": "0.0.0",
   "devDependencies": {
     "browser-sync": "^1.3.6",
+    "esformatter-braces": "^0.1.7",
+    "esformatter-quotes": "^1.0.0",
+    "esformatter-semicolons": "^1.0.3",
     "gulp": "^3.8.7",
+    "gulp-esformatter": "^1.0.0",
+    "gulp-filter": "^1.0.2",
     "gulp-if": "^1.2.4",
     "gulp-insert": "^0.4.0",
-    "gulp-jscs": "^1.1.2",
     "gulp-jshint": "^1.8.4",
     "gulp-load-plugins": "^0.6.0",
-    "gulp-plates": "0.0.5",
+    "gulp-marked": "^0.2.0",
-    "gulp-reload": "0.0.4",
     "gulp-rename": "^1.2.0",
     "gulp-replace": "^0.4.0",
     "gulp-rimraf": "^0.1.0",
     "gulp-stylus": "^1.3.0",
     "gulp-uglify": "^1.0.1",
-    "gulp-vulcanize": "^1.0.0",
+    "gulp-vulcanize": "^1.1.0",
-    "gulp-watch": "^0.6.9",
+    "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-chrome-launcher": "^0.1.4",
     "karma-jasmine": "^0.1.5",
-    "marked": "^0.3.2",
+    "nib": "^1.0.3",
-    "nib": "^1.0.3"
+    "through2": "^0.6.1"
   }
 }

tests/test.gui.js

@@ -32,7 +32,7 @@ describe( 'Gui', function() {
 
         expectController( 'dat-gui-number', 1234 );
         expectController( 'dat-gui-string', 'string value' );
-        expectController( 'dat-gui-function', function(){} );
+        expectController( 'dat-gui-function', function() {} );
         expectController( 'dat-gui-boolean', true );
 
         expectController( 'dat-gui-option', 'hey', [ 'hey', 'hi', 'ho' ] );
@@ -75,7 +75,7 @@ describe( 'Gui', function() {
         args.unshift( value );
         args.unshift( 'name' );
 
-        controller = gui.define.apply( gui, args );
+        controller = gui.var.apply( gui, args );
         expect( controller.nodeName.toLowerCase() ).toBe( controllerType );
 
     }