chore: replace pragmatist (#86)

* style: sort entries in gitignore

* chore: add .editorconfig

* style: sort package.json

* chore: replace Pragmatist build with Babel

* chore: replace Pragmatist test with Mocha

* chore: replace Pragmatist lint with ESLint

* chore: remove Pragmatist

* chore: move ./tests to ./test

* style: fix style

* docs: fix docs

* chore: add a precommit hook

* chore: fix .travis.yml

* chore: add commitmsg hook

* feat: use semantic-release

BREAKING CHANGE: Unreleased changes from previous PRs potentially introduce breaking changes.

.babelrc

@@ -0,0 +1,8 @@
+{
+  "plugins": [
+    "add-module-exports"
+  ],
+  "presets": [
+    "es2015"
+  ]
+}

.conventional-changelog-lintrc

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "canonical"
+  ]
+}

.editorconfig

@@ -0,0 +1,7 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2

.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": [
+    "canonical",
+    "canonical/lodash"
+  ]
+}

.gitignore

@@ -1,9 +1,12 @@
-node_modules
 coverage
 dist
+node_modules
 *.log
 .*
+!.babelrc
+!.conventional-changelog-lintrc
+!.editorconfig
+!.eslintrc
 !.gitignore
 !.npmignore
-!.babelrc
 !.travis.yml

.travis.yml

@@ -1,11 +1,14 @@
 language: node_js
 node_js:
-    - '0.11'
-    - '0.10'
-matrix:
-    allow_failures:
-        - node_js: '0.11'
-install:
-    - npm install
+  - 7
+  - 6
+  - 5
+  - 4
+scripts:
+  - npm run test
+  - npm run lint
+  - npm run build
+after_success:
+  - npm run semantic-release
 notifications:
-    email: false
+  email: false

README.md

