Refactoring

README.md

@@ -48,11 +48,11 @@ vue-touch supports all Hammer Events ot of the box, just bind a listener to the
 
 |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"`|
+|**Pan**|`pan`, `panstart`, `panmove`, `panend`, `pancancel`, <br>`panleft`, `panright`, `panup`, `pandown` |`v-on:panstart="callback"`|
+|**Pinch**|`pinch`, `pinchstart`, `pinchmove`,`pinchend`, <br>`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"`|
+|**Rotate**|`rotate`, `rotatestart`, `rotatemove`, <br>`rotateend`, `rotatecancel`, |`v-on:rotateend="callback"`|
+|**Swipe**|`swipe`, `swipeleft`, `swiperight`, <br>`swipeup`, `swipedown`|`v-on:swipeleft="callback"`|
 |**Tap**|`tap`|`v-on:tap="callback"`|
 
 ### Component Props
@@ -62,6 +62,7 @@ vue-touch supports all Hammer Events ot of the box, just bind a listener to the
 
 You can use the matching `*-options` props to pass Hammer options such as `direction` and `threshold`:
 
+**Example**
 ``` html
 <!-- detect only horizontal pans with a threshold of 100 -->
 <v-touch
@@ -91,6 +92,31 @@ VueTouch keeps that from you and accepts simple strings as directions:
 const directions = ['up', 'down', 'left', 'right', 'horizontal', 'vertical', 'all']
 ```
 
+#### `recognize-with` & `require-failure` Props
+
+To define which gestures should be recognized together, use `recognize-with`:
+
+```html
+<v-touch
+  v-on:pan="handler"
+  v-on:swipe="otherHandler"
+  recognize-with="{pan: ['swipe' /*, other recognizers*/]}"
+/>
+```
+
+If you a recognizer to trigger only if another one failes, use `require-failure`:
+```html
+<!--
+  the tap handler will only be called if the doubletp recognizer doesn't trigger.
+-->
+<v-touch
+  v-on:tap="handleSingleTap"
+  v-on:doubletap="handleDoubleTap"
+  require-failure="{tap: ['doubletap']}"
+/>
+
+```
+
 #### The 'enabled' Prop
 
 |Prop|allowed Values|
