diff --git a/README.md b/README.md index f0e243f..a198ef1 100644 --- a/README.md +++ b/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`,
`panleft`, `panright`, `panup`, `pandown` |`v-on:panstart="callback"`| +|**Pinch**|`pinch`, `pinchstart`, `pinchmove`,`pinchend`,
`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`,
`rotateend`, `rotatecancel`, |`v-on:rotateend="callback"`| +|**Swipe**|`swipe`, `swipeleft`, `swiperight`,
`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 +``` + +If you a recognizer to trigger only if another one failes, use `require-failure`: +```html + + + +``` + #### 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-bind:enabled="true" @@ -113,6 +140,21 @@ You can enable and disable all or some of the event recognizers via the `enabled > ``` +#### 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 + +``` + ### 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' diff --git a/build/rollup.config.prod.js b/build/rollup.config.prod.js deleted file mode 100644 index ee938d9..0000000 --- a/build/rollup.config.prod.js +++ /dev/null @@ -1,23 +0,0 @@ -import buble from 'rollup-plugin-buble' -import commonjs from 'rollup-plugin-commonjs' -import nodeResolve from 'rollup-plugin-node-resolve' -import cleanup from 'rollup-plugin-cleanup' - -export default { - entry: './src/index.js', - dest: './dist/vue-touch.js', - // Module settings - format: 'umd', - external: ['hammerjs'], - globals: { - hammerjs: 'Hammer' - }, - moduleName: 'VueTouch', - - plugins: [ - buble(), - nodeResolve({ jsnext: true, main: true }), - commonjs(), - cleanup() - ] -} diff --git a/build/rollup.js b/build/rollup.js new file mode 100644 index 0000000..a2cb1a9 --- /dev/null +++ b/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'), +})); diff --git a/dist/hammer-ssr.js b/dist/hammer-ssr.js index 3f95ad1..32b8f0e 100644 --- a/dist/hammer-ssr.js +++ b/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. + `) } diff --git a/dist/vue-touch.js b/dist/vue-touch.js index 455d345..6c9eaec 100644 --- a/dist/vue-touch.js +++ b/dist/vue-touch.js @@ -87,6 +87,7 @@ var gestureMap = { var Component = { props: { + options: createProp(), tapOptions: createProp(), panOptions: createProp(), pinchOptions: createProp(), @@ -101,7 +102,7 @@ var Component = { }, mounted: function mounted() { if (!this.$isServer) { - this.hammer = new Hammer.Manager(this.$el); + this.hammer = new Hammer.Manager(this.$el, this.options); this.recognizers = {}; this.setupBuiltinRecognizers(); this.setupCustomRecognizers(); @@ -255,7 +256,7 @@ if (typeof exports == "object") { module.exports = vueTouch; } else if (typeof define == "function" && define.amd) { define([], function(){ return vueTouch }); -} else if (window.Vue) { +} else if (typeof window !== 'undefined' && window.Vue) { window.VueTouch = vueTouch; Vue.use(vueTouch); } diff --git a/dist/vue-touch.js.map b/dist/vue-touch.js.map index 425430f..3e9a02e 100644 --- a/dist/vue-touch.js.map +++ b/dist/vue-touch.js.map @@ -1 +1 @@ -{"version":3,"file":null,"sources":["../src/utils.js","../src/component.js","../src/index.js"],"sourcesContent":["import Hammer from 'hammerjs' // used by guardDirections\n\n/**\n * Tiny Object.assign replacement\n * @param {Object} target Any type of object\n * @param {Object} sources Any type of object\n * @return {Object} Merged Object\n */\nexport function assign(target, ...sources) {\n for (let i = 0; i < sources.length; i++) {\n const source = sources[i]\n const keys = Object.keys(source)\n for (let i = 0; i < keys.length; i++) {\n const key = keys[i]\n target[key] = source[key]\n }\n }\n return target\n}\n\n/**\n * Small helper method to generate prop options for all the\n * *-options props.\n * @return {[type]} [description]\n */\nexport function createProp() {\n return {\n type: Object,\n default: function() { return {} }\n }\n}\n\nexport function capitalize (str) {\n return str.charAt(0).toUpperCase() + str.slice(1)\n}\n\n/**\n * Directions that VueTouch understands.\n * Will be tanslated to Hammer-style directions by guardDirections()\n * @type {Array}\n */\nexport const directions = ['up', 'down', 'left', 'right', 'horizontal', 'vertical', 'all']\n\n/**\n * Translates VueTouch direction names into Hammer Direction numbers.\n * @param {Objects} options Hammer Options\n * @return {Object} [Hammer Options]\n */\nexport function guardDirections (options) {\n var dir = options.direction\n if (typeof dir === 'string') {\n var hammerDirection = 'DIRECTION_' + dir.toUpperCase()\n if (directions.indexOf(dir) > -1 && Hammer.hasOwnProperty(hammerDirection)) {\n options.direction = Hammer[hammerDirection]\n } else {\n console.warn('[vue-touch] invalid direction: ' + dir)\n }\n }\n return options\n}\n\n/**\n * This pobject will contain global options for recognizers\n * see index.js -> vueTouch.config\n * @type {Object}\n */\nexport const config = {\n\n}\n\n/**\n * This object will contain recognizer options for custom events.\n * see index.js -> registerCustomEvent\n * @type {Object}\n */\nexport const customEvents = {\n\n}\n\n/**\n * Names of all the builtin gestures of Hammer\n * @type {Array}\n */\nexport const gestures = [\n 'pan','panstart','panmove','panend','pancancel','panleft','panright','panup','pandown',\n 'pinch','pinchstart','pinchmove','pinchend','pinchcancel','pinchin','pinchout',\n 'press','pressup',\n 'rotate','rotatestart','rotatemove','rotateend','rotatecancel',\n 'swipe','swipeleft','swiperight','swipeup','swipedown',\n 'tap'\n]\n\n/**\n * Maps the gestures to their \"main gesture\" (the name of the recognizer)\n * @type {Object}\n */\nexport const gestureMap = {\n pan: 'pan',\n panstart: 'pan',\n panmove: 'pan',\n panend: 'pan',\n pancancel: 'pan',\n panleft: 'pan',\n panright: 'pan',\n panup: 'pan',\n pandown: 'pan',\n pinch: 'pinch',\n pinchstart: 'pinch',\n pinchmove: 'pinch',\n pinchend: 'pinch',\n pinchcancel: 'pinch',\n pinchin: 'pinch',\n pinchout: 'pinch',\n press: 'press',\n pressup: 'press',\n rotate: 'rotate',\n rotatestart: 'rotate',\n rotatemove: 'rotate',\n rotateend: 'rotate',\n rotatecancel: 'rotate',\n swipe: 'swipe',\n swipeleft: 'swipe',\n swiperight: 'swipe',\n swipeup: 'swipe',\n swipedown: 'swipe',\n tap: 'tap'\n}\n","import Hammer from 'hammerjs'\n\nimport {\n createProp,\n capitalize,\n guardDirections,\n gestures,\n gestureMap,\n directions,\n assign,\n config,\n customEvents\n} from './utils'\n\nexport default {\n props: {\n tapOptions: createProp(),\n panOptions: createProp(),\n pinchOptions: createProp(),\n pressOptions: createProp(),\n rotateOptions: createProp(),\n swipeOptions: createProp(),\n tag: { type: String, default: 'div' },\n enabled: {\n default: true,\n type: [Boolean, Object],\n\n }\n },\n\n mounted() {\n if (!this.$isServer) {\n this.hammer = new Hammer.Manager(this.$el)\n this.recognizers = {} // not reactive\n this.setupBuiltinRecognizers()\n this.setupCustomRecognizers()\n this.updateEnabled(this.enabled)\n }\n },\n destroyed() {\n if (!this.$isServer) {\n this.hammer.destroy()\n }\n },\n\n watch: {\n enabled: {\n deep: true,\n handler(...args) {\n this.updateEnabled(...args)\n }\n }\n },\n\n methods: {\n\n setupBuiltinRecognizers() {\n // Built-in Hammer events\n // We check weither any event callbacks are registered\n // for the gesture, and if so, add a Recognizer\n for (let i = 0; i < gestures.length; i++) {\n const gesture = gestures[i]\n if (this._events[gesture]) {\n // get the main gesture (e.g. 'panstart' -> 'pan')\n const mainGesture = gestureMap[gesture]\n //merge global and local options\n const options = assign({}, (config[mainGesture] || {}), this[`${mainGesture}Options`])\n // add recognizer for this main gesture\n this.addRecognizer(mainGesture, options)\n // register Event Emit for the specific gesture\n this.addEvent(gesture)\n }\n }\n },\n\n setupCustomRecognizers() {\n // Custom events\n // We get the customGestures and options from the\n // customEvents object, then basically do the same check\n // as we did for the built-in events.\n const gestures = Object.keys(customEvents)\n\n for (let i = 0; i < gestures.length; i++) {\n\n const gesture = gestures[i]\n\n if (this._events[gesture]) {\n const opts = customEvents[gesture]\n const localCustomOpts = this[`${gesture}Options`] || {}\n const options = assign({}, opts, localCustomOpts)\n this.addRecognizer(gesture, options, {mainGesture: options.type})\n this.addEvent(gesture)\n }\n }\n },\n\n /**\n * Registers a new Recognizer with the manager and saves it on the component\n * instance\n * @param {String} gesture See utils.js -> gestures\n * @param {Object} options Hammer options\n * @param {String} mainGesture if gesture is a custom event name, mapping to utils.js -> gestures\n */\n addRecognizer: function addRecognizer(gesture, options, { mainGesture } = {}) {\n // create recognizer, e.g. new Hammer['Swipe'](options)\n if (!this.recognizers[gesture]) {\n const recognizer = new Hammer[capitalize(mainGesture || gesture)](guardDirections(options))\n this.recognizers[gesture] = recognizer\n this.hammer.add(recognizer)\n recognizer.recognizeWith(this.hammer.recognizers)\n }\n },\n\n addEvent(gesture) {\n this.hammer.on(gesture, (e) => this.$emit(gesture, e))\n },\n\n // Enabling / Disabling certain recognizers.\n\n /**\n * Called when the `enabled` prop changes, and during mounted()\n * It enables/disables values according to the value of the `emabled` prop\n * @param {Boolean|Object} newVal If an object: { recognizer: true|false }\n * @param {Boolean|Object} oldVal The previous value\n * @return {undefined}\n */\n updateEnabled: function updateEnabled(newVal, oldVal) {\n if (newVal === true) {\n this.enableAll()\n\n } else if (newVal === false) {\n this.disableAll()\n\n } else if (typeof newVal === 'object') {\n const keys = Object.keys(newVal)\n\n for (let i = 0; i < keys.length; i++) {\n const event = keys[i]\n\n if (this.recognizers[event]) {\n newVal[event]\n ? this.enable(event)\n : this.disable(event)\n }\n }\n }\n },\n\n enable(r) {\n const recognizer = this.recognizers[r]\n if (!recognizer.options.enable) {\n recognizer.set({ enable: true })\n }\n },\n disable(r) {\n const recognizer = this.recognizers[r]\n if (recognizer.options.enable) {\n recognizer.set({ enable: false })\n }\n },\n toggle(r) {\n const recognizer = this.recognizers[r]\n if (recognizer) {\n recognizer.options.enable\n ? this.disable(r)\n : this.enable(r)\n }\n },\n\n enableAll(r) {\n this.toggleAll({ enable: true })\n },\n disableAll(r) {\n this.toggleAll({ enable: false })\n },\n toggleAll({ enable }) {\n const keys = Object.keys(this.recognizers)\n for (let i = 0; i < keys.length; i++) {\n const r = this.recognizers[keys[i]]\n if (r.options.enable !== enable) {\n r.set({ enable: enable })\n }\n }\n },\n\n isEnabled(r) {\n return this.recognizers[r] && this.recognizers[r].options.enable\n }\n },\n\n render(h) {\n return h(this.tag, {}, this.$slots.default)\n }\n}\n","import Component from './component'\nimport { assign, config, customEvents } from './utils'\n\nlet installed = false\n\nconst vueTouch = { config, customEvents }\n\n// Plugin API\n// *********\nvueTouch.install = function install(Vue, opts = {}) {\n const name = opts.name || 'v-touch'\n Vue.component(name, assign(Component, { name }))\n installed = true\n}.bind(vueTouch)\n\nvueTouch.registerCustomEvent = function registerCustomEvent(event, options = {}) {\n if (installed) {\n console.warn(`\n [vue-touch]: Custom Event '${event}' couldn't be added to vue-touch.\n Custom Events have to be registered before installing the plugin.\n `)\n return\n }\n options.event = event\n customEvents[event] = options\n Component.props[`${event}Options`] = {\n type: Object,\n default() { return {} }\n }\n}.bind(vueTouch)\n\nvueTouch.component = Component\n\n// Utilities\n// ********\n\nif (typeof exports == \"object\") {\n module.exports = vueTouch\n} else if (typeof define == \"function\" && define.amd) {\n define([], function(){ return vueTouch })\n} else if (window.Vue) {\n window.VueTouch = vueTouch\n Vue.use(vueTouch)\n}\n"],"names":["let","const","i","this","gestures"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":null,"sources":["../src/utils.js","../src/component.js","../src/index.js"],"sourcesContent":["import Hammer from 'hammerjs' // used by guardDirections\n\n/**\n * Tiny Object.assign replacement\n * @param {Object} target Any type of object\n * @param {Object} sources Any type of object\n * @return {Object} Merged Object\n */\nexport function assign(target, ...sources) {\n for (let i = 0; i < sources.length; i++) {\n const source = sources[i]\n const keys = Object.keys(source)\n for (let i = 0; i < keys.length; i++) {\n const key = keys[i]\n target[key] = source[key]\n }\n }\n return target\n}\n\n/**\n * Small helper method to generate prop options for all the\n * *-options props.\n * @return {[type]} [description]\n */\nexport function createProp() {\n return {\n type: Object,\n default: function() { return {} }\n }\n}\n\nexport function capitalize (str) {\n return str.charAt(0).toUpperCase() + str.slice(1)\n}\n\n/**\n * Directions that VueTouch understands.\n * Will be tanslated to Hammer-style directions by guardDirections()\n * @type {Array}\n */\nexport const directions = ['up', 'down', 'left', 'right', 'horizontal', 'vertical', 'all']\n\n/**\n * Translates VueTouch direction names into Hammer Direction numbers.\n * @param {Objects} options Hammer Options\n * @return {Object} [Hammer Options]\n */\nexport function guardDirections (options) {\n var dir = options.direction\n if (typeof dir === 'string') {\n var hammerDirection = 'DIRECTION_' + dir.toUpperCase()\n if (directions.indexOf(dir) > -1 && Hammer.hasOwnProperty(hammerDirection)) {\n options.direction = Hammer[hammerDirection]\n } else {\n console.warn('[vue-touch] invalid direction: ' + dir)\n }\n }\n return options\n}\n\n/**\n * This pobject will contain global options for recognizers\n * see index.js -> vueTouch.config\n * @type {Object}\n */\nexport const config = {\n\n}\n\n/**\n * This object will contain recognizer options for custom events.\n * see index.js -> registerCustomEvent\n * @type {Object}\n */\nexport const customEvents = {\n\n}\n\n/**\n * Names of all the builtin gestures of Hammer\n * @type {Array}\n */\nexport const gestures = [\n 'pan','panstart','panmove','panend','pancancel','panleft','panright','panup','pandown',\n 'pinch','pinchstart','pinchmove','pinchend','pinchcancel','pinchin','pinchout',\n 'press','pressup',\n 'rotate','rotatestart','rotatemove','rotateend','rotatecancel',\n 'swipe','swipeleft','swiperight','swipeup','swipedown',\n 'tap'\n]\n\n/**\n * Maps the gestures to their \"main gesture\" (the name of the recognizer)\n * @type {Object}\n */\nexport const gestureMap = {\n pan: 'pan',\n panstart: 'pan',\n panmove: 'pan',\n panend: 'pan',\n pancancel: 'pan',\n panleft: 'pan',\n panright: 'pan',\n panup: 'pan',\n pandown: 'pan',\n pinch: 'pinch',\n pinchstart: 'pinch',\n pinchmove: 'pinch',\n pinchend: 'pinch',\n pinchcancel: 'pinch',\n pinchin: 'pinch',\n pinchout: 'pinch',\n press: 'press',\n pressup: 'press',\n rotate: 'rotate',\n rotatestart: 'rotate',\n rotatemove: 'rotate',\n rotateend: 'rotate',\n rotatecancel: 'rotate',\n swipe: 'swipe',\n swipeleft: 'swipe',\n swiperight: 'swipe',\n swipeup: 'swipe',\n swipedown: 'swipe',\n tap: 'tap'\n}\n","import Hammer from 'hammerjs'\n\nimport {\n createProp,\n capitalize,\n guardDirections,\n gestures,\n gestureMap,\n directions,\n assign,\n config,\n customEvents\n} from './utils'\n\nexport default {\n props: {\n options: createProp(),\n tapOptions: createProp(),\n panOptions: createProp(),\n pinchOptions: createProp(),\n pressOptions: createProp(),\n rotateOptions: createProp(),\n swipeOptions: createProp(),\n tag: { type: String, default: 'div' },\n enabled: {\n default: true,\n type: [Boolean, Object],\n\n }\n },\n\n mounted() {\n if (!this.$isServer) {\n this.hammer = new Hammer.Manager(this.$el, this.options)\n this.recognizers = {} // not reactive\n this.setupBuiltinRecognizers()\n this.setupCustomRecognizers()\n this.updateEnabled(this.enabled)\n }\n },\n destroyed() {\n if (!this.$isServer) {\n this.hammer.destroy()\n }\n },\n\n watch: {\n enabled: {\n deep: true,\n handler(...args) {\n this.updateEnabled(...args)\n }\n }\n },\n\n methods: {\n\n setupBuiltinRecognizers() {\n // Built-in Hammer events\n // We check weither any event callbacks are registered\n // for the gesture, and if so, add a Recognizer\n for (let i = 0; i < gestures.length; i++) {\n const gesture = gestures[i]\n if (this._events[gesture]) {\n // get the main gesture (e.g. 'panstart' -> 'pan')\n const mainGesture = gestureMap[gesture]\n //merge global and local options\n const options = assign({}, (config[mainGesture] || {}), this[`${mainGesture}Options`])\n // add recognizer for this main gesture\n this.addRecognizer(mainGesture, options)\n // register Event Emit for the specific gesture\n this.addEvent(gesture)\n }\n }\n },\n\n setupCustomRecognizers() {\n // Custom events\n // We get the customGestures and options from the\n // customEvents object, then basically do the same check\n // as we did for the built-in events.\n const gestures = Object.keys(customEvents)\n\n for (let i = 0; i < gestures.length; i++) {\n\n const gesture = gestures[i]\n\n if (this._events[gesture]) {\n const opts = customEvents[gesture]\n const localCustomOpts = this[`${gesture}Options`] || {}\n const options = assign({}, opts, localCustomOpts)\n this.addRecognizer(gesture, options, {mainGesture: options.type})\n this.addEvent(gesture)\n }\n }\n },\n\n /**\n * Registers a new Recognizer with the manager and saves it on the component\n * instance\n * @param {String} gesture See utils.js -> gestures\n * @param {Object} options Hammer options\n * @param {String} mainGesture if gesture is a custom event name, mapping to utils.js -> gestures\n */\n addRecognizer: function addRecognizer(gesture, options, { mainGesture } = {}) {\n // create recognizer, e.g. new Hammer['Swipe'](options)\n if (!this.recognizers[gesture]) {\n const recognizer = new Hammer[capitalize(mainGesture || gesture)](guardDirections(options))\n this.recognizers[gesture] = recognizer\n this.hammer.add(recognizer)\n recognizer.recognizeWith(this.hammer.recognizers)\n }\n },\n\n addEvent(gesture) {\n this.hammer.on(gesture, (e) => this.$emit(gesture, e))\n },\n\n // Enabling / Disabling certain recognizers.\n\n /**\n * Called when the `enabled` prop changes, and during mounted()\n * It enables/disables values according to the value of the `emabled` prop\n * @param {Boolean|Object} newVal If an object: { recognizer: true|false }\n * @param {Boolean|Object} oldVal The previous value\n * @return {undefined}\n */\n updateEnabled: function updateEnabled(newVal, oldVal) {\n if (newVal === true) {\n this.enableAll()\n\n } else if (newVal === false) {\n this.disableAll()\n\n } else if (typeof newVal === 'object') {\n const keys = Object.keys(newVal)\n\n for (let i = 0; i < keys.length; i++) {\n const event = keys[i]\n\n if (this.recognizers[event]) {\n newVal[event]\n ? this.enable(event)\n : this.disable(event)\n }\n }\n }\n },\n\n enable(r) {\n const recognizer = this.recognizers[r]\n if (!recognizer.options.enable) {\n recognizer.set({ enable: true })\n }\n },\n disable(r) {\n const recognizer = this.recognizers[r]\n if (recognizer.options.enable) {\n recognizer.set({ enable: false })\n }\n },\n toggle(r) {\n const recognizer = this.recognizers[r]\n if (recognizer) {\n recognizer.options.enable\n ? this.disable(r)\n : this.enable(r)\n }\n },\n\n enableAll(r) {\n this.toggleAll({ enable: true })\n },\n disableAll(r) {\n this.toggleAll({ enable: false })\n },\n toggleAll({ enable }) {\n const keys = Object.keys(this.recognizers)\n for (let i = 0; i < keys.length; i++) {\n const r = this.recognizers[keys[i]]\n if (r.options.enable !== enable) {\n r.set({ enable: enable })\n }\n }\n },\n\n isEnabled(r) {\n return this.recognizers[r] && this.recognizers[r].options.enable\n }\n },\n\n render(h) {\n return h(this.tag, {}, this.$slots.default)\n }\n}\n","import Component from './component'\nimport { assign, config, customEvents } from './utils'\n\nlet installed = false\n\nconst vueTouch = { config, customEvents }\n\n// Plugin API\n// *********\nvueTouch.install = function install(Vue, opts = {}) {\n const name = opts.name || 'v-touch'\n Vue.component(name, assign(Component, { name }))\n installed = true\n}.bind(vueTouch)\n\nvueTouch.registerCustomEvent = function registerCustomEvent(event, options = {}) {\n if (installed) {\n console.warn(`\n [vue-touch]: Custom Event '${event}' couldn't be added to vue-touch.\n Custom Events have to be registered before installing the plugin.\n `)\n return\n }\n options.event = event\n customEvents[event] = options\n Component.props[`${event}Options`] = {\n type: Object,\n default() { return {} }\n }\n}.bind(vueTouch)\n\nvueTouch.component = Component\n\n// Utilities\n// ********\n\nif (typeof exports == \"object\") {\n module.exports = vueTouch\n} else if (typeof define == \"function\" && define.amd) {\n define([], function(){ return vueTouch })\n} else if (typeof window !== 'undefined' && window.Vue) {\n window.VueTouch = vueTouch\n Vue.use(vueTouch)\n}\n"],"names":["let","const","i","this","gestures"],"mappings":"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"} \ No newline at end of file diff --git a/dist/vue-touch.min.js b/dist/vue-touch.min.js index 82a667f..9be236b 100644 --- a/dist/vue-touch.min.js +++ b/dist/vue-touch.min.js @@ -1 +1 @@ -!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(require("hammerjs")):"function"==typeof define&&define.amd?define(["hammerjs"],n):n(e.Hammer)}(this,function(e){"use strict";function n(e){for(var n=[],t=arguments.length-1;t-- >0;)n[t]=arguments[t+1];for(var i=0;i-1&&e.hasOwnProperty(i)?n.direction=e[i]:console.warn("[vue-touch] invalid direction: "+t)}return n}e="default"in e?e.default:e;var r=["up","down","left","right","horizontal","vertical","all"],a={},s={},p=["pan","panstart","panmove","panend","pancancel","panleft","panright","panup","pandown","pinch","pinchstart","pinchmove","pinchend","pinchcancel","pinchin","pinchout","press","pressup","rotate","rotatestart","rotatemove","rotateend","rotatecancel","swipe","swipeleft","swiperight","swipeup","swipedown","tap"],c={pan:"pan",panstart:"pan",panmove:"pan",panend:"pan",pancancel:"pan",panleft:"pan",panright:"pan",panup:"pan",pandown:"pan",pinch:"pinch",pinchstart:"pinch",pinchmove:"pinch",pinchend:"pinch",pinchcancel:"pinch",pinchin:"pinch",pinchout:"pinch",press:"press",pressup:"press",rotate:"rotate",rotatestart:"rotate",rotatemove:"rotate",rotateend:"rotate",rotatecancel:"rotate",swipe:"swipe",swipeleft:"swipe",swiperight:"swipe",swipeup:"swipe",swipedown:"swipe",tap:"tap"},l={props:{tapOptions:t(),panOptions:t(),pinchOptions:t(),pressOptions:t(),rotateOptions:t(),swipeOptions:t(),tag:{type:String,default:"div"},enabled:{default:!0,type:[Boolean,Object]}},mounted:function(){this.$isServer||(this.hammer=new e.Manager(this.$el),this.recognizers={},this.setupBuiltinRecognizers(),this.setupCustomRecognizers(),this.updateEnabled(this.enabled))},destroyed:function(){this.$isServer||this.hammer.destroy()},watch:{enabled:{deep:!0,handler:function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];(t=this).updateEnabled.apply(t,e);var t}}},methods:{setupBuiltinRecognizers:function(){for(var e=this,t=0;t0;)n[t]=arguments[t+1];for(var i=0;i-1&&e.hasOwnProperty(i)?n.direction=e[i]:console.warn("[vue-touch] invalid direction: "+t)}return n}e="default"in e?e.default:e;var r=["up","down","left","right","horizontal","vertical","all"],a={},s={},p=["pan","panstart","panmove","panend","pancancel","panleft","panright","panup","pandown","pinch","pinchstart","pinchmove","pinchend","pinchcancel","pinchin","pinchout","press","pressup","rotate","rotatestart","rotatemove","rotateend","rotatecancel","swipe","swipeleft","swiperight","swipeup","swipedown","tap"],c={pan:"pan",panstart:"pan",panmove:"pan",panend:"pan",pancancel:"pan",panleft:"pan",panright:"pan",panup:"pan",pandown:"pan",pinch:"pinch",pinchstart:"pinch",pinchmove:"pinch",pinchend:"pinch",pinchcancel:"pinch",pinchin:"pinch",pinchout:"pinch",press:"press",pressup:"press",rotate:"rotate",rotatestart:"rotate",rotatemove:"rotate",rotateend:"rotate",rotatecancel:"rotate",swipe:"swipe",swipeleft:"swipe",swiperight:"swipe",swipeup:"swipe",swipedown:"swipe",tap:"tap"},l={props:{options:t(),tapOptions:t(),panOptions:t(),pinchOptions:t(),pressOptions:t(),rotateOptions:t(),swipeOptions:t(),tag:{type:String,default:"div"},enabled:{default:!0,type:[Boolean,Object]}},mounted:function(){this.$isServer||(this.hammer=new e.Manager(this.$el,this.options),this.recognizers={},this.setupBuiltinRecognizers(),this.setupCustomRecognizers(),this.updateEnabled(this.enabled))},destroyed:function(){this.$isServer||this.hammer.destroy()},watch:{enabled:{deep:!0,handler:function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];(t=this).updateEnabled.apply(t,e);var t}}},methods:{setupBuiltinRecognizers:function(){for(var e=this,t=0;t
-

