108 lines
3.5 KiB
Vue
108 lines
3.5 KiB
Vue
<template>
|
|
<div class="form form-group mb-3">
|
|
<label class="form-label">Wybierz animację</label>
|
|
<select v-model="selectedAnimation" @change="changeSelect" class="form-select">
|
|
<option value="">Brak animacji</option>
|
|
<option v-for="item in animations" :key="item.value" :value="item.value">
|
|
{{ item.name }}
|
|
</option>
|
|
</select>
|
|
<div class="mt-2">
|
|
<label class="form-label">Opóźnienie animacji (ms)</label>
|
|
<input type="number" v-model="aosDelay" @input="changeSelect" class="form-control" min="0" step="50" placeholder="np. 200" />
|
|
</div>
|
|
<!-- <small class="form-text text-muted" v-if="selectedAnimation">
|
|
Wybrana animacja: {{ getCompiledAttribute() }}
|
|
</small> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch, onMounted } from 'vue';
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['update:value', 'aos-changed']);
|
|
|
|
const selectedAnimation = ref('');
|
|
const aosDelay = ref('');
|
|
const animations = [
|
|
{ value: 'fade', name: 'Zanikanie' },
|
|
{ value: 'fade-up', name: 'Zanikanie w górę' },
|
|
{ value: 'fade-down', name: 'Zanikanie w dół' },
|
|
{ value: 'fade-left', name: 'Zanikanie w lewo' },
|
|
{ value: 'fade-right', name: 'Zanikanie w prawo' },
|
|
{ value: 'fade-up-right', name: 'Zanikanie w górę i prawo' },
|
|
{ value: 'fade-up-left', name: 'Zanikanie w górę i lewo' },
|
|
{ value: 'fade-down-right', name: 'Zanikanie w dół i prawo' },
|
|
{ value: 'fade-down-left', name: 'Zanikanie w dół i lewo' },
|
|
{ value: 'flip-up', name: 'Obrót w górę' },
|
|
{ value: 'flip-down', name: 'Obrót w dół' },
|
|
{ value: 'flip-left', name: 'Obrót w lewo' },
|
|
{ value: 'flip-right', name: 'Obrót w prawo' },
|
|
{ value: 'slide-up', name: 'Przesunięcie w górę' },
|
|
{ value: 'slide-down', name: 'Przesunięcie w dół' },
|
|
{ value: 'slide-left', name: 'Przesunięcie w lewo' },
|
|
{ value: 'slide-right', name: 'Przesunięcie w prawo' },
|
|
{ value: 'zoom-in', name: 'Powiększenie' },
|
|
{ value: 'zoom-in-up', name: 'Powiększenie w górę' },
|
|
{ value: 'zoom-in-down', name: 'Powiększenie w dół' },
|
|
{ value: 'zoom-in-left', name: 'Powiększenie w lewo' },
|
|
{ value: 'zoom-in-right', name: 'Powiększenie w prawo' },
|
|
{ value: 'zoom-out', name: 'Pomniejszenie' },
|
|
{ value: 'zoom-out-up', name: 'Pomniejszenie w górę' },
|
|
{ value: 'zoom-out-down', name: 'Pomniejszenie w dół' },
|
|
{ value: 'zoom-out-left', name: 'Pomniejszenie w lewo' },
|
|
{ value: 'zoom-out-right', name: 'Pomniejszenie w prawo' }
|
|
];
|
|
|
|
function decompileAosAttribute(val) {
|
|
if (val) {
|
|
const aosMatch = val.match(/data-aos="([^"]+)"/);
|
|
const delayMatch = val.match(/data-aos-delay="(\d+)"/);
|
|
if (aosMatch) {
|
|
selectedAnimation.value = aosMatch[1];
|
|
} else {
|
|
selectedAnimation.value = val;
|
|
}
|
|
if (delayMatch) {
|
|
aosDelay.value = delayMatch[1];
|
|
} else {
|
|
aosDelay.value = '';
|
|
}
|
|
} else {
|
|
selectedAnimation.value = '';
|
|
aosDelay.value = '';
|
|
}
|
|
}
|
|
|
|
function getCompiledAttribute() {
|
|
let attr = '';
|
|
if (selectedAnimation.value) {
|
|
attr += `data-aos="${selectedAnimation.value}"`;
|
|
if (aosDelay.value) {
|
|
attr += ` data-aos-delay="${aosDelay.value}"`;
|
|
}
|
|
}
|
|
return attr;
|
|
}
|
|
|
|
function changeSelect() {
|
|
const compiledAttribute = getCompiledAttribute();
|
|
emit('update:modelValue', compiledAttribute);
|
|
emit('aos-changed', compiledAttribute);
|
|
}
|
|
|
|
onMounted(() => {
|
|
decompileAosAttribute(props.modelValue);
|
|
});
|
|
|
|
watch(() => props.modelValue, (newVal) => {
|
|
decompileAosAttribute(newVal);
|
|
});
|
|
</script> |