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

<template>
  <div class="dialog__inner">
    <header class="flex">
      <div class="options-selector">
        <button
          v-for="(track, index) in tracks"
          class="btn btn--image"
          :aria-pressed="activeTracks.includes(track) ? true : false"
          :aria-controls="track.slug"
          :style="`--btn-image: url(${getFrontViewUrl(track)});`"
          @click="selectTrack(track)"
        >
          <span>{{ track.title }}</span>
        </button>
      </div>
      <button
        class="btn | ml-auto"
        :class="{ 'btn--secondary': isCompareModeEnabled }"
        @click="isCompareModeEnabled = !isCompareModeEnabled"
      >
        <span>{{
          isCompareModeEnabled
            ? "Quitter le mode comparer"
            : "Comparer les pistes"
        }}</span>
      </button>
    </header>

    <div class="track">
      <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
        v-if="isCompareModeEnabled && activeTracks.length < 2"
        class="track-empty | bg-white rounded-xl w-full p-32"
      >
        <p>Cliquez sur la piste que vous souhaitez comparer</p>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, watch } from "vue";
import { storeToRefs } from "pinia";
import { usePageStore } from "../../../stores/page";
import Interactive360 from "./Interactive360.vue";
import { useDialogStore } from "../../../stores/dialog";

const { page } = storeToRefs(usePageStore());
const { isCommentsOpen, isCommentPanelEnabled } = storeToRefs(useDialogStore());

const tracks = computed(
  () =>
    page.value.steps.find((step) => step.slug === "virtual-sample").files
      .dynamic
);

const isCompareModeEnabled = ref(false);
watch(isCompareModeEnabled, (newValue) => {
  if (newValue) {
    isCommentsOpen.value = false;
    isCommentPanelEnabled.value = false;
  } else {
    isCommentPanelEnabled.value = true;
  }

  if (!newValue && activeTracks.value.length === 2) {
    activeTracks.value.pop();
  }
});

const activeTracks = ref([tracks.value[0]]);

function getFrontViewUrl(track) {
  if (track.files.length > 1) {
    return track.files[7].url;
  } else {
    return track.files[0].url;
  }
}

function selectTrack(track) {
  if (!isCompareModeEnabled.value) {
    activeTracks.value = [track];
    return;
  }

  if (activeTracks.value.length === 1 && !activeTracks.value.includes(track)) {
    activeTracks.value.push(track);
    return;
  }

  if (activeTracks.value.length === 2) {
    if (activeTracks.value.includes(track)) {
      removeTrack(track);
    } else {
      activeTracks.value.pop();
      activeTracks.value.push(track);
    }
  }
}

function removeTrack(track) {
  activeTracks.value = activeTracks.value.filter(
    (activeTrack) => activeTrack.title !== track.title
  );
}
</script>

<style>
.track figure {
  position: relative;
}

.track .drag-zone {
  position: absolute;
  inset: 0;
  z-index: 2;
}
</style>