├── .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 | 


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