@@ -99,7 +125,8 @@ const directions = ['up', 'down', 'left', 'right', 'horizontal', 'vertical', 'al
 
 You can enable and disable all or some of the event recognizers via the `enabled` prop:
 
-```
+**Example**
+```html
 <v-touch
   <!-- enable all recognizers -->
   v-bind:enabled="true"
@@ -113,6 +140,21 @@ You can enable and disable all or some of the event recognizers via the `enabled
 ></v-touch>
 ```
 
+#### The 'options' prop
+
+Hammer accepts a few general options that are normally passed when creating a Hammer instance with `new Hammer()` or `new Hammer.Manager()`.
+
+In vue-touch, you can pass those options via the `options` prop:
+
+|Prop|allowed Values|
+|----|--------------|
+|options| https://hammerjs.github.io/api/#hammer.defaults |
+
+**Example**
+```html
+<v-touch options="{ touchAction: 'pan' }" />
+```
+
 
 ### Public Component Methods
 
@@ -188,7 +230,7 @@ See `/example` for a multi-event demo. To build it, run `npm install && npm run
 
 As of the moment of this writing, requiring HammerJS in a non-browser-environment (like during the build process of your SSR bundle) throws an error ([hammerjs/hammerjs#1060](https://github.com/hammerjs/hammer.js/issues/1060)).
 
-The easiest fix to that is to use a webpack alias to replace the hammerjs package with a module that just exports a stub, i.e. an empty object. vue-touch comes with such a module, called `hammer-ssr.js`
+The easiest fix to that is to use a webpack alias (in your **server-side(!)** webpack copnfiguration) to replace the hammerjs package with a module that just exports a stub, i.e. an empty object. vue-touch comes with such a module, called `hammer-ssr.js`
 ```JavaScript
 alias: {
   'hammerjs$': 'vue-touch/dist/hammer-ssr.js'

build/rollup.js

@@ -0,0 +1,45 @@
+const buble = require('rollup-plugin-buble');
+const commonjs = require('rollup-plugin-commonjs');
+const nodeResolve = require('rollup-plugin-node-resolve');
+const cleanup = require('rollup-plugin-cleanup');
+const { rollup } = require('rollup');
+const path = require('path');
+
+const bubbleConfig = {
+  transforms: { dangerousForOf: true },
+};
+
+// UMD
+rollup({
+  entry: path.resolve(__dirname, '../src/index.js'),
+  sourceMap: true,
+  external: ['hammerjs'],
+
+  plugins: [
+    buble(bubbleConfig),
+    nodeResolve({ jsnext: true, main: true }),
+    commonjs(),
+    cleanup()
+  ]
+}).then(bundle => bundle.write({
+  format: 'umd',
+  exports: 'named',
+  moduleName: 'VueTouch',
+  globals: {
+    hammerjs: 'Hammer'
+  },
+  dest: path.join(path.resolve(__dirname, '../dist'), 'vue-touch.js')
+}))
+
+// ESM
+rollup({
+  entry: path.resolve(__dirname, '../src/index.js'),
+  external: ['hammerjs'],
+  plugins: [
+    buble(bubbleConfig),
+    cleanup()
+  ]
+}).then(bundle => bundle.write({
+  format: 'es',
+  dest: path.join(path.resolve(__dirname, '../dist'), 'vue-touch.esm.js'),
+}));

dist/hammer-ssr.js

@@ -1,7 +1,5 @@
-export default class Hammer {
-  contructor() {
-    console.log(`[vue-touch] Your should never see this message.
-      When you do, your code tried to call 'new Hammer(), but your app has included a stub for HammerJS, provided by vue-touch, instead of the actual HammerJS library.
-      `)
-  }
+module.exports = function Hammer {
+  console.log(`[vue-touch] Your should never see this message.
+    When you do, your code tried to call 'new Hammer(), but your app has included a stub for HammerJS, provided by vue-touch, instead of the actual HammerJS library.
+  `)
 }

example/example.js

@@ -3,7 +3,7 @@ var Vue = require('vue')
 var VueTouch
 
 if (process.env.NODE_ENV === 'development') {
-  VueTouch = require('../src')
+  VueTouch = require('../src').default
 }
 else {
   VueTouch = require('../dist/vue-touch.js')
@@ -29,10 +29,14 @@ new Vue({
     state: {rotate: true, doubletap: true}
   },
   methods: {
-    test: function (e) {
+    test: function (e, name = '') {
       delete e.target
       this.event = e
-      console.log(e)
+      console.log(e, name)
+    },
+    testdouble: function (e) {
+      console.log('doubletap')
+      this.test(e)
     }
   }
 })

example/index.html

@@ -14,13 +14,19 @@
   </head>
   <body>
     <div id="app">
-      <!-- <v-touch tag="div" id="test-div"
-        @swipe="test"
-        @doubletap="test"
-        :doubletap-options="{taps: 3}"
+      <v-touch tag="div" id="test-div"
+        @tap="test($event, 'single')"
+        @doubletap="test($event, 'double')"
+        :doubletap-options="{ intervall: 400 }"
+        :recognize-with="{ doubletap: ['tap'] }"
+        :require-failure="{ tap: ['doubletap'] }"
       >
+      <!--
+
+      :require-failure="{ tap: ['doubletap'] }"
+      -->
         <p>{{event.type}}</p>
-      </v-touch> -->
+      </v-touch>
       <pre>{{event}}</pre>
 
       <rotator :state="state">

package.json

@@ -1,9 +1,12 @@
 {
   "name": "vue-touch",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.4",
   "main": "dist/vue-touch.js",
+  "jsnext:main": "dist/vue-touch.esm.js",
+  "module": "dist/vue-touch.esm.js",
   "files": [
     "dist/vue-touch.js",
+    "dist/vue-touch.esm.js",
     "dist/vue-touch.js.map",
     "dist/vue-touch.min.js",
     "dist/hammer-ssr.js"
@@ -39,7 +42,7 @@
     "vue": "^2.0.0"
   },
   "scripts": {
-    "build": "node_modules/.bin/rollup -m -c build/rollup.config.prod.js && uglifyjs dist/vue-touch.js -c -m > dist/vue-touch.min.js && cp src/hammer-ssr.js dist/",
+    "build": "node build/rollup.js && uglifyjs dist/vue-touch.js -c -m > dist/vue-touch.min.js && cp src/hammer-ssr.js dist/",
     "dev": "node build/devserver.js",
     "test:watch": "NODE_ENV=development node_modules/.bin/ava --watch --verbose",
     "test:unit:dev": "NODE_ENV=development node_modules/.bin/ava --verbose",