add gjslint style linter and updated javascript to match

elements/Gui.js

@@ -1,141 +1,141 @@
-(function( scope ) {
+(function(scope) {
 
-    var Gui = function( params ) {
+  var Gui = function(params) {
 
-        if ( !ready ) {
+    if (!ready) {
-            Gui.error( 'Gui not ready. Put your code inside Gui.ready()' );
+      Gui.error('Gui not ready. Put your code inside Gui.ready()');
-        }
-
-        params = params || {};
-
-        var panel = document.createElement( 'gui-panel' );
-
-        panel.autoPlace = params.autoPlace !== false;
-        
-        if ( panel.autoPlace ) {
-            document.body.appendChild( panel );
-        }
-
-        return panel;
-
-    };
-
-
-    // Register custom controllers
-    // ------------------------------- 
-
-    var controllers = {};
-
-    Gui.register = function( elementName, test ) {
-
-        controllers[ elementName ] = test;
-
-    };
-
-
-    // Returns a controller based on a value
-    // ------------------------------- 
-
-    Gui.getController = function( value ) {
-
-        for ( var type in controllers ) {
-
-            var test = controllers[ type ];
-
-            if ( test( value ) ) {
-        
-                return document.createElement( type );
-
-            }
-
-        }
-        
-    };
-
-
-    // Gui ready handler ... * shakes fist at polymer *
-    // ------------------------------- 
-    
-    var ready = false;
-    var readyHandlers = [];
-    
-    document.addEventListener( 'polymer-ready', function() {
-
-        ready = true;
-        readyHandlers.forEach( function( fnc ) {
-
-            fnc();
-
-        } );
-
-    } );
-
-    Gui.ready = function( fnc ) {
-
-        ready ? fnc() : readyHandlers.push( fnc );
-
-    };
-
-
-    // Error
-    // ------------------------------- 
-
-    Gui.error = function() {
-        var args = Array.prototype.slice.apply( arguments );
-        args.unshift( 'dat-gui ::' );
-        console.error.apply( console, args );
     }
 
-    Gui.warn = function() {
+    params = params || {};
-        var args = Array.prototype.slice.apply( arguments );
+
-        args.unshift( 'dat-gui ::' );
+    var panel = document.createElement('gui-panel');
-        console.warn.apply( console, args );
+
+    panel.autoPlace = params.autoPlace !== false;
+
+    if (panel.autoPlace) {
+      document.body.appendChild(panel);
     }
-    
 
-    // Old namespaces
+    return panel;
-    // ------------------------------- 
 
-    var dat = {};
+  };
- 
-    dat.gui = {};
-    dat.gui.GUI = Gui;
-    dat.GUI = dat.gui.GUI;
 
-    dat.color = {};
-    dat.color.Color = function() {};
 
-    dat.dom = {};
+  // Register custom controllers
-    dat.dom.dom = function() {};
+  // -------------------------------
 
-    dat.controllers = {};
+  var controllers = {};
-    dat.controllers.Controller              = constructor( 'controller-base' );
-    dat.controllers.NumberController        = constructor( 'controller-number' );
-    dat.controllers.FunctionController      = constructor( 'controller-function' );
-    dat.controllers.ColorController         = constructor( 'controller-color' );
-    dat.controllers.BooleanController       = constructor( 'controller-boolean' );
-    dat.controllers.OptionController        = constructor( 'controller-option' );
 
-    dat.controllers.NumberControllerBox     = dat.controllers.NumberController;
+  Gui.register = function(elementName, test) {
-    dat.controllers.NumberControllerSlider  = dat.controllers.NumberController;
+
-    
+    controllers[elementName] = test;
-    function constructor( elementName ) {
+
-        
+  };
-        return function( object, path ) {
+
-            var el = document.createElement( elementName );
+
-            el.watch( object, path );
+  // Returns a controller based on a value
-            return el;
+  // -------------------------------
-        };
+
+  Gui.getController = function(value) {
+
+    for (var type in controllers) {
+
+      var test = controllers[type];
+
+      if (test(value)) {
+
+        return document.createElement(type);
+
+      }
 
     }
 
-
+  };
-    // Export
-    // ------------------------------- 
-
-    scope.dat = dat;
-    scope.Gui = Gui;
 
 
-})( this );
+  // Gui ready handler ... * shakes fist at polymer *
+  // -------------------------------
+
+  var ready = false;
+  var readyHandlers = [];
+
+  document.addEventListener('polymer-ready', function() {
+
+    ready = true;
+    readyHandlers.forEach(function(fnc) {
+
+      fnc();
+
+    });
+
+  });
+
+  Gui.ready = function(fnc) {
+
+    ready ? fnc() : readyHandlers.push(fnc);
+
+  };
+
+
+  // Error
+  // -------------------------------
+
+  Gui.error = function() {
+    var args = Array.prototype.slice.apply(arguments);
+    args.unshift('dat-gui ::');
+    console.error.apply(console, args);
+  };
+
+  Gui.warn = function() {
+    var args = Array.prototype.slice.apply(arguments);
+    args.unshift('dat-gui ::');
+    console.warn.apply(console, args);
+  };
+
+
+  // Old namespaces
+  // -------------------------------
+
+  var dat = {};
+
+  dat.gui = {};
+  dat.gui.GUI = Gui;
+  dat.GUI = dat.gui.GUI;
+
+  dat.color = {};
+  dat.color.Color = function() {};
+
+  dat.dom = {};
+  dat.dom.dom = function() {};
+
+  dat.controllers = {};
+  dat.controllers.Controller = constructor('controller-base');
+  dat.controllers.NumberController = constructor('controller-number');
+  dat.controllers.FunctionController = constructor('controller-function');
+  dat.controllers.ColorController = constructor('controller-color');
+  dat.controllers.BooleanController = constructor('controller-boolean');
+  dat.controllers.OptionController = constructor('controller-option');
+
+  dat.controllers.NumberControllerBox = dat.controllers.NumberController;
+  dat.controllers.NumberControllerSlider = dat.controllers.NumberController;
+
+  function constructor(elementName) {
+
+    return function(object, path) {
+      var el = document.createElement(elementName);
+      el.watch(object, path);
+      return el;
+    };
+
+  }
+
+
+  // Export
+  // -------------------------------
+
+  scope.dat = dat;
+  scope.Gui = Gui;
+
+
+})(this);
 

elements/controller-base/controller-base.js

@@ -1,71 +1,72 @@
 /*
 
-[ ] onChange( )
+[ ] onChange()
-[ ] onFinishChange( )
+[ ] onFinishChange()
 
 */
 
 Polymer('controller-base', {
 
-    ready: function() {
+  ready: function() {
 
-        this.update();
+    this.update();
 
-    },
+  },
 
-    update: function() {},
+  update: function() {},
 
-    init: function() {},
+  init: function() {},
 
 
-    // Observers
+  // Observers
-    // ------------------------------- 
+  // -------------------------------
 
-    watch: function( object, path ) {
+  watch: function(object, path) {
 
-        this.object = object;
+    this.object = object;
-        this.path = path;
+    this.path = path;
 
-        this.bind('value', new PathObserver(this.object, this.path));
+    this.bind('value', new PathObserver(this.object, this.path));
 
-    },
+  },
 
-    valueChanged: function() {
+  valueChanged: function() {
-        
-        this.update();
 
-    },
+    this.update();
+
+  },
 
 
-    // Helpers
+  // Helpers
-    // ------------------------------- 
+  // -------------------------------
 
-    map: function( x, a, b, c, d ) {
+  map: function(x, a, b, c, d) {
-        return ( x - a ) / ( b - a ) * ( d - c ) + c;
+    return (x - a) / (b - a) * (d - c) + c;
-    },
+  },
 
 
-    // Legacy
+  // Legacy
-    // ------------------------------- 
+  // -------------------------------
 
-    listen: function() {
+  listen: function() {
 
-        Gui.warn( 'controller.listen() is deprecated. All controllers are listened for free.' );
+    Gui.warn('controller.listen() is deprecated. ' +
-        return this;
+             'All controllers are listened for free.');
+    return this;
 
-    },
+  },
 
-    getValue: function() {
+  getValue: function() {
 
-        return this.value;
+    return this.value;
 
-    },
+  },
 
-    setValue: function( v ) {
+  setValue: function(v) {
 
-        this.value = v;
+    this.value = v;
 
-    }
+  }
-        
 
-});
+
+});

elements/controller-boolean/controller-boolean.js

@@ -1,20 +1,20 @@
-Gui.register( 'controller-boolean', function( value ) {
+Gui.register('controller-boolean', function(value) {
-  
-    return typeof value == 'boolean';
 
-} );
+  return typeof value == 'boolean';
+
+});
+
+Polymer('controller-boolean', {
+
+  ready: function() {
+
+
+  },
+
+  toggle: function() {
+
+    this.value = !this.value;
+
+  }
 
-Polymer( 'controller-boolean', {
-
-    ready: function() {
-        
-
-    },
-
-    toggle: function() {
-
-        this.value = !this.value;
-
-    }
-    
 });

elements/controller-function/controller-function.js

@@ -1,9 +1,9 @@
-Gui.register( 'controller-function', function( value ) {
+Gui.register('controller-function', function(value) {
-  
-    return typeof value == 'function';
 
-} );
+  return typeof value == 'function';
 
-Polymer( 'controller-function', {
+});
 
-} );
+Polymer('controller-function', {
+
+});

elements/controller-number/controller-number.js

@@ -1,7 +1,7 @@
 /*
 
 [ ] arrow keys
-[ ] min( ) max( ) step( ) commands of yore
+[ ] min() max() step() commands of yore
 
 [x] only validate input box on blur, not on keydown
 [x] enter key blurs
@@ -13,251 +13,252 @@
 
 */
 
-Gui.register( 'controller-number', function( value ) {
+Gui.register('controller-number', function(value) {
-  
-    return typeof value == 'number';
 
-} );
+  return typeof value == 'number';
 
-Polymer( 'controller-number', {
+});
 
-    value: 0,
+Polymer('controller-number', {
-    decimals: 3,
-    computed: {
 
-        slider: 'min !== undefined && max !== undefined'
+  value: 0,
+  decimals: 3,
+  computed: {
 
-    },
+    slider: 'min !== undefined && max !== undefined'
 
-    ready: function() {
+  },
-        
-        var _this = this;
 
-        window.addEventListener( 'keydown', function( e ) {
+  ready: function() {
-            if ( e.keyCode == 18 ) _this._alt = true;
-        }, false );
 
-        window.addEventListener( 'keyup', function( e ) {
+    var _this = this;
-            if ( e.keyCode == 18 ) _this._alt = false;
-        }, false );
 
-        this.super();
+    window.addEventListener('keydown', function(e) {
+      if (e.keyCode == 18) _this._alt = true;
+    }, false);
 
-    },
+    window.addEventListener('keyup', function(e) {
+      if (e.keyCode == 18) _this._alt = false;
+    }, false);
 
-    init: function( min, max, step ) {
+    this.super();
 
-        this.min = min;
+  },
-        this.max = max;
-        this.step = step;
 
-    },
+  init: function(min, max, step) {
 
-    // Observers
+    this.min = min;
-    // ------------------------------- 
+    this.max = max;
+    this.step = step;
 
-    valueChanged: function( newValue ) {
+  },
 
-        if ( this.step !== undefined ) {
+  // Observers
-            this.value = Math.round( this.value / this.step ) * this.step;
+  // -------------------------------
-        }
 
-        if ( this.min !== undefined ) {
+  valueChanged: function(newValue) {
-            this.value = Math.max( this.value, this.min );
-        }
 
-        if ( this.max !== undefined ) {
+    if (this.step !== undefined) {
-            this.value = Math.min( this.value, this.max );
+      this.value = Math.round(this.value / this.step) * this.step;
-        }
+    }
-        
-        this.super();
-    },
 
-    minChanged: function() {
+    if (this.min !== undefined) {
+      this.value = Math.max(this.value, this.min);
+    }
 
-        this.value = Math.max( this.value, this.min );
+    if (this.max !== undefined) {
-        this.update();
+      this.value = Math.min(this.value, this.max);
+    }
 
-    },
+    this.super();
+  },
 
-    maxChanged: function() {
+  minChanged: function() {
 
-        this.value = Math.min( this.value, this.max );
+    this.value = Math.max(this.value, this.min);
-        this.update();
+    this.update();
 
-    },
+  },
 
-    update: function() {
+  maxChanged: function() {
-        
-        var ratio = this.map( this.value, this.min, this.max, 0, 1 );
 
-        if ( this.min < 0 && this.max > 0 ) {
+    this.value = Math.min(this.value, this.max);
+    this.update();
 
-            this.$.container.classList.add( 'straddle-zero' );
+  },
 
-            var zero = this.map( 0, this.min, this.max, 0, 1 );
+  update: function() {
 
-            if ( this.value >= 0 ) {
+    var ratio = this.map(this.value, this.min, this.max, 0, 1);
 
-                this.$.fill.style.left = zero * 100 + '%';
+    if (this.min < 0 && this.max > 0) {
-                this.$.fill.style.width = (ratio - zero) * 100 + '%';
-                this.$.fill.style.right = '';
 
-            } else { 
+      this.$.container.classList.add('straddle-zero');
 
-                this.$.fill.style.left = '';
+      var zero = this.map(0, this.min, this.max, 0, 1);
-                this.$.fill.style.width = (zero - ratio) * 100 + '%';
-                this.$.fill.style.right = ( 1 - zero ) * 100 + '%';
 
-            }
+      if (this.value >= 0) {
 
-        } else { 
+        this.$.fill.style.left = zero * 100 + '%';
+        this.$.fill.style.width = (ratio - zero) * 100 + '%';
+        this.$.fill.style.right = '';
 
-            this.$.container.classList.remove( 'straddle-zero' );
+      } else {
 
-            if ( this.max > 0 ) {
+        this.$.fill.style.left = '';
+        this.$.fill.style.width = (zero - ratio) * 100 + '%';
+        this.$.fill.style.right = (1 - zero) * 100 + '%';
 
-                this.$.fill.style.left = 0;
+      }
-                this.$.fill.style.width = ratio * 100 + '%';
-                this.$.fill.style.right = '';
 
-            } else { 
+    } else {
 
-                this.$.fill.style.left = '';
+      this.$.container.classList.remove('straddle-zero');
-                this.$.fill.style.width = ( 1 - ratio ) * 100 + '%';
-                this.$.fill.style.right = 0;
 
-            }
+      if (this.max > 0) {
 
-        }
+        this.$.fill.style.left = 0;
+        this.$.fill.style.width = ratio * 100 + '%';
+        this.$.fill.style.right = '';
 
-        this.$.knob.style.left = ratio * 100 + '%';
+      } else {
 
-        this.$.container.classList.toggle( 'positive', this.value >= 0 );
+        this.$.fill.style.left = '';
-        this.$.container.classList.toggle( 'negative', this.value < 0 );
+        this.$.fill.style.width = (1 - ratio) * 100 + '%';
+        this.$.fill.style.right = 0;
 
-        this.super();
+      }
-
-    },
-
-
-    // Events
-    // ------------------------------- 
-    
-    click: function( e ) {
-
-        this.$.input.select();
-
-    },
-
-    keydown: function( e ) {
-
-        if ( e.keyCode == 13 ) {
-            this.$.input.blur();
-        }
-
-    },
-    
-    down: function( e ) {
-
-        e.preventDefault();
-        this._rect = this.$.track.getBoundingClientRect();
-        if ( !this._alt ) this.value = this.valueFromX( e.x );
-
-    },
-
-    up: function( e ) {
-
-        // this.$.container.classList.add( 'transition' );
-
-    },
-
-    trackstart: function( e ) {
-
-        // this.$.container.classList.remove( 'transition' );
-        this._dragFriction = 1;
-
-    },
-
-    trackx: function( e ) {
-
-        if ( this.step === undefined ) {
-
-            var dv = this.valueFromDX( e.ddx );
-
-            if ( this._alt ) dv /= 10;
-
-            this.value += dv * this._dragFriction;
-
-        } else {
-            
-            this.value = this.valueFromX( e.pageX );
-
-        }
-    },
-
-    tracky: function( e ) {
-
-        this._dragFriction = Math.max( 0.01, Math.min( 1, this.map( e.dy, 50, 300, 1, 0.1 ) ) );
-        
-    },
-
-    blur: function( e ) {
-
-        var v = parseFloat( this.$.input.value );
-        
-        if ( v === v ) {
-            this.value = v;
-        }
-
-    },
-
-
-
-    // Filters
-    // ------------------------------- 
-
-    truncate: function( v ) {
-
-        if ( v % 1 !== 0 && this.decimals !== undefined ) {
-            return this.limitDecimals( v, this.decimals );
-        } else { 
-            return v;
-        }
-
-    },
-    
-
-    // Helpers
-    // ------------------------------- 
-
-    limitDecimals: function( v, maxDecimals ) {
-
-        var str = v.toString();
-        var numDecimals = str.substring( str.indexOf( '.' ) + 1 ).length;
-
-        str = v.toFixed( Math.min( numDecimals, this.decimals ) );
-        
-        for ( var z, i = 0, l = str.length; i < l; i++ ) {
-            if ( str.charAt( i ) !== '0' ) {
-                z = i;
-            }
-        }
-
-        return str.substring( 0, z+1 );
-
-    },
-    
-    valueFromX: function( x ) {
-
-        return this.map( x, this._rect.left, this._rect.right, this.min, this.max );
-
-    },
-
-    valueFromDX: function( dx ) {
-
-        return this.map( dx, 0, this._rect.width, 0, this.max - this.min );
 
     }
 
+    this.$.knob.style.left = ratio * 100 + '%';
+
+    this.$.container.classList.toggle('positive', this.value >= 0);
+    this.$.container.classList.toggle('negative', this.value < 0);
+
+    this.super();
+
+  },
+
+
+  // Events
+  // -------------------------------
+
+  click: function(e) {
+
+    this.$.input.select();
+
+  },
+
+  keydown: function(e) {
+
+    if (e.keyCode == 13) {
+      this.$.input.blur();
+    }
+
+  },
+
+  down: function(e) {
+
+    e.preventDefault();
+    this._rect = this.$.track.getBoundingClientRect();
+    if (!this._alt) this.value = this.valueFromX(e.x);
+
+  },
+
+  up: function(e) {
+
+    // this.$.container.classList.add( 'transition');
+
+  },
+
+  trackstart: function(e) {
+
+    // this.$.container.classList.remove( 'transition');
+    this._dragFriction = 1;
+
+  },
+
+  trackx: function(e) {
+
+    if (this.step === undefined) {
+
+      var dv = this.valueFromDX(e.ddx);
+
+      if (this._alt) dv /= 10;
+
+      this.value += dv * this._dragFriction;
+
+    } else {
+
+      this.value = this.valueFromX(e.pageX);
+
+    }
+  },
+
+  tracky: function(e) {
+
+    this._dragFriction = Math.max(0.01,
+                           Math.min(1, this.map(e.dy, 50, 300, 1, 0.1)));
+
+  },
+
+  blur: function(e) {
+
+    var v = parseFloat(this.$.input.value);
+
+    if (v === v) {
+      this.value = v;
+    }
+
+  },
+
+
+
+  // Filters
+  // -------------------------------
+
+  truncate: function(v) {
+
+    if (v % 1 !== 0 && this.decimals !== undefined) {
+      return this.limitDecimals(v, this.decimals);
+    } else {
+      return v;
+    }
+
+  },
+
+
+  // Helpers
+  // -------------------------------
+
+  limitDecimals: function(v, maxDecimals) {
+
+    var str = v.toString();
+    var numDecimals = str.substring(str.indexOf('.') + 1).length;
+
+    str = v.toFixed(Math.min(numDecimals, this.decimals));
+
+    for (var z, i = 0, l = str.length; i < l; i++) {
+      if (str.charAt(i) !== '0') {
+        z = i;
+      }
+    }
+
+    return str.substring(0, z + 1);
+
+  },
+
+  valueFromX: function(x) {
+
+    return this.map(x, this._rect.left, this._rect.right, this.min, this.max);
+
+  },
+
+  valueFromDX: function(dx) {
+
+    return this.map(dx, 0, this._rect.width, 0, this.max - this.min);
+
+  }
+
 });

elements/controller-string/controller-string.js

@@ -1,23 +1,23 @@
-Gui.register( 'controller-string', function( value ) {
+Gui.register('controller-string', function(value) {
-  
-    return typeof value == 'string';
 
-} );
+  return typeof value == 'string';
 
-Polymer( 'controller-string', {
+});
 
-    click: function( e ) {
+Polymer('controller-string', {
 
-        this.$.input.select();
+  click: function(e) {
 
-    },
+    this.$.input.select();
 
-    keydown: function( e ) {
+  },
 
-        if ( e.keyCode == 13 ) {
+  keydown: function(e) {
-            this.$.input.blur();
-        }
 
+    if (e.keyCode == 13) {
+      this.$.input.blur();
     }
-    
+
-});
+  }
+
+});

elements/gui-panel/gui-panel.js

@@ -3,139 +3,142 @@
 
 Polymer('gui-panel', {
 
-    docked: false,
+  docked: false,
-    open: true,
+  open: true,
-    touch: 'ontouchstart' in window || !!window.DocumentTouch && document instanceof DocumentTouch,
+  touch: ('ontouchstart' in window) ||
+         (!!window.DocumentTouch && document instanceof DocumentTouch),
 
-    ready: function() {
+  ready: function() {
 
-        this.anon.values = {};
+    this.anon.values = {};
 
-        // window.addEventListener( 'resize', this.checkHeight.bind( this ) );
+    // window.addEventListener( 'resize', this.checkHeight.bind( this));
 
-    },
+  },
 
-    anon: function() {
+  anon: function() {
 
-        if ( arguments.length == 1 ) {
+    if (arguments.length == 1) {
-            var name = arguments[ 0 ];
+      var name = arguments[0];
-            return this.anon.values[ name ];
+      return this.anon.values[name];
-        }
+    }
 
-        var initialValue = arguments[ 0 ];
+    var initialValue = arguments[0];
-        var name = arguments[ 1 ];
+    var name = arguments[1];
 
-        var args = [ this.anon.values, name ];
+    var args = [this.anon.values, name];
-        args = args.concat( Array.prototype.slice.call( arguments, 2 ) );
+    args = args.concat(Array.prototype.slice.call(arguments, 2));
 
-        this.anon.values[ name ] = initialValue;
+    this.anon.values[name] = initialValue;
 
-        return this.add.apply( this, args );
+    return this.add.apply(this, args);
 
-    },
+  },
 
-    add: function( object, path ) {
+  add: function(object, path) {
 
-        // Make controller
+    // Make controller
 
-        var value = Path.get( path ).getValueFrom( object );
+    var value = Path.get(path).getValueFrom(object);
 
-        if ( value == null || value == undefined ) {
+    if (value == null || value == undefined) {
-            return Gui.error( object + ' doesn\'t have a value for path "' + path + '".' );
+      return Gui.error(object +
-        }
+                       ' doesn\'t have a value for path "' + path + '".');
+    }
 
-        var args = Array.prototype.slice.call( arguments, 2 );
+    var args = Array.prototype.slice.call(arguments, 2);
 
-        var controller = Gui.getController( value, args );
+    var controller = Gui.getController(value, args);
-        
-        if ( !controller ) {
-            return Gui.error( 'Unrecognized type:', value );
-        }
 
-        controller.watch( object, path )
+    if (!controller) {
-        controller.init.apply( controller, args );
+      return Gui.error('Unrecognized type:', value);
+    }
 
-        // Make row
+    controller.watch(object, path);
+    controller.init.apply(controller, args);
 
-        var row = document.createElement( 'gui-row' );
+    // Make row
-        row.name = path;
 
-        controller.row = row;
+    var row = document.createElement('gui-row');
+    row.name = path;
 
-        controller.name = function( name ) {
+    controller.row = row;
-            row.name = name;
-        };
 
-        controller.comment = function( comment ) {
+    controller.name = function(name) {
-            row.comment = comment;
+      row.name = name;
-        };
+    };
 
-        row.appendChild( controller );
+    controller.comment = function(comment) {
-        this.appendChild( row );
+      row.comment = comment;
+    };
 
-        return controller;
+    row.appendChild(controller);
+    this.appendChild(row);
 
-    },
+    return controller;
+
+  },
 
 
-    // Observers
+  // Observers
-    // ------------------------------- 
+  // -------------------------------
 
-    openChanged: function() {
+  openChanged: function() {
 
-        if ( this.open || this.docked ) {
+    if (this.open || this.docked) {
-            
-            // let the style sheet take care of things
 
-            this.$.container.style.transform = '';
+      // let the style sheet take care of things
 
-        } else { 
+      this.$.container.style.transform = '';
 
-            // todo: need the rest of the vendor prefixes ...
+    } else {
-            // wish i could pipe javascript variables into styl.
 
-            var y = -this.$.controllers.offsetHeight + 'px';
+      // todo: need the rest of the vendor prefixes ...
-            this.$.container.style.transform = 'translate3d(0, ' + y + ', 0)';
+      // wish i could pipe javascript variables into styl.
 
-        }
+      var y = -this.$.controllers.offsetHeight + 'px';
+      this.$.container.style.transform = 'translate3d(0, ' + y + ', 0)';
+
+    }
 
 
-    },
+  },
 
-    dockedChanged: function() {
+  dockedChanged: function() {
 
-        this.openChanged();
+    this.openChanged();
 
-    },
+  },
-    
-
-    // Events
-    // ------------------------------- 
-    
-    tapClose: function() {
-        this.open = !this.open;
-    },
-    
-    // checkHeight: function() {
-          
-    //     if ( window.innerHeight < this.$.controllers.offsetHeight ) {
-    //         this.docked = true;
-    //     } else { 
-    //         this.docked = false;
-    //     }
-
-    // },
 
 
-    // Legacy
+  // Events
-    // -------------------------------     
+  // -------------------------------
 
-    listenAll: function() {
+  tapClose: function() {
+    this.open = !this.open;
+  },
 
-        Gui.warn( 'controller.listenAll() is deprecated. All controllers are listened for free.' );
+  // checkHeight: function() {
 
-    },
+  //   if ( window.innerHeight < this.$.controllers.offsetHeight) {
+  //     this.docked = true;
+  //   } else {
+  //     this.docked = false;
+  //   }
 
-    // todo: domElement
+  // },
 
-});
+
+  // Legacy
+  // -------------------------------
+
+  listenAll: function() {
+
+    Gui.warn('controller.listenAll() is deprecated. ' +
+             'All controllers are listened for free.');
+
+  }
+
+  // todo: domElement
+
+});

elements/gui-row/gui-row.js

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

gulpfile.js

@@ -49,9 +49,9 @@ gulp.task('vulcanize', ['css'], function() {
 gulp.task('lint', function() {
   return gulp.src('elements/**/*.js')
     //.pipe($.reload({stream: true, once: true}))
-    .pipe($.jshint())
+    .pipe($.gjslint())
-    .pipe($.jshint.reporter('jshint-stylish'));
+    .pipe($.gjslint.reporter('console', {}));
-    //.pipe($.if(!browserSync.active, $.jshint.reporter('fail')));
+    //.pipe($.if(!browserSync.active, $.gjslint.reporter('fail')));
 });
 
 gulp.task('css', function() {

package.json

@@ -4,8 +4,8 @@
   "devDependencies": {
     "gulp": "^3.8.7",
     "gulp-clean": "^0.3.1",
+    "gulp-gjslint": "^0.1.2",
     "gulp-insert": "^0.4.0",
-    "gulp-jshint": "^1.8.4",
     "gulp-load-plugins": "^0.6.0",
     "gulp-plates": "0.0.5",
     "gulp-rename": "^1.2.0",
@@ -13,7 +13,6 @@
     "gulp-stylus": "^1.3.0",
     "gulp-vulcanize": "^1.0.0",
     "gulp-watch": "^0.6.9",
-    "jshint-stylish": "^0.4.0",
     "karma": "^0.12.23",
     "karma-chrome-launcher": "^0.1.4",
     "karma-jasmine": "^0.1.5",