8000 chore: replace pragmatist (#86) · gajus/swing@aa7fbf1 · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit aa7fbf1

Browse files
gajusgajus
authored
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.
1 parent 81045ac commit aa7fbf1

16 files changed

+888
-864
lines changed

‎.babelrc

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"plugins": [
3+
"add-module-exports"
4+
],
5+
"presets": [
6+
"es2015"
7+
]
8+
}

‎.conventional-changelog-lintrc

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"extends": [
3+
"canonical"
4+
]
5+
}

‎.editorconfig

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
root = true
2+
3+
[*]
4+
end_of_line = lf
5+
insert_final_newline = true
6+
indent_style = space
7+
indent_size = 2

‎.eslintrc

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"extends": [
3+
"canonical",
4+
"canonical/lodash"
5+
]
6+
}

‎.gitignore

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1-
node_modules
21
coverage
32
dist
3+
node_modules
44
*.log
55
.*
6+
!.babelrc
7+
!.conventional-changelog-lintrc
8+
!.editorconfig
9+
!.eslintrc
610
!.gitignore
711
!.npmignore
8-
!.babelrc
912
!.travis.yml

‎.travis.yml

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
language: node_js
22
node_js:
3-
- '0.11'
4-
- '0.10'
5-
matrix:
6-
allow_failures:
7-
- node_js: '0.11'
8-
install:
9-
- npm install
3+
- 7
4+
- 6
5+
- 5
6+
- 4
7+
scripts:
8+
- npm run test
9+
- npm run lint
10+
- npm run build
11+
after_success:
12+
- npm run semantic-release
1013
notifications:
11-
email: false
14+
email: false

‎README.md

