Adding eslintrc and add linting

.eslintrc

@@ -0,0 +1,131 @@
+{
+  "env": {
+    "browser": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module"
+  },
+  "rules": {
+    "no-cond-assign": 0, // eslint:recommended
+    "no-console": 2, // eslint:recommended
+    "no-constant-condition": 2, // eslint:recommended
+    "no-control-regex": 2, // eslint:recommended
+    "no-debugger": 2, // eslint:recommended
+    "no-dupe-args": 2, // eslint:recommended
+    "no-dupe-keys": 2, // eslint:recommended
+    "no-duplicate-case": 2, // eslint:recommended
+    "no-empty-character-class": 2, // eslint:recommended
+    "no-empty": [2, {
+      "allowEmptyCatch": true
+    }], // eslint:recommended
+    "no-ex-assign": 2, // eslint:recommended
+    "no-extra-boolean-cast": 2, // eslint:recommended
+    "no-extra-semi": 2, // eslint:recommended
+    "no-func-assign": 2, // eslint:recommended
+    "no-inner-declarations": 2, // eslint:recommended
+    "no-invalid-regexp": 2, // eslint:recommended
+    "no-irregular-whitespace": 2, // eslint:recommended
+    "no-obj-calls": 2, // eslint:recommended
+    "no-regex-spaces": 2, // eslint:recommended
+    "no-sparse-arrays": 2, // eslint:recommended
+    "no-unexpected-multiline": 2, // eslint:recommended
+    "no-unreachable": 2, // eslint:recommended
+    "no-unsafe-finally": 2, // eslint:recommended
+    "use-isnan": 2,
+    "valid-jsdoc": [2, {
+      "requireParamDescription": false,
+      "requireReturnDescription": false,
+      "requireReturn": false,
+      "prefer": {"returns": "return"}
+    }],
+    "valid-typeof": 2,
+
+    // Best Practices
+    "eqeqeq": 0,
+    "guard-for-in": 2,
+    "no-alert": 0,
+    "no-caller": 2,
+    "no-case-declarations": 2, // eslint:recommended
+    "no-empty-pattern": 2, // eslint:recommended
+    "no-extend-native": 2,
+    "no-extra-bind": 2,
+    "no-fallthrough": 2, // eslint:recommended
+    "no-invalid-this": 2,
+    "no-multi-spaces": 2,
+    "no-multi-str": 2,
+    "no-new-wrappers": 2,
+    "no-octal": 2, // eslint:recommended
+    "no-redeclare": 2, // eslint:recommended
+    "no-self-assign": 2, // eslint:recommended
+    "no-throw-literal": 2, // eslint:recommended
+    "no-unused-labels": 2, // eslint:recommended
+    "no-with": 2,
+    "no-delete-var": 2, // eslint:recommended
+    "no-undef": 2, // eslint:recommended
+    "no-unused-vars": [2, {"args": "none"}],
+    // Stylistic Issues
+    // ----------------------------------------------
+    "array-bracket-spacing": [2, "never"],
+    "brace-style": 2,
+    "camelcase": [2, {"properties": "never"}],
+    "comma-dangle": [2, "never"],
+    "comma-spacing": 2,
+    "comma-style": 2,
+    "computed-property-spacing": 2,
+    "eol-last": 2,
+    "func-call-spacing": 2,
+    "key-spacing": 2,
+    "keyword-spacing": 0,
+    "linebreak-style": 2,
+    "new-cap": 2,
+    "no-array-constructor": 2,
+    "no-mixed-spaces-and-tabs": 2, // eslint:recommended
+    "no-multiple-empty-lines": [2, {"max": 2}],
+    "no-new-object": 2,
+    "no-trailing-spaces": 2,
+    "object-curly-spacing": 2,
+    "one-var": [2, {
+      "var": "never",
+      "let": "never",
+      "const": "never"
+    }],
+    "padded-blocks": [2, "never"],
+    "quote-props": [2, "consistent"],
+    "quotes": [2, "single", {"allowTemplateLiterals": true}],
+    "require-jsdoc": [2, {
+      "require": {
+        "FunctionDeclaration": true,
+        "MethodDefinition": true,
+        "ClassDeclaration": true
+      }
+    }],
+    "semi-spacing": 2,
+    "semi": 2,
+    "space-before-blocks": 2,
+    "space-before-function-paren": [2, "never"],
+    "spaced-comment": [2, "always"],
+
+    // ECMAScript 6
+    // http://eslint.org/docs/rules/#ecmascript-6
+    // ------------------------------------------
+    "arrow-parens": [2, "as-needed"],
+    "constructor-super": 2, // eslint:recommended
+    "generator-star-spacing": [2, "after"],
+    "no-const-assign": 0, // eslint:recommended
+    "no-dupe-class-members": 0, // eslint:recommended
+    "no-new-symbol": 2, // eslint:recommended
+    "no-this-before-super": 2,  // eslint:recommended
+    "no-var": 2,
+    "prefer-rest-params": 2,
+    "prefer-spread": 2,
+    "prefer-const": 2,
+    "prefer-arrow-callback": 2,
+    "prefer-template": 2,
+    "require-yield": 2, // eslint:recommended
+    "rest-spread-spacing": 2,
+    "yield-star-spacing": [2, "after"]
+  }
+}
+
+

