72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
import { VueTransitionCallback } from '@/types/vue3/vueTransitionCallback/index';
|
|
import useMessageViewAnims from "./anime";
|
|
import useOffsetCalculator from './offsetCalculator';
|
|
|
|
/**
|
|
* handles visualization of view messages through
|
|
* vue transition callbacks and anime-js animations
|
|
*/
|
|
export default function useMessageVisualizer(): {
|
|
beforeEnter: VueTransitionCallback;
|
|
enter: VueTransitionCallback;
|
|
afterEnter: VueTransitionCallback;
|
|
} {
|
|
// uses offsetCalculator logic and renderer animations
|
|
const { calculateMessageOffsets } = useOffsetCalculator();
|
|
const { shiftAnimate, stackAnimate } = useMessageViewAnims();
|
|
|
|
const messagePadding = 15;
|
|
let messageList: NodeList;
|
|
let message: HTMLElement | null;
|
|
let messageOffset = { x: 0, y: 0 };
|
|
let shift = false;
|
|
let shiftOffset = 0;
|
|
|
|
// animates message item to 'enter' renderView
|
|
const animateMessage = (el: SVGGElement): void => {
|
|
|
|
const transform = {
|
|
initialTranslate: `translate(${messageOffset.x} ${messageOffset.y})`,
|
|
finalTranslate: `translate(${messageOffset.x} ${messageOffset.y})`
|
|
}
|
|
shift ? shiftAnimate(el, transform, shiftOffset, messageList) : stackAnimate(el, transform);
|
|
}
|
|
|
|
const beforeEnter: VueTransitionCallback = () => {
|
|
const queryResult = document.querySelectorAll(".messageList");
|
|
if (queryResult.length) messageList = queryResult;
|
|
}
|
|
|
|
const enter: VueTransitionCallback = (el) => {
|
|
// query DOM for latest message as soon as it enters
|
|
if (el) {
|
|
message = document.getElementById(el.id);
|
|
}
|
|
}
|
|
|
|
const afterEnter: VueTransitionCallback = (el) => {
|
|
// get message positioning & shift state before animating
|
|
if (message) {
|
|
messageOffset = calculateMessageOffsets(message);
|
|
shift = messageOffset.y > 400 ? true : false;
|
|
}
|
|
if (el) {
|
|
if (shift) {
|
|
|
|
console.log(messageOffset.y)
|
|
if (messageOffset.y < 445) {
|
|
shiftOffset -= 15;
|
|
} else {
|
|
shiftOffset -= el.getBBox().height + messagePadding;
|
|
}
|
|
}
|
|
animateMessage(el);
|
|
}
|
|
}
|
|
|
|
return {
|
|
beforeEnter,
|
|
enter,
|
|
afterEnter
|
|
};
|
|
}
|