mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-07-09 10:26:14 +00:00
215 lines
6.9 KiB
Vue
215 lines
6.9 KiB
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>
|