vue-clm-helper-mi-touch-up v0.1.50

vue-clm-helper-mi-touch

Status: beta

:baby_chick: Vue plugin for Vue CLI plugin CLM Helper

Extend Vuex Store and include basic components for MI Touch Presentations

Table of contents

• Usage
• Store Extending
• Registered components
  • mt-menu
  • mt-popup
  • pdf-popup

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

: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

pdf-popup

:warning: Show pdf-popup only with v-if directive.

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>