Merge pull request #17 from bsdfzzzy/2.0.0

2.0.0

example/App.vue

@@ -2,48 +2,49 @@
   <div>
     <div
       id="app-content"
-      v-hammer:pan="test"
+      v-hammer:pan.left.right="test"
     >
     </div>
     {{ msg }}
     <div
       class="content"
       v-hammer:press="test2"
       v-hammer:tap="test"
+      v-hammer:pan.left="test"
     >
     </div>
   </div>
 </template>
 
 <style>
-  #app-content {
-    width: 300px;
-    height: 200px;
-    background-color: #ddd;
-  }
-  .content {
-    width: 100px;
-    height: 200px;
-    background-color: red;
-  }
+#app-content {
+  width: 300px;
+  height: 200px;
+  background-color: #ddd;
+}
+.content {
+  width: 100px;
+  height: 200px;
+  background-color: red;
+}
 </style>
 
 
 <script>
 export default {
-  name: 'app',
-  data () {
+  name: "app",
+  data() {
     return {
-      msg: 'Welcome to Your Vue.js App'
-    }
+      msg: "Welcome to Your Vue.js App"
+    };
   },
   methods: {
     test(e) {
-      console.log(e)
+      console.log(e);
     },
     test2(e) {
-      console.log('aaaa')
+      console.log("aaaa");
     }
-  },
-}
+  }
+};
 </script>

example/main.js

@@ -1,5 +1,7 @@
 import Vue from 'vue'
-import { VueHammer } from '../index'
+import {
+  VueHammer
+} from '../index.min'
 import App from './App.vue'
 
 //use the plugin
@@ -11,4 +13,4 @@ new Vue({
     event: ''
   },
   render: h => h(App)
-})
+})

index.js

@@ -1,15 +1,15 @@
 import Hammer from 'hammerjs'
+import Vue from 'vue'
 
