F7-V4 + Vue Drag Fab

by Maiki Nahara

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.4.6/css/framework7.bundle.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.4.6/js/framework7.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/framework7-vue/framework7-vue.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<div id="app">
  <f7-app :params="f7params">
    <f7-statusbar></f7-statusbar>

    <!-- Main View -->
    <f7-view id="main-view" main class="safe-areas">
      <f7-page>
        <f7-navbar title="Messsages"></f7-navbar>
          <!-- FAB Right Bottom (Orange) -->
  <f7-fab position="right-bottom" slot="fixed" color="orange" v-pan='onPan' ref='dragFab'>
    <f7-icon ios="f7:add" aurora="f7:add" md="material:add"></f7-icon>
    <f7-icon ios="f7:close" aurora="f7:close" md="material:close"></f7-icon>
    <f7-fab-buttons position="top">
      <f7-fab-button label="Action 1">1</f7-fab-button>
      <f7-fab-button label="Action 2">2</f7-fab-button>
    </f7-fab-buttons>
  </f7-fab>
        <f7-messagebar :placeholder="placeholder" ref="messagebar" :attachments-visible="attachmentsVisible" :sheet-visible="sheetVisible">
          <f7-link icon-ios="f7:camera_fill" icon-aurora="f7:camera_fill" icon-md="material:camera_alt" slot="inner-start" @click="sheetVisible = !sheetVisible"></f7-link>
          <f7-link icon-ios="f7:arrow_up_fill" icon-aurora="f7:arrow_up_fill" icon-md="material:send" slot="inner-end" @click="sendMessage"></f7-link>
          <f7-messagebar-attachments>
            <f7-messagebar-attachment v-for="(image, index) in attachments" :key="index" :image="image" @attachment:delete="deleteAttachment(image)"></f7-messagebar-attachment>
          </f7-messagebar-attachments>
          <f7-messagebar-sheet>
            <f7-messagebar-sheet-image v-for="(image, index) in images" :key="index"...

JavaScript

// Init F7 Vue Plugin
Framework7.use(Framework7Vue);


Vue.component('page-not-found', {
  template: '#page-not-found'
});

Vue.directive('pan', {
  bind: (el, binding) => {
    if (typeof binding.value === 'function') {
      const mc = new Hammer(el)
      mc.get('pan').set({ direction: Hammer.DIRECTION_ALL })
      mc.on('pan', binding.value)
    }
  }
})

// Init App
new Vue({
  el: '#app',
  data: function() {
    return {
      f7params: {
        root: '#app',
        id: 'io.framework7.testapp',
        name: 'Framework7',
        theme: 'ios',
        view: {
          stackPages: false,
          allowDuplicateUrls: false
        },
        routes: [{
          path: '(.*)',
          component: 'page-not-found',
        }, ],
      },
      attachments: [],
      sheetVisible: false,
      typingMessage: null,
      messagesData: [{
          type: 'sent',
          text: 'Hi, Kate',
        },
        {
          type: 'sent',
          text: 'How are you?',
        },
        {
          name: 'Kate',
          type: 'received',
          text: 'Hi, I am good!',
          avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
        },
        {
          name: 'Blue Ninja',
          type: 'received',
          text: 'Hi there, I am also fine, thanks! And how are you?',
          avatar: 'https://cdn.framework7.io/placeholder/people-100x100-7.jpg',
        },
        {
          type: 'sent',
          text: 'Hey, Blue Ninja! Glad to see you ;)',
        },
        {
          type: 'sent',
          text: 'Hey, look, cutest kitten ever!',
        },
        {
          type: 'sent',
          image: 'https://cdn.framework7.io/placeholder/cats-200x260-4.jpg',

        },
        {
          name: 'Kate',
          type: 'received',
          text: 'Nice!',
          avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
        },
        {
          name: 'Kate',
          type: 'received',
          text: 'Like it...