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

<template>
  <div class="dialog__inner">
    <header class="tracks-header | flex">
      <div class="tracks">
        <button
          v-for="(track, index) in tracks"
          class="btn btn--image"
          :aria-pressed="activeTracks.includes(track) ? true : false"
          :aria-controls="track.slug"
          :id="track.slug"
          :style="`--btn-image: url(${getFrontViewUrl(track)});`"
          @click="selectTrack(track)"
          :data-comments="getCommentsCount(track)"
        >
          <span>{{ track.title }}</span>
        </button>
      </div>
      <button
        v-if="tracks.length > 1"
        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"
        />
        <SingleImage v-else :file="activeTrack.files[0]" />
      </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, onMounted, onBeforeMount } from 'vue';
import { storeToRefs } from 'pinia';
import { usePageStore } from '../../../stores/page';
import { useDialogStore } from '../../../stores/dialog';
import { useVirtualSampleStore } from '../../../stores/virtualSample';
import { useRoute } from 'vue-router';
import Interactive360 from './Interactive360.vue';
import SingleImage from './SingleImage.vue';

const route = useRoute();

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

const { isCompareModeEnabled } = storeToRefs(useVirtualSampleStore());

onBeforeMount(() => {
  if (route.hash.length > 0) {
    const trackToOpen = tracks.value.find(
      (track) => track.slug === route.hash.substring(1)
    );
    activeTracks.value = [trackToOpen];
  } else {
    activeTracks.value = [tracks.value[0]];
  }
});

onMounted(() => {
  if (route.hash.length > 0) {
    const targetBtn = document.querySelector(route.hash);
    targetBtn.scrollIntoView();
  }
});

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

const isSingleImage = computed(() => {
  return (
    activeTracks.value?.length === 1 &&
    activeTracks.value[0]?.files.length === 1
  );
});

const singleFile = computed(() => {
  return isSingleImage.value && activeTracks.value[0].files[0];
});

watch(
  singleFile,
  (newValue) => {
    if (newValue) {
      openedFile.value = newValue;
    }
  },
  { immediate: true }
);

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

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

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
  );
}

function getCommentsCount(track) {
  let count = 0;
  for (const file of track.files) {
    count += file?.comments?.length || 0;
  }
  return count > 0 ? count : undefined;
}
</script>

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

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