80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
import { inject } from "vue";
|
|
import AnimeFunc from "@/types/animejs/index";
|
|
import { MessageAnimeFunc } from '@/types/message/index';
|
|
|
|
/**
|
|
* anime js animations used by message renderer
|
|
*/
|
|
export default function useMessageViewAnims(): {
|
|
shiftAnimate: MessageAnimeFunc;
|
|
stackAnimate: MessageAnimeFunc;
|
|
} {
|
|
// imports animejs safely
|
|
let anime: AnimeFunc;
|
|
const animeInject: AnimeFunc | undefined = inject("animejs");
|
|
if (animeInject) anime = animeInject;
|
|
|
|
// shifts message list by a given value
|
|
function shiftList({ targetList, sv }: { targetList: NodeList | undefined; sv: number | undefined }) {
|
|
if (targetList) {
|
|
for (const element of targetList) {
|
|
const el = element.parentNode as HTMLElement;
|
|
anime({
|
|
targets: el,
|
|
transform: `translate(0 ${sv})`,
|
|
easing: "easeInOutQuad",
|
|
duration: 500,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
// adds new message at the bottom of the list and shifts existing message list
|
|
const shiftAnimate: MessageAnimeFunc = (el, transform, shiftValue, targetList) => {
|
|
anime({
|
|
targets: el,
|
|
transform: transform.initialTranslate,
|
|
easing: "easeInOutQuad",
|
|
duration: 500,
|
|
begin: function() {
|
|
shiftList({
|
|
targetList,
|
|
sv: shiftValue
|
|
});
|
|
},
|
|
complete: function() {
|
|
anime({
|
|
targets: el,
|
|
transform: transform.finalTranslate,
|
|
easing: "easeInOutQuad",
|
|
duration: 500,
|
|
offset: 1000
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// stacks message from top to bottom
|
|
const stackAnimate: MessageAnimeFunc = (el, transform) => {
|
|
anime({
|
|
targets: el,
|
|
transform: transform.initialTranslate,
|
|
easing: "easeInOutQuad",
|
|
duration: 1000,
|
|
complete: function() {
|
|
anime({
|
|
targets: el,
|
|
transform: transform.finalTranslate,
|
|
easing: "easeInOutQuad",
|
|
duration: 500,
|
|
offset: 1000
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
return {
|
|
shiftAnimate,
|
|
stackAnimate
|
|
};
|
|
}
|