114 lines
3.2 KiB
Vue
114 lines
3.2 KiB
Vue
<template>
|
||
<Dialog
|
||
id="virtual-sample"
|
||
v-model:visible="isOpen"
|
||
modal
|
||
:draggable="false"
|
||
dismissableMask="true"
|
||
header="Titre du rendu"
|
||
class="dialog"
|
||
:class="[{ 'with-comments': isCommentsOpen }, activeTab]"
|
||
:closeOnEscape="true"
|
||
>
|
||
<template #header>
|
||
<div class="dialog__tabs" role="tablist">
|
||
<button
|
||
v-if="step.files.dynamic"
|
||
type="button"
|
||
role="tab"
|
||
class="btn btn--transparent | font-serif"
|
||
data-icon="cursor"
|
||
:aria-pressed="activeTab === 'dynamic' ? true : false"
|
||
aria-controls="dynamic"
|
||
@click="activeTab = 'dynamic'"
|
||
>
|
||
<span>Présentation dynamique</span>
|
||
</button>
|
||
<button
|
||
v-if="step.files.static"
|
||
type="button"
|
||
role="tab"
|
||
@click="activeTab = 'static'"
|
||
class="btn btn--transparent | font-serif"
|
||
data-icon="image"
|
||
:aria-pressed="activeTab === 'static' ? true : false"
|
||
aria-controls="static"
|
||
>
|
||
<span>Vue statique</span>
|
||
</button>
|
||
</div>
|
||
<h2 class="font-serif text-lg">Échantillon virtuel</h2>
|
||
</template>
|
||
|
||
<DynamicView id="dynamic" v-if="activeTab === 'dynamic'" />
|
||
<StaticView id="static" v-if="activeTab === 'static'" />
|
||
|
||
<template #footer>
|
||
<a
|
||
v-if="currentFile"
|
||
id="download-image"
|
||
class="btn btn--white-10"
|
||
data-icon="download"
|
||
:href="currentFile.url"
|
||
download
|
||
>
|
||
<span>{{
|
||
activeTab === "dynamic" ? "Télécharger l’image" : "Télécharger le PDF"
|
||
}}</span>
|
||
</a>
|
||
<button
|
||
id="loop-animation"
|
||
class="btn"
|
||
:class="{ 'btn--transparent btn--outline': !isLoopAnimationEnabled }"
|
||
:data-icon="!isLoopAnimationEnabled ? 'loop' : 'pause'"
|
||
@click="isLoopAnimationEnabled = !isLoopAnimationEnabled"
|
||
>
|
||
<span>{{ !isLoopAnimationEnabled ? 'Animation' : 'Arrêt l’animation' }} en boucle</span>
|
||
</button>
|
||
<button
|
||
v-if="activeTab === 'static'"
|
||
id="toggle-comments"
|
||
:aria-pressed="isCommentsOpen"
|
||
class="btn btn--transparent btn--outline"
|
||
data-icon="comment"
|
||
@click="isCommentsOpen = !isCommentsOpen"
|
||
>
|
||
<span class="sr-only">Afficher les commentaires</span>
|
||
</button>
|
||
</template>
|
||
</Dialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { storeToRefs } from "pinia";
|
||
import Dialog from "primevue/dialog";
|
||
import DynamicView from "./DynamicView.vue";
|
||
import StaticView from "./StaticView.vue";
|
||
import { ref, watch } from "vue";
|
||
import { useVirtualSampleStore } from "../../../stores/virtualSample";
|
||
import { useDialogStore } from "../../../stores/dialog";
|
||
import { useRoute, useRouter } from "vue-router";
|
||
|
||
const { file } = defineProps({
|
||
file: Object,
|
||
});
|
||
|
||
const { activeTab, currentFile, step, isLoopAnimationEnabled } = storeToRefs(
|
||
useVirtualSampleStore()
|
||
);
|
||
const { isCommentsOpen } = storeToRefs(useDialogStore());
|
||
|
||
// Variables
|
||
const router = useRouter();
|
||
const route = useRoute();
|
||
const isOpen = ref(true);
|
||
watch(isOpen, (newValue) => {
|
||
router.push({ name: route.name });
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.dialog__inner {
|
||
padding: var(--space-16);
|
||
}
|
||
</style>
|