vue-clm-helper-mi-touch
Status: beta
Extend Vuex Store and include basic components for MI Touch Presentations
Table of contents
Usage
Install component to your project:
yarn add vue-clm-helper-mi-touch
Import and include to Vue Instance installed plugin:
// main.js
...
import MtPlugin from 'vue-clm-helper-mi-touch'
Vue.use(MtPlugin, store) // store is required
Use plugin in components (App.vue or slide-component):
<template>
<div id="app">
...
<mt-menu/>
<mt-popup/>
</div>
</template>
Store Extending
This plugin is extending Vuex store.
const state = {
activePopup: ''
};
const mutations = {
POPUP_SHOW(state, popupName) {
state.activePopup = popupName;
},
POPUP_HIDE(state) {
state.activePopup = ''
}
};
store.registerModule('mi-touch', {
namespaced: true,
state,
mutations
});
Doing mutations:
methods: {
...
popupOpen(popupName) {
this.$store.commit('mi-touch/POPUP_SHOW', popupName);
},
popupClose() {
this.$store.commit('mi-touch/POPUP_HIDE')
}
}
Registered components
Plugin register components mt-menu, mt-popup and pdf-popup globally.
For using components, just include it in template.
MI Touch components have basic functional and styles.
Basically, you don't need pass any props, it automatic find current slide, main slide, current flow and popup text data.
But, in some cases you can pass following props:
mt-menu
| Prop | Type | Default | Description |
|---|---|---|---|
| mainSlide | Object | this.structure[0] |
First slide in structure. Must have following keys: id, path, name. |
| currentSlide | Object | this.$store.state.currentSlide |
Object with following keys: id, path, name. |
| slides | Array | this.structure.filter(sl => new RegExp(`slide-${this.currentFlow}`).test(sl.id)) |
Filtered slides from current flow name, will rendering in top list in menu. |
| flows | Array | this.structure.filter(sl => /\d_1$/.test(sl.id)); |
Filtered slides from each first slide in each flow, will rendering in bottom list in menu. |
| btnInstrCb | Function | () => this.popupOpen('instructions') |
Callback for Instructions button
|
| btnFaqCb | Function | () => this.navigateTo(<first slide-faq>) |
Callback for FAQ button
|
| slidesToActiveAutoTransform | Number | 6 |
If slidesToActiveAutoTransform >= slides.length then current slide list item will be moved to left side. |
| flowsToActiveAutoTransform | Number | 6 |
If flowsToActiveAutoTransform >= flows.length then current slide list item will be moved to left side. |
:info: For deactivate necessary swiper, please set slidesToActiveAutoTransform or flowsToActiveAutoTransform to 0.
// Now slides and flows will not be a swipable.
<mt-menu :slidesToActiveAutoTransform="0" :flowsToActiveAutoTransform="0"/>
mt-popup
| Prop | Type | Default | Description |
|---|---|---|---|
| dataPopup | Object | this.$store.state.currentData.popup[this.activePopup] |
Object with text data. Popup DOM three will render with vue-json-to-html |
| animation | String | 'fade' |
Name for transition wrapper component. Don't forget to describe custom transition classes |
| instrPath | String | 'media/pdf/instruction.pdf' |
Path to pdf file which will open after click on Instruction Button, file must contain in public/${instrPath}
|
pdf-popup
pdf-popup only with v-if directive.
| Prop | Type | Default | Description |
|---|---|---|---|
| instrPath | String | undefined |
Path to pdf file which must have .pdf end of string. |
| closePdf | Function | () => {this.$store.commit('mi-touch/POPUP_HIDE')} |
Callback for close button in <pdf-popup/>. |
Example: Using custom instructions popup.
// App.vue
<template>
<div id="app" :class="[currentSlide.id, clmName]" v-touch:swipe="swipeHandler">
...
<mt-menu v-show="true"/>
<mt-popup>
<template slot="instructions">
<button @touchend="openPdf('media/pdf/pdf-1.pdf')">Show PDF 1</button>
<button @touchend="openPdf('media/pdf/pdf-2.pdf')">Show PDF 2</button>
</template>
</mt-popup>
<transition name="fade">
<pdf-popup v-if="activePdf" class="pdf-popup" :instr-path="activePdf" :closePdf="closePdf"/>
</transition>
...
</div>
</template>
<script>
export default {
...
data: () => ({
activePdf: '',
}),
methods: {
openPdf(pdf) {
this.activePdf = pdf;
},
closePdf() {
this.activePdf = '';
}
},
}
</script>
Also tou can use named slots to pass some HTML to necessary popup:
Slot content bellow will be added to actual popup block:
<mt-popup>
<template slot="references">
<h1>Here might be a references title</h1>
</template>
</mt-popup>
<mt-popup>
<template slot="research-design">
<h1>Here might be a research design title</h1>
</template>
</mt-popup>
<mt-popup>
<template slot="instructions">
<button @touchend="openPdf('media/pdf/pdf-1.pdf')">Show PDF 1</button>
<button @touchend="openPdf('media/pdf/pdf-2.pdf')">Show PDF 2</button>
</template>
</mt-popup>
