vue-touch - npm Package Compare versions
Comparing version 1.0.0 to 1.0.1
| { | ||
| "name": "vue-touch", | ||
| "version": "1.0.0", | ||
| "version": "1.0.1", | ||
| "main": "vue-touch.js", | ||
@@ -5,0 +5,0 @@ "files": [ |
@@ -7,5 +7,5 @@ # vue-touch | ||
| ## Usage | ||
| ## Install | ||
| ### CommonJS | ||
| #### CommonJS | ||
@@ -19,17 +19,40 @@ - Available through npm as `vue-touch`. | ||
| ### Direct include | ||
| #### 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`. | ||
| ### Using the `v-touch` directive | ||
| ## Usage | ||
| Then you can do this: | ||
| #### Using the `v-touch` directive | ||
| ``` html | ||
| <a v-touch:tap="onTap">Tap me!</a> | ||
| <div v-touch:swipeleft="onSwipeLeft">Swipe me!</div> | ||
| ``` | ||
| ### Register a custom event | ||
| #### Configuring Recognizer Options | ||
| There are two ways to customize recognizer options such as `direction` and `threshold`. The first one is setting global options: | ||
| ``` js | ||
| // change the threshold for all swipe recognizers | ||
| VueTouch.config.swipe = { | ||
| threshold: 200 | ||
| } | ||
| ``` | ||
| Or, you can use the `v-touch-options` directive to configure the behavior on a specific element: | ||
| ``` html | ||
| <!-- detect panning up only with a threshold of 100 --> | ||
| <a | ||
| v-touch:pan="onPan" | ||
| v-touch-options:pan="{ direction: 'up', threshold: 100 }"> | ||
| </a> | ||
| ``` | ||
| #### Registering Custom Events | ||
| ``` js | ||
| // example registering a custom doubletap event. | ||
@@ -43,2 +66,5 @@ // the `type` indicates the base recognizer to use from Hammer | ||
| ``` | ||
| ``` html | ||
| <a v-touch:doubletap="onDoubleTap"></a> | ||
| ``` | ||
@@ -45,0 +71,0 @@ See [Hammer.js documentation](http://hammerjs.github.io/getting-started/) for all available events. |
@@ -8,2 +8,3 @@ ;(function () { | ||
| var gestures = ['tap', 'pan', 'pinch', 'press', 'rotate', 'swipe'] | ||
| var directions = ['up', 'down', 'left', 'right', 'horizontal', 'vertical'] | ||
| var customeEvents = {} | ||
@@ -15,2 +16,5 @@ | ||
| // exposed global options | ||
| vueTouch.config = {} | ||
| vueTouch.install = function (Vue) { | ||
@@ -22,2 +26,3 @@ | ||
| acceptStatement: true, | ||
| priority: Vue.directive('on').priority, | ||
@@ -63,3 +68,18 @@ bind: function () { | ||
| } | ||
| // apply global options | ||
| var globalOptions = vueTouch.config[recognizerType] | ||
| if (globalOptions) { | ||
| guardDirections(globalOptions) | ||
| recognizer.set(globalOptions) | ||
| } | ||
| // apply local options | ||
| var localOptions = | ||
| this.el.hammerOptions && | ||
| this.el.hammerOptions[recognizerType] | ||
| if (localOptions) { | ||
| guardDirections(localOptions) | ||
| recognizer.set(localOptions) | ||
| } | ||
| } | ||
| this.recognizer = recognizer | ||
| }, | ||
@@ -75,5 +95,10 @@ | ||
| } | ||
| // define new handler | ||
| this.handler = fn | ||
| mc.on(event, fn) | ||
| if (typeof fn !== 'function') { | ||
| console.warn( | ||
| '[vue-touch] invalid handler function for v-touch:' + | ||
| this.arg + '="' + this.descriptor.raw | ||
| ) | ||
| } else { | ||
| mc.on(event, fn) | ||
| } | ||
| }, | ||
@@ -88,3 +113,14 @@ | ||
| } | ||
| }) | ||
| Vue.directive('touch-options', { | ||
| priority: Vue.directive('on').priority + 1, | ||
| update: function (options) { | ||
| var opts = this.el.hammerOptions || (this.el.hammerOptions = {}) | ||
| if (!this.arg) { | ||
| console.warn('[vue-touch] recognizer type argument for v-touch-options is required.') | ||
| } else { | ||
| opts[this.arg] = options | ||
| } | ||
| } | ||
| }) | ||
@@ -111,2 +147,8 @@ } | ||
| function guardDirections (options) { | ||
| if (typeof options.direction === 'string') { | ||
| options.direction = Hammer['DIRECTION_' + options.direction.toUpperCase()] | ||
| } | ||
| } | ||
| if (typeof exports == "object") { | ||
@@ -113,0 +155,0 @@ module.exports = vueTouch |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by43.87%
6831
- Lines of code
- increased by40.4%
139
- Number of lines in readme file
- increased by53.06%
75