102 lines
1.8 KiB
TypeScript
102 lines
1.8 KiB
TypeScript
import { ref } from "vue";
|
|
import anime from "animejs";
|
|
import { v4 as uuidv4 } from 'uuid';
|
|
|
|
|
|
export function animateTextInput () {
|
|
|
|
const side = ref("right");
|
|
|
|
function show () {
|
|
const t1 = (side.value === "right") ? 50 : -70;
|
|
const t2 = (side.value === "right") ? 110 : -130;
|
|
|
|
anime({
|
|
targets: '#textInput',
|
|
opacity: [0, 1],
|
|
translateX: [t1, t2],
|
|
scale: [0.3, 1],
|
|
duration: 500,
|
|
easing: 'easeOutExpo',
|
|
})
|
|
|
|
}
|
|
|
|
function hide () {
|
|
const t = (side.value === "right") ? 50 : -80;
|
|
|
|
anime({
|
|
targets: '#textInput',
|
|
opacity: [1, 0],
|
|
translateX: t,
|
|
scale: 0.3,
|
|
duration: 500,
|
|
easing: 'easeOutExpo',
|
|
})
|
|
|
|
}
|
|
|
|
function switchSide () {
|
|
const t = (side.value === "right") ? -130 : 110;
|
|
|
|
anime({
|
|
targets: '#textInput',
|
|
translateX: t,
|
|
duration: 500,
|
|
easing: 'easeOutExpo',
|
|
})
|
|
|
|
}
|
|
|
|
return {
|
|
side,
|
|
show,
|
|
hide,
|
|
switchSide
|
|
};
|
|
|
|
}
|
|
|
|
export function animateAudioInput () {
|
|
|
|
function show () {
|
|
anime({
|
|
targets: '#recIcon',
|
|
opacity: [0, 0.75],
|
|
scale: [0.0, 1],
|
|
duration: 250,
|
|
easing: 'linear',
|
|
})
|
|
}
|
|
|
|
function hide () {
|
|
anime({
|
|
targets: '#recIcon',
|
|
opacity: [0.75, 0],
|
|
scale: [1, 0],
|
|
duration: 250,
|
|
easing: 'linear',
|
|
})
|
|
}
|
|
|
|
return {
|
|
show,
|
|
hide
|
|
};
|
|
|
|
}
|
|
|
|
|
|
export function newMessage ({
|
|
text=false,
|
|
audio=false,
|
|
context=false,
|
|
uid=uuidv4()
|
|
}): Message {
|
|
return {
|
|
text: text,
|
|
audio: audio,
|
|
context: context,
|
|
uid: uid
|
|
};
|
|
}
|