Convert to component for Vue 2.0

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 .DS_Store
 example/example.build.js
+npm-debug.log

README.md

@@ -2,17 +2,20 @@
 
 > Touch events plugin for Vue.js
 
-This is a directive wrapper for Hammer.js 2.0.
+This is a component wrapper for Hammer.js 2.0.
 
 ## Install
 
+> This plugin requires Vue >= 2.0. For the Vue 1.\*-compatible version, see the `1.0` branch
+
 #### CommonJS
 
 - Available through npm as `vue-touch`.
 
   ``` js
+  var Hammer = require('hammerjs')
   var VueTouch = require('vue-touch')
-  Vue.use(VueTouch)
+  Vue.use(VueTouch, {hammer: Hammer})
   ```
 
 #### Direct include
@@ -21,17 +24,36 @@ This is a directive wrapper for Hammer.js 2.0.
 
 ## Usage
 
-#### Using the `v-touch` directive
+#### Using the `<v-touch>` component
 
 ``` html
-<a v-touch:tap="onTap">Tap me!</a>
+<!-- Renders a div element by default -->
+<v-touch v-on:swipeleft="onSwipeLeft">Swipe me!</v-touch>
 
-<div v-touch:swipeleft="onSwipeLeft">Swipe me!</div>
+<!-- Render as other elements with the 'tag' prop -->
+<v-touch tag="a" v-on:tap="onTap">Tap me!</v-touch>
 ```
 
-#### Configuring Recognizer Options
+## API
+
+### Events
+
+vue-touch supports all Hammer Events ot of the box, just bind a listener to the component with `v-on` and vue-touch will setup the Hammer Manager & Recognizer for you.
+
+|Recognizer|Events|Example|
+|---|----|----|----|
+|**Pan**|`pan`, `panstart`, `panmove`, `panend`, `pancancel`, `panleft`, `panright`, `panup`, `pandown` |`v-on:panstart="callback"`|
+|**Pinch**|`pinch`, `pinchstart`, `pinchmove`,`pinchend`, `pinchcancel`, `pinchin`, `pinchout`| `v-on:pinchout="callback"`|
+|**Press**|`press`, `pressup`|`v-on:pressup="callback"`|
+|**Rotate**|`rotate`, `rotatestart`, `rotatemove`, `rotateend`, `rotatecancel`, |`v-on:rotateend="callback"`|
+|**Swipe**|`swipe`, `swipeleft`, `swiperight`, `swipeup`, `swipedown`|`v-on:swipeleft="callback"`|
+|**Tap**|`tap`|`v-on:tap="callback"`|
+
+### Event Options
 
-There are two ways to customize recognizer options such as `direction` and `threshold`. The first one is setting global options:
+There are two ways to customize recognizer options such as `direction` and `threshold`.
+
+#### Defining Global Options
 
 ``` js
 // change the threshold for all swipe recognizers
@@ -40,17 +62,35 @@ VueTouch.config.swipe = {
 }
 ```
 
-Or, you can use the `v-touch-options` directive to configure the behavior on a specific element:
+#### Passing Options as props
+
+Or, you can use the matching `*-options` props to configure the behavior on a specific element:
 
 ``` html
 <!-- detect only horizontal pans with a threshold of 100 -->
-<a
-  v-touch:pan="onPan"
-  v-touch-options:pan="{ direction: 'horizontal', threshold: 100 }">
-</a>
+<v-touch
+  v-on:panstart="onPanStart"
+  v-bind:pan-options="{ direction: 'horizontal', threshold: 100 }">
+</v-touch>
 ```
+There's one prop per `Recognizer` available.
+
+|Recognizer|Prop|
+|----------|----|
+|**Pan**|`v-bind:pan-options`|
+|**Pinch**|`v-bind:pinch-options`|
+|**Rotate**|`v-bind:rotate-options`|
+|**Swipe**|`v-bind:swipe-options`|
+|**Tap**|`v-bind:tap-options`|
+
 
-#### Registering Custom Events
+These options will overwrite globally defined ones.
+
+See [Hammer.js documentation](http://hammerjs.github.io/getting-started/) for all available options for events.
+
+## Registering Custom Events
+
+You can register custom events with vue-touch.
 
 ``` js
 // example registering a custom doubletap event.
@@ -61,14 +101,49 @@ VueTouch.registerCustomEvent('doubletap', {
   taps: 2
 })
 ```
+> **Warning**: You have to register your custom events *before* installing the plugin with `Vue.use(VueTouch)`.
+VueTouch will log a warning to the console (in dev mode) if you try to do that afterwards, and the event will not work.
+
+This will make it possible to listen for this event on `<v-touch>`. Additionally, just like for "normal" events, you can pass further options as the corresponding prop.
+
 ``` html
-<a v-touch:doubletap="onDoubleTap"></a>
+<v-touch v-on:doubletap="onDoubleTap"></v-touch>
+<!-- with local options -->
+<v-touch v-on:doubletap="onDoubleTap" v-bind:doubletap-options="{intervall: 250}"></v-touch>
 ```
 
-See [Hammer.js documentation](http://hammerjs.github.io/getting-started/) for all available events.
-
 See `/example` for a multi-event demo. To build it, run `npm install && npm run build`.
 
+## Public Methods
+
+The vue-touch exposes a few convenience methods to enable and disable Recognizers:
+
+|Method|Explanation|
+|------|-----------|
+|`disable(event)`|disable the Recognizer for `event`|
+|`enable(event)`|disable the Recognizer for `event`|
+|`disableAll`|disable all Recognizers|
+|`enableAll`|enable all Recognizers|
+|`isEnabled(event)`|returns `true` if Recognizer for `event` is currently enabled|
+
+```html
+<template>
+  <v-touch ref="tapper" @tap="callback"></v-touch>
+</template>
+<script>
+  export default {
+    methods: {
+      disableTap() {
+        this.$refs.tapper.disable('tap')
+      },
+      enableTap() {
+        this.$refs.tapper.enable('tap')
+      }
+    }
+  }
+</script>
+```
+
 ## License
 
 [MIT](http://opensource.org/licenses/MIT)

TODO.md

@@ -0,0 +1,13 @@
+* [x] refactor HammerJS out of this so it can be an external dependency passed into the plugin via options
+* [x] Improve Test cases in /examples/index.html
+* [x] Test prod build process with rollup
+* [x] Add test run with prod build
+* [x] clean up package.json
+* [x] add unit tests
+* [x] Write README docs
+* [ ] Write Release notes
+* [ ] create 1.0 Branch for old version
+* [x] include assign polyfill
+* [x] create function to define props to reduce size.
+* [ ] use DefinePlugin / ReplacePlugin to get rid of warnings in production.
+* [x] add public Methods `isEnabled(event)`

bs-config.js

@@ -0,0 +1,104 @@
+
+/*
+ |--------------------------------------------------------------------------
+ | Browser-sync config file
+ |--------------------------------------------------------------------------
+ |
+ | For up-to-date information about the options:
+ |   http://www.browsersync.io/docs/options/
+ |
+ | There are more options than you see here, these are just the ones that are
+ | set internally. See the website for more info.
+ |
+ |
+ */
+module.exports = {
+    "ui": {
+        "port": 3001,
+        "weinre": {
+            "port": 8080
+        }
+    },
+    "files": ["example/index.html", "example/example.build.js"],
+    "watchOptions": {},
+    "server": {
+      baseDir: "example",
+      index: "index.html"
+    },
+    "proxy": false,
+    "port": 3000,
+    "middleware": false,
+    "serveStatic": [],
+    "ghostMode": {
+        "clicks": true,
+        "scroll": true,
+        "forms": {
+            "submit": true,
+            "inputs": true,
+            "toggles": true
+        }
+    },
+    "logLevel": "info",
+    "logPrefix": "BS",
+    "logConnections": false,
+    "logFileChanges": true,
+    "logSnippet": true,
+    "rewriteRules": [],
+    "open": "local",
+    "browser": "default",
+    "cors": false,
+    "xip": false,
+    "hostnameSuffix": false,
+    "reloadOnRestart": false,
+    "notify": true,
+    "scrollProportionally": true,
+    "scrollThrottle": 0,
+    "scrollRestoreTechnique": "window.name",
+    "scrollElements": [],
+    "scrollElementMapping": [],
+    "reloadDelay": 0,
+    "reloadDebounce": 0,
+    "reloadThrottle": 0,
+    "plugins": [],
+    "injectChanges": true,
+    "startPath": null,
+    "minify": true,
+    "host": null,
+    "localOnly": false,
+    "codeSync": true,
+    "timestamps": true,
+    "clientEvents": [
+        "scroll",
+        "scroll:element",
+        "input:text",
+        "input:toggles",
+        "form:submit",
+        "form:reset",
+        "click"
+    ],
+    "socket": {
+        "socketIoOptions": {
+            "log": false
+        },
+        "socketIoClientConfig": {
+            "reconnectionAttempts": 50
+        },
+        "path": "/browser-sync/socket.io",
+        "clientPath": "/browser-sync",
+        "namespace": "/browser-sync",
+        "clients": {
+            "heartbeatTimeout": 5000
+        }
+    },
+    "tagNames": {
+        "less": "link",
+        "scss": "link",
+        "css": "link",
+        "jpg": "img",
+        "jpeg": "img",
+        "png": "img",
+        "svg": "img",
+        "gif": "img",
+        "js": "script"
+    }
+};

build/rollup.config.prod.js

@@ -0,0 +1,8 @@
+import buble from 'rollup-plugin-buble'
+
+export default {
+  entry: './src/index.js',
+  format: 'umd',
+  dest: './dist/vue-touch.js', // equivalent to --output
+  plugins: [buble()]
+};

build/webpack.config.dev.js

@@ -0,0 +1,46 @@
+var path = require('path')
+var webpack = require('webpack')
+
+const config = {
+  entry: {
+      example: './example/example.js',
+      vendor: ['vue', 'hammerjs'],
+  },
+  output: {
+    path: path.resolve(__dirname, "../example"),
+    publicPath: '/',
+    library: 'umd',
+    // libraryTarget: 'VueTouch',
+    filename: '[name].build.js'
+  },
+  resolve: {
+    alias: {
+      'vue$': 'vue/dist/vue.common'
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'buble-loader',
+        exclude: path.resolve(__dirname, "../node_modules")
+      },
+      {
+        test: /\.css$/,
+        loader: 'style-loader!css-loader',
+        exclude: path.resolve(__dirname, "../node_modules")
+      }
+    ]
+  },
+  plugins: [
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor'
+    })
+  ],
+  devtool: 'source-map',
+  performance: {
+    hints: false
+  }
+}
+
+module.exports = config