{{event.type}}

- --> + 
{{event}}
diff --git a/package.json b/package.json index 3eba32a..e8301c5 100644 --- a/package.json +++ b/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", diff --git a/src/component.js b/src/component.js index e560ff7..8522f10 100644 --- a/src/component.js +++ b/src/component.js @@ -1,43 +1,52 @@ -import Hammer from 'hammerjs' +import Hammer from 'hammerjs' import { createProp, capitalize, guardDirections, - gestures, - gestureMap, - directions, - assign, - config, - customEvents + normalizeGesture, + objectHasArrayValues, } from './utils' +import { + customEvents +} from './events' + export default { props: { options: createProp(), - tapOptions: createProp(), - panOptions: createProp(), - pinchOptions: createProp(), - pressOptions: createProp(), - rotateOptions: createProp(), - swipeOptions: createProp(), + tap: createProp(), + pan: createProp(), + pinch: createProp(), + press: createProp(), + rotate: createProp(), + swipe: createProp(), tag: { type: String, default: 'div' }, + recognizeWith: { + type: Object, + default: () => ({}), + validate: objectHasArrayValues, + }, + requireFailure: { + type: Object, default: () => ({}), + validate: objectHasArrayValues, + }, enabled: { default: true, type: [Boolean, Object], - } }, mounted() { if (!this.$isServer) { this.hammer = new Hammer.Manager(this.$el, this.options) - this.recognizers = {} // not reactive - this.setupBuiltinRecognizers() - this.setupCustomRecognizers() + this.recognizers = {} + this.setupRecognizers() + this.setupRecognizerDependencies() this.updateEnabled(this.enabled) } }, + destroyed() { if (!this.$isServer) { this.hammer.destroy() @@ -55,49 +64,42 @@ export default { methods: { - setupBuiltinRecognizers() { - // Built-in Hammer events - // We check weither any event callbacks are registered - // for the gesture, and if so, add a Recognizer - for (let i = 0; i < gestures.length; i++) { - const gesture = gestures[i] - if (this._events[gesture]) { - // get the main gesture (e.g. 'panstart' -> 'pan') - const mainGesture = gestureMap[gesture] - //merge global and local options - const options = assign({}, (config[mainGesture] || {}), this[`${mainGesture}Options`]) - // add recognizer for this main gesture - this.addRecognizer(mainGesture, options) - // register Event Emit for the specific gesture + /** + * Register recognizers for any event that matches + * a defined gesture or custom event. + */ + setupRecognizers() { + for (let gesture of Object.keys(this._events)) { + if (normalizeGesture(gesture)) { this.addEvent(gesture) + + gesture = normalizeGesture(gesture) + const options = Object.assign({}, this.$options.config[gesture] || {}, this[gesture]) + this.addRecognizer(gesture, options) + } else if (customEvents(gesture)) { + this.addEvent(gesture) + + const options = Object.assign({}, customEvents(gesture), this[gesture]) + this.addRecognizer(gesture, options, { mainGesture: options.type }) + } else { + throw new Error(`Unknown gesture: ${gesture}`) } } }, - setupCustomRecognizers() { - // Custom events - // We get the customGestures and options from the - // customEvents object, then basically do the same check - // as we did for the built-in events. - const gestures = Object.keys(customEvents) - - for (let i = 0; i < gestures.length; i++) { - - const gesture = gestures[i] + setupRecognizerDependencies() { + for (const [key, value] of Object.entries(this.recognizeWith)) { + this.recognizers[key] && this.recognizers[key].recognizeWith(value.map(name => this.recognizers[name])) + } - if (this._events[gesture]) { - const opts = customEvents[gesture] - const localCustomOpts = this[`${gesture}Options`] || {} - const options = assign({}, opts, localCustomOpts) - this.addRecognizer(gesture, options, {mainGesture: options.type}) - this.addEvent(gesture) - } + for (const [key, value] of Object.entries(this.requireFailure)) { + this.recognizers[key] && this.recognizers[key].requireFailure(value.map(name => this.recognizers[name])) } }, /** - * Registers a new Recognizer with the manager and saves it on the component - * instance + * Registers a new Recognizer with the manager and saves it on the component instance + * * @param {String} gesture See utils.js -> gestures * @param {Object} options Hammer options * @param {String} mainGesture if gesture is a custom event name, mapping to utils.js -> gestures @@ -105,22 +107,18 @@ export default { addRecognizer: function addRecognizer(gesture, options, { mainGesture } = {}) { // create recognizer, e.g. new Hammer['Swipe'](options) if (!this.recognizers[gesture]) { - const recognizer = new Hammer[capitalize(mainGesture || gesture)](guardDirections(options)) - this.recognizers[gesture] = recognizer - this.hammer.add(recognizer) - recognizer.recognizeWith(this.hammer.recognizers) + this.recognizers[gesture] = new Hammer[capitalize(mainGesture || gesture)](guardDirections(options)) + this.hammer.add(this.recognizers[gesture]) } }, addEvent(gesture) { - this.hammer.on(gesture, (e) => this.$emit(gesture, e)) + this.hammer.on(gesture, e => this.$emit(gesture, e)) }, - // Enabling / Disabling certain recognizers. - /** * Called when the `enabled` prop changes, and during mounted() - * It enables/disables values according to the value of the `emabled` prop + * It enables/disables values according to the value of the `enabled` prop * @param {Boolean|Object} newVal If an object: { recognizer: true|false } * @param {Boolean|Object} oldVal The previous value * @return {undefined} @@ -128,64 +126,55 @@ export default { updateEnabled: function updateEnabled(newVal, oldVal) { if (newVal === true) { this.enableAll() - } else if (newVal === false) { this.disableAll() - } else if (typeof newVal === 'object') { - const keys = Object.keys(newVal) - - for (let i = 0; i < keys.length; i++) { - const event = keys[i] - - if (this.recognizers[event]) { - newVal[event] - ? this.enable(event) - : this.disable(event) - } + for (const [event, status] of Object.entries(newVal)) { + this.recognizers[event] && status ? this.enable(event) : this.disable(event) } } }, - enable(r) { - const recognizer = this.recognizers[r] + enable(gesture) { + const recognizer = this.recognizers[gesture] if (!recognizer.options.enable) { recognizer.set({ enable: true }) } }, - disable(r) { - const recognizer = this.recognizers[r] + + disable(gesture) { + const recognizer = this.recognizers[gesture] if (recognizer.options.enable) { recognizer.set({ enable: false }) } }, - toggle(r) { - const recognizer = this.recognizers[r] + + toggle(gesture) { + const recognizer = this.recognizers[gesture] + if (recognizer) { - recognizer.options.enable - ? this.disable(r) - : this.enable(r) + recognizer.options.enable ? this.disable(gesture) : this.enable(gesture) } }, - enableAll(r) { - this.toggleAll({ enable: true }) + enableAll() { + this.setAll({ enable: true }) }, - disableAll(r) { - this.toggleAll({ enable: false }) + + disableAll() { + this.setAll({ enable: false }) }, - toggleAll({ enable }) { - const keys = Object.keys(this.recognizers) - for (let i = 0; i < keys.length; i++) { - const r = this.recognizers[keys[i]] - if (r.options.enable !== enable) { - r.set({ enable: enable }) + + setAll({ enable }) { + for (const recognizer of Object.values(this.recognizers)) { + if (recognizer.options.enable !== enable) { + recognizer.set({ enable }) } } }, - isEnabled(r) { - return this.recognizers[r] && this.recognizers[r].options.enable + isEnabled(gesture) { + return this.recognizers[gesture] && this.recognizers[gesture].options.enable } }, diff --git a/src/events.js b/src/events.js new file mode 100644 index 0000000..82670fc --- /dev/null +++ b/src/events.js @@ -0,0 +1,14 @@ +import Component from './component' +import { createProp } from './utils' + +const events = {} + +export const customEvents = (name) => name === undefined ? events : events[name] + +export const register = (event, options = {}) => { + options.event = event + events[event] = options + if (!(event in Component.props)) { + Component.props[event] = createProp() + } +} diff --git a/src/hammer-ssr.js b/src/hammer-ssr.js index 3f95ad1..b7cd66f 100644 --- a/src/hammer-ssr.js +++ b/src/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. - `) - } +export default 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. + `) } diff --git a/src/index.js b/src/index.js index f46fc53..f66e7f3 100644 --- a/src/index.js +++ b/src/index.js @@ -1,44 +1,32 @@ import Component from './component' -import { assign, config, customEvents } from './utils' +import { customEvents, register } from './events' -let installed = false +function plugin(Vue, options = {}) { + if (plugin.installed === true) return + plugin.installed = true + Component.config = plugin.config + Vue.component(options.name || 'v-touch', Component) +} -const vueTouch = { config, customEvents } +plugin.config = {} -// Plugin API -// ********* -vueTouch.install = function install(Vue, opts = {}) { - const name = opts.name || 'v-touch' - Vue.component(name, assign(Component, { name })) - installed = true -}.bind(vueTouch) +if (typeof window !== 'undefined' && window.Vue) { + window.Vue.use(plugin) +} -vueTouch.registerCustomEvent = function registerCustomEvent(event, options = {}) { - if (installed) { +export default plugin +export { + Component, + customEvents, +} +export const registerCustomEvent = (event, options) => { + if (plugin.installed) { console.warn(` [vue-touch]: Custom Event '${event}' couldn't be added to vue-touch. Custom Events have to be registered before installing the plugin. `) return } - options.event = event - customEvents[event] = options - Component.props[`${event}Options`] = { - type: Object, - default() { return {} } - } -}.bind(vueTouch) - -vueTouch.component = Component - -// Utilities -// ******** -if (typeof exports == "object") { - module.exports = vueTouch -} else if (typeof define == "function" && define.amd) { - define([], function(){ return vueTouch }) -} else if (window.Vue) { - window.VueTouch = vueTouch - Vue.use(vueTouch) + register(event, options) } diff --git a/src/utils.js b/src/utils.js index 1d06a06..50473f5 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,22 +1,4 @@ -import Hammer from 'hammerjs' // used by guardDirections - -/** - * Tiny Object.assign replacement - * @param {Object} target Any type of object - * @param {Object} sources Any type of object - * @return {Object} Merged Object - */ -export function assign(target, ...sources) { - for (let i = 0; i < sources.length; i++) { - const source = sources[i] - const keys = Object.keys(source) - for (let i = 0; i < keys.length; i++) { - const key = keys[i] - target[key] = source[key] - } - } - return target -} +import Hammer from 'hammerjs' /** * Small helper method to generate prop options for all the @@ -26,30 +8,32 @@ export function assign(target, ...sources) { export function createProp() { return { type: Object, - default: function() { return {} } + default: function () { + return {} + } } } -export function capitalize (str) { +export function capitalize(str) { return str.charAt(0).toUpperCase() + str.slice(1) } /** * Directions that VueTouch understands. - * Will be tanslated to Hammer-style directions by guardDirections() + * Will be translated to Hammer-style directions by guardDirections() * @type {Array} */ export const directions = ['up', 'down', 'left', 'right', 'horizontal', 'vertical', 'all'] /** * Translates VueTouch direction names into Hammer Direction numbers. - * @param {Objects} options Hammer Options + * @param {Object} options Hammer Options * @return {Object} [Hammer Options] */ -export function guardDirections (options) { - var dir = options.direction +export function guardDirections(options) { + const dir = options.direction if (typeof dir === 'string') { - var hammerDirection = 'DIRECTION_' + dir.toUpperCase() + const hammerDirection = 'DIRECTION_' + dir.toUpperCase() if (directions.indexOf(dir) > -1 && Hammer.hasOwnProperty(hammerDirection)) { options.direction = Hammer[hammerDirection] } else { @@ -60,33 +44,23 @@ export function guardDirections (options) { } /** - * This pobject will contain global options for recognizers + * This object will contain global options for recognizers * see index.js -> vueTouch.config * @type {Object} */ -export const config = { - -} - -/** - * This object will contain recognizer options for custom events. - * see index.js -> registerCustomEvent - * @type {Object} - */ -export const customEvents = { - -} +export const config = {} /** * Names of all the builtin gestures of Hammer + * * @type {Array} */ export const gestures = [ - 'pan','panstart','panmove','panend','pancancel','panleft','panright','panup','pandown', - 'pinch','pinchstart','pinchmove','pinchend','pinchcancel','pinchin','pinchout', - 'press','pressup', - 'rotate','rotatestart','rotatemove','rotateend','rotatecancel', - 'swipe','swipeleft','swiperight','swipeup','swipedown', + 'pan', 'panstart', 'panmove', 'panend', 'pancancel', 'panleft', 'panright', 'panup', 'pandown', + 'pinch', 'pinchstart', 'pinchmove', 'pinchend', 'pinchcancel', 'pinchin', 'pinchout', + 'press', 'pressup', + 'rotate', 'rotatestart', 'rotatemove', 'rotateend', 'rotatecancel', + 'swipe', 'swipeleft', 'swiperight', 'swipeup', 'swipedown', 'tap' ] @@ -125,3 +99,7 @@ export const gestureMap = { swipedown: 'swipe', tap: 'tap' } + +export const normalizeGesture = name => gestureMap[name] + +export const objectHasArrayValues = value => typeof value === 'object' && Object.values(value).every(any => Array.isArray(any)) \ No newline at end of file diff --git a/test/e2e/index.js b/test/e2e/index.js index dba5980..649c0fa 100644 --- a/test/e2e/index.js +++ b/test/e2e/index.js @@ -1,12 +1,13 @@ -var server = require( '../../build/devserver.js') +const server = require('../../build/devserver.js') // initialize Testcafe -/* const createTestCafe = require('testcafe'); -const testCafe = await createTestCafe('localhost', 1337, 1338); -const runner = testcafe.createRunner(); +(async function () { + const createTestCafe = require('testcafe'); + const testCafe = await createTestCafe('localhost', 1337, 1338); + const runner = testcafe.createRunner(); -const failedCount = await runner - .src('tests/e2e/fixtures') - .browsers(['chrome']) - .run(); -*/ + const failedCount = await runner + .src('tests/e2e/fixtures') + .browsers(['chrome']) + .run(); +})(); diff --git a/test/unit/builtinEvents.js b/test/unit/builtinEvents.js index 21c1e76..e121da1 100644 --- a/test/unit/builtinEvents.js +++ b/test/unit/builtinEvents.js @@ -2,15 +2,12 @@ import test from 'ava' import sinon from 'sinon' import Vue from 'vue/dist/vue.common' import VueTouch from './helpers/vue-touch' -import Hammer from 'hammerjs' Vue.use(VueTouch) import { createFromTemplate, hasRecognizer, hasHandler, - isEnabled, isDisabled, - allEnabled, allDisabled } from './helpers' @@ -49,7 +46,7 @@ test('Uses global options from VueTouch.config', t => { test('Options prop overwrites global config', t => { const vt = createFromTemplate(` - + `) const options = vt.recognizers['swipe'].options t.true(options.threshold === 15) diff --git a/test/unit/customEvents.js b/test/unit/customEvents.js index fa6a21d..1c04b6a 100644 --- a/test/unit/customEvents.js +++ b/test/unit/customEvents.js @@ -1,10 +1,9 @@ import test from 'ava' import Vue from 'vue/dist/vue.common' -import VueTouch from './helpers/vue-touch' -import Hammer from 'hammerjs' +import VueTouch, { registerCustomEvent } from './helpers/vue-touch' -VueTouch.registerCustomEvent('doubletap', { +registerCustomEvent('doubletap', { type: 'tap', taps: 2 }) @@ -32,7 +31,7 @@ test('Custom Event local options work', t => { vt = createFromTemplate(` `) diff --git a/test/unit/enabledProp.js b/test/unit/enabledProp.js index eb5ee17..110c568 100644 --- a/test/unit/enabledProp.js +++ b/test/unit/enabledProp.js @@ -2,7 +2,6 @@ import test from 'ava' import Vue from 'vue/dist/vue.common' import VueTouch from './helpers/vue-touch' -import Hammer from 'hammerjs' Vue.use(VueTouch) @@ -12,8 +11,6 @@ import { allEnabled, allDisabled } from './helpers' -let vt - test('prop is true by default & events are enabled', t => { t.plan(2) diff --git a/test/unit/helpers/vue-touch.js b/test/unit/helpers/vue-touch.js index 6bcb85b..07f8bc5 100644 --- a/test/unit/helpers/vue-touch.js +++ b/test/unit/helpers/vue-touch.js @@ -1,7 +1,9 @@ -if (process.env.NODE_ENV === 'development') { - var vueTouch = require('../../../src/index.js') -} else { - var vueTouch = require('../../../dist/vue-touch.js') +import devVueTouch, { registerCustomEvent as devRegisterCustomEvent } from '../../../src/index' +import VueTouch, { registerCustomEvent as prodRegisterCustomEvent } from '../../../dist/vue-touch' + +function checkDev(a, b) { + return process.env.NODE_ENV === 'development' ? a : b } -export default vueTouch +export default checkDev(devVueTouch, VueTouch) +export const registerCustomEvent = checkDev(devRegisterCustomEvent, prodRegisterCustomEvent) diff --git a/test/unit/index.js b/test/unit/index.js index f56c107..801e20a 100644 --- a/test/unit/index.js +++ b/test/unit/index.js @@ -2,7 +2,6 @@ import test from 'ava' import Vue from 'vue/dist/vue.common' import VueTouch from './helpers/vue-touch' -import Hammer from 'hammerjs' import { createFromTemplate, createInstanceFromTemplate } from './helpers' diff --git a/test/unit/publicMethods.js b/test/unit/publicMethods.js index ded5afe..eeb3076 100644 --- a/test/unit/publicMethods.js +++ b/test/unit/publicMethods.js @@ -2,7 +2,6 @@ import test from 'ava' import Vue from 'vue/dist/vue.common' import VueTouch from './helpers/vue-touch' -import Hammer from 'hammerjs' Vue.use(VueTouch) diff --git a/test/unit/registerCustomEvent.js b/test/unit/registerCustomEvent.js index b198474..c26ce05 100644 --- a/test/unit/registerCustomEvent.js +++ b/test/unit/registerCustomEvent.js @@ -2,7 +2,7 @@ import test from 'ava' import sinon from 'sinon' import Vue from 'vue/dist/vue.common' -import VueTouch from './helpers/vue-touch' +import VueTouch, { registerCustomEvent } from './helpers/vue-touch' import Hammer from 'hammerjs' Vue.use(VueTouch, {hammer: Hammer}) @@ -12,7 +12,7 @@ test.before(t => { warn = sinon.stub(console, 'warn') }) test('registerCustomEvent works before Vue.use(), errors after', t => { - VueTouch.registerCustomEvent('doubletap', {taps: 2}) + registerCustomEvent('doubletap', {taps: 2}) // console.log(log.getCall(0).args[0]) const pattern = /\[vue\-touch\]: Custom Event/ t.true(pattern.test(warn.getCall(0).args[0]))