Use the $touch plugin to add the features of the Hammer.js library to eWizard.js. With the $touch plugin, you can add various gestures made by touch or mouse from Hammer.js and use them in your e-Detailers, sites, and messenger ads. The $touch plugin supports the following Hammer.js gestures:
• Pan
• Pinch
• Press
• Rotate
• Swipe
• Tap
TIP: The $touch plugin isn't available for emails.
To use the plugin, add hooks with the gestures to the App.vue file. For example, an App.vue file with hooks for the tap, pan, rotate, and pinch gestures:
<!-- App.vue --><script>
import stickybits from 'stickybits';
import { DynamicBlocksLoader } from 'ewizardjs';
import { themes } from './common/blocks-library/blocks-themes.json';
import { components } from './common/blocks-library/blocks.json';import { touchMixin } from './plugins/touch';export default {
name: 'wiz-app',
mixins: [touchMixin],
components: {
DynamicBlocksLoader,
},
data() {
return {
blockThemes: themes,
blocksList: components,
};
},
mounted() {
console.log(this.$touch.manager);
this.$touch.manager.on('tap', (e) => {
console.log('tap', e);
});
this.$touch.manager.on('pan', (e) => {
console.log('pan', e);
});
this.$touch.manager.on('rotate', (e) => {
console.log('rotate', e);
});
this.$touch.manager.on('pinch', (e) => {
console.log('pinch', e);
});
stickybits('.position-sticky-top', { scrollEl: '.root' });
},
};
</script>You can use the Hammer.js recognizers to implement various gestures. For basic examples, see Hammer.js documentation.