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="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" disabled>
        <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>
<script setup>
import { ref, computed, watch } from "vue";
import { storeToRefs } from "pinia";
import { usePageStore } from "../../../stores/page";
import { useVirtualSampleStore } from "../../../stores/virtualSample";

const { page } = storeToRefs(usePageStore());
const virtualSampleStore = useVirtualSampleStore();

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)
  )
);
watch(currentFile, () => (virtualSampleStore.currentFile = currentFile.value), {
  immediate: true,
});

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>
.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>