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

#56 - prepare compare logic

Browse source
This commit is contained in:
isUnknown 2024-12-17 15:08:03 +01:00
parent 436b1aa4ca
commit af61f49e2b
1 changed files with 32 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,31 +5,32 @@
<button <button
v-for="(track, index) in tracks" v-for="(track, index) in tracks"
class="btn btn--image" class="btn btn--image"
:aria-pressed="activeTrack === track ? true : false" :aria-pressed="activeTracks.includes(track) ? true : false"
:aria-controls="track.slug" :aria-controls="track.slug"
:style="`--btn-image: url(${getFrontViewUrl(track)});`" :style="`--btn-image: url(${getFrontViewUrl(track)});`"
@click=" @click="selectTrack(track)"
activeTrack = track;
currentX = 0;
currentY = 0;
"
> >
<span>{{ track.title }}</span> <span>{{ track.title }}</span>
</button> </button>
</div> </div>
<button class="btn | ml-auto" disabled> <button
class="btn | ml-auto"
@click="isCompareModeEnabled = !isCompareModeEnabled"
>
<span>Comparer les pistes</span> <span>Comparer les pistes</span>
</button> </button>
</header> </header>
<div class="track"> <div class="track">
<Interactive360 <template v-for="activeTrack in activeTracks" :key="activeTrack.title">
v-if="activeTrack.files.length > 1" <Interactive360
:activeTrack="activeTrack" v-if="activeTrack.files.length > 1"
/> :activeTrack="activeTrack"
<figure> />
<img :src="activeTrack.files[0].url" alt="" /> <figure v-else>
</figure> <img :src="activeTrack.files[0].url" alt="" />
</figure>
</template>
</div> </div>
</div> </div>
</template> </template>
@ -45,7 +46,9 @@ const tracks = computed(
() => page.value.steps[page.value.steps.length - 1].files.dynamic () => page.value.steps[page.value.steps.length - 1].files.dynamic
); );
const activeTrack = ref(tracks.value[0]); const isCompareModeEnabled = ref(false);
const activeTracks = ref([tracks.value[0]]);
function getFrontViewUrl(track) { function getFrontViewUrl(track) {
if (track.files.length > 1) { if (track.files.length > 1) {
@ -54,6 +57,20 @@ function getFrontViewUrl(track) {
return track.files[0].url; return track.files[0].url;
} }
} }
function selectTrack(track) {
if (isCompareModeEnabled.value) {
if (activeTracks.value.includes(track)) {
activeTracks.value = activeTracks.value.filter(
(item) => item.title !== track.title
);
} else {
activeTracks.value.push(track);
}
} else {
activeTracks.value = [track];
}
}
</script> </script>
<style> <style>