<script setup> import { onMounted, ref, watch, nextTick } from "vue"; import { LottieAnimation } from "lottie-web-vue"; import AnimationDataJSON from "../assets/Lottiefile_Bauchbinde_Beispiel.json"; import AnimationRechtsBB from "../assets/bbrechts_v2.json"; import AnimationLinksBB from "../assets/bblinks_v2.json"; // import { emit } from "process"; const emit = defineEmits(["falseStatusLottieLoop"]); let anim = ref(null); let BBUnselected = true; let animationData = AnimationDataJSON; let showAnimation = false; const lottie = ref(0); const props = defineProps({ vorname: { type: String, required: true, }, nachname: { type: String, required: true, }, funktionZeileEins: { type: String, required: true, }, funktionZeileZwei: { type: String, required: true, }, BBEcke: { type: String, required: true, }, playLottieStatus: { type: Boolean, required: true, }, pauseLottieStatus: { type: Boolean, required: true, }, }); function breakLottieFalseLoop() { emit("falseStatusLottieLoop", true) } watch( () => props.BBEcke, async () => { if (props.BBEcke === "links") { animationData = AnimationLinksBB; BBUnselected = false; showAnimation = true; lottie.value++; await nextTick(); if (props.playLottieStatus == false && props.pauseLottieStatus == true) { breakLottieFalseLoop(); } } if (props.BBEcke === "rechts") { animationData = AnimationRechtsBB; BBUnselected = false; showAnimation = true; lottie.value++; await nextTick(); if (props.playLottieStatus == false && props.pauseLottieStatus == true) { breakLottieFalseLoop(); } } } ); watch( () => props.playLottieStatus, () => { if (props.playLottieStatus) { anim.value.play(); } } ); watch( () => props.pauseLottieStatus, () => { if (props.pauseLottieStatus) { anim.value.pause(); } } ); // Added array.filter to improve adaptability to different lottie files watch( () => props.vorname, async () => { animationData.layers.filter((layer) => { return layer.nm === "VORNAME"; })[0].t.d.k[0].s.t = props.vorname.toUpperCase(); if (props.BBEcke == "links"){ AnimationRechtsBB.layers.filter((layer) => { return layer.nm === "VORNAME"; })[0].t.d.k[0].s.t = props.vorname.toUpperCase(); } else if (props.BBEcke == "rechts") { AnimationLinksBB.layers.filter((layer) => { return layer.nm === "VORNAME"; })[0].t.d.k[0].s.t = props.vorname.toUpperCase(); } lottie.value++; await nextTick(); if (props.playLottieStatus == false && props.pauseLottieStatus == true) { breakLottieFalseLoop(); } } ); watch( () => props.nachname, async () => { animationData.layers.filter((layer) => { return layer.nm === "NACHNAME"; })[0].t.d.k[0].s.t = props.nachname.toUpperCase(); if (props.BBEcke == "links"){ AnimationRechtsBB.layers.filter((layer) => { return layer.nm === "NACHNAME"; })[0].t.d.k[0].s.t = props.nachname.toUpperCase(); } else if (props.BBEcke == "rechts") { AnimationLinksBB.layers.filter((layer) => { return layer.nm === "NACHNAME"; })[0].t.d.k[0].s.t = props.nachname.toUpperCase(); } lottie.value++; await nextTick(); if (props.playLottieStatus == false && props.pauseLottieStatus == true) { breakLottieFalseLoop(); } } ); watch( () => props.funktionZeileEins, async () => { animationData.layers.filter((layer) => { return layer.nm === "FUNKTION1"; })[0].t.d.k[0].s.t = props.funktionZeileEins; if (props.BBEcke == "links") { AnimationRechtsBB.layers.filter((layer) => { return layer.nm === "FUNKTION1"; })[0].t.d.k[0].s.t = props.funktionZeileEins; } else if (props.BBEcke == "rechts") { AnimationLinksBB.layers.filter((layer) => { return layer.nm === "FUNKTION1"; })[0].t.d.k[0].s.t = props.funktionZeileEins; } lottie.value++; await nextTick(); if (props.playLottieStatus == false && props.pauseLottieStatus == true) { breakLottieFalseLoop(); } } ); watch( () => props.funktionZeileZwei, async () => { animationData.layers.filter((layer) => { return layer.nm === "FUNKTION2"; })[0].t.d.k[0].s.t = props.funktionZeileZwei; if (props.BBEcke == "links") { AnimationRechtsBB.layers.filter((layer) => { return layer.nm === "FUNKTION2"; })[0].t.d.k[0].s.t = props.funktionZeileZwei; } else if (props.BBEcke == "rechts") { AnimationLinksBB.layers.filter((layer) => { return layer.nm === "FUNKTION2"; })[0].t.d.k[0].s.t = props.funktionZeileZwei; } lottie.value++; await nextTick(); if (props.playLottieStatus == false && props.pauseLottieStatus == true) { breakLottieFalseLoop(); } } ); function setMaxMustermann() { animationData = AnimationRechtsBB; animationData.layers[1].t.d.k[0].s.t = "MAX"; animationData.layers[3].t.d.k[0].s.t = "MUSTERMANN"; animationData.layers[5].t.d.k[0].s.t = "Testperson"; animationData.layers[7].t.d.k[0].s.t = ""; animationData = AnimationLinksBB; animationData.layers[1].t.d.k[0].s.t = "MAX"; animationData.layers[3].t.d.k[0].s.t = "MUSTERMANN"; animationData.layers[5].t.d.k[0].s.t = "Testperson"; animationData.layers[7].t.d.k[0].s.t = ""; } function updateValues () { // animationData.layers[1].t.d.k[0].s.t = props.vorname; // animationData.layers[3].t.d.k[0].s.t = props.nachname; // animationData.layers[5].t.d.k[0].s.t = props.funktionZeileEins; // animationData.layers[7].t.d.k[0].s.t = props.funktionZeileZwei; } onMounted(() => { setMaxMustermann(); }); </script> <template> <h2 v-if="BBUnselected"> Bitte eine Position für<br /> die Bauchbinde auswählen </h2> <div class="animation" v-if="showAnimation" :key="lottie"> <LottieAnimation ref="anim" :animation-data="animationData" :loop="true" :auto-play="true" :speed="1" @loopComplete="loopComplete" @complete="complete" @enterFrame="enterFrame" @segmentStart="segmentStart" @stopped="stopped" /> </div> </template> <style> .animation { background-color: #000; } .hinweis { text-align: center; margin: auto; } @media screen and (max-width: 1200px) { .animation { width: 80%; } } </style>