package.json

@@ -33,6 +33,8 @@
     "babel-loader": "^6.4.0",
     "babel-preset-env": "^1.2.1",
     "babel-preset-es2015": "^6.22.0",
+    "eslint": "^3.17.1",
+    "eslint-loader": "^1.6.3",
     "npm-run-all": "^4.0.2",
     "rimraf": "^2.6.1",
     "smart-banner-webpack-plugin": "^3.0.1",

src/js/modules/webslides.js

@@ -18,6 +18,10 @@ const PLUGINS = {
   'touch': Plugins.Touch
 };
 
+
+/**
+ * WebSlides module.
+ */
 export default class WebSlides {
   /**
    * Options for WebSlides
@@ -144,8 +148,8 @@ export default class WebSlides {
    */
   createPlugins_() {
     Object.keys(PLUGINS).forEach(pluginName => {
-      const pluginCto = PLUGINS[pluginName];
-      this.plugins[pluginName] = new pluginCto(this);
+      const PluginCto = PLUGINS[pluginName];
+      this.plugins[pluginName] = new PluginCto(this);
     });
   }
 
@@ -232,7 +236,9 @@ export default class WebSlides {
       }
 
       this.el.style.overflow = 'auto';
-      setTimeout(() => { callback.call(this, nextSlide); }, 150);
+      setTimeout(() => {
+        callback.call(this, nextSlide);
+      }, 150);
     });
   }
 

src/js/plugins/click-nav.js

@@ -7,6 +7,9 @@ const CLICKABLE_ELS = [
   'TEXTAREA'
 ];
 
