8000 Init · shhdgit/vue-finger@134b0f2 · GitHub
[go: up one dir, main page]
Skip to content

Commit 134b0f2

Browse files
shhdgitshhdgit
committed
Init
0 parents  commit 134b0f2

File tree

6 files changed

+181
-0
lines changed

6 files changed

+181
-0
lines changed

‎.gitignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules/
2+
.DS_Store
3+
example/
4+
.idea/
5+
npm-debug.log

‎.npmignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules/
2+
.DS_Store
3+
example/
4+
.idea/
5+
npm-debug.log

‎README.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
## Intro
2+
3+
This is a directive wrapper for [alloyfinger](https://github.com/AlloyTeam/AlloyFinger).
4+
5+
## Demo
6+
7+
[fiddle]()
8+
9+
## Install
10+
11+
#### Npm
12+
13+
```bash
14+
npm install --save alloyfinger vue-finger
15+
```
16+
17+
#### CommonJS
18+
19+
- Available through npm as `vue-finger`.
20+
21+
``` js
22+
var VueFinger = require('vue-finger')
23+
Vue.use(VueFinger)
24+
```
25+
26+
#### Direct include
27+
28+
- You can also directly include it with a `<script>` tag when you have Vue and alloyfinger.js already included globally. It will automatically install itself, and will add a global `VueFinger`.
29+
30+
## Usage
31+
32+
#### Using the `v-finger` directive
33+
34+
```html
35+
<a v-finger:tap="onTap">Tap me!</a>
36+
37+
<div v-finger:pressmove="onMove">Move me!</div>
38+
```
39+
40+
See [alloyfinger](https://github.com/AlloyTeam/AlloyFinger) for all available events.
41+
42+
> camelCase args should switch to lowercase (e.g., pressMove -> pressmove)
43+
44+
# License
45+
MIT

‎package.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "vue-finger",
3+
"version": "0.1.0",
4+
"main": "vue-finger.js",
5+
"files": [
6+
"vue-finger.js"
7+
],
8+
"description": "alloy_finger based touch events plugin for Vue2",
9+
"license": "MIT",
10+
"repository": {
11+
"type": "git",
12+
"url": "https://github.com/shhdgit/vue-finger.git"
13+
},
14+
"bugs": "https://github.com/shhdgit/vue-finger/issues",
15+
"dependencies": {
16+
"alloyfinger": "^0.1.2"
17+
},
18+
"devDependencies": {
19+
"uglify-js": "^2.7.4",
20+
"vue": "^2.0.0",
21+
"webpack": "^1.13.3"
22+
},
23+
"scripts": {
24+
"build": "uglifyjs vue-finger.js -c -m > vue-finger.min.js"
25+
}
26+
}

‎vue-finger.js

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
;(function () {
2+
3+
var vueFinger = {}
4+
var AlloyFinger = typeof require === 'function'
5+
? require('alloyfinger')
6+
: window.AlloyFinger
7+
var gestures = {
8+
touchstart: 'touchStart',
9+
touchmove: 'touchMove',
10+
touchend: 'touchEnd',
11+
touchcancel: 'touchCancel',
12+
multipointstart: 'multipointStart',
13+
multipointend: 'multipointEnd',
14+
tap: 'tap',
15+
doubletap: 'doubleTap',
16+
longtap: 'longTap',
17+
singletap: 'singleTap',
18+
rotate: 'rotate',
19+
pinch: 'pinch',
20+
pressmove: 'pressMove',
21+
swipe: 'swipe'
22+
}
23+
24+
if (!AlloyFinger) {
25+
throw new Error('[vue-touch] cannot locate alloyfinger.')
26+
}
27+
28+
// exposed global options
29+
vueFinger.config = {}
30+
vueFinger.install = function (Vue) {
31+
Vue.directive('finger', {
32+
bind: function (el, binding) {
33+
var event = binding.arg
34+
var fn = binding.value
35+
var gs = Object.keys( gestures )
36+
var recognizerType, i
37+
if (!event) {
38+
console.warn('[vue-finger] event type argument is required.')
39+
} else if (typeof fn !== 'function') {
40+
console.warn(
41+
'[vue-finger] invalid handler function for v-finger: ' +
42+
event + '="' + fn
43+
)
44+
return
45+
} else {
46+
for (i = 0; i < gs.length; i++) {
47+
if (event.indexOf(gs[i]) === 0) {
48+
recognizerType = gestures[gs[i]]
49+
break
50+
}
51+
}
52+
if (!recognizerType) {
53+
console.warn('[vue-finger] invalid event type: ' + event)
54+
return
55+
}
56+
}
57+
58+
// built-in event
59+
if (!el.alloyfinger) {
60+
el.alloyfinger = new AlloyFinger(el, _defineProperty({}, recognizerType, fn))
61+
} else {
62+
el.alloyfinger[recognizerType] = fn
63+
}
64+
},
65+
66+
unbind: function (el) {
67+
el.alloyfinger = null
68+
}
69+
})
70+
}
71+
72+
/**
73+
* Register a custom event.
74+
*
75+
* @param {String} event
76+
* @param {Object} options - a Hammer.js recognizer option object.
77+
* required fields:
78+
* - type: the base recognizer to use for this event
79+
*/
80+
81+
function _defineProperty (obj, key, value) {
82+
if (key in obj) {
83+
Object.defineProperty( AD59 obj, key, { value: value, enumerable: true, configurable: true, writable: true })
84+
} else {
85+
obj[key] = value;
86+
}
87+
return obj
88+
}
89+
90+
if (typeof exports == "object") {
91+
module.exports = vueFinger
92+
} else if (typeof define == "function" && define.amd) {
93+
define([], function(){ return vueFinger })
94+
} else if (window.Vue) {
95+
window.VueFinger = vueFinger
96+
Vue.use(vueFinger)
97+
}
98+
99+
})()

‎vue-finger.min.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)
0