designtopack/src/components/project/VirtualSample.vue

<template>
  <Dialog
    id="virtual-sample"
    v-model:visible="isOpen"
    modal
    :draggable="false"
    header="Titre du rendu"
    class="dialog"
    :class="{ 'with-comments': isCommentsOpen }"
    :closeOnEscape="true"
  >
    <template #header>
      <div class="dialog__tabs">
        <button
          class="btn btn--transparent | font-serif"
          data-icon="cursor"
          aria-pressed="true"
        >
          <span>Vue Dynamique</span>
        </button>
        <button class="btn btn--transparent | font-serif" data-icon="image">
          <span>Vue statique</span>
        </button>
      </div>
      <h2 class="font-serif text-lg">Titre du rendu</h2>
    </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="activeTrack === track ? true : false"
            :aria-controls="track.slug"
            :style="`--btn-image: url(${track.files[7].url});`"
            @click="
              activeTrack = track;
              currentX = 0;
              currentY = 0;
            "
          >
            <span>{{ track.title }}</span>
          </button>
        </div>
        <button class="btn | ml-auto">
          <span>Comparer les pistes</span>
        </button>
      </header>

      <!--  -->
      <div class="track-container">
        <figure>
          <img :src="currentFile.url" alt="" />
        </figure>
        <fieldset>
          <button
            class="btn btn--icon"
            id="y-up"
            @click="currentY++"
            :disabled="currentY === yMax.length"
            data-icon="chevron-single-left"
            title="Pivoter vers le haut"
          >
            <span class="sr-only">Top</span>
          </button>
          <button
            class="btn btn--icon" 
            id="x-down" 
            @click="rotateX('left')" 
            data-icon="chevron-single-left"
            title="Pivoter vers la gauche"
          >
            <span class="sr-only">Left</span>
          </button>
          <button
            class="btn btn--icon"
            id="x-up"
            @click="rotateX('right')"
            data-icon="chevron-single-left"
            title="Pivoter vers la droite"
          >
            <span class="sr-only">Right</span>
          </button>
          <button
            class="btn btn--icon" 
            id="y-down" 
            @click="currentX === xMax ? xMax : currentX--" 
            :disabled="currentY === 0"
            data-icon="chevron-single-left"
            title="Pivoter vers le bas"
          >
            <span class="sr-only">Bottom</span>
          </button>
        </fieldset>
      </div>
    </div>
    <template #footer>
      <button
        id="download-image"
        class="btn btn--white-10"
        data-icon="download"
      >
        <span>Sauvegarder l’image</span>
      </button>
      <button
        id="loop-animation"
        class="btn btn--transparent btn--outline"
        data-icon="loop"
      >
        <span>Animation en boucle</span>
      </button>
      <button
        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>
      <Comments
        v-if="isCommentsOpen"
        :current-page-index="currentPageIndex"
        :file="file"
        :comments="file.comments"
        @update:file="changeFile"
      />
    </template>
  </Dialog>
</template>

<script setup>
import { storeToRefs } from "pinia";
import Dialog from "primevue/dialog";
import { computed, ref } from "vue";
import { usePageStore } from "../../stores/page";
import { useDialogStore } from "../../stores/dialog";

const { file } = defineProps({
  file: Object,
});
const { page } = storeToRefs(usePageStore());
const { comments } = storeToRefs(useDialogStore());

const tracks = computed(
  () => page.value.steps[page.value.steps.length - 1].files.dynamic
);

const activeTrack = ref(tracks.value[0]);
const yMax = computed(() => {
  return parseInt(
    activeTrack.value.files[activeTrack.value.files.length - 1].name.charAt(0)
  );
});
const xMax = computed(() => {
  return parseInt(
    activeTrack.value.files[activeTrack.value.files.length - 1].name
      .split("_")[1]
      .split(".")[0]
  );
});

const currentX = ref(0);
const currentY = ref(0);
const currentFileIndex = computed(() => currentY.value + "_" + currentX.value);
const currentFile = computed(() =>
  activeTrack.value.files.find((file) =>
    file.name.includes(currentFileIndex.value)
  )
);

// Variables
const isOpen = ref(true);
const isCommentsOpen = ref(false);

function rotateX(direction) {
  if (direction == 'left') {
    currentX.value = currentX.value === 0 ? xMax.value : currentX.value - 1
  }
  if (direction == 'right') {
    currentX.value = currentX.value === xMax.value ? 0 : currentX.value + 1
  }
}
</script>

<style scoped>
.dialog__inner {
  padding: var(--space-16);
}

.track-container {
  --w: 100%;
  --h: calc(100% - 74px);
  --x-steps: 14;
  --y-steps: 5;
  width: var(--w);
  height: var(--h);
  position: relative;
  margin: var(--space-16) auto;
  border-radius: var(--rounded-lg);
}

.track-container figure {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  position: relative;
}
.track-container img {
  display: block;
  position: absolute;
  inset: 0;
  width: inherit;
  height: inherit;
  object-fit: contain;
}
.track-container fieldset {
  --p: 0rem;
  margin: 0;
  padding: 0;
  width: var(--w);
  height: var(--h);
  border: none;
}
.track-container button,
.track-container input {
  position: absolute;
}

/* Buttons */
.track-container .btn--icon {
  --icon-size: var(--space-24);
  --icon-color: var(--color-grey-700);
  width: var(--space-48);
  height: var(--space-48);
  max-height: var(--space-48);
  background: transparent;
  padding: var(--space-12);
}
.track-container .btn--icon:hover {
  background: var(--color-black-10);
}
#y-up {
  top: var(--p);
}
#y-up::before {
  transform: rotate(90deg);
}
#y-down {
  bottom: var(--p);
}
#y-down::before {
  transform: rotate(-90deg);
}
#y-up,
#y-down {
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
}
#x-down {
  left: var(--p);
}
#x-up {
  right: var(--p);
}
#x-up::before {
  transform: rotate(180deg);
}
#x-down,
#x-up {
  top: 50%;
  transform: translateY(-50%);
}
</style>