+/**
+ * Click to Nav plugin.
+ */
 export default class ClickNav {
   /**
    * ClickNav plugin that allows to click on the page to get to the next slide.

src/js/plugins/grid.js

@@ -1,5 +1,8 @@
 import Keys from '../utils/keys';
 
+/**
+ * Grid plugin.
+ */
 export default class Grid {
   /**
    * Grid plugin that shows a grid on top of the WebSlides for easy prototyping.
@@ -20,7 +23,7 @@ export default class Grid {
 
     style.type = 'text/css';
 
-    if (style.styleSheet){
+    if (style.styleSheet) {
       style.styleSheet.cssText = CSS;
     } else {
       style.appendChild(document.createTextNode(CSS));

src/js/plugins/hash.js

@@ -8,7 +8,7 @@ const slideRegex = /#slide=(\d+)/;
 export default class Hash {
   /**
    * Listens to the slide change event and the hash change events.
-   * @param wsInstance
+   * @param {WebSlides} wsInstance
    */
   constructor(wsInstance) {
     this.ws_ = wsInstance;
@@ -29,6 +29,11 @@ export default class Hash {
     }
   }
 
+  /**
+   * Handler for the slide change event which updates the slide on the hash.
+   * @param {Event} event
+   * @private
+   */
   static onSlideChange_(event) {
     Hash.setSlideNumber(event.detail.currentSlide);
   }
@@ -40,7 +45,7 @@ export default class Hash {
    * @return {?number}
    */
   static getSlideNumber() {
-    let results = document.location.hash.match(slideRegex);
+    const results = document.location.hash.match(slideRegex);
     let slide = 0;
 
     if (Array.isArray(results)) {

src/js/plugins/keyboard.js

@@ -1,5 +1,8 @@
 import Keys from '../utils/keys';
 
+/**
+ * Keyboard plugin.
+ */
 export default class Keyboard {
   /**
    * Keyboard interaction plugin.

src/js/plugins/navigation.js

@@ -18,6 +18,9 @@ const LABELS = {
   }
 };
 
+/**
+ * Navigation plugin.
+ */
 export default class Navigation {
   /**
    * The Navigation constructor. It'll create all the nodes needed for the

src/js/plugins/scroll.js

@@ -1,5 +1,9 @@
 import MobileDetector from '../utils/mobile-detector';
 
+
+/**
+ * Scroll plugin.
+ */
 export default class Scroll {
   /**
    * Scroll handler for the WebSlides.
@@ -54,7 +58,9 @@ export default class Scroll {
    */
   onSlideChange_() {
     this.timeout_ = setTimeout(
-        () => { this.timeout_ = null; },
+        () => {
+          this.timeout_ = null;
+        },
         this.ws_.options.scrollWait);
   }
 
@@ -70,7 +76,7 @@ export default class Scroll {
       return;
     }
 
-    const { deltaY: wheelDeltaY, deltaX: wheelDeltaX } = event;
+    const {deltaY: wheelDeltaY, deltaX: wheelDeltaX} = event;
     const isVertical = this.ws_.isVertical;
     const isHorizontalMovement = Math.abs(wheelDeltaX) > Math.abs(wheelDeltaY);
     this.isGoingUp_ = wheelDeltaY < 0;
@@ -100,4 +106,4 @@ export default class Scroll {
       event.preventDefault();
     }
   }
-};
+}

src/js/plugins/touch.js

@@ -13,6 +13,9 @@ const EVENTS = {
   }
 };
 
+/**
+ * Touch plugin.
+ */
 export default class Touch {
   /**
    * @param {WebSlides} wsInstance The WebSlides instance
@@ -80,7 +83,7 @@ export default class Touch {
 
   /**
    * Start touch handler. Saves starting points.
-   * @param event
+   * @param {Event} event The Touch event.
    * @private
    */
   onStart_(event) {
@@ -94,7 +97,7 @@ export default class Touch {
 
   /**
    * Move touch handler. Saves end points.
-   * @param event
+   * @param {Event} event The Touch event.
    * @private
    */
   onMove_(event) {
@@ -125,25 +128,22 @@ export default class Touch {
   /**
    * Normalizes an event to deal with differences between PointerEvent and
    * TouchEvent.
-   * @param event
-   * @return {*}
+   * @param {Event} event
+   * @return {Object} Normalised touch points.
    */
   static normalizeEventInfo(event) {
-    let x;
-    let y;
-    let touchEvent = { pageX : 0, pageY : 0};
+    let touchEvent = {pageX: 0, pageY: 0};
 
-    if (typeof event.changedTouches !== 'undefined'){
+    if (typeof event.changedTouches !== 'undefined') {
       touchEvent = event.changedTouches[0];
-    }
-    else if (typeof event.originalEvent !== 'undefined' &&
-        typeof event.originalEvent.changedTouches !== 'undefined'){
+    } else if (typeof event.originalEvent !== 'undefined' &&
+        typeof event.originalEvent.changedTouches !== 'undefined') {
       touchEvent = event.originalEvent.changedTouches[0];
     }
 
-    x = event.offsetX || event.layerX || touchEvent.pageX;
-    y = event.offsetY || event.layerY || touchEvent.pageY;
+    const x = event.offsetX || event.layerX || touchEvent.pageX;
+    const y = event.offsetY || event.layerY || touchEvent.pageY;
 
-    return { x, y };
+    return {x, y};
   }
-};
+}

src/js/utils/custom-event.js

@@ -5,12 +5,16 @@ const NativeCustomEvent = window.CustomEvent;
  * completely on IE.
  * @return {boolean} Whether it can be used or not.
  */
-function canIuseNativeCustom () {
+function canIuseNativeCustom() {
   try {
-    const p = new NativeCustomEvent('t', { detail: { a: 'b' } });
-    return  't' === p.type && 'b' === p.detail.a;
-  } catch (e) {
+    const p = new NativeCustomEvent('t', {
+      detail: {
+        a: 'b'
       }
+    });
+    return 't' === p.type && 'b' === p.detail.a;
+  } catch (e) { }
+
   return false;
 }
 

src/js/utils/easing.js

@@ -3,7 +3,7 @@
  * @param {number} p The percentage of time that has passed.
  * @return {number}
  */
-function swing (p) {
+function swing(p) {
   return 0.5 - Math.cos(p * Math.PI) / 2;
 }
 
@@ -16,4 +16,4 @@ function linear(p) {
   return p;
 }
 
-export default { swing, linear };
+export default {swing, linear};

src/js/utils/mobile-detector.js

@@ -1,5 +1,9 @@
 const UA = window.navigator.userAgent;
 
+/**
+ * Mobile detector helper class. Tests the User Agent to see if we're, likely,
+ * on a mobile device.
+ */
 export default class MobileDetector {
   /**
    * Whether the device is Android or not.

src/js/utils/scroll-to.js

@@ -1,6 +1,6 @@
 import Easings from './easing';
 
-let SCROLLABLE_CONTAINER = document.getElementById('webslides');
+const SCROLLABLE_CONTAINER = document.getElementById('webslides');
 
 /**
  * Smoothly scrolls to a given Y position using Easing.Swing. It'll run a

webpack.config.babel.js

@@ -22,7 +22,10 @@ module.exports = {
     rules: [
       {
         test: /\.js$/,
-        loader: 'babel-loader',
+        use: [
+          'babel-loader',
+          'eslint-loader',
+        ],
         include: src
       }
     ]