Lines changed: 44 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,18 @@ Give it a [swing](http://gajus.com/sandbox/swing/examples/card-stack/)! and plea
1313
## Contents
1414

1515
* [Usage Examples](#usage-examples)
16-
* [Use Case](#use-case)
17-
* [Single-Handed Navigation](#single-handed-navigation)
18-
* [Digestible Unit of Information](#digestible-unit-of-information)
19-
* [Data](#data)
16+
* [Use Case](#use-case)
17+
* [Single-Handed Navigation](#single-handed-navigation)
18+
* [Digestible Unit of Information](#digestible-unit-of-information)
19+
* [Data](#data)
2020
* [Quick Start](#quick-start)
2121
* [Configuration](#configuration)
2222
* [Methods](#methods)
23-
* [Throwing Card Out of the Stack](#throwing-card-out-of-the-stack)
23+
* [Throwing Card Out of the Stack](#throwing-card-out-of-the-stack)
2424
* [Events](#events)
25-
* [Event Object](#event-object)
25+
* [Event Object](#event-object)
2626
* [Download](#download)
27-
* [Browser Bundle](#browser-bundle)
27+
* [Browser Bundle](#browser-bundle)
2828
* [Dependencies](#dependencies)
2929

3030
## Usage Examples
@@ -66,9 +66,9 @@ A collection of observations about the extended use case of the swipeable cards
6666

6767
```html
6868
<ul>
69-
<li></li>
70-
<li></li>
71-
<li></li>
69+
<li></li>
70+
<li></li>
71+
<li></li>
7272
</ul>
7373
```
7474

@@ -80,41 +80,45 @@ const cards = [].slice.call(document.querySelectorAll('ul li'));
8080
const stack = Swing.Stack();
8181

8282
cards.forEach((targetElement) => {
83-
// Add card element to the Stack.
84-
stack.createCard(targetElement);
83+
// Add card element to the Stack.
84+
stack.createCard(targetElement);
8585
});
8686

8787
// Add event listener for when a card is thrown out of the stack.
8888
stack.on('throwout', (event) => {
89-
// e.target Reference to the element that has been thrown out of the stack.
90-
// e.throwDirection Direction in which the element has been thrown (Card.DIRECTION_LEFT, Card.DIRECTION_RIGHT).
89+
// e.target Reference to the element that has been thrown out of the stack.
90+
// e.throwDirection Direction in which the element has been thrown (Card.DIRECTION_LEFT, Card.DIRECTION_RIGHT).
9191

92-
console.log('Card has been thrown out of the stack.');
93-
console.log('Throw direction: ' + (event.throwDirection == Card.DIRECTION_LEFT ? 'left' : 'right'));
92+
console.log('Card has been thrown out of the stack.');
93+
console.log('Throw direction: ' + (event.throwDirection == Card.DIRECTION_LEFT ? 'left' : 'right'));
9494
});
9595

9696
// Add event listener for when a card is thrown in the stack, including the spring back into place effect.
9797
stack.on('throwin', () => {
98-
console.log('Card has snapped back to the stack.');
98+
console.log('Card has snapped back to the stack.');
9999
});
100100
```
101101

102102
## Configuration
103103

104104
```js
105105
const config = {
106-
/**
107-
* Invoked in the event of dragmove.
108-
* Returns a value between 0 and 1 indicating the completeness of the throw out condition.
109-
* Ration of the absolute distance from the original card position and element width.
110-
*
111-
* @param {Number} offset Distance from the dragStart.
112-
* @param {HTMLElement} element Element.
113-
* @return {Number}
114-
*/
115-
throwOutConfidence: (offset, element) => {
116-
return Math.min(Math.abs(offset) / element.offsetWidth, 1);
117-
}
106+
/**
107+
* Invoked in the event of dragmove.
108+
* Returns a value between 0 and 1 indicating the completeness of the throw out condition.
109+
* Ration of the absolute distance from the original card position and element width.
110+
*
111+
* @param {number} xOffset Distance from the dragStart.
112+
* @param {number} yOffset Distance from the dragStart.
113+
* @param {HTMLElement} element Element.
114+
* @returns {number}
115+
*/
116+
throwOutConfidence: (xOffset, yOffset, element) => {
117+
const xConfidence = Math.min(Math.abs(xOffset) / element.offsetWidth, 1);
118+
const yConfidence = Math.min(Math.abs(yOffset) / element.offsetHeight, 1);
119+
120+
return Math.max(xConfidence, yConfidence);
121+
}
118122
};
119123

120124
const stack = stack = Swing.Stack(config);
@@ -123,7 +127,7 @@ const stack = stack = Swing.Stack(config);
123127
| Name | Description | Default |
124128
| --- | --- | --- |
125129
| `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. |
126-
| `allowedDirections` | Array of directions in which cards can be thrown out. | [Direction.LEFT, Direction.RIGHT]. |
130+
| `allowedDirections` | Array of directions in which cards can be thrown out. | [Direction.DOWN, Direction.LEFT, Direction.RIGHT, Direction.UP]. |
127131
| `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. |
128132
| `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`. |
129133
| `minThrowOutDistance` | In effect when `throwOutDistance` is not overwritten. | 450. |
@@ -147,20 +151,20 @@ const card = stack.createCard(HTMLElement);
147151
| `stack.getCard(element)` | Returns card associated with an element. |
148152
| `stack.on(event, listener)` | Attaches an [event listener](#events). |
149153
| `card.on(event, listener)` | Attaches an [event listener](#events). |
150-
| `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. |
151-
| `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. |
154+
| `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. |
155+
| `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. |
152156
| `card.destroy()` | Unbinds all Hammer.Manager events. Removes the listeners from the physics simulation. |
153157

154158
### Throwing Card Out of the Stack
155159

156-
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.
160+
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.
157161

158162
```js
159163
card.throwOut(Card.DIRECTION_LEFT, 0);
160164
card.throwOut(Card.DIRECTION_RIGHT, 0);
161165
```
162166

163-
To make the animation more diverse, use random value for the `y` parameter.
167+
To make the animation more diverse, use random value for the `coordinateY` parameter.
164168

165169
## Events
166170

@@ -171,16 +175,18 @@ const stack = Swing.Stack();
171175

172176
const card = stack.createCard(HTMLElement);
173177

174-
card.on('throwout', function () {});
175-
stack.on('throwout', function () {});
178+
card.on('throwout', () => {});
179+
stack.on('throwout', () => {});
176180
```
177181

178182
| Name | Description |
179183
| --- | --- |
180184
| `throwout` | When card has been thrown out of the stack. |
181185
| `throwoutend` | When card has been thrown out of the stack and the animation has ended. |
186+
| `throwoutdown` | Shorthand for `throwout` event in the `Card.DIRECTION_DOWN` direction. |
182187
| `throwoutleft` | Shorthand for `throwout` event in the `Card.DIRECTION_LEFT` direction. |
183188
| `throwoutright` | Shorthand for `throwout` event in the `Card.DIRECTION_RIGHT` direction. |
189+
| `throwoutup` | Shorthand for `throwout` event in the `Card.DIRECTION_UP` direction. |
184190
| `throwin` | When card has been thrown into the stack. |
185191
| `throwinend` | When card has been thrown into the stack and the animation has ended. |
186192
| `dragstart` | Hammer [panstart](http://hammerjs.github.io/recognizer-pan/). |
@@ -194,19 +200,11 @@ Event listener is invoked with a single `eventObject` parameter:
194200
```js
195201
const stack = Swing.Stack();
196202

197-
stack.on('throwout', function (eventObject) {});
203+
stack.on('throwout', (eventObject) => {});
198204
```
199205

200206
| Name | Value |
201207
| --- | --- |
202208
| `target` | The element being dragged. |
203-
| `direction` | The direction in which the element is being dragged: `Card.DIRECTION_LEFT` or `Card.DIRECTION_RIGHT`. |
209+
| `direction` | The direction in which the element is being dragged: `Card.DIRECTION_DOWN`, `Card.DIRECTION_LEFT`, `Card.DIRECTION_RIGHT` or `Card.DIRECTION_UP`. |
204210
| `throwOutConfidence` | A value between 0 and 1 indicating the completeness of the throw out condition. |
205-
206-
## Download
207-
208-
Using [NPM](https://www.npmjs.org/):
209-
210-
```sh
211-
npm install swing
212-
```

‎examples/card-state/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
<head>
44
<meta charset="utf-8">
55

6-
<link rel="stylesheet" href="./../card-stack/card-stack.css">
6+
<link rel="stylesheet" href="../card-stack/card-stack.css">
77

88
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
99

10-
<script src="./../../dist/browser/swing.js"></script>
10+
<script src="../../dist/browser/swing.js"></script>
1111
<script src="./card-state.js"></script>
1212
</head>
1313
<body>

‎package.json

Lines changed: 41 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,57 @@
11
{
2-
"name": "swing",
3-
"description": "A swipeable cards interface. The swipe-left/swipe-right for yes/no input. As seen in apps like Jelly and Tinder.",
4-
"keywords": [
5-
"swipe",
6-
"cards",
7-
"swipeable"
8-
],
9-
"version": "3.0.3",
10-
"main": "./dist/index.js",
112
"author": {
12-
"name": "Gajus Kuizinas",
133
"email": "gajus@gajus.com",
4+
"name": "Gajus Kuizinas",
145
"url": "http://gajus.com"
156
},
16-
"repository": {
17-
"type": "git",
18-
"url": "https://github.com/gajus/swing"
7+
"dependencies": {
8+
"hammerjs": "^2.0.4",
9+
"lodash": "^4.6.1",
10+
"raf": "^3.1.0",
11+
"rebound": "^0.0.13",
12+
"sister": "^3.0.0",
13+
"vendor-prefix": "^0.1.0"
1914
},
20-
"license": "BSD-3-Clause",
15+
"description": "A swipeable cards interface. The swipe-left/swipe-right for yes/no input. As seen in apps like Jelly and Tinder.",
2116
"devDependencies": {
17+
"babel": "^6.5.2",
18+
"babel-cli": "^6.18.0",
19+
"babel-plugin-add-module-exports": "^0.2.1",
20+
"babel-preset-es2015": "^6.18.0",
21+
"babel-register": "^6.18.0",
2222
"chai": "^3.2.0",
23+
"conventional-changelog-cli": "^1.2.0",
24+
"conventional-changelog-lint": "^1.1.0",
25+
"conventional-changelog-lint-config-canonical": "^1.0.0",
26+
"eslint": "^3.9.1",
27+
"eslint-config-canonical": "^5.0.0",
28+
"husky": "^0.11.9",
2329
"jsdom": "^6.3.0",
2430
"jsonfile": "^2.2.1",
25-
"pragmatist": "^3.0.21",
31+
"mocha": "^3.1.2",
32+
"semantic-release": "^4.3.5",
2633
"sinon": "^1.16.1",
2734
"webpack": "^1.12.1"
2835
},
29-
"dependencies": {
30-
"hammerjs": "^2.0.4",
31-
"lodash": "^4.6.1",
32-
"raf": "^3.1.0",
33-
"rebound": "^0.0.13",
34-
"sister": "^3.0.0",
35-
"vendor-prefix": "^0.1.0"
36+
"keywords": [
37+
"swipe",
38+
"cards",
39+
"swipeable"
40+
],
41+
"license": "BSD-3-Clause",
42+
"main": "./dist/index.js",
43+
"name": "swing",
44+
"repository": {
45+
"type": "git",
46+
"url": "https://github.com/gajus/swing"
3647
},
3748
"scripts": {
38-
"pragmatist": "pragmatist --es5",
39-
"lint": "npm run pragmatist lint",
40-
"test": "npm run pragmatist test",
41-
"build": "npm run pragmatist build",
42-
"watch": "npm run pragmatist watch",
43-
"watch-lint": "npm run pragmatist watch-lint",
44-
"watch-test": "npm run pragmatist watch-test",
45-
"watch-build": "npm run pragmatist watch-build"
46-
}
49+
"build": "babel ./src --out-dir ./dist --copy-files",
50+
"commitmsg": "conventional-changelog-lint -e",
51+
"lint": "eslint ./src ./test",
52+
"precommit": "npm run lint && npm run test",
53+
"semantic-release": "semantic-release pre && npm publish && semantic-release post",
54+
"test": "mocha --compilers js:babel-register"
55+
},
56+
"version": "3.0.3"
4757
}

0 commit comments

Comments
 (0)
0