#56 - prepare compare logic

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

@@ -5,31 +5,32 @@
         <button
           v-for="(track, index) in tracks"
           class="btn btn--image"
-          :aria-pressed="activeTrack === track ? true : false"
+          :aria-pressed="activeTracks.includes(track) ? true : false"
           :aria-controls="track.slug"
           :style="`--btn-image: url(${getFrontViewUrl(track)});`"
-          @click="
-            activeTrack = track;
-            currentX = 0;
-            currentY = 0;
-          "
+          @click="selectTrack(track)"
         >
           <span>{{ track.title }}</span>
         </button>
       </div>
-      <button class="btn | ml-auto" disabled>
+      <button
+        class="btn | ml-auto"
+        @click="isCompareModeEnabled = !isCompareModeEnabled"
+      >
         <span>Comparer les pistes</span>
       </button>
     </header>
 
     <div class="track">
-      <Interactive360
-        v-if="activeTrack.files.length > 1"
-        :activeTrack="activeTrack"
-      />
-      <figure>
-        <img :src="activeTrack.files[0].url" alt="" />
-      </figure>
+      <template v-for="activeTrack in activeTracks" :key="activeTrack.title">
+        <Interactive360
+          v-if="activeTrack.files.length > 1"
+          :activeTrack="activeTrack"
+        />
+        <figure v-else>
+          <img :src="activeTrack.files[0].url" alt="" />
+        </figure>
+      </template>
     </div>
   </div>
 </template>
@@ -45,7 +46,9 @@ const tracks = computed(
   () => page.value.steps[page.value.steps.length - 1].files.dynamic
 );
 
-const activeTrack = ref(tracks.value[0]);
+const isCompareModeEnabled = ref(false);
+
+const activeTracks = ref([tracks.value[0]]);
 
 function getFrontViewUrl(track) {
   if (track.files.length > 1) {
@@ -54,6 +57,20 @@ function getFrontViewUrl(track) {
     return track.files[0].url;
   }
 }
+
+function selectTrack(track) {
+  if (isCompareModeEnabled.value) {
+    if (activeTracks.value.includes(track)) {
+      activeTracks.value = activeTracks.value.filter(
+        (item) => item.title !== track.title
+      );
+    } else {
+      activeTracks.value.push(track);
+    }
+  } else {
+    activeTracks.value = [track];
+  }
+}
 </script>
 
 <style>