-const gestures = ['tap', 'pan', 'pinch', 'press', 'rotate', 'swipe', 'doubletap']
+const gestures = ['tap', 'pan', 'pinch', 'press', 'rotate', 'swipe']
 const directions = ['up', 'down', 'left', 'right', 'horizontal', 'vertical', 'all']
 
 export const VueHammer = {
   config: {},
   customEvents: {},
-  install: function(Vue) {
-    const that = this
+  install() {
     Vue.directive('hammer', {
-      bind(el, binding) {
+      bind: (el, binding) => {
         if (!el.hammer) {
           el.hammer = new Hammer.Manager(el)
         }
@@ -20,22 +20,28 @@ export const VueHammer = {
         if (!event) {
           console.warn('[vue-hammer] event type argument is required.')
         }
-        that.config[event] = {}
+        el.__hammerConfig = el.__hammerConfig || {}
+        el.__hammerConfig[event] = {}
 
         const direction = binding.modifiers
         if (Object.keys(direction).length) {
-          Object.keys(direction).map(keyName => {
-            that.config[event].direction = String(keyName)
-          })
+          Object.keys(direction)
+            .filter(keyName => binding.modifiers[keyName])
+            .forEach(keyName => {
+              const elDirectionArray = el.__hammerConfig[event].direction || [];
+              if (elDirectionArray.indexOf(keyName) === -1) {
+                elDirectionArray.push(String(keyName))
+              }
+            })
         }
 
         let recognizerType, recognizer
 
-        if (that.customEvents[event]) {
+        if (this.customEvents[event]) {
           // custom event
-          const custom = that.customEvents[event]
+          const custom = this.customEvents[event]
           recognizerType = custom.type
-          recognizer = new Hammer[that.capitalize(recognizerType)](custom)
+          recognizer = new Hammer[this.capitalize(recognizerType)](custom)
           recognizer.recognizeWith(mc.recognizers)
           mc.add(recognizer)
         } else {
@@ -48,28 +54,28 @@ export const VueHammer = {
           recognizer = mc.get(recognizerType)
           if (!recognizer) {
             // add recognizer
-            recognizer = new Hammer[that.capitalize(recognizerType)]()
+            recognizer = new Hammer[this.capitalize(recognizerType)]()
             // make sure multiple recognizers work together...
             recognizer.recognizeWith(mc.recognizers)
             mc.add(recognizer)
           }
           // apply global options
-          const globalOptions = VueHammer.config[recognizerType]
+          const globalOptions = this.config[recognizerType]
           if (globalOptions) {
-            that.guardDirections(globalOptions)
+            this.guardDirections(globalOptions)
             recognizer.set(globalOptions)
           }
           // apply local options
           const localOptions =
             el.hammerOptions &&
             el.hammerOptions[recognizerType]
           if (localOptions) {
-            that.guardDirections(localOptions)
+            this.guardDirections(localOptions)
             recognizer.set(localOptions)
           }
         }
       },
-      inserted(el, binding) {
+      inserted: (el, binding) => {
         const mc = el.hammer
         const event = binding.arg
         if (mc.handler) {
@@ -85,7 +91,7 @@ export const VueHammer = {
           mc.on(event, (mc.handler = binding.value))
         }
       },
-      update(el, binding) {
+      componentUpdated: (el, binding) => {
         const mc = el.hammer
         const event = binding.arg
         // teardown old handler
@@ -102,7 +108,7 @@ export const VueHammer = {
           mc.on(event, (mc.handler = binding.value))
         }
       },
-      unbind(el, binding) {
+      unbind: (el, binding) => {
         const mc = el.hammer
         if (mc.handler) {
           el.hammer.off(binding.arg, mc.handler)
@@ -128,5 +134,4 @@ export const VueHammer = {
   capitalize(str) {
     return str.charAt(0).toUpperCase() + str.slice(1)
   },
-}
-
+}

package.json

@@ -1,28 +1,32 @@
 {
   "name": "vue2-hammer",
   "description": "Hammer.js wrapper for Vue 2.x to support some touching operation in the mobile.",
-  "version": "1.0.7",
+  "version": "2.0.0",
   "author": "[email protected]",
-  "main": "index.js",
+  "main": "index.min.js",
   "scripts": {
-    "build": "./node_modules/.bin/webpack --config webpack.config.js"
+    "build": "./node_modules/.bin/webpack --config webpack.config.js",
+    "prepub": "babel index.js --out-file index.min.js && uglifyjs index.min.js -o index.min.js"
   },
   "dependencies": {
     "hammerjs": "^2.0.8"
   },
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.1",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.5",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-runtime": "^6.26.0",
-    "css-loader": "^0.28.7",
-    "uglifyjs-webpack-plugin": "^0.4.6",
+    "css-loader": "^1.0.0",
+    "uglifyjs-webpack-plugin": "^1.2.7",
     "vue": "^2.4.2",
-    "vue-loader": "^13.0.4",
+    "vue-loader": "^15.3.0",
+    "vue-style-loader": "^4.1.1",
     "vue-template-compiler": "^2.4.2",
     "vue2-hammer": "^1.0.2",
-    "webpack": "^3.5.5"
+    "webpack": "^4.16.5",
+    "webpack-cli": "^3.1.0"
   },
   "repository": {
     "type": "git",
@@ -36,4 +40,4 @@
     "url": "https://github.com/bsdfzzzy/vue2-hammer/issues"
   },
   "homepage": "https://github.com/bsdfzzzy/vue2-hammer#readme"
-}
+}

webpack.config.js

@@ -1,5 +1,6 @@
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
-const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
 const path = require('path')
 
 module.exports = {
@@ -12,21 +13,31 @@ module.exports = {
     extensions: ['.js']
   },
   module: {
-    loaders: [
-      {
+    rules: [{
         test: /.js$/,
-        loader: 'babel-loader',
+        use: 'babel-loader',
         exclude: /node_modules/
       },
       {
         test: /.vue$/,
-        loader: 'vue-loader',
+        use: 'vue-loader',
         exclude: /node_modules/
+      },
+      {
+        test: /\.css$/,
+        use: [
+          'vue-style-loader',
+          'css-loader'
+        ]
       }
     ]
   },
   plugins: [
-    // new BundleAnalyzerPlugin(),
-    // new UglifyJSPlugin()
+    new VueLoaderPlugin()
   ],
-}
+  optimization: {
+    minimizer: [
+      new UglifyJsPlugin()
+    ]
+  }
+}