Styling fixes across the codebase to play well with Closure.

Also configures JSCS to work with our code a bit better. Adding license and description to closure-camel-case.js Some extra fixes Fixes from @samthor review
google · Sep 7, 2015 · fde7a98 · fde7a98
1 parent d3e5405
commit fde7a98
Show file tree

Hide file tree

Showing 21 changed files with 271 additions and 106 deletions.
diff --git a/.jscsrc b/.jscsrc
@@ -5,6 +5,18 @@
   "validateIndentation": 2,
   "excludeFiles": ["node_modules/**"],
   "maximumLineLength": 130,
-  "requireCamelCaseOrUpperCaseIdentifiers": true,
-  "validateQuoteMarks": "'"
+  "validateQuoteMarks": "'",
+  "requireCamelCaseOrUpperCaseIdentifiers": null,
+  "additionalRules": ["utils/jscs-rules/*.js"],
+  "closureCamelCase": true,
+  "jsDoc": {
+    "checkAnnotations": {
+      "preset": "closurecompiler",
+      "extra": {
+        "type": true
+      }
+    },
+    "checkTypes": "strictNativeCase",
+    "enforceExistence": "exceptExports"
+  }
 }
diff --git a/gulpfile.js b/gulpfile.js
@@ -362,6 +362,9 @@ gulp.task('demoresources', function() {
  * put together.
  */
 gulp.task('demos', ['demoresources'], function() {
+  /**
+   * Retrieves the list of component folders.
+   */
   function getComponentFolders() {
     return fs.readdirSync('./src/')
       .filter(function(file) {
@@ -444,6 +447,9 @@ gulp.task('assets', function() {
     .pipe(gulp.dest('dist/assets'));
 });
 
+/**
+ * Defines the list of resources to watch for changes.
+ */
 function watch() {
   gulp.watch(['src/**/*.js', '!src/**/README.md'],
     ['scripts', 'demos', 'components', reload]);
@@ -566,8 +572,11 @@ gulp.task('publish:code', function(cb) {
     cb);
 });
 
-// Function to publish staging or prod version from local tree,
-// or to promote staging to prod, per passed arg.
+/**
+ * Function to publish staging or prod version from local tree,
+ * or to promote staging to prod, per passed arg.
+ * @param {string} pubScope the scope to publish to.
+ */
 function mdlPublish(pubScope) {
   var cacheTtl = null;
   var src = null;

diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
     "gulp-if": "^1.2.1",
     "gulp-iife": "0.0.7",
     "gulp-imagemin": "^2.2.1",
-    "gulp-jscs": "^1.6.0",
+    "gulp-jscs": "^2.0.0",
     "gulp-jshint": "^1.6.3",
     "gulp-load-plugins": "^0.10.0",
     "gulp-markdown": "^1.0.0",

diff --git a/src/button/button.js b/src/button/button.js
@@ -36,7 +36,7 @@
   /**
    * Store constants in one place so they can be updated easily.
    *
-   * @enum {String | Number}
+   * @enum {string | number}
    * @private
    */
   MaterialButton.prototype.Constant_ = {
@@ -48,7 +48,7 @@
    * JavaScript. This allows us to simply change it in one place should we
    * decide to modify at a later date.
    *
-   * @enum {String}
+   * @enum {string}
    * @private
    */
   MaterialButton.prototype.CssClasses_ = {

diff --git a/src/checkbox/checkbox.js b/src/checkbox/checkbox.js
@@ -23,6 +23,7 @@
    * Implements MDL component design pattern defined at:
    * https://github.com/jasonmayes/mdl-component-design-pattern
    *
+   * @constructor
    * @param {HTMLElement} element The element that will be upgraded.
    */
   var MaterialCheckbox = function MaterialCheckbox(element) {
@@ -36,7 +37,7 @@
   /**
    * Store constants in one place so they can be updated easily.
    *
-   * @enum {String | Number}
+   * @enum {string | number}
    * @private
    */
   MaterialCheckbox.prototype.Constant_ = {
@@ -48,7 +49,7 @@
    * JavaScript. This allows us to simply change it in one place should we
    * decide to modify at a later date.
    *
-   * @enum {String}
+   * @enum {string}
    * @private
    */
   MaterialCheckbox.prototype.CssClasses_ = {
@@ -120,15 +121,14 @@
   /**
    * Add blur.
    *
-   * @param {Event} event The event that fired.
    * @private
    */
-  MaterialCheckbox.prototype.blur_ = function(event) {
+  MaterialCheckbox.prototype.blur_ = function() {
     // TODO: figure out why there's a focus event being fired after our blur,
     // so that we can avoid this hack.
     window.setTimeout(function() {
       this.inputElement_.blur();
-    }.bind(this), this.Constant_.TINY_TIMEOUT);
+    }.bind(this), /** @type {number} */ (this.Constant_.TINY_TIMEOUT));
   };
 
   // Public methods.

diff --git a/src/data-table/data-table.js b/src/data-table/data-table.js
@@ -23,6 +23,7 @@
    * Implements MDL component design pattern defined at:
    * https://github.com/jasonmayes/mdl-component-design-pattern
    *
+   * @constructor
    * @param {HTMLElement} element The element that will be upgraded.
    */
   var MaterialDataTable = function MaterialDataTable(element) {
@@ -31,12 +32,13 @@
     // Initialize instance.
     this.init();
   };
+
   window.MaterialDataTable = MaterialDataTable;
 
   /**
    * Store constants in one place so they can be updated easily.
    *
-   * @enum {String | Number}
+   * @enum {string | number}
    * @private
    */
   MaterialDataTable.prototype.Constant_ = {
@@ -48,7 +50,7 @@
    * JavaScript. This allows us to simply change it in one place should we
    * decide to modify at a later date.
    *
-   * @enum {String}
+   * @enum {string}
    * @private
    */
   MaterialDataTable.prototype.CssClasses_ = {
@@ -62,12 +64,12 @@
    * Generates and returns a function that toggles the selection state of a
    * single row (or multiple rows).
    *
-   * @param {HTMLElement} checkbox Checkbox that toggles the selection state.
+   * @param {Element} checkbox Checkbox that toggles the selection state.
    * @param {HTMLElement} row Row to toggle when checkbox changes.
-   * @param {HTMLElement[]} rows Rows to toggle when checkbox changes.
+   * @param {NodeList=} opt_rows Rows to toggle when checkbox changes.
    * @private
    */
-  MaterialDataTable.prototype.selectRow_ = function(checkbox, row, rows) {
+  MaterialDataTable.prototype.selectRow_ = function(checkbox, row, opt_rows) {
     if (row) {
       return function() {
         if (checkbox.checked) {
@@ -78,21 +80,21 @@
       }.bind(this);
     }
 
-    if (rows) {
+    if (opt_rows) {
       return function() {
         var i;
         var el;
         if (checkbox.checked) {
-          for (i = 0; i < rows.length; i++) {
-            el = rows[i].querySelector('td').querySelector('.mdl-checkbox');
+          for (i = 0; i < opt_rows.length; i++) {
+            el = opt_rows[i].querySelector('td').querySelector('.mdl-checkbox');
             el.MaterialCheckbox.check();
-            rows[i].classList.add(this.CssClasses_.IS_SELECTED);
+            opt_rows[i].classList.add(this.CssClasses_.IS_SELECTED);
           }
         } else {
-          for (i = 0; i < rows.length; i++) {
-            el = rows[i].querySelector('td').querySelector('.mdl-checkbox');
+          for (i = 0; i < opt_rows.length; i++) {
+            el = opt_rows[i].querySelector('td').querySelector('.mdl-checkbox');
             el.MaterialCheckbox.uncheck();
-            rows[i].classList.remove(this.CssClasses_.IS_SELECTED);
+            opt_rows[i].classList.remove(this.CssClasses_.IS_SELECTED);
           }
         }
       }.bind(this);
@@ -104,10 +106,10 @@
    * event handling.
    *
    * @param {HTMLElement} row Row to toggle when checkbox changes.
-   * @param {HTMLElement[]} rows Rows to toggle when checkbox changes.
+   * @param {NodeList=} opt_rows Rows to toggle when checkbox changes.
    * @private
    */
-  MaterialDataTable.prototype.createCheckbox_ = function(row, rows) {
+  MaterialDataTable.prototype.createCheckbox_ = function(row, opt_rows) {
     var label = document.createElement('label');
     label.classList.add('mdl-checkbox');
     label.classList.add('mdl-js-checkbox');
@@ -118,9 +120,11 @@
     checkbox.classList.add('mdl-checkbox__input');
     if (row) {
       checkbox.addEventListener('change', this.selectRow_(checkbox, row));
-    } else if (rows) {
-      checkbox.addEventListener('change', this.selectRow_(checkbox, null, rows));
+    } else if (opt_rows) {
+      checkbox.addEventListener('change',
+          this.selectRow_(checkbox, null, opt_rows));
     }
+
     label.appendChild(checkbox);
     componentHandler.upgradeElement(label, 'MaterialCheckbox');
     return label;

diff --git a/src/icon-toggle/icon-toggle.js b/src/icon-toggle/icon-toggle.js
@@ -23,6 +23,7 @@
    * Implements MDL component design pattern defined at:
    * https://github.com/jasonmayes/mdl-component-design-pattern
    *
+   * @constructor
    * @param {HTMLElement} element The element that will be upgraded.
    */
   var MaterialIconToggle = function MaterialIconToggle(element) {
@@ -36,7 +37,7 @@
   /**
    * Store constants in one place so they can be updated easily.
    *
-   * @enum {String | Number}
+   * @enum {string | number}
    * @private
    */
   MaterialIconToggle.prototype.Constant_ = {
@@ -48,7 +49,7 @@
    * JavaScript. This allows us to simply change it in one place should we
    * decide to modify at a later date.
    *
-   * @enum {String}
+   * @enum {string}
    * @private
    */
   MaterialIconToggle.prototype.CssClasses_ = {
@@ -116,15 +117,14 @@
   /**
    * Add blur.
    *
-   * @param {Event} event The event that fired.
    * @private
    */
-  MaterialIconToggle.prototype.blur_ = function(event) {
+  MaterialIconToggle.prototype.blur_ = function() {
     // TODO: figure out why there's a focus event being fired after our blur,
     // so that we can avoid this hack.
     window.setTimeout(function() {
       this.inputElement_.blur();
-    }.bind(this), this.Constant_.TINY_TIMEOUT);
+    }.bind(this), /** @type {number} */ (this.Constant_.TINY_TIMEOUT));
   };
 
   // Public methods.

diff --git a/src/layout/layout.js b/src/layout/layout.js
@@ -23,6 +23,7 @@
    * Implements MDL component design pattern defined at:
    * https://github.com/jasonmayes/mdl-component-design-pattern
    *
+   * @constructor
    * @param {HTMLElement} element The element that will be upgraded.
    */
   var MaterialLayout = function MaterialLayout(element) {
@@ -36,7 +37,7 @@
   /**
    * Store constants in one place so they can be updated easily.
    *
-   * @enum {String | Number}
+   * @enum {string | number}
    * @private
    */
   MaterialLayout.prototype.Constant_ = {
@@ -51,7 +52,7 @@
   /**
    * Modes.
    *
-   * @enum {Number}
+   * @enum {number}
    * @private
    */
   MaterialLayout.prototype.Mode_ = {
@@ -66,7 +67,7 @@
    * JavaScript. This allows us to simply change it in one place should we
    * decide to modify at a later date.
    *
-   * @enum {String}
+   * @enum {string}
    * @private
    */
   MaterialLayout.prototype.CssClasses_ = {
@@ -244,7 +245,8 @@
 
       // Keep an eye on screen size, and add/remove auxiliary class for styling
       // of small screens.
-      this.screenSizeMediaQuery_ = window.matchMedia(this.Constant_.MAX_WIDTH);
+      this.screenSizeMediaQuery_ = window.matchMedia(
+          /** @type {string} */ (this.Constant_.MAX_WIDTH));
       this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this));
       this.screenSizeHandler_();
 
@@ -284,6 +286,10 @@
         }
       }
 
+      /**
+       * Prevents an event from triggering the default behaviour.
+       * @param  {Event} ev the event to eat.
+       */
       var eatEvent = function(ev) {
         ev.preventDefault();
       };
@@ -402,6 +408,15 @@
     }
   };
 
+  /**
+   * Constructor for an individual tab.
+   *
+   * @constructor
+   * @param {HTMLElement} tab The HTML element for the tab.
+   * @param {!Array<HTMLElement>} tabs Array with HTML elements for all tabs.
+   * @param {!Array<HTMLElement>} panels Array with HTML elements for all panels.
+   * @param {MaterialLayout} layout The MaterialLayout object that owns the tab.
+   */
   function MaterialLayoutTab(tab, tabs, panels, layout) {
     if (tab) {
       if (layout.tabBar_.classList.contains(