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

<template>
   <a v-if="isOpenDocument"
      class="btn" :class="[
         isChangeIcon ? 'change-icon' : '',
         isChangeClass ? options.changeClass : 'btn-wopilink' ]"
      @click="openModal">

      <i v-if="isChangeIcon" class="fa me-2" :class="options.changeIcon"></i>

      <span v-if="!noText">
         {{ trans(WOPI_ONLINE_EDIT_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">
                     <span v-if="options.title">{{ options.title }}</span>
                  </span>
            </template>

            <template v-slot:body>
               <div v-if="loading" class="loading">
                  <i class="fa fa-circle-o-notch fa-spin fa-3x" :title="trans(WOPI_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>{{ trans(WOPI_INVALID_TITLE) }}</h3>
            </template>
            <template v-slot:body>
               <div class="alert alert-warning">{{ trans(WOPI_ONLINE_EDIT_DOCUMENT) }}</div>
            </template>

         </Modal>
      </div>
   </teleport>
</template>

<script setup>
import { ref, computed } from 'vue';
import Modal from 'ChillMainAssets/vuejs/_components/Modal';
import logo from 'ChillMainAssets/chill/img/logo-chill-sans-slogan_white.png';
import { useI18n } from 'vue-i18n';
import { trans, WOPI_ONLINE_EDIT_DOCUMENT, WOPI_INVALID_TITLE, WOPI_LOADING } from '../../../../../../../../../../assets/translator'


// Props
const props = defineProps({
    wopiUrl: {
        type: String,
        required: true,
    },
    type: {
        type: String,
        required: true,
    },
    options: {
        type: Object,
        required: false,
    },
});

// data
const modal = ref({
    showModal: false,
    modalDialogClass: "modal-fullscreen",
});
const logoImg = logo;
const loading = ref(false);

// MIME types
const 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
const isOpenDocument = computed(() => mime.includes(props.type));

const noText = computed(() => props.options?.noText === true);

const isChangeIcon = computed(() => !!props.options?.changeIcon);

const isChangeClass = computed(() => !!props.options?.changeClass);

// Methods
const openModal = () => {
    loading.value = true;
    modal.value.showModal = true;
};

const loaded = () => {
    loading.value = false;
};
</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>