studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

tracks select : track selection inside groups working without comparison mode enabled

Browse source
This commit is contained in:
isUnknown 2025-06-05 18:41:01 +02:00
parent 1de315cbcd
commit 0c5c10791e
4 changed files with 101 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

63
src/components/project/virtual-sample/DynamicView.vue
View file

@ -3,14 +3,11 @@
<header class="tracks-header | flex">
<div class="tracks">
<Selector
:label="'piste'"
:items="tracks"
@update:selectedItems="selectTrack"
/>
<Selector
v-if="isCompareModeEnabled"
:label="'piste'"
:items="tracks"
v-for="track in tracks"
:key="track.slug"
:label="track.title"
:items="track.variations"
:isCompareModeEnabled="isCompareModeEnabled"
@update:selectedItems="selectTrack"
/>
</div>
@ -46,7 +43,7 @@
</div>
</template>
<script setup>
import { ref, computed, watch, onMounted, onBeforeMount } from 'vue';
import { computed, watch, onMounted, onBeforeMount } from 'vue';
import { storeToRefs } from 'pinia';
import { usePageStore } from '../../../stores/page';
import { useDialogStore } from '../../../stores/dialog';
@ -55,6 +52,7 @@ import { useRoute } from 'vue-router';
import Interactive360 from './Interactive360.vue';
import SingleImage from './SingleImage.vue';
import Selector from '../../Selector.vue';
import slugify from 'slugify';
const route = useRoute();
@ -64,15 +62,21 @@ const { isCommentsOpen, isCommentPanelEnabled, activeTracks, openedFile } =
const { isCompareModeEnabled } = storeToRefs(useVirtualSampleStore());
const rawTracks = page.value.steps.find(
(step) => step.slug === 'virtual-sample'
).files.dynamic;
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]];
}
activeTracks.value = [rawTracks[Object.keys(rawTracks)[0]][0]];
// 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(() => {
@ -82,16 +86,29 @@ onMounted(() => {
}
});
const tracks = computed(
() =>
page.value.steps.find((step) => step.slug === 'virtual-sample').files
.dynamic
);
const tracks = computed(() => {
const rawTracks = page.value.steps.find(
(step) => step.slug === 'virtual-sample'
).files.dynamic;
const tracks = [];
for (const key in rawTracks) {
tracks.push({
title: key,
slug: slugify(key),
variations: rawTracks[key],
});
}
return tracks;
});
const isSingleImage = computed(() => {
console.log(activeTracks.value);
return (
activeTracks.value?.length === 1 &&
activeTracks.value[0]?.files.length === 1
activeTracks.value[0]?.files?.length === 1
);
});