From dd73b4345a56f4e33310054ab2c3c38bc2b68a0c Mon Sep 17 00:00:00 2001 From: Zhengyang Zhao Date: Thu, 9 Aug 2018 16:32:40 +0800 Subject: [PATCH 1/3] fix multiple directions in one recognizer problem --- example/App.vue | 39 ++++++++++++++++++++------------------- example/main.js | 6 ++++-- index.js | 45 +++++++++++++++++++++++++-------------------- package.json | 5 +++-- 4 files changed, 52 insertions(+), 43 deletions(-) diff --git a/example/App.vue b/example/App.vue index ab0a66a..730b6f0 100644 --- a/example/App.vue +++ b/example/App.vue @@ -2,7 +2,7 @@
{{ msg }} @@ -10,40 +10,41 @@ class="content" v-hammer:press="test2" v-hammer:tap="test" + v-hammer:pan.left="test" >
\ No newline at end of file diff --git a/example/main.js b/example/main.js index 03331a9..113e280 100644 --- a/example/main.js +++ b/example/main.js @@ -1,5 +1,7 @@ import Vue from 'vue' -import { VueHammer } from '../index' +import { + VueHammer +} from '../index' import App from './App.vue' //use the plugin @@ -11,4 +13,4 @@ new Vue({ event: '' }, render: h => h(App) -}) +}) \ No newline at end of file diff --git a/index.js b/index.js index 9215656..7f32e80 100644 --- a/index.js +++ b/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,15 +54,15 @@ 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 @@ -64,12 +70,12 @@ export const VueHammer = { 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) }, -} - +} \ No newline at end of file diff --git a/package.json b/package.json index 03be929..571c735 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,14 @@ { "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": "bsdfzzzy@gmail.com", "main": "index.js", "scripts": { "build": "./node_modules/.bin/webpack --config webpack.config.js" }, "dependencies": { + "@types/hammerjs": "^2.0.35", "hammerjs": "^2.0.8" }, "devDependencies": { @@ -36,4 +37,4 @@ "url": "https://github.com/bsdfzzzy/vue2-hammer/issues" }, "homepage": "https://github.com/bsdfzzzy/vue2-hammer#readme" -} +} \ No newline at end of file From ae19d5a5ca9100e763f1a70d0cbe38d0c4e6e4c6 Mon Sep 17 00:00:00 2001 From: Zhengyang Zhao Date: Thu, 9 Aug 2018 17:06:16 +0800 Subject: [PATCH 2/3] upgrade webpack to 4.0.0+\ --- package.json | 18 ++++++++++-------- webpack.config.js | 27 +++++++++++++++++++-------- 2 files changed, 29 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 571c735..8fa7f4e 100644 --- a/package.json +++ b/package.json @@ -8,22 +8,24 @@ "build": "./node_modules/.bin/webpack --config webpack.config.js" }, "dependencies": { - "@types/hammerjs": "^2.0.35", "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", @@ -37,4 +39,4 @@ "url": "https://github.com/bsdfzzzy/vue2-hammer/issues" }, "homepage": "https://github.com/bsdfzzzy/vue2-hammer#readme" -} \ No newline at end of file +} diff --git a/webpack.config.js b/webpack.config.js index 149c46a..20dfcb3 100644 --- a/webpack.config.js +++ b/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() + ] + } +} \ No newline at end of file From 15decd2d37ab334f3eb62d4603411a65ac78c717 Mon Sep 17 00:00:00 2001 From: Zhengyang Zhao Date: Thu, 9 Aug 2018 17:16:31 +0800 Subject: [PATCH 3/3] add index.min.js --- example/main.js | 2 +- index.min.js | 1 + package.json | 7 ++++--- 3 files changed, 6 insertions(+), 4 deletions(-) create mode 100644 index.min.js diff --git a/example/main.js b/example/main.js index 113e280..8fb43f5 100644 --- a/example/main.js +++ b/example/main.js @@ -1,7 +1,7 @@ import Vue from 'vue' import { VueHammer -} from '../index' +} from '../index.min' import App from './App.vue' //use the plugin diff --git a/index.min.js b/index.min.js new file mode 100644 index 0000000..afe7b54 --- /dev/null +++ b/index.min.js @@ -0,0 +1 @@ +"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.VueHammer=undefined;var _keys=require("babel-runtime/core-js/object/keys");var _keys2=_interopRequireDefault(_keys);var _hammerjs=require("hammerjs");var _hammerjs2=_interopRequireDefault(_hammerjs);var _vue=require("vue");var _vue2=_interopRequireDefault(_vue);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}var gestures=["tap","pan","pinch","press","rotate","swipe"];var directions=["up","down","left","right","horizontal","vertical","all"];var VueHammer=exports.VueHammer={config:{},customEvents:{},install:function install(){var _this=this;_vue2.default.directive("hammer",{bind:function bind(el,binding){if(!el.hammer){el.hammer=new _hammerjs2.default.Manager(el)}var mc=el.hammer;var event=binding.arg;if(!event){console.warn("[vue-hammer] event type argument is required.")}el.__hammerConfig=el.__hammerConfig||{};el.__hammerConfig[event]={};var direction=binding.modifiers;if((0,_keys2.default)(direction).length){(0,_keys2.default)(direction).filter(function(keyName){return binding.modifiers[keyName]}).forEach(function(keyName){var elDirectionArray=el.__hammerConfig[event].direction||[];if(elDirectionArray.indexOf(keyName)===-1){elDirectionArray.push(String(keyName))}})}var recognizerType=void 0,recognizer=void 0;if(_this.customEvents[event]){var custom=_this.customEvents[event];recognizerType=custom.type;recognizer=new(_hammerjs2.default[_this.capitalize(recognizerType)])(custom);recognizer.recognizeWith(mc.recognizers);mc.add(recognizer)}else{recognizerType=gestures.find(function(gesture){return gesture===event});if(!recognizerType){console.warn("[vue-hammer] invalid event type: "+event);return}recognizer=mc.get(recognizerType);if(!recognizer){recognizer=new(_hammerjs2.default[_this.capitalize(recognizerType)]);recognizer.recognizeWith(mc.recognizers);mc.add(recognizer)}var globalOptions=_this.config[recognizerType];if(globalOptions){_this.guardDirections(globalOptions);recognizer.set(globalOptions)}var localOptions=el.hammerOptions&&el.hammerOptions[recognizerType];if(localOptions){_this.guardDirections(localOptions);recognizer.set(localOptions)}}},inserted:function inserted(el,binding){var mc=el.hammer;var event=binding.arg;if(mc.handler){mc.off(event,mc.handler)}if(typeof binding.value!=="function"){mc.handler=null;console.warn("[vue-hammer] invalid handler function for v-hammer: "+binding.arg)}else{mc.on(event,mc.handler=binding.value)}},componentUpdated:function componentUpdated(el,binding){var mc=el.hammer;var event=binding.arg;if(mc.handler){mc.off(event,mc.handler)}if(typeof binding.value!=="function"){mc.handler=null;console.warn("[vue-hammer] invalid handler function for v-hammer: "+binding.arg)}else{mc.on(event,mc.handler=binding.value)}},unbind:function unbind(el,binding){var mc=el.hammer;if(mc.handler){el.hammer.off(binding.arg,mc.handler)}if(!(0,_keys2.default)(mc.handlers).length){el.hammer.destroy();el.hammer=null}}})},guardDirections:function guardDirections(options){var dir=options.direction;if(typeof dir==="string"){var hammerDirection="DIRECTION_"+dir.toUpperCase();if(directions.indexOf(dir)>-1&&_hammerjs2.default.hasOwnProperty(hammerDirection)){options.direction=_hammerjs2.default[hammerDirection]}else{console.warn("[vue-hammer] invalid direction: "+dir)}}},capitalize:function capitalize(str){return str.charAt(0).toUpperCase()+str.slice(1)}}; \ No newline at end of file diff --git a/package.json b/package.json index 8fa7f4e..ca92688 100644 --- a/package.json +++ b/package.json @@ -3,9 +3,10 @@ "description": "Hammer.js wrapper for Vue 2.x to support some touching operation in the mobile.", "version": "2.0.0", "author": "bsdfzzzy@gmail.com", - "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" @@ -39,4 +40,4 @@ "url": "https://github.com/bsdfzzzy/vue2-hammer/issues" }, "homepage": "https://github.com/bsdfzzzy/vue2-hammer#readme" -} +} \ No newline at end of file