fix #69

public/site/plugins/helpers/index.php

@@ -8,6 +8,7 @@ function getFileData($file) {
       'quality' => 80,
       'format' => 'webp'
     ])->url(),
+    'source' => $file->url(),
     'parent' => [
       "title" => (string) $file->parent()->title(),
       "uri" => $file->parent()->uri()
@@ -28,10 +29,10 @@ function getFileData($file) {
     $data['tags'] = $file->tags()->split();
   };
 
-  if($file->comments()->exists()) {
+  if ($file->comments()->exists()) {
     $data['comments'] = $file->comments()->exists() && $file->comments() ? Data::decode($file->comments()->value(), 'yaml') : [];
     $data['cover'] = $file->cover()->exists() && $file->cover()->isNotEmpty() ? $file->cover()->toFile()->resize(576)->url() : false;
-  } 
+  }
 
   return $data;
 }

src/components/project/virtual-sample/Interactive360.vue

@@ -43,6 +43,7 @@ const { activeTrack } = defineProps({
 // Helper
 const { openedFile } = storeToRefs(useDialogStore());
 const virtualSampleStore = useVirtualSampleStore();
+const { isDownloadTriggered } = storeToRefs(useVirtualSampleStore());
 const isHelperHidden = ref(localStorage.getItem("isHelperHidden"));
 localStorage.setItem("isHelperHidden", true);
 
@@ -187,4 +188,16 @@ function preloadImages() {
     image.src = imageUrl;
   });
 }
+
+// Download image
+watch(isDownloadTriggered, (newValue) => {
+  if (!newValue) return;
+
+  const downloadNode = document.createElement("a");
+  downloadNode.setAttribute("href", currentFile.value.source);
+  downloadNode.setAttribute("download", "");
+  document.body.appendChild(downloadNode);
+  downloadNode.click();
+  document.body.removeChild(downloadNode);
+});
 </script>

src/components/project/virtual-sample/VirtualSample.vue

@@ -44,18 +44,15 @@
     <StaticView id="static" v-if="activeTab === 'static'" />
 
     <template #footer>
-      <a
+      <button
         v-if="currentFile"
         id="download-image"
         class="btn btn--white-10"
         data-icon="download"
-        :href="currentFile.url"
+        @click="downloadFiles()"
-        download
       >
-        <span>{{
+        <span>{{ downloadText }}</span>
-          activeTab === "dynamic" ? "Télécharger l’image" : "Télécharger le PDF"
+      </button>
-        }}</span>
-      </a>
       <button
         id="loop-animation"
         class="btn"
@@ -92,7 +89,7 @@ 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 { ref, watch, computed } from "vue";
 import { useVirtualSampleStore } from "../../../stores/virtualSample";
 import { useDialogStore } from "../../../stores/dialog";
 import { useRoute, useRouter } from "vue-router";
@@ -101,11 +98,17 @@ const { file } = defineProps({
   file: Object,
 });
 
-const { activeTab, currentFile, step, isLoopAnimationEnabled } = storeToRefs(
+const {
-  useVirtualSampleStore()
+  activeTab,
-);
+  currentFile,
+  step,
+  isLoopAnimationEnabled,
+  isDownloadTriggered,
+} = storeToRefs(useVirtualSampleStore());
 isLoopAnimationEnabled.value = false;
-const { isCommentsOpen, isCommentPanelEnabled } = storeToRefs(useDialogStore());
+const { isCommentsOpen, isCommentPanelEnabled, activeTracks } = storeToRefs(
+  useDialogStore()
+);
 
 // Variables
 const router = useRouter();
@@ -114,6 +117,26 @@ const isOpen = ref(true);
 watch(isOpen, (newValue) => {
   router.push({ name: route.name });
 });
+
+const downloadText = computed(() => {
+  if (activeTab.value === "dynamic") {
+    if (activeTracks.value.length === 1) {
+      return "Télécharger l'image";
+    } else {
+      return "Télécharger les images";
+    }
+  } else {
+    return "Télécharger le PDF";
+  }
+});
+
+// Functions
+function downloadFiles() {
+  isDownloadTriggered.value = true;
+  setTimeout(() => {
+    isDownloadTriggered.value = false;
+  }, 400);
+}
 </script>
 
 <style scoped>

src/stores/virtualSample.js

@@ -10,6 +10,7 @@ export const useVirtualSampleStore = defineStore("virtual-sample", () => {
   const activeTab = ref(step.files.dynamic ? "dynamic" : "static");
   const currentFile = ref(null);
   const isLoopAnimationEnabled = ref(false);
+  const isDownloadTriggered = ref(false);
 
   watch(activeTab, () => (currentFile.value = null));
 
@@ -19,5 +20,6 @@ export const useVirtualSampleStore = defineStore("virtual-sample", () => {
     step,
     isLoopAnimationEnabled,
     isCompareModeEnabled,
+    isDownloadTriggered,
   };
 });