From 46cfbf9e3ac1b62c59e8c208d5d9d92b63b10da4 Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Sun, 12 Mar 2017 00:44:11 +0100 Subject: [PATCH] Adding eslintrc and add linting --- .eslintrc | 131 ++++++++++++++++++++++++++++++++ package.json | 2 + src/js/modules/webslides.js | 12 ++- src/js/plugins/click-nav.js | 3 + src/js/plugins/grid.js | 5 +- src/js/plugins/hash.js | 9 ++- src/js/plugins/keyboard.js | 3 + src/js/plugins/navigation.js | 3 + src/js/plugins/scroll.js | 12 ++- src/js/plugins/touch.js | 30 ++++---- src/js/utils/custom-event.js | 14 ++-- src/js/utils/easing.js | 4 +- src/js/utils/mobile-detector.js | 4 + src/js/utils/scroll-to.js | 2 +- webpack.config.babel.js | 5 +- 15 files changed, 206 insertions(+), 33 deletions(-) create mode 100644 .eslintrc diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..64b81c9 --- /dev/null +++ b/.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"] + } +} + + diff --git a/package.json b/package.json index 3b707ce..7e2d8a0 100644 --- a/package.json +++ b/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", diff --git a/src/js/modules/webslides.js b/src/js/modules/webslides.js index ebedb4a..39f51f1 100644 --- a/src/js/modules/webslides.js +++ b/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); }); } diff --git a/src/js/plugins/click-nav.js b/src/js/plugins/click-nav.js index 0e54258..4b5acb9 100644 --- a/src/js/plugins/click-nav.js +++ b/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. diff --git a/src/js/plugins/grid.js b/src/js/plugins/grid.js index f40ad28..3cbbd93 100644 --- a/src/js/plugins/grid.js +++ b/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)); diff --git a/src/js/plugins/hash.js b/src/js/plugins/hash.js index 43f834f..a237c44 100644 --- a/src/js/plugins/hash.js +++ b/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)) { diff --git a/src/js/plugins/keyboard.js b/src/js/plugins/keyboard.js index f8b5d61..ac27e15 100644 --- a/src/js/plugins/keyboard.js +++ b/src/js/plugins/keyboard.js @@ -1,5 +1,8 @@ import Keys from '../utils/keys'; +/** + * Keyboard plugin. + */ export default class Keyboard { /** * Keyboard interaction plugin. diff --git a/src/js/plugins/navigation.js b/src/js/plugins/navigation.js index 59178f4..e60da06 100644 --- a/src/js/plugins/navigation.js +++ b/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 diff --git a/src/js/plugins/scroll.js b/src/js/plugins/scroll.js index 4bbb1a0..a1a3784 100644 --- a/src/js/plugins/scroll.js +++ b/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(); } } -}; +} diff --git a/src/js/plugins/touch.js b/src/js/plugins/touch.js index 91d9ea9..2af3e33 100644 --- a/src/js/plugins/touch.js +++ b/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}; } -}; +} diff --git a/src/js/utils/custom-event.js b/src/js/utils/custom-event.js index 587af72..e032cde 100644 --- a/src/js/utils/custom-event.js +++ b/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; } diff --git a/src/js/utils/easing.js b/src/js/utils/easing.js index 4cbc293..9e15b77 100644 --- a/src/js/utils/easing.js +++ b/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}; diff --git a/src/js/utils/mobile-detector.js b/src/js/utils/mobile-detector.js index 83d403f..9beb94d 100644 --- a/src/js/utils/mobile-detector.js +++ b/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. diff --git a/src/js/utils/scroll-to.js b/src/js/utils/scroll-to.js index 41fdbe2..6bf4b7a 100644 --- a/src/js/utils/scroll-to.js +++ b/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 diff --git a/webpack.config.babel.js b/webpack.config.babel.js index 8c44bee..28401d4 100644 --- a/webpack.config.babel.js +++ b/webpack.config.babel.js @@ -22,7 +22,10 @@ module.exports = { rules: [ { test: /\.js$/, - loader: 'babel-loader', + use: [ + 'babel-loader', + 'eslint-loader', + ], include: src } ]