update for 1.0

yyx990803 · yyx990803 · commit c776f81817b2 · 2016-01-31T20:01:39.000-05:00
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,3 @@
-components
 node_modules
 .DS_Store
-example/example.build.js
+example/example.build.js
diff --git a/README.md b/README.md
@@ -8,23 +8,23 @@ This is a directive wrapper for Hammer.js 2.0.
 
 ### CommonJS
 
-- Available through npm as `vue-touch`. For Duo/Component you can install as `vuejs/vue-touch`.
+- Available through npm as `vue-touch`.
 
   ``` js
-  var vueTouch = require('vue-touch')
-  Vue.use(vueTouch)
+  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`.
+- 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`.
 
-### Use in templates
+### Using the `v-touch` directive
 
 Then you can do this:
 
 ``` html
-<a v-touch="tap:onTap">Tap me!</a>
+<a v-touch:tap="onTap">Tap me!</a>
 ```
 
 ### Register a custom event
@@ -41,7 +41,7 @@ VueTouch.registerCustomEvent('doubletap', {
 
 See [Hammer.js documentation](http://hammerjs.github.io/getting-started/) for all available events.
 
-See `/example` for a multi-event demo. To build the example, you need to have Browserify installed and then `npm run build`.
+See `/example` for a multi-event demo. To build it, run `npm install && npm run build`.
 
 ## License
 
diff --git a/bower.json b/bower.json
@@ -1,17 +1,16 @@
 {
   "name": "vue-touch",
-  "version": "0.1.2",
   "main": "vue-touch.js",
   "description": "Hammer.js based touch events plugin for Vue.js",
   "authors": ["Evan You <yyx990803@gmail.com>"],
   "license": "MIT",
   "dependencies": {
-    "hammerjs": "^2.0.1"
+    "hammerjs": "^2.0.6"
   },
   "ignore": [
     ".*",
     "example",
     "*.json",
     "*.md"
   ]
-}
+}
diff --git a/component.json b/component.json
diff --git a/example/example.js b/example/example.js
@@ -22,4 +22,4 @@ new Vue({
       this.event = e.type
     }
   }
-})
+})
diff --git a/example/index.html b/example/index.html
@@ -1,19 +1,31 @@
-<style>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <title></title>
+    <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>
+    </style>
+  </head>
+  <body>
+    <div
+      v-touch:tap="test"
+      v-touch:pan="test"
+      v-touch:press="test"
+      v-touch:swipeLeft="test"
+      v-touch:swipeRight="test"
+      v-touch:swipeUp="test"
+      v-touch:swipeDown="test"
+      v-touch:pinch="test"
+      v-touch:rotate="test"
+      v-touch:doubletap="test"
+      v-text="event">
+    </div>
+    <script src="example.build.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -1,7 +1,10 @@
 {
   "name": "vue-touch",
-  "version": "0.1.2",
+  "version": "1.0.0",
   "main": "vue-touch.js",
+  "files": [
+    "vue-touch.js"
+  ],
   "description": "Hammer.js based touch events plugin for Vue.js",
   "license": "MIT",
   "repository": {
@@ -10,13 +13,14 @@
   },
   "bugs": "https://github.com/vuejs/vue-touch/issues",
   "dependencies": {
-    "hammerjs": "^2.0.1"
+    "hammerjs": "^2.0.6"
   },
   "devDependencies": {
-    "vue": "^0.10.5"
+    "vue": "^1.0.16",
+    "webpack": "^1.12.12"
   },
   "scripts": {
-    "build": "browserify -e example/example.js -o example/example.build.js",
-    "dev": "watchify -e example/example.js -o example/example.build.js"
+    "build": "webpack example/example.js example/example.build.js",
+    "dev": "webpack --watch example/example.js example/example.build.js"
   }
 }
diff --git a/vue-touch.js b/vue-touch.js
@@ -7,6 +7,10 @@
   var gestures = ['tap', 'pan', 'pinch', 'press', 'rotate', 'swipe']
   var customeEvents = {}
 
+  if (!Hammer) {
+    throw new Error('[vue-touch] cannot locate Hammer.js.')
+  }
+
   vueTouch.install = function (Vue) {
 
     Vue.directive('touch', {
@@ -21,26 +25,28 @@
         var mc = this.mc = this.el.hammer
         // determine event type
         var event = this.arg
+        if (!event) {
+          console.warn('[vue-touch] event type argument is required.')
+        }
         var recognizerType, recognizer
 
-        if (customeEvents[event]) { // custom event
-
+        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
-
+        } 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)
+            console.warn('[vue-touch] invalid event type: ' + event)
             return
           }
           recognizer = mc.get(recognizerType)
@@ -51,7 +57,6 @@
             recognizer.recognizeWith(mc.recognizers)
             mc.add(recognizer)
           }
-
         }
       },
 
@@ -64,11 +69,8 @@
           mc.off(event, this.handler)
         }
         // define new handler
-        this.handler = function (e) {
-          e.targetVM = vm
-          fn.call(vm, e)
-        }
-        mc.on(event, this.handler)
+        this.handler = fn
+        mc.on(event, fn)
       },
 
       unbind: function () {
@@ -109,4 +111,4 @@
     Vue.use(vueTouch)
   }
 
-})()
+})()

Original file line number	Diff line number	Diff line change
`@@ -22,4 +22,4 @@ new Vue({`
`22`	`22`	`this.event = e.type`
`23`	`23`	`}`
`24`	`24`	`}`
`25`		`-})`
	`25`	`+})`