use Hammer 2.0

Author: Evan You

.gitignore

@@ -1,3 +1,4 @@
 components
 node_modules
-.DS_Store
+.DS_Store
+example/example.build.js

README.md

@@ -2,7 +2,7 @@
 
 > Touch events plugin for Vue.js
 
-This is simply a directive wrapper for Hammer.js.
+This is a directive wrapper for Hammer.js 2.0.
 
 ## Usage
 
@@ -17,6 +17,10 @@ Vue.use(vueTouch)
 <a v-touch="tap:onTap">Tap me!</a>
 ```
 
+See [Hammer.js documentation](http://hammerjs.github.io/getting-started.html) for all available events.
+
+See `/example` for listening to multiple events together and how to register a custom event like `'doubletap'`. To build the example, you need to have Browserify installed and then `npm run build`.
+
 ## License
 
 MIT

component.json

@@ -4,7 +4,7 @@
     "main": "index.js",
     "scripts": ["index.js"],
     "dependencies": {
-        "EightMedia/hammer.js": "*"
+        "hammerjs/hammer.js": "^2.0.1"
     },
     "development": {
         "yyx990803/vue": "*"

example/example.js

@@ -0,0 +1,25 @@
+var Vue = require('vue')
+var VueTouch = require('../')
+
+// use the plugin
+Vue.use(VueTouch)
+
+// example registering a custom doubletap event.
+// the `type` indicates the base recognizer to use from Hammer
+// all other options are Hammer recognizer options.
+VueTouch.registerCustomEvent('doubletap', {
+  type: 'tap',
+  taps: 2
+})
+
+new Vue({
+  el: 'div',
+  data: {
+    event: ''
+  },
+  methods: {
+    test: function (e) {
+      this.event = e.type
+    }
+  }
+})

example/index.html

@@ -0,0 +1,19 @@
+<style>
+    div {
+      width: 300px;
+      height: 300px;
+      background-color: #f00;
+    }
+</style>
+
+<div v-touch="
+  tap:test,
+  pan:test,
+  press:test,
+  swipe:test,
+  pinch:test,
+  rotate:test,
+  doubletap: test
+" v-text="event"></div>
+
+<script src="example.build.js"></script>

index.js

@@ -1,27 +1,95 @@
 var Hammer = require('hammerjs')
+var gestures = ['tap', 'pan', 'pinch', 'press', 'rotate', 'swipe']
+var customeEvents = {}
 
 exports.install = function (Vue) {
-    Vue.directive('touch', {
-        isFn: true,
-        bind: function () {
-            if (!this.el.hammer) {
-                this.el.hammer = Hammer(this.el)
-            }
-        },
-        update: function (fn) {
-            var vm = this.vm
-            this.handler = function (e) {
-                e.targetVM = vm
-                fn.call(vm, e)
-            }
-            this.el.hammer.on(this.arg, this.handler)
-        },
-        unbind: function () {
-            this.el.hammer.off(this.arg, this.handler)
-            if (!this.el.hammer.eventHandlers.length) {
-                this.el.hammer.dispose()
-                this.el.hammer = null
-            }
+
+  Vue.directive('touch', {
+
+    isFn: true,
+
+    bind: function () {
+      if (!this.el.hammer) {
+        this.el.hammer = new Hammer.Manager(this.el)
+      }
+      var mc = this.mc = this.el.hammer
+      // determine event type
+      var event = this.arg
+      var recognizerType, recognizer
+      
+      if (customeEvents[event]) { // custom event
+
+        var custom = customeEvents[event]
+        recognizerType = custom.type
+        recognizer = new Hammer[capitalize(recognizerType)](custom)
+        recognizer.recognizeWith(mc.recognizers)
+        mc.add(recognizer)
+
+      } else { // built-in event
+
+        for (var i = 0; i < gestures.length; i++) {
+          if (event.indexOf(gestures[i]) === 0) {
+            recognizerType = gestures[i]
+            break
+          }
+        }
+        if (!recognizerType) {
+          console.warn('Invalid v-touch event: ' + event)
+          return
+        }
+        recognizer = mc.get(recognizerType)
+        if (!recognizer) {
+          // add recognizer
+          recognizer = new Hammer[capitalize(recognizerType)]()
+          // make sure multiple recognizers work together...
+          recognizer.recognizeWith(mc.recognizers)
+          mc.add(recognizer)
         }
-    })
+
+      }
+    },
+
+    update: function (fn) {
+      var mc = this.mc
+      var vm = this.vm
+      var event = this.arg
+      // teardown old handler
+      if (this.handler) {
+        mc.off(event, this.handler)
+      }
+      // define new handler
+      this.handler = function (e) {
+        e.targetVM = vm
+        fn.call(vm, e)
+      }
+      mc.on(event, this.handler)
+    },
+
+    unbind: function () {
+      this.mc.off(this.arg, this.handler)
+      if (!this.mc.handlers.length) {
+        this.mc.destroy()
+        this.el.hammer = null
+      }
+    }
+
+  })
 }
+
+/**
+ * Register a custom event.
+ *
+ * @param {String} event
+ * @param {Object} options - a Hammer.js recognizer option object.
+ *                           required fields:
+ *                           - type: the base recognizer to use for this event
+ */
+
+exports.registerCustomEvent = function (event, options) {
+  options.event = event
+  customeEvents[event] = options
+}
+
+function capitalize (str) {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}

package.json

@@ -1,13 +1,19 @@
 {
   "name": "vue-touch",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "index.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/vuejs/vue-touch.git"
   },
   "bugs": "https://github.com/vuejs/vue-touch/issues",
   "dependencies": {
-    "hammerjs": "~1.1.3"
+    "hammerjs": "^2.0.1"
+  },
+  "devDependencies": {
+    "vue": "^0.10.5"
+  },
+  "scripts": {
+    "build": "browserify -e example/example.js -o example/example.build.js"
   }
 }