0.1.0: umd, +bower

Author: Evan You

README.md

@@ -6,20 +6,42 @@ This is a directive wrapper for Hammer.js 2.0.
 
 ## Usage
 
-Currently only available via Component or Browserify. For other use cases just take a look at the source. It's really simple.
+### CommonJS
 
-``` js
-var vueTouch = require('vue-touch')
-Vue.use(vueTouch)
-```
+- Available through npm as `vue-touch`. For Duo/Component you can isntall as `vuejs/vue-touch`.
+
+  ``` js
+  var vueTouch = require('vue-touch')
+  Vue.use(vueTouch)
+  ```
+
+### Direct include
+
+- You can also directly include it with a `<script>` tag when you have Vue itself included globally. It will automatically install itself, and will add a global `VueTouch`.
+
+### Use in templates
+
+Then you can do this:
 
 ``` html
 <a v-touch="tap:onTap">Tap me!</a>
 ```
 
+### Register a custom event
+
+``` js
+// 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
+})
+```
+
 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`.
+See `/example` for a multi-event demo. To build the example, you need to have Browserify installed and then `npm run build`.
 
 ## License
 

bower.json

@@ -0,0 +1,17 @@
+{
+  "name": "vue-touch",
+  "version": "0.1.0",
+  "main": "vue-touch.js",
+  "description": "Hammer.js based touch events plugin for Vue.js",
+  "authors": ["Evan You <[email protected]>"],
+  "license": "MIT",
+  "dependencies": {
+    "hammerjs": "^2.0.1"
+  },
+  "ignore": [
+    ".*",
+    "example",
+    "*.json",
+    "*.md"
+  ]
+}

component.json

@@ -1,8 +1,10 @@
 {
     "name": "vue-touch",
-    "version": "0.0.1",
-    "main": "index.js",
-    "scripts": ["index.js"],
+    "version": "0.1.0",
+    "main": "vue-touch.js",
+    "description": "Hammer.js based touch events plugin for Vue.js",
+    "license": "MIT",
+    "scripts": ["vue-touch.js"],
     "dependencies": {
         "hammerjs/hammer.js": "^2.0.1"
     },

index.js

@@ -1,7 +1,9 @@
 {
   "name": "vue-touch",
-  "version": "0.0.2",
-  "main": "index.js",
+  "version": "0.1.0",
+  "main": "vue-touch.js",
+  "description": "Hammer.js based touch events plugin for Vue.js",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/vuejs/vue-touch.git"
@@ -14,6 +16,7 @@
     "vue": "^0.10.5"
   },
   "scripts": {
-    "build": "browserify -e example/example.js -o example/example.build.js"
+    "build": "browserify -e example/example.js -o example/example.build.js",
+    "dev": "watchify -e example/example.js -o example/example.build.js"
   }
 }

package.json

@@ -0,0 +1,109 @@
+;(function () {
+
+  var vueTouch = {}
+  var Hammer = require('hammerjs')
+  var gestures = ['tap', 'pan', 'pinch', 'press', 'rotate', 'swipe']
+  var customeEvents = {}
+
+  vueTouch.install = function (Vue) {
+
+    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 (!Object.keys(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
+   */
+
+  vueTouch.registerCustomEvent = function (event, options) {
+    options.event = event
+    customeEvents[event] = options
+  }
+
+  function capitalize (str) {
+    return str.charAt(0).toUpperCase() + str.slice(1)
+  }
+
+  if (typeof exports == "object") {
+    module.exports = vueTouch
+  } else if (typeof define == "function" && define.amd) {
+    define([], function(){ return vueTouch })
+  } else if (window.Vue) {
+    window.VueTouch = vueTouch
+    Vue.use(vueTouch)
+  }
+
+})()