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 #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 #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 {
    trans,
    WOPI_ONLINE_EDIT_DOCUMENT,
    WOPI_INVALID_TITLE,
    WOPI_LOADING,
} from "translator";
import Modal from "ChillMainAssets/vuejs/_components/Modal";
import logo from "ChillMainAssets/chill/img/logo-chill-sans-slogan_white.png";

// 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 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>