From 8bcba4ca9c5421dbe81a2d432ff2a7ceed3ac749 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Thu, 21 Nov 2024 10:55:22 +0100
Subject: [PATCH] virtual sample : fix dynamic and static views

---
 .../project/virtual-sample/Dynamic.vue        | 203 ------------------
 .../project/virtual-sample/DynamicView.vue    |  87 ++++++++
 .../project/virtual-sample/Static.vue         |  78 -------
 .../project/virtual-sample/StaticView.vue     |  79 ++++++-
 4 files changed, 165 insertions(+), 282 deletions(-)
 delete mode 100644 src/components/project/virtual-sample/Dynamic.vue
 delete mode 100644 src/components/project/virtual-sample/Static.vue

diff --git a/src/components/project/virtual-sample/Dynamic.vue b/src/components/project/virtual-sample/Dynamic.vue
deleted file mode 100644
index e63c0b7..0000000
--- a/src/components/project/virtual-sample/Dynamic.vue
+++ /dev/null
@@ -1,203 +0,0 @@
-<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>
-<script setup>
-import { ref, computed } from "vue";
-import { storeToRefs } from "pinia";
-import { usePageStore } from "../../../stores/page";
-
-const { page } = storeToRefs(usePageStore());
-
-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)
-  )
-);
-
-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>
diff --git a/src/components/project/virtual-sample/DynamicView.vue b/src/components/project/virtual-sample/DynamicView.vue
index c1ccb25..32e00af 100644
--- a/src/components/project/virtual-sample/DynamicView.vue
+++ b/src/components/project/virtual-sample/DynamicView.vue
@@ -119,3 +119,90 @@ function rotateX(direction) {
   }
 }
 </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>
diff --git a/src/components/project/virtual-sample/Static.vue b/src/components/project/virtual-sample/Static.vue
deleted file mode 100644
index ec05a37..0000000
--- a/src/components/project/virtual-sample/Static.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-	<header role="tablist" aria-labelledby="tablist">
-		<button
-			id="verre-brut-label"
-			type="button"
-			role="tab"
-			aria-selected="true"
-			aria-controls="verre-brut"
-			tabindex="-1"
-		>
-			<span class="label">Verre brut</span>
-		</button>
-		<button
-			id="verre-paracheve-label"
-			type="button"
-			role="tab"
-			aria-selected="false"
-			aria-controls="verre-paracheve"
-		>
-			<span class="label">Verre parachevé</span>
-		</button>
-	</header>
-	<div class="dialog__inner" id="verre-brut">
-		<!-- PdvViewer -->
-	</div>
-</template>
-
-<style scoped>
-.dialog__inner {
-	background-color: inherit;
-}
-[role="tablist"] {
-  width: 100%;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  margin: 0 auto;
-  border-bottom: 1px solid var(--color-grey-700);
-  padding-top: 7px;
-}
-[role="tab"] {
-  --tab-h: 3rem;
-  --tab-min-w: none;
-  --tab-py: var(--space-8);
-  --tab-px: var(--space-12);
-  --tab-border-w: 1px;
-  --tab-color: var(--color-grey-400);
-  --tab-background: transparent;
-  --tab-border-color: transparent;
-  position: relative;
-  display: flex;
-  align-items: center;
-  font-size: var(--text-md);
-  text-align: center;
-  background-color: transparent;
-  color: var(--tab-color);
-  padding: var(--tab-py) var(--tab-px);
-  margin: 0;
-  cursor: pointer;
-  gap: var(--space-4);
-  min-width: var(--tab-min-w);
-  height: var(--tab-h);
-  border-bottom: var(--tab-border-w) solid var(--tab-border-color);
-}
-[role="tab"][aria-selected="true"] {
-	--tab-border-color: var(--color-white);
-	--tab-color: var(--color-white);
-}
-[role="tab"]:focus-visible {
-  z-index: 20;
-}
-[role="tab"] .label {
-  flex-grow: 1;
-  font-weight: 500;
-  letter-spacing: .01em;
-  margin-top: -0.1em;
-}
-</style>
diff --git a/src/components/project/virtual-sample/StaticView.vue b/src/components/project/virtual-sample/StaticView.vue
index c743a23..ecd9da6 100644
--- a/src/components/project/virtual-sample/StaticView.vue
+++ b/src/components/project/virtual-sample/StaticView.vue
@@ -1 +1,78 @@
-<template>vue static</template>
+<template>
+  <header role="tablist" aria-labelledby="tablist">
+    <button
+      id="verre-brut-label"
+      type="button"
+      role="tab"
+      aria-selected="true"
+      aria-controls="verre-brut"
+      tabindex="-1"
+    >
+      <span class="label">Verre brut</span>
+    </button>
+    <button
+      id="verre-paracheve-label"
+      type="button"
+      role="tab"
+      aria-selected="false"
+      aria-controls="verre-paracheve"
+    >
+      <span class="label">Verre parachevé</span>
+    </button>
+  </header>
+  <div class="dialog__inner" id="verre-brut">
+    <!-- PdvViewer -->
+  </div>
+</template>
+
+<style scoped>
+.dialog__inner {
+  background-color: inherit;
+}
+[role="tablist"] {
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  margin: 0 auto;
+  border-bottom: 1px solid var(--color-grey-700);
+  padding-top: 7px;
+}
+[role="tab"] {
+  --tab-h: 3rem;
+  --tab-min-w: none;
+  --tab-py: var(--space-8);
+  --tab-px: var(--space-12);
+  --tab-border-w: 1px;
+  --tab-color: var(--color-grey-400);
+  --tab-background: transparent;
+  --tab-border-color: transparent;
+  position: relative;
+  display: flex;
+  align-items: center;
+  font-size: var(--text-md);
+  text-align: center;
+  background-color: transparent;
+  color: var(--tab-color);
+  padding: var(--tab-py) var(--tab-px);
+  margin: 0;
+  cursor: pointer;
+  gap: var(--space-4);
+  min-width: var(--tab-min-w);
+  height: var(--tab-h);
+  border-bottom: var(--tab-border-w) solid var(--tab-border-color);
+}
+[role="tab"][aria-selected="true"] {
+  --tab-border-color: var(--color-white);
+  --tab-color: var(--color-white);
+}
+[role="tab"]:focus-visible {
+  z-index: 20;
+}
+[role="tab"] .label {
+  flex-grow: 1;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  margin-top: -0.1em;
+}
+</style>