@@ -13,18 +13,18 @@ Give it a [swing](http://gajus.com/sandbox/swing/examples/card-stack/)! and plea
 ## Contents
 
 * [Usage Examples](#usage-examples)
-    * [Use Case](#use-case)
-        * [Single-Handed Navigation](#single-handed-navigation)
-        * [Digestible Unit of Information](#digestible-unit-of-information)
-        * [Data](#data)
+  * [Use Case](#use-case)
+    * [Single-Handed Navigation](#single-handed-navigation)
+    * [Digestible Unit of Information](#digestible-unit-of-information)
+    * [Data](#data)
 * [Quick Start](#quick-start)
 * [Configuration](#configuration)
 * [Methods](#methods)
-    * [Throwing Card Out of the Stack](#throwing-card-out-of-the-stack)
+  * [Throwing Card Out of the Stack](#throwing-card-out-of-the-stack)
 * [Events](#events)
-    * [Event Object](#event-object)
+  * [Event Object](#event-object)
 * [Download](#download)
-    * [Browser Bundle](#browser-bundle)
+  * [Browser Bundle](#browser-bundle)
 * [Dependencies](#dependencies)
 
 ## Usage Examples
@@ -66,9 +66,9 @@ A collection of observations about the extended use case of the swipeable cards
 
 ```html
 <ul>
-    <li></li>
-    <li></li>
-    <li></li>
+  <li></li>
+  <li></li>
+  <li></li>
 </ul>
 ```
 
@@ -80,41 +80,45 @@ const cards = [].slice.call(document.querySelectorAll('ul li'));
 const stack = Swing.Stack();
 
 cards.forEach((targetElement) => {
-    // Add card element to the Stack.
-    stack.createCard(targetElement);
+  // Add card element to the Stack.
+  stack.createCard(targetElement);
 });
 
 // Add event listener for when a card is thrown out of the stack.
 stack.on('throwout', (event) => {
-    // e.target Reference to the element that has been thrown out of the stack.
-    // e.throwDirection Direction in which the element has been thrown (Card.DIRECTION_LEFT, Card.DIRECTION_RIGHT).
+  // e.target Reference to the element that has been thrown out of the stack.
+  // e.throwDirection Direction in which the element has been thrown (Card.DIRECTION_LEFT, Card.DIRECTION_RIGHT).
 
-    console.log('Card has been thrown out of the stack.');
-    console.log('Throw direction: ' + (event.throwDirection == Card.DIRECTION_LEFT ? 'left' : 'right'));
+  console.log('Card has been thrown out of the stack.');
+  console.log('Throw direction: ' + (event.throwDirection == Card.DIRECTION_LEFT ? 'left' : 'right'));
 });
 
 // Add event listener for when a card is thrown in the stack, including the spring back into place effect.
 stack.on('throwin', () => {
-    console.log('Card has snapped back to the stack.');
+  console.log('Card has snapped back to the stack.');
 });
 ```
 
 ## Configuration
 
 ```js
 const config = {
-    /**
-     * Invoked in the event of dragmove.
-     * Returns a value between 0 and 1 indicating the completeness of the throw out condition.
-     * Ration of the absolute distance from the original card position and element width.
-     *
-     * @param {Number} offset Distance from the dragStart.
-     * @param {HTMLElement} element Element.
-     * @return {Number}
-     */
-    throwOutConfidence: (offset, element) => {
-        return Math.min(Math.abs(offset) / element.offsetWidth, 1);
-    }
+  /**
+   * Invoked in the event of dragmove.
+   * Returns a value between 0 and 1 indicating the completeness of the throw out condition.
+   * Ration of the absolute distance from the original card position and element width.
+   *
+   * @param {number} xOffset Distance from the dragStart.
+   * @param {number} yOffset Distance from the dragStart.
+   * @param {HTMLElement} element Element.
+   * @returns {number}
+   */
+  throwOutConfidence: (xOffset, yOffset, element) => {
+    const xConfidence = Math.min(Math.abs(xOffset) / element.offsetWidth, 1);
+    const yConfidence = Math.min(Math.abs(yOffset) / element.offsetHeight, 1);
+
+    return Math.max(xConfidence, yConfidence);
+  }
 };
 
 const stack = stack = Swing.Stack(config);
@@ -123,7 +127,7 @@ const stack = stack = Swing.Stack(config);
 | Name | Description | Default |
 | --- | --- | --- |
 | `isThrowOut` | Invoked in the event of `dragend`. Determines if element is being thrown out of the stack. | Element is considered to be thrown out when `throwOutConfidence` is equal to 1. |
-| `allowedDirections` | Array of directions in which cards can be thrown out. | [Direction.LEFT, Direction.RIGHT]. |
+| `allowedDirections` | Array of directions in which cards can be thrown out. | [Direction.DOWN, Direction.LEFT, Direction.RIGHT, Direction.UP]. |
 | `throwOutConfidence` | Invoked in the event of `dragmove`. Returns a value between 0 and 1 indicating the completeness of the throw out condition. | Ration of the absolute distance from the original card position and element width. |
 | `throwOutDistance` | Invoked when card is added to the stack. The card is thrown to this offset from the stack. | The value is a random number between `minThrowOutDistance` and `maxThrowOutDistance`. |
 | `minThrowOutDistance` | In effect when `throwOutDistance` is not overwritten. | 450. |
@@ -147,20 +151,20 @@ const card = stack.createCard(HTMLElement);
 | `stack.getCard(element)` | Returns card associated with an element. |
 | `stack.on(event, listener)` | Attaches an [event listener](#events). |
 | `card.on(event, listener)` | Attaches an [event listener](#events). |
-| `card.throwIn(x, y)` | Throws a card into the stack from an arbitrary position. `x, y` is the position at the start of the throw. |
-| `card.throwOut(x, y)` | Throws a card out of the stack in the direction away from the original offset. `x, y` is the position at the start of the throw. |
+| `card.throwIn(coordinateX, coordinateY)` | Throws a card into the stack from an arbitrary position. `coordinateX, coordinateY` is the position at the start of the throw. |
+| `card.throwOut(coordinateX, coordinateY)` | Throws a card out of the stack in the direction away from the original offset. `coordinateX, coordinateY` is the position at the start of the throw. |
 | `card.destroy()` | Unbinds all Hammer.Manager events. Removes the listeners from the physics simulation. |
 
 ### Throwing Card Out of the Stack
 
-Use the `card.throwOut(x, y)` method to throw the card out of the stack. Offset the position to whatever direction you want to throw the card, e.g.
+Use the `card.throwOut(coordinateX, coordinateY)` method to throw the card out of the stack. Offset the position to whatever direction you want to throw the card, e.g.
 
 ```js
 card.throwOut(Card.DIRECTION_LEFT, 0);
 card.throwOut(Card.DIRECTION_RIGHT, 0);
 ```
 
-To make the animation more diverse, use random value for the `y` parameter.
+To make the animation more diverse, use random value for the `coordinateY` parameter.
 
 ## Events
 
@@ -171,16 +175,18 @@ const stack = Swing.Stack();
 
 const card = stack.createCard(HTMLElement);
 
-card.on('throwout', function () {});
-stack.on('throwout', function () {});
+card.on('throwout', () => {});
+stack.on('throwout', () => {});
 ```
 
 | Name | Description |
 | --- | --- |
 | `throwout` | When card has been thrown out of the stack. |
 | `throwoutend` | When card has been thrown out of the stack and the animation has ended. |
+| `throwoutdown` | Shorthand for `throwout` event in the `Card.DIRECTION_DOWN` direction. |
 | `throwoutleft` | Shorthand for `throwout` event in the `Card.DIRECTION_LEFT` direction. |
 | `throwoutright` | Shorthand for `throwout` event in the `Card.DIRECTION_RIGHT` direction. |
+| `throwoutup` | Shorthand for `throwout` event in the `Card.DIRECTION_UP` direction. |
 | `throwin` | When card has been thrown into the stack. |
 | `throwinend` | When card has been thrown into the stack and the animation has ended. |
 | `dragstart` | Hammer [panstart](http://hammerjs.github.io/recognizer-pan/). |
@@ -194,19 +200,11 @@ Event listener is invoked with a single `eventObject` parameter:
 ```js
 const stack = Swing.Stack();
 
-stack.on('throwout', function (eventObject) {});
+stack.on('throwout', (eventObject) => {});
 ```
 
 | Name | Value |
 | --- | --- |
 | `target` | The element being dragged. |
-| `direction` | The direction in which the element is being dragged: `Card.DIRECTION_LEFT` or `Card.DIRECTION_RIGHT`. |
+| `direction` | The direction in which the element is being dragged: `Card.DIRECTION_DOWN`, `Card.DIRECTION_LEFT`, `Card.DIRECTION_RIGHT` or `Card.DIRECTION_UP`. |
 | `throwOutConfidence` | A value between 0 and 1 indicating the completeness of the throw out condition. |
-
-## Download
-
-Using [NPM](https://www.npmjs.org/):
-
-```sh
-npm install swing
-```

examples/card-state/index.html

@@ -3,11 +3,11 @@
 <head>
     <meta charset="utf-8">
 
-    <link rel="stylesheet" href="./../card-stack/card-stack.css">
+    <link rel="stylesheet" href="../card-stack/card-stack.css">
 
     <link rel="icon" href="data:;base64,iVBORw0KGgo=">
 
-    <script src="./../../dist/browser/swing.js"></script>
+    <script src="../../dist/browser/swing.js"></script>
     <script src="./card-state.js"></script>
 </head>
 <body>

package.json

@@ -1,47 +1,57 @@
 {
-  "name": "swing",
-  "description": "A swipeable cards interface. The swipe-left/swipe-right for yes/no input. As seen in apps like Jelly and Tinder.",
-  "keywords": [
-    "swipe",
-    "cards",
-    "swipeable"
-  ],
-  "version": "3.0.3",
-  "main": "./dist/index.js",
   "author": {
-    "name": "Gajus Kuizinas",
     "email": "gajus@gajus.com",
+    "name": "Gajus Kuizinas",
     "url": "http://gajus.com"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/gajus/swing"
+  "dependencies": {
+    "hammerjs": "^2.0.4",
+    "lodash": "^4.6.1",
+    "raf": "^3.1.0",
+    "rebound": "^0.0.13",
+    "sister": "^3.0.0",
+    "vendor-prefix": "^0.1.0"
   },
-  "license": "BSD-3-Clause",
+  "description": "A swipeable cards interface. The swipe-left/swipe-right for yes/no input. As seen in apps like Jelly and Tinder.",
   "devDependencies": {
+    "babel": "^6.5.2",
+    "babel-cli": "^6.18.0",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-register": "^6.18.0",
     "chai": "^3.2.0",
+    "conventional-changelog-cli": "^1.2.0",
+    "conventional-changelog-lint": "^1.1.0",
+    "conventional-changelog-lint-config-canonical": "^1.0.0",
+    "eslint": "^3.9.1",
+    "eslint-config-canonical": "^5.0.0",
+    "husky": "^0.11.9",
     "jsdom": "^6.3.0",
     "jsonfile": "^2.2.1",
-    "pragmatist": "^3.0.21",
+    "mocha": "^3.1.2",
+    "semantic-release": "^4.3.5",
     "sinon": "^1.16.1",
     "webpack": "^1.12.1"
   },
-  "dependencies": {
-    "hammerjs": "^2.0.4",
-    "lodash": "^4.6.1",
-    "raf": "^3.1.0",
-    "rebound": "^0.0.13",
-    "sister": "^3.0.0",
-    "vendor-prefix": "^0.1.0"
+  "keywords": [
+    "swipe",
+    "cards",
+    "swipeable"
+  ],
+  "license": "BSD-3-Clause",
+  "main": "./dist/index.js",
+  "name": "swing",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gajus/swing"
   },
   "scripts": {
-    "pragmatist": "pragmatist --es5",
-    "lint": "npm run pragmatist lint",
-    "test": "npm run pragmatist test",
-    "build": "npm run pragmatist build",
-    "watch": "npm run pragmatist watch",
-    "watch-lint": "npm run pragmatist watch-lint",
-    "watch-test": "npm run pragmatist watch-test",
-    "watch-build": "npm run pragmatist watch-build"
-  }
+    "build": "babel ./src --out-dir ./dist --copy-files",
+    "commitmsg": "conventional-changelog-lint -e",
+    "lint": "eslint ./src ./test",
+    "precommit": "npm run lint && npm run test",
+    "semantic-release": "semantic-release pre && npm publish && semantic-release post",
+    "test": "mocha --compilers js:babel-register"
+  },
+  "version": "3.0.3"
 }