├── .gitignore
├── .npmignore
├── README.md
├── directive.js
├── index.js
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/
4 | npm-debug.log
5 | yarn-error.log
6 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/
4 | npm-debug.log
5 | yarn-error.log


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue2-touch for Vue.js 2.x
 2 | 
 3 | > This is a directive wrapper for Hammer.js 2.0, ~~small size(just 22.7k).
 4 | 
 5 | ## Install
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | npm install vue2-touch --save
10 | ```
11 | 
12 | ## Usage
13 | 
14 | ### ES6
15 | 
16 | ``` javascript
17 | import Vue2Touch from 'vue2-touch'
18 | Vue.use(Vue2Touch)
19 | ```
20 | 
21 | ### Add global Config
22 | 
23 | ``` javascript
24 | Vue.use(Vue2Touch, {
25 |   gestures: ['swipe'],
26 |   directions: {
27 |     swipe: ['swipeleft']
28 |   }
29 | })
30 | ```
31 | above configurations mean that it can override v-touch gestures which just listens to swipe event and override swipe directions which only listens to swipeleft event.
32 | 
33 | ### Using the v-touch directive
34 | 
35 | ``` html
36 | <a v-touch:tap="callback">Tap me!</a>
37 | <div v-touch:swipe="callback">Swipe me!</div>
38 | ```
39 | 
40 | 
41 | ### callback
42 | Callback is a name of function with two args(can use any name, but type must be a funciton);the first argument can return a touch type(swipeleft,tap ...), and the second argument can return a callback event.
43 | 
44 | ## More Details
45 | See [Hammer.js document](http://hammerjs.github.io/)
46 | 
47 | ## License
48 | [MIT](https://opensource.org/licenses/MIT)
49 | 


--------------------------------------------------------------------------------
/directive.js:
--------------------------------------------------------------------------------
 1 | import Hammer from 'hammerjs'
 2 | var gestures = ['tap', 'pan', 'pinch', 'press', 'rotate', 'swipe']
 3 | var directions = {
 4 |   tap: ['tap'],
 5 |   swipe: ['swipeleft', 'swiperight', 'swipeup', 'swipedown'],
 6 |   pan: ['panstart', 'panmove', 'panend', 'pancancel', 'panleft', 'panright', 'panup', 'pandown'],
 7 |   pinch: ['pinchstart', 'pinchmove', 'pinchend', 'pinchcancel', 'pinchin', 'pinchout'],
 8 |   press: ['press', 'pressup'],
 9 |   rotate: ['rotatestart', 'rotatemove', 'rotateend', 'rotatecancel']
10 | }
11 | 
12 | function capitalize (str) {
13 |   return str.charAt(0).toUpperCase() + str.slice(1)
14 | }
15 | var evt = null
16 | var handler = null
17 | var evtType = ''
18 | 
19 | const touchs = {
20 |   config: function (config) {
21 |     if (config == null) return;
22 |     if (config.gestures && (config.gestures instanceof Array)) gestures = config.gestures
23 |     if (config.directions && (config.directions instanceof Array)) {
24 |       for (let k in config.directions) {
25 |         directions[k] = config.directions[k]
26 |       }
27 |     }
28 |   },
29 |   bind: function(el, binding) {
30 |     if (!evt) {
31 |       evt = new Hammer.Manager(el)
32 |     }
33 |     var type = evtType = binding.arg.toLowerCase()
34 |     var index = gestures.indexOf(type)
35 |     if (index < 0) {
36 |       console.warn('[vue2-touch] event type value is invalid')
37 |       return
38 |     }
39 |     if (typeof binding.value !== 'function') {
40 |       handler = null
41 |       console.warn('[vue2-touch] invalid args value for v-touch, please check it')
42 |       return
43 |     }
44 |     evt.add(new Hammer[capitalize(type)]())
45 |     // bind function
46 |     var evtsArray = directions[evtType]
47 |     if (handler) {
48 |       evtsArray.forEach(function(et) {
49 |         evt.off(et, function(e) {
50 |           handler(et, e)
51 |         })
52 |       })
53 |     }
54 |     if (typeof binding.value === 'function') {
55 |       handler = binding.value
56 |       evtsArray.forEach(function(et) {
57 |         evt.on(et, function(e) {
58 |           handler(et, e)
59 |         })
60 |       })
61 |     }
62 |   },
63 |   unbind: function() {
64 |     evt.destroy()
65 |     evt = null
66 |   }
67 | }
68 | export default touchs
69 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | import touches from './directive'
2 | const vue2Touch = {
3 |   install: function(Vue, options) {
4 |     touches.config(options)
5 |     Vue.directive('touch', touches)
6 |   }
7 | }
8 | export default vue2Touch
9 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue2-touch",
 3 |   "description": "A directive wrapper Hammerjs for vue2.x",
 4 |   "version": "1.0.8",
 5 |   "author": "sam@thinkingsam.cn",
 6 |   "main": "index.js",
 7 |   "scripts": {
 8 |   },
 9 |   "dependencies": {
10 |     "hammerjs": "^2.0.8"
11 |   },
12 |   "devDependencies": {
13 |   },
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "git+https://github.com/lenvonsam/vue2-touch.git"
17 |   },
18 |   "keywords": [
19 |     "vue2-touch"
20 |   ],
21 |   "license": "MIT",
22 |   "bugs": {
23 |     "url": "https://github.com/lenvonsam/vue2-touch/issues"
24 |   },
25 |   "homepage": "https://github.com/lenvonsam/vue2-touch#readme"
26 | }
27 | 


--------------------------------------------------------------------------------