From 1a917e5ea27cc171ef8ec7068b757f4584363059 Mon Sep 17 00:00:00 2001 From: zjf Date: Fri, 6 Sep 2019 17:31:08 +0800 Subject: [PATCH] fix: fix recognizer's direction --- example/App.vue | 17 +++++++++++++++++ index.js | 8 ++++++++ index.min.js | 2 +- 3 files changed, 26 insertions(+), 1 deletion(-) diff --git a/example/App.vue b/example/App.vue index 4ac39b8..2e75d55 100644 --- a/example/App.vue +++ b/example/App.vue @@ -15,6 +15,14 @@ v-hammer:panend="test2" > +
+
+ scrollable +
+
@@ -29,6 +37,15 @@ height: 200px; background-color: red; } +.scrollable-wrapper{ + width: 200px; + height: 200px; + overflow: scroll; +} +.scrollable{ + height: 600px; + background: aqua; +} diff --git a/index.js b/index.js index 53dc189..2ca57ef 100644 --- a/index.js +++ b/index.js @@ -73,6 +73,14 @@ export const VueHammer = { recognizer.recognizeWith(mc.recognizers) mc.add(recognizer) } + // set direction + if(el.__hammerConfig[recognizerType].direction.length === 1){ + let options = { + direction: el.__hammerConfig[recognizerType].direction[0] + } + this.guardDirections(options) + recognizer.set(options) + } // apply global options const globalOptions = this.config[recognizerType] if (globalOptions) { diff --git a/index.min.js b/index.min.js index 05ecf95..54136e8 100644 --- a/index.min.js +++ b/index.min.js @@ -1 +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);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}var gestures=["tap","pan","pinch","press","rotate","swipe"];var subGestures=["panstart","panend","panmove","pancancel","pinchstart","pinchmove","pinchend","pinchcancel","pinchin","pinchout","pressup","rotatestart","rotatemove","rotateend","rotatecancel"];var directions=["up","down","left","right","horizontal","vertical","all"];var VueHammer=exports.VueHammer={config:{},customEvents:{},install:function install(Vue){var _this=this;Vue.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;el.__hammerConfig[event].direction=el.__hammerConfig[event].direction||[];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});var subGesturesType=subGestures.find(function(gesture){return gesture===event});if(!recognizerType&&!subGesturesType){console.warn("[vue-hammer] invalid event type: "+event);return}if(subGesturesType&&el.__hammerConfig[subGesturesType].direction.length!==0){console.warn("[vue-hammer] "+subGesturesType+" should not have directions")}if(!recognizerType){return}if(recognizerType==="tap"||recognizerType==="pinch"||recognizerType==="press"||recognizerType==="rotate"){if(el.__hammerConfig[recognizerType].direction.length!==0){throw Error("[vue-hammer] "+recognizerType+" should not have directions")}}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;var eventWithDir=subGestures.find(function(subGes){return subGes===event})?event:_this.buildEventWithDirections(event,el.__hammerConfig[event].direction);if(mc.handler){mc.off(eventWithDir,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(eventWithDir,mc.handler=binding.value)}},componentUpdated:function componentUpdated(el,binding){var mc=el.hammer;var event=binding.arg;var eventWithDir=subGestures.find(function(subGes){return subGes===event})?event:_this.buildEventWithDirections(event,el.__hammerConfig[event].direction);if(mc.handler){mc.off(eventWithDir,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(eventWithDir,mc.handler=binding.value)}},unbind:function unbind(el,binding){var mc=el.hammer;var event=binding.arg;var eventWithDir=subGestures.find(function(subGes){return subGes===event})?event:_this.buildEventWithDirections(event,el.__hammerConfig[event].direction);if(mc.handler){el.hammer.off(eventWithDir,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)}}},buildEventWithDirections:function buildEventWithDirections(eventName,directionArray){var f={};directionArray.forEach(function(dir){dir=dir.toLowerCase();if(dir==="horizontal"){f.left=1;f.right=1}else if(dir==="vertical"){f.up=1;f.down=1}else if(dir==="all"){f.left=1;f.right=1;f.up=1;f.down=1}else{f[dir]=1}});var _directionArray=(0,_keys2.default)(f);if(_directionArray.length===0){return eventName}var eventWithDirArray=_directionArray.map(function(dir){return eventName+dir});return eventWithDirArray.join(" ")},capitalize:function capitalize(str){return str.charAt(0).toUpperCase()+str.slice(1)}}; \ No newline at end of file +"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);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}var gestures=["tap","pan","pinch","press","rotate","swipe"];var subGestures=["panstart","panend","panmove","pancancel","pinchstart","pinchmove","pinchend","pinchcancel","pinchin","pinchout","pressup","rotatestart","rotatemove","rotateend","rotatecancel"];var directions=["up","down","left","right","horizontal","vertical","all"];var VueHammer=exports.VueHammer={config:{},customEvents:{},install:function install(Vue){var _this=this;Vue.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;el.__hammerConfig[event].direction=el.__hammerConfig[event].direction||[];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});var subGesturesType=subGestures.find(function(gesture){return gesture===event});if(!recognizerType&&!subGesturesType){console.warn("[vue-hammer] invalid event type: "+event);return}if(subGesturesType&&el.__hammerConfig[subGesturesType].direction.length!==0){console.warn("[vue-hammer] "+subGesturesType+" should not have directions")}if(!recognizerType){return}if(recognizerType==="tap"||recognizerType==="pinch"||recognizerType==="press"||recognizerType==="rotate"){if(el.__hammerConfig[recognizerType].direction.length!==0){throw Error("[vue-hammer] "+recognizerType+" should not have directions")}}recognizer=mc.get(recognizerType);if(!recognizer){recognizer=new(_hammerjs2.default[_this.capitalize(recognizerType)]);recognizer.recognizeWith(mc.recognizers);mc.add(recognizer)}if(el.__hammerConfig[recognizerType].direction.length===1){var options={direction:el.__hammerConfig[recognizerType].direction[0]};_this.guardDirections(options);recognizer.set(options)}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;var eventWithDir=subGestures.find(function(subGes){return subGes===event})?event:_this.buildEventWithDirections(event,el.__hammerConfig[event].direction);if(mc.handler){mc.off(eventWithDir,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(eventWithDir,mc.handler=binding.value)}},componentUpdated:function componentUpdated(el,binding){var mc=el.hammer;var event=binding.arg;var eventWithDir=subGestures.find(function(subGes){return subGes===event})?event:_this.buildEventWithDirections(event,el.__hammerConfig[event].direction);if(mc.handler){mc.off(eventWithDir,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(eventWithDir,mc.handler=binding.value)}},unbind:function unbind(el,binding){var mc=el.hammer;var event=binding.arg;var eventWithDir=subGestures.find(function(subGes){return subGes===event})?event:_this.buildEventWithDirections(event,el.__hammerConfig[event].direction);if(mc.handler){el.hammer.off(eventWithDir,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)}}},buildEventWithDirections:function buildEventWithDirections(eventName,directionArray){var f={};directionArray.forEach(function(dir){dir=dir.toLowerCase();if(dir==="horizontal"){f.left=1;f.right=1}else if(dir==="vertical"){f.up=1;f.down=1}else if(dir==="all"){f.left=1;f.right=1;f.up=1;f.down=1}else{f[dir]=1}});var _directionArray=(0,_keys2.default)(f);if(_directionArray.length===0){return eventName}var eventWithDirArray=_directionArray.map(function(dir){return eventName+dir});return eventWithDirArray.join(" ")},capitalize:function capitalize(str){return str.charAt(0).toUpperCase()+str.slice(1)}}; \ No newline at end of file