splash screen

src/components/home/messageVisualizer/viewDetails/visualizer.ts

@@ -0,0 +1,72 @@
+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
+    };
+}