chill-bundles/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OpenWopiLink.vue

<template>
   <a v-if="isOpenDocument"
      class="btn change-icon" :class="[isChangeClass ? button.changeClass : 'btn-edit']"
      @click="openModal">
      
      <i class="fa me-2" :class="[isChangeIcon ? button.changeIcon : 'fa-pencil']"></i>
      
      <span v-if="!noText">
         {{ $t('Update_document') }}
      </span>
   </a>
   
   <teleport to="body">
      <div class="wopi-frame" v-if="isOpenDocument">
         <modal v-if="modal.showModal"
            :modalDialogClass="modal.modalDialogClass"
            :hideFooter=true
            @close="modal.showModal = false">
            
            <template v-slot:header>
               <img class="logo" :src="logo" height="45"/>
                  <span class="ms-auto me-3">
                     {{ this.title }}
                  </span>
                  <a class="btn btn-outline-light">
                     <i class="fa fa-save fa-fw"></i>
                     {{ $t('save_and_quit') }}
                  </a>
            </template>
            
            <template v-slot:body>
               <div v-if="loading" class="loading">
                  <i class="fa fa-circle-o-notch fa-spin fa-3x" :title="$t('loading')"></i>
               </div>
               <iframe
                  :src="this.wopiUrl"
                  @load="loaded"
               ></iframe>
            </template>
            
         </modal>
      </div>
      <div v-else>
         <modal v-if="modal.showModal"
            modalDialogClass="modal-sm"
            @close="modal.showModal = false">
            
            <template v-slot:header>
               <h3>{{ $t('invalid_title') }}</h3>
            </template>
            <template v-slot:body>
               <div class="alert alert-warning">{{ $t('invalid_message') }}</div>
            </template>
   
         </modal>
      </div>
   </teleport>
</template>

<script>
import Modal from 'ChillMainAssets/vuejs/_components/Modal';
import logo from 'ChillMainAssets/chill/img/logo-chill-sans-slogan_white.png';

export default {
   name: "OpenWopiLink",
   components: {
      Modal
   },
   props: {
      wopiUrl: {
         type: String,
         required: true
      },
      title: {
         type: String,
         required: true
      },
      type: {
         type: String,
         required: true
      },
      button: {
         type: Object,
         required: false
      }
   },
   data() {
      return {
         modal: {
            showModal: false,
            modalDialogClass: "modal-fullscreen" //modal-dialog-scrollable
         },
         logo: logo,
         loading: false,
         mime: [
            // TODO temporary hardcoded. to be replaced by twig extension or a collabora server query
            'application/clarisworks',
            'application/coreldraw',
            'application/macwriteii',
            'application/msword',
            'application/pdf',
            'application/vnd.lotus-1-2-3',
            'application/vnd.ms-excel',
            'application/vnd.ms-excel.sheet.binary.macroEnabled.12',
            'application/vnd.ms-excel.sheet.macroEnabled.12',
            'application/vnd.ms-excel.template.macroEnabled.12',
            'application/vnd.ms-powerpoint',
            'application/vnd.ms-powerpoint.presentation.macroEnabled.12',
            'application/vnd.ms-powerpoint.template.macroEnabled.12',
            'application/vnd.ms-visio.drawing',
            'application/vnd.ms-word.document.macroEnabled.12',
            'application/vnd.ms-word.template.macroEnabled.12',
            'application/vnd.ms-works',
            'application/vnd.oasis.opendocument.chart',
            'application/vnd.oasis.opendocument.formula',
            'application/vnd.oasis.opendocument.graphics',
            'application/vnd.oasis.opendocument.graphics-flat-xml',
            'application/vnd.oasis.opendocument.graphics-template',
            'application/vnd.oasis.opendocument.presentation',
            'application/vnd.oasis.opendocument.presentation-flat-xml',
            'application/vnd.oasis.opendocument.presentation-template',
            'application/vnd.oasis.opendocument.spreadsheet',
            'application/vnd.oasis.opendocument.spreadsheet-flat-xml',
            'application/vnd.oasis.opendocument.spreadsheet-template',
            'application/vnd.oasis.opendocument.text',
            'application/vnd.oasis.opendocument.text-flat-xml',
            'application/vnd.oasis.opendocument.text-master',
            'application/vnd.oasis.opendocument.text-master-template',
            'application/vnd.oasis.opendocument.text-template',
            'application/vnd.oasis.opendocument.text-web',
            'application/vnd.openxmlformats-officedocument.presentationml.presentation',
            'application/vnd.openxmlformats-officedocument.presentationml.slideshow',
            'application/vnd.openxmlformats-officedocument.presentationml.template',
            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
            'application/vnd.openxmlformats-officedocument.spreadsheetml.template',
            'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
            'application/vnd.openxmlformats-officedocument.wordprocessingml.template',
            'application/vnd.sun.xml.calc',
            'application/vnd.sun.xml.calc.template',
            'application/vnd.sun.xml.chart',
            'application/vnd.sun.xml.draw',
            'application/vnd.sun.xml.draw.template',
            'application/vnd.sun.xml.impress',
            'application/vnd.sun.xml.impress.template',
            'application/vnd.sun.xml.math',
            'application/vnd.sun.xml.writer',
            'application/vnd.sun.xml.writer.global',
            'application/vnd.sun.xml.writer.template',
            'application/vnd.visio',
            'application/vnd.visio2013',
            'application/vnd.wordperfect',
            'application/x-abiword',
            'application/x-aportisdoc',
            'application/x-dbase',
            'application/x-dif-document',
            'application/x-fictionbook+xml',
            'application/x-gnumeric',
            'application/x-hwp',
            'application/x-iwork-keynote-sffkey',
            'application/x-iwork-numbers-sffnumbers',
            'application/x-iwork-pages-sffpages',
            'application/x-mspublisher',
            'application/x-mswrite',
            'application/x-pagemaker',
            'application/x-sony-bbeb',
            'application/x-t602',
         ]
      }
   },
   computed: {
      isOpenDocument() {
         if (this.mime.indexOf(this.type) !== -1) {
            return true;
         }
         return false;
      },
      noText() {
         if (typeof this.button.noText !== 'undefined') {
            return this.button.noText === true;
         }
         return false;
      },
      isChangeIcon() {
         if (typeof this.button.changeIcon !== 'undefined') {
            return (!(this.button.changeIcon === null || this.button.changeIcon === ''))
         }
         return false;
      },
      isChangeClass() {
         if (typeof this.button.changeClass !== 'undefined') {
            return (!(this.button.changeClass === null || this.button.changeClass === ''))
         }
         return false;
      }
   },
   methods: {
      openModal() {
         this.loading = true;
         this.modal.showModal = true;
      },
      loaded() {
         this.loading = false;
      }
   },
   i18n: {
      messages: {
         fr: {
            Update_document: "Modifier le document",
            save_and_quit: "Enregistrer et quitter",
            loading: "Chargement de l'éditeur en ligne",
            invalid_title: "Format incompatible",
            invalid_message: "Désolé, ce format de document n'est pas éditable en ligne.",
         }
      }
   }
}
</script>

<style lang="scss">
div.wopi-frame {
   div.modal-header {
      border-bottom: 0;
      background-color: var(--bs-primary);
      color: white;
   }
   div.modal-body {
      padding: 0;
      overflow-y: unset !important;
      iframe {
         height: 100%;
         width: 100%;
      }
      div.loading {
         position: absolute;
         color: var(--bs-chill-gray);
         top: calc(50% - 30px);
         left: calc(50% - 30px);
      }
   }
}
</style>