├── .gitignore
├── LICENSE
├── README.md
├── bower.json
├── example
├── example.js
└── index.html
├── package.json
├── vue-touch.js
└── vue-touch.min.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | example/example.build.js
4 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2014-2016 Evan You
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # This plugin is deprecated and not maintained anymore.
2 |
3 | ## vue-touch
4 |
5 | > Touch events plugin for Vue.js. **This plugin does not support Vue 2.0 yet.**
6 |
7 | This is a directive wrapper for Hammer.js 2.0.
8 |
9 | ## Install
10 |
11 | > This branch is only compatible with Vue 1.0. For the Vue 2.0 compatible rewrite, see the `next` branch
12 |
13 | #### CommonJS
14 |
15 | - Available through npm as `vue-touch`.
16 |
17 | ``` js
18 | var VueTouch = require('vue-touch')
19 | Vue.use(VueTouch)
20 | ```
21 |
22 | #### Direct include
23 |
24 | - You can also directly include it with a `<script>` tag when you have Vue and Hammer.js already included globally. It will automatically install itself, and will add a global `VueTouch`.
25 |
26 | ## Usage
27 |
28 | #### Using the `v-touch` directive
29 |
30 | ``` html
31 | <a v-touch:tap="onTap">Tap me!</a>
32 |
33 | <div v-touch:swipeleft="onSwipeLeft">Swipe me!</div>
34 | ```
35 |
36 | #### Configuring Recognizer Options
37 |
38 | There are two ways to customize recognizer options such as `direction` and `threshold`. The first one is setting global options:
39 |
40 | ``` js
41 | // change the threshold for all swipe recognizers
42 | VueTouch.config.swipe = {
43 | threshold: 200
44 | }
45 | ```
46 |
47 | Or, you can use the `v-touch-options` directive to configure the behavior on a specific element:
48 |
49 | ``` html
50 | <!-- detect only horizontal pans with a threshold of 100 -->
51 | <a
52 | v-touch:pan="onPan"
53 | v-touch-options:pan="{ direction: 'horizontal', threshold: 100 }">
54 | </a>
55 | ```
56 |
57 | #### Registering Custom Events
58 |
59 | ``` js
60 | // example registering a custom doubletap event.
61 | // the `type` indicates the base recognizer to use from Hammer
62 | // all other options are Hammer recognizer options.
63 | VueTouch.registerCustomEvent('doubletap', {
64 | type: 'tap',
65 | taps: 2
66 | })
67 | ```
68 | ``` html
69 | <a v-touch:doubletap="onDoubleTap"></a>
70 | ```
71 |
72 | See [Hammer.js documentation](http://hammerjs.github.io/getting-started/) for all available events.
73 |
74 | See `/example` for a multi-event demo. To build it, run `npm install && npm run build`.
75 |
76 | ## License
77 |
78 | [MIT](http://opensource.org/licenses/MIT)
79 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-touch",
3 | "main": "vue-touch.js",
4 | "description": "Hammer.js based touch events plugin for Vue.js",
5 | "authors": ["Evan You <yyx990803@gmail.com>"],
6 | "license": "MIT",
7 | "dependencies": {
8 | "hammerjs": "^2.0.6"
9 | },
10 | "ignore": [
11 | ".*",
12 | "example",
13 | "*.json",
14 | "*.md"
15 | ]
16 | }
17 |
--------------------------------------------------------------------------------
/example/example.js:
--------------------------------------------------------------------------------
1 | var Vue = require('vue')
2 | var VueTouch = require('../')
3 |
4 | // use the plugin
5 | Vue.use(VueTouch)
6 |
7 | // example registering a custom doubletap event.
8 | // the `type` indicates the base recognizer to use from Hammer
9 | // all other options are Hammer recognizer options.
10 | VueTouch.registerCustomEvent('doubletap', {
11 | type: 'tap',
12 | taps: 2
13 | })
14 |
15 | new Vue({
16 | el: 'div',
17 | data: {
18 | event: ''
19 | },
20 | methods: {
21 | test: function (e) {
22 | this.event = e.type
23 | }
24 | }
25 | })
26 |
--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="utf-8">
5 | <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
6 | <title></title>
7 | <style>
8 | div {
9 | width: 300px;
10 | height: 300px;
11 | background-color: #f00;
12 | }
13 | </style>
14 | </head>
15 | <body>
16 | <div
17 | v-touch:tap="test($event)"
18 | v-touch:pan="test"
19 | v-touch-options:pan="{ direction: 'up', threshold: 100 }"
20 | v-touch:press="test"
21 | v-touch:swipe="test"
22 | v-touch-options:swipe="{ direction: 'horizontal' }"
23 | v-touch:pinch="test"
24 | v-touch:rotate="test"
25 | v-touch:doubletap="test"
26 | v-text="event">
27 | </div>
28 | <script src="example.build.js"></script>
29 | </body>
30 | </html>
31 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-touch",
3 | "version": "1.1.0",
4 | "main": "vue-touch.js",
5 | "files": [
6 | "vue-touch.js"
7 | ],
8 | "description": "Hammer.js based touch events plugin for Vue.js",
9 | "license": "MIT",
10 | "repository": {
11 | "type": "git",
12 | "url": "https://github.com/vuejs/vue-touch.git"
13 | },
14 | "bugs": "https://github.com/vuejs/vue-touch/issues",
15 | "dependencies": {
16 | "hammerjs": "^2.0.6"
17 | },
18 | "devDependencies": {
19 | "uglify-js": "^2.6.2",
20 | "vue": "^1.0.16",
21 | "webpack": "^1.12.12"
22 | },
23 | "scripts": {
24 | "build": "webpack example/example.js example/example.build.js && uglifyjs vue-touch.js -c -m > vue-touch.min.js",
25 | "dev": "webpack --watch example/example.js example/example.build.js"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/vue-touch.js:
--------------------------------------------------------------------------------
1 | ;(function () {
2 |
3 | var vueTouch = {}
4 | var Hammer = typeof require === 'function'
5 | ? require('hammerjs')
6 | : window.Hammer
7 | var gestures = ['tap', 'pan', 'pinch', 'press', 'rotate', 'swipe']
8 | var directions = ['up', 'down', 'left', 'right', 'horizontal', 'vertical', 'all']
9 | var customEvents = {}
10 |
11 | if (!Hammer) {
12 | throw new Error('[vue-touch] cannot locate Hammer.js.')
13 | }
14 |
15 | // exposed global options
16 | vueTouch.config = {}
17 |
18 | vueTouch.install = function (Vue) {
19 |
20 | Vue.directive('touch', {
21 |
22 | isFn: true,
23 | acceptStatement: true,
24 | priority: Vue.directive('on').priority,
25 |
26 | bind: function () {
27 | if (!this.el.hammer) {
28 | this.el.hammer = new Hammer.Manager(this.el)
29 | }
30 | var mc = this.mc = this.el.hammer
31 | // determine event type
32 | var event = this.arg
33 | if (!event) {
34 | console.warn('[vue-touch] event type argument is required.')
35 | }
36 | var recognizerType, recognizer
37 |
38 | if (customEvents[event]) {
39 | // custom event
40 | var custom = customEvents[event]
41 | recognizerType = custom.type
42 | recognizer = new Hammer[capitalize(recognizerType)](custom)
43 | recognizer.recognizeWith(mc.recognizers)
44 | mc.add(recognizer)
45 | } else {
46 | // built-in event
47 | for (var i = 0; i < gestures.length; i++) {
48 | if (event.indexOf(gestures[i]) === 0) {
49 | recognizerType = gestures[i]
50 | break
51 | }
52 | }
53 | if (!recognizerType) {
54 | console.warn('[vue-touch] invalid event type: ' + event)
55 | return
56 | }
57 | recognizer = mc.get(recognizerType)
58 | if (!recognizer) {
59 | // add recognizer
60 | recognizer = new Hammer[capitalize(recognizerType)]()
61 | // make sure multiple recognizers work together...
62 | recognizer.recognizeWith(mc.recognizers)
63 | mc.add(recognizer)
64 | }
65 | // apply global options
66 | var globalOptions = vueTouch.config[recognizerType]
67 | if (globalOptions) {
68 | guardDirections(globalOptions)
69 | recognizer.set(globalOptions)
70 | }
71 | // apply local options
72 | var localOptions =
73 | this.el.hammerOptions &&
74 | this.el.hammerOptions[recognizerType]
75 | if (localOptions) {
76 | guardDirections(localOptions)
77 | recognizer.set(localOptions)
78 | }
79 | }
80 | this.recognizer = recognizer
81 | },
82 |
83 | update: function (fn) {
84 | var mc = this.mc
85 | var event = this.arg
86 | // teardown old handler
87 | if (this.handler) {
88 | mc.off(event, this.handler)
89 | }
90 | if (typeof fn !== 'function') {
91 | this.handler = null
92 | console.warn(
93 | '[vue-touch] invalid handler function for v-touch: ' +
94 | this.arg + '="' + this.descriptor.raw
95 | )
96 | } else {
97 | mc.on(event, (this.handler = fn))
98 | }
99 | },
100 |
101 | unbind: function () {
102 | if (this.handler) {
103 | this.mc.off(this.arg, this.handler)
104 | }
105 | if (!Object.keys(this.mc.handlers).length) {
106 | this.mc.destroy()
107 | this.el.hammer = null
108 | }
109 | }
110 | })
111 |
112 | Vue.directive('touch-options', {
113 | priority: Vue.directive('on').priority + 1,
114 | update: function (options) {
115 | var opts = this.el.hammerOptions || (this.el.hammerOptions = {})
116 | if (!this.arg) {
117 | console.warn('[vue-touch] recognizer type argument for v-touch-options is required.')
118 | } else {
119 | opts[this.arg] = options
120 | }
121 | }
122 | })
123 | }
124 |
125 | /**
126 | * Register a custom event.
127 | *
128 | * @param {String} event
129 | * @param {Object} options - a Hammer.js recognizer option object.
130 | * required fields:
131 | * - type: the base recognizer to use for this event
132 | */
133 |
134 | vueTouch.registerCustomEvent = function (event, options) {
135 | options.event = event
136 | customEvents[event] = options
137 | }
138 |
139 | function capitalize (str) {
140 | return str.charAt(0).toUpperCase() + str.slice(1)
141 | }
142 |
143 | function guardDirections (options) {
144 | var dir = options.direction
145 | if (typeof dir === 'string') {
146 | var hammerDirection = 'DIRECTION_' + dir.toUpperCase()
147 | if (directions.indexOf(dir) > -1 && Hammer.hasOwnProperty(hammerDirection)) {
148 | options.direction = Hammer[hammerDirection]
149 | } else {
150 | console.warn('[vue-touch] invalid direction: ' + dir)
151 | }
152 | }
153 | }
154 |
155 | if (typeof exports == "object") {
156 | module.exports = vueTouch
157 | } else if (typeof define == "function" && define.amd) {
158 | define([], function(){ return vueTouch })
159 | } else if (window.Vue) {
160 | window.VueTouch = vueTouch
161 | Vue.use(vueTouch)
162 | }
163 |
164 | })()
165 |
--------------------------------------------------------------------------------
/vue-touch.min.js:
--------------------------------------------------------------------------------
1 | !function(){function e(e){return e.charAt(0).toUpperCase()+e.slice(1)}function t(e){var t=e.direction;if("string"==typeof t){var i="DIRECTION_"+t.toUpperCase();o.indexOf(t)>-1&&r.hasOwnProperty(i)?e.direction=r[i]:console.warn("[vue-touch] invalid direction: "+t)}}var i={},r="function"==typeof require?require("hammerjs"):window.Hammer,n=["tap","pan","pinch","press","rotate","swipe"],o=["up","down","left","right","horizontal","vertical","all"],a={};if(!r)throw new Error("[vue-touch] cannot locate Hammer.js.");i.config={},i.install=function(o){o.directive("touch",{isFn:!0,acceptStatement:!0,priority:o.directive("on").priority,bind:function(){this.el.hammer||(this.el.hammer=new r.Manager(this.el));var o=this.mc=this.el.hammer,s=this.arg;s||console.warn("[vue-touch] event type argument is required.");var h,c;if(a[s]){var u=a[s];h=u.type,c=new(r[e(h)])(u),c.recognizeWith(o.recognizers),o.add(c)}else{for(var d=0;d<n.length;d++)if(0===s.indexOf(n[d])){h=n[d];break}if(!h)return void console.warn("[vue-touch] invalid event type: "+s);c=o.get(h),c||(c=new(r[e(h)]),c.recognizeWith(o.recognizers),o.add(c));var f=i.config[h];f&&(t(f),c.set(f));var l=this.el.hammerOptions&&this.el.hammerOptions[h];l&&(t(l),c.set(l))}this.recognizer=c},update:function(e){var t=this.mc,i=this.arg;this.handler&&t.off(i,this.handler),"function"!=typeof e?console.warn("[vue-touch] invalid handler function for v-touch: "+this.arg+'="'+this.descriptor.raw):t.on(i,this.handler=e)},unbind:function(){this.mc.off(this.arg,this.handler),Object.keys(this.mc.handlers).length||(this.mc.destroy(),this.el.hammer=null)}}),o.directive("touch-options",{priority:o.directive("on").priority+1,update:function(e){var t=this.el.hammerOptions||(this.el.hammerOptions={});this.arg?t[this.arg]=e:console.warn("[vue-touch] recognizer type argument for v-touch-options is required.")}})},i.registerCustomEvent=function(e,t){t.event=e,a[e]=t},"object"==typeof exports?module.exports=i:"function"==typeof define&&define.amd?define([],function(){return i}):window.Vue&&(window.VueTouch=i,Vue.use(i))}();
2 |
--------------------------------------------------------------------------------