[WIP] New Setup for Vue 2: vue-touch component.

.gitignore

@@ -1,3 +1,6 @@
 node_modules
 .DS_Store
 example/example.build.js
+example/vendor.build.js
+example/*.map
+npm-debug.log

README.md

@@ -2,36 +2,120 @@
 
 > 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
 
-#### CommonJS
+> This plugin requires Vue >= 2.0. For the Vue 1.\*-compatible version, see the `1.0` branch
+
 
 - Available through npm as `vue-touch`.
 
-  ``` js
-  var VueTouch = require('vue-touch')
-  Vue.use(VueTouch)
-  ```
+```Javascript
+var VueTouch = require('vue-touch')
+Vue.use(VueTouch, {name: 'v-touch'})
+```
+You can pass an options object as the second argument, which at the moment accepts one property, `name`. It's used to define the name of the component that is registered with Vue and defaults to `'v-touch'`.
 
 #### Direct include
 
 - 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`.
 
 ## 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>
+
+<!-- Render as other elements with the 'tag' prop -->
+<v-touch tag="a" v-on:tap="onTap">Tap me!</v-touch>
+```
+
+## API
+
+### Component 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"`|
+
+### Component Props
 
-<div v-touch:swipeleft="onSwipeLeft">Swipe me!</div>
+You can use the matching `*-options` props to pass Hammer options such as `direction` and `threshold`:
+
+``` html
+<!-- detect only horizontal pans with a threshold of 100 -->
+<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`|
+
+See [Hammer.js documentation](http://hammerjs.github.io/getting-started/) for all available options for events.
 
-#### Configuring Recognizer Options
+#### Directions
 
-There are two ways to customize recognizer options such as `direction` and `threshold`. The first one is setting global options:
+In the above example, not that we used `direction: 'horizontal'`. Hammer's directions interface is a little ugly (Hammer['DIRECTION_HORIZONTAL']).
+
+VueTouch keeps that from you and accepts simple strings as directions:
+
+```javascript
+const directions = ['up', 'down', 'left', 'right', 'horizontal', 'vertical', 'all']
+```
+
+## Public Component Methods
+
+The component 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>
+```
+
+### Plugin Methods
+
+#### Global Event Options
+
+You can define global defaults for the builtin recognizers
 
 ``` js
 // change the threshold for all swipe recognizers
@@ -40,18 +124,10 @@ VueTouch.config.swipe = {
 }
 ```
 
-Or, you can use the `v-touch-options` directive 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>
-```
-
 #### Registering Custom Events
 
+You can register custom events with vue-touch.
+
 ``` js
 // example registering a custom doubletap event.
 // the `type` indicates the base recognizer to use from Hammer
@@ -61,14 +137,28 @@ 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`.
 
+## Known Limitations & Bugs
+
+* Curently, changing `-options` props will not change recogizer settings. The initial values will stay in place until the component is re-created.
+
+## TODO
+
+* [ ] Support updating recognizer options when props change.
+* [ ] Find out if e2e tests are possible(contribution welcome)
+
 ## 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)`

build/devserver.js

@@ -0,0 +1,14 @@
+var webpack = require('webpack')
+var DevServer = require('webpack-dev-server')
+var config = require('./webpack.config.dev.js')
+config.entry.example.unshift("webpack-dev-server/client?http://localhost:8080/", "webpack/hot/dev-server");
+var compiler = webpack(config)
+var server = new DevServer(compiler, {
+  contentBase: './example/',
+  clientLogLevel: 'warning',
+  hot: true,
+})
+
+server.listen(8080)
+
+module.exports = server

build/rollup.config.prod.js

@@ -0,0 +1,23 @@
+import buble from 'rollup-plugin-buble'
+import commonjs from 'rollup-plugin-commonjs'
+import nodeResolve from 'rollup-plugin-node-resolve'
+import cleanup from 'rollup-plugin-cleanup'
+
+export default {
+  entry: './src/index.js',
+  dest: './dist/vue-touch.js',
+  // Module settings
+  format: 'umd',
+  external: ['hammerjs'],
+  globals: {
+    hammerjs: 'Hammer'
+  },
+  moduleName: 'VueTouch',
+
+  plugins: [
+    buble(),
+    nodeResolve({ jsnext: true, main: true }),
+    commonjs(),
+    cleanup()
+  ]
+}

build/webpack.config.dev.js

@@ -0,0 +1,55 @@
+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: 'VueTouch',
+    libraryTarget: 'umd',
+    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.HotModuleReplacementPlugin(),
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: process.env.NODE_ENV ? JSON.stringify(process.env.NODE_ENV) : "'development'"
+      }
+    }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor'
+    })
+  ],
+  devtool: 'source-map',
+  performance: {
+    hints: false
+  },
+  /*devServer: {
+    contentBase: '/example/'
+  }*/
+}
+
+module.exports = config