fix #131

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

@@ -7,6 +7,7 @@
           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)"
@@ -48,12 +49,15 @@
   </div>
 </template>
 <script setup>
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, onMounted, onBeforeMount } from 'vue';
 import { storeToRefs } from 'pinia';
 import { usePageStore } from '../../../stores/page';
 import Interactive360 from './Interactive360.vue';
 import { useDialogStore } from '../../../stores/dialog';
 import { useVirtualSampleStore } from '../../../stores/virtualSample';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
 
 const { page } = storeToRefs(usePageStore());
 const { isCommentsOpen, isCommentPanelEnabled, activeTracks, openedFile } =
@@ -61,6 +65,24 @@ const { isCommentsOpen, isCommentPanelEnabled, activeTracks, openedFile } =
 
 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
@@ -101,8 +123,6 @@ watch(isCompareModeEnabled, (newValue) => {
   }
 });
 
-activeTracks.value = [tracks.value[0]];
-
 function getFrontViewUrl(track) {
   if (track.files.length > 1) {
     return track.files[7].url;