Skip to content

Commit 35de898

Browse files
casperlamboocasperlamboo
committed
initial commit
0 parents  commit 35de898

File tree

7 files changed

+455
-0
lines changed

7 files changed

+455
-0
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
2+
jspm_packages
3+
node_modules

‎README.md‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# Touch Events
2+
Touch Events on PEP.
3+
4+
# Usage
5+
6+
### Using JSPM (ECMAScript / ES6 Module)
7+
8+
Install the library.
9+
10+
```
11+
jspm install touch-events=github:casperlamboo/TouchEvents
12+
```
13+
14+
Include the library.
15+
16+
```javascript
17+
import touchEvents from 'touch-events';
18+
```
19+
20+
### Using NPM (CommonJS module)
21+
22+
Install the library.
23+
24+
```
25+
npm install touch-events
26+
```
27+
28+
Include the library.
29+
30+
```javascript
31+
var touchEvents = require('touch-events');
32+
```
33+
34+
# API
35+
36+
**createListener**
37+
38+
```javascript
39+
eventListener:EventDispatcher = touchEvents.createListener(DOMNode)
40+
```
41+
42+
**addEventListener**
43+
44+
```javascript
45+
eventListener.addEventListener('wheel', callback:Function);
46+
eventListener.addEventListener('tap', callback:Function);
47+
eventListener.addEventListener('dragstart', callback:Function);
48+
eventListener.addEventListener('drag', callback:Function);
49+
eventListener.addEventListener('dragend', callback:Function);
50+
eventListener.addEventListener('seconddragstart', callback:Function);
51+
eventListener.addEventListener('seconddrag', callback:Function);
52+
eventListener.addEventListener('seconddragend', callback:Function);
53+
eventListener.addEventListener('multitouchstart', callback:Function);
54+
eventListener.addEventListener('multitouch', callback:Function);
55+
eventListener.addEventListener('multitouchend', callback:Function);
56+
```
57+
58+
**setConfig**
59+
60+
```javascript
61+
touchEvents.setConfig(config:Object)
62+
63+
config = {
64+
DRAG_THRESHOLD: Number = 10;
65+
}
66+
```

‎example/index.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
2+
<!DOCTYPE html>
3+
<html>
4+
<head>
5+
<meta charset="utf-8">
6+
7+
<title>Touch Events</title>
8+
9+
<script src="/jspm_packages/system.js" charset="utf-8"></script>
10+
<script src="/jspm.config.js" charset="utf-8"></script>
11+
12+
<style>
13+
* {
14+
margin: 0;
15+
padding: 0;
16+
}
17+
18+
#container {
19+
display: flex;
20+
}
21+
22+
span {
23+
border: 1px solid black;
24+
flex-grow: 1;
25+
height: 400px;
26+
margin: 10px;
27+
}
28+
</style>
29+
</head>
30+
<body>
31+
<div id="container">
32+
<span id="containerA" class="container"></span>
33+
<span id="containerB" class="container"></span>
34+
</div>
35+
36+
<script type="text/javascript">
37+
System.import('./index.js');
38+
</script>
39+
</body>
40+
</html>

‎example/index.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import addListener from '../src/index.js';
2+
3+
for (const container of Array.from(document.getElementsByClassName('container'))) {
4+
const eventDispatcher = addListener(container);
5+
6+
const log = (event) => {
7+
container.innerHTML = `<p>${event.type}</p>`;
8+
console.log(event, container.id);
9+
}
10+
11+
eventDispatcher.addEventListener('tap', log);
12+
eventDispatcher.addEventListener('wheel', log);
13+
eventDispatcher.addEventListener('dragstart', log);
14+
eventDispatcher.addEventListener('drag', log);
15+
eventDispatcher.addEventListener('dragend', log);
16+
eventDispatcher.addEventListener('multitouchstart', log);
17+
eventDispatcher.addEventListener('multitouch', log);
18+
eventDispatcher.addEventListener('multitouchend', log);
19+
}

‎jspm.config.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
SystemJS.config({
2+
paths: {
3+
"npm:": "jspm_packages/npm/",
4+
"github:": "jspm_packages/github/",
5+
"touch-events/": "src/"
6+
},
7+
browserConfig: {
8+
"baseURL": "/"
9+
},
10+
devConfig: {
11+
"map": {
12+
"plugin-babel": "npm:[email protected]"
13+
}
14+
},
15+
transpiler: "plugin-babel",
16+
packages: {
17+
"touch-events": {
18+
"main": "index.js",
19+
"meta": {
20+
"*.js": {
21+
"loader": "plugin-babel"
22+
}
23+
}
24+
}
25+
}
26+
});
27+
28+
SystemJS.config({
29+
packageConfigPaths: [
30+
"npm:@*/*.json",
31+
"npm:*.json",
32+
"github:*/*.json"
33+
],
34+
map: {
35+
"eventdispatcher.js": "npm:[email protected]",
36+
"pepjs": "npm:[email protected]"
37+
},
38+
packages: {}
39+
});

‎package.json‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
{
2+
"name": "touch-events",
3+
"version": "0.0.1",
4+
"description": "Touch events using PEP",
5+
"main": "lib/index.js",
6+
"jspm": {
7+
"directories": {
8+
"lib": "src"
9+
},
10+
"name": "touch-events",
11+
"main": "index.js",
12+
"dependencies": {
13+
"eventdispatcher.js": "npm:eventdispatcher.js@^0.0.2",
14+
"pepjs": "npm:pepjs@^0.4.2"
15+
},
16+
"devDependencies": {
17+
"plugin-babel": "npm:systemjs-plugin-babel@^0.0.17"
18+
}
19+
},
20+
"babel": {
21+
"presets": [
22+
"es2015"
23+
],
24+
"plugins": [
25+
"add-module-exports"
26+
]
27+
},
28+
"scripts": {
29+
"test": "echo \"Error: no test specified\" && exit 1",
30+
"postinstall": "jspm install",
31+
"prepublish": "npm run build",
32+
"build": "babel src --out-dir lib"
33+
},
34+
"author": "Casper@Doodle3D",
35+
"license": "ISC",
36+
"devDependencies": {
37+
"babel-cli": "^6.23.0",
38+
"babel-core": "^6.23.1",
39+
"babel-plugin-add-module-exports": "^0.2.1",
40+
"babel-preset-es2015": "^6.22.0",
41+
"jspm": "^0.17.0-beta.40"
42+
},
43+
"dependencies": {
44+
"eventdispatcher.js": "0.0.2",
45+
"pepjs": "^0.4.2"
46+
}
47+
}

0 commit comments

Comments
 (0)