fix scroll offset

diff --git a/src/components/UI/UIDetails/messages.ts b/src/components/UI/UIDetails/messages.ts
index 46724d320255a43cb49efbce70ca98e25f94b4d0..00eb7aeb33bbd0ac9bf0f3ece0e4a8ec08333948 100644 (file)
--- a/src/components/UI/UIDetails/messages.ts
+++ b/src/components/UI/UIDetails/messages.ts
@@ -1,54 +1,159 @@
 import { Message } from "@/types/message/index";
 
 const Messages: Message[] = [
-  {
-    content:
-      "I can be there at 5 pm tomorrow to greet you at a Chick file with my almond and chive salad.",
-    signature: "Tommy McConville",
-    outgoing: true,
-    modifier: "sf",
-    imgURL: "../assets/logo.png",
-    id: "1"
-  },
-  {
-    content: "Sounds good, see you Thursday.",
-    signature: "Josie Wright",
-    outgoing: false,
-    modifier: "fr",
-    imgURL: "@/assets/logo.png",
-    id: "2"
-  },
-  {
-    content: "Hey Anna, did you get the paper done?",
-    signature: "Tommy McConville",
-    outgoing: false,
-    modifier: "fr",
-    imgURL: "@/assets/logo.png",
-    id: "3"
-  },
-  {
-    content: "Yes posting it online soon.",
-    signature: "Tommy McConville",
-    outgoing: true,
-    modifier: "sf",
-    imgURL: "../../assets/logo.png",
-    id: "4"
-  },
-  {
-    content: "Sweet, thanks!",
-    signature: "Tommy McConville",
-    outgoing: false,
-    modifier: "fr",
-    imgURL: "../../assets/logo.png",
-    id: "5"
-  },
-  {
-    content: "Hey do you know Enrique Hernandez?",
-    signature: "Crimata AI",
-    outgoing: false,
-    modifier: "ai",
-    imgURL: "../../assets/logo.png",
-    id: "6"
-  }
+    {
+        content:
+            "I can be there at 5 pm tomorrow to greet you at a Chick file with my almond and chive salad.",
+        signature: "Tommy McConville",
+        outgoing: true,
+        modifier: "sf",
+        imgURL: "../assets/logo.png",
+        id: "1"
+    },
+    {
+        content: "Sounds good, see you Thursday.",
+        signature: "Josie Wright",
+        outgoing: false,
+        modifier: "fr",
+        imgURL: "@/assets/logo.png",
+        id: "2"
+    },
+    {
+        content: "Hey Anna, did you get the paper done?",
+        signature: "Tommy McConville",
+        outgoing: false,
+        modifier: "fr",
+        imgURL: "@/assets/logo.png",
+        id: "3"
+    },
+    {
+        content: "Yes posting it online soon.",
+        signature: "Tommy McConville",
+        outgoing: true,
+        modifier: "sf",
+        imgURL: "../../assets/logo.png",
+        id: "4"
+    },
+    {
+        content: "Sweet, thanks!",
+        signature: "Tommy McConville",
+        outgoing: false,
+        modifier: "fr",
+        imgURL: "../../assets/logo.png",
+        id: "5"
+    },
+    {
+        content: "Hey do you know Enrique Hernandez?",
+        signature: "Crimata AI",
+        outgoing: false,
+        modifier: "ai",
+        imgURL: "../../assets/logo.png",
+        id: "6"
+    },
+    {
+        content: "Hey do you know Enrique Hernandez?",
+        signature: "Crimata AI",
+        outgoing: false,
+        modifier: "ai",
+        imgURL: "../../assets/logo.png",
+        id: "7"
+    },
+    {
+        content: "Hey do you know Enrique Hernandez?",
+        signature: "Crimata AI",
+        outgoing: false,
+        modifier: "ai",
+        imgURL: "../../assets/logo.png",
+        id: "8"
+    },
+    {
+        content: "Hey Anna, did you get the paper done?",
+        signature: "Tommy McConville",
+        outgoing: false,
+        modifier: "fr",
+        imgURL: "@/assets/logo.png",
+        id: "9"
+    },
+    {
+        content: "Hey Anna, did you get the paper done?",
+        signature: "Tommy McConville",
+        outgoing: false,
+        modifier: "fr",
+        imgURL: "@/assets/logo.png",
+        id: "10"
+    },
+    {
+        content: "Yes posting it online soon.",
+        signature: "Tommy McConville",
+        outgoing: true,
+        modifier: "sf",
+        imgURL: "../../assets/logo.png",
+        id: "11"
+    },
+    {
+        content:
+            "I can be there at 5 pm tomorrow to greet you at a Chick file with my almond and chive salad.",
+        signature: "Tommy McConville",
+        outgoing: true,
+        modifier: "sf",
+        imgURL: "../assets/logo.png",
+        id: "12"
+    },
+    {
+        content: "Hey Anna, did you get the paper done?",
+        signature: "Tommy McConville",
+        outgoing: false,
+        modifier: "fr",
+        imgURL: "@/assets/logo.png",
+        id: "13"
+    },
+    {
+        content: "Hey Anna, did you get the paper done?",
+        signature: "Tommy McConville",
+        outgoing: false,
+        modifier: "fr",
+        imgURL: "@/assets/logo.png",
+        id: "14"
+    },
+    {
+        content: "Yes posting it online soon.",
+        signature: "Tommy McConville",
+        outgoing: true,
+        modifier: "sf",
+        imgURL: "../../assets/logo.png",
+        id: "15"
+    },
+    {
+        content: "Sweet, thanks!",
+        signature: "Tommy McConville",
+        outgoing: false,
+        modifier: "fr",
+        imgURL: "../../assets/logo.png",
+        id: "16"
+    },
+    {
+        content: "Hey do you know Enrique Hernandez?",
+        signature: "Crimata AI",
+        outgoing: false,
+        modifier: "ai",
+        imgURL: "../../assets/logo.png",
+        id: "17"
+    },
+    {
+        content: "Yes posting it online soon.",
+        signature: "Tommy McConville",
+        outgoing: true,
+        modifier: "sf",
+        imgURL: "../../assets/logo.png",
+        id: "18"
+    },
+    {
+        content: "Sweet, thanks!",
+        signature: "Tommy McConville",
+        outgoing: false,
+        modifier: "fr",
+        imgURL: "../../assets/logo.png",
+        id: "19"
+    },
 ];
 export default Messages;

diff --git a/src/components/UI/index.vue b/src/components/UI/index.vue
index 7262812f3c9610819144a0e579f8cc647f43e981..3b19082893e5602e326f90bcaff6230215306606 100644 (file)
--- a/src/components/UI/index.vue
+++ b/src/components/UI/index.vue
@@ -49,6 +49,7 @@
           appear
           v-on:before-appear="beforeEnter"
           v-on:appear="enter"
+          v-on:after-enter="afterEnter"
         >
           <MessageItem
             :item="item"
@@ -97,7 +98,7 @@ export default defineComponent({
     const messages = Messages;
     const count = ref(0);
 
-    const { beforeEnter, enter } = useUIindexAnims();
+    const { beforeEnter, enter, afterEnter } = useUIindexAnims();
 
     const renderMessage = () => {
         if (count.value < messages.length) {
@@ -112,6 +113,7 @@ export default defineComponent({
         renderArr,
         beforeEnter,
         enter,
+        afterEnter
     }
   },
 });

diff --git a/src/composables/anims/useUIindexAnims.ts b/src/composables/anims/useUIindexAnims.ts
index 21eec6ac5cfcd8e70f8a0fe678c5112706f4c3e7..9c922d9bea9dc0cfac18e4893400a369562ec6e7 100644 (file)
--- a/src/composables/anims/useUIindexAnims.ts
+++ b/src/composables/anims/useUIindexAnims.ts
@@ -16,32 +16,19 @@ export default function useUIindexAnims() {
   let modifier: string;
   let msg: HTMLElement | null;
   let prevCardH = 0;
-  let totalHeight = 0;
   let messenger: HTMLElement | null;
   let renderList: NodeList;
   let scrollAnim = false;
   let scroll = 0;
+  const messagePadding = 10;
 
   onMounted(() => {
     messenger = document.getElementById("messenger");
     if (messenger) winW = messenger.clientWidth;
   });
 
-  function calculateAllMessageHeight(): void {
-    const messages = document.querySelectorAll(".test");
-    if (messages.length) {
-      renderList = messages;
-      for (const message of messages) {
-        const el = message as SVGGElement;
-        totalHeight += el.getBBox().height;
-      }
-      scrollAnim = totalHeight > 500 ? true : false;
-    }
-  }
-
   function beforeEnter(el: SVGGElement): void {
     modifier = el.className.baseVal.substring(0, 2);
-    if (!scrollAnim) calculateAllMessageHeight();
   }
 
   function scrollOffset(l: NodeList, height: number): void {
@@ -56,7 +43,13 @@ export default function useUIindexAnims() {
     }
   }
 
+  function setRenderList(): void {
+    const messages = document.querySelectorAll(".test");
+    if (messages.length) renderList = messages;
+  }
+
   const scrollAnimate: MessageAnimeFunc = (el, transform) => {
+    setRenderList();
     anime({
       targets: el, transform: transform.initialTranslate,
       easing: "easeInOutQuad",
@@ -97,7 +90,7 @@ export default function useUIindexAnims() {
       initialTranslate: `translate(${msgOffset.x} ${msgOffset.y})`,
       finalTranslate: `translate(${msgOffset.x} ${msgOffset.y + 5})`
     }
-    scrollAnim ? scrollAnimate(el, transform) : stackAnimate(el, transform)
+    scrollAnim ? scrollAnimate(el, transform) : stackAnimate(el, transform);
   }
 
   function setXoffset(messageWidth: number): void {
@@ -116,33 +109,39 @@ export default function useUIindexAnims() {
 
   function setYoffset(messageHeight: number): void {
     if (prevCardH === 0) {
-      msgOffset.y += messageHeight;
+      msgOffset.y = 40;
     } else {
-      msgOffset.y += prevCardH + messageHeight / 2 + 17.5;
+      msgOffset.y += prevCardH + messagePadding;
     }
     prevCardH = messageHeight;
+    scrollAnim = msgOffset.y > 450 ? true : false;
   }
 
   function calculateMessageOffsets(msg: HTMLElement): void {
     const msgRect = msg.getBoundingClientRect();
-    if (scrollAnim) {
-      // update scroll
-      scroll -= msgRect.height + msgRect.height / 2;
-    }
     setXoffset(msgRect.width)
     setYoffset(msgRect.height)
   }
 
-  async function enter(el: SVGGElement): Promise<void> {
-    msg = await document.getElementById(el.id);
+  function enter(el: SVGGElement): void {
+    console.log(window.getComputedStyle(el).transform)
+    msg = document.getElementById(el.id);
+  }
+
+  const afterEnter = (el: SVGGElement) => {
     if (msg) calculateMessageOffsets(msg);
+    if (scrollAnim) {
+      scroll -= el.getBBox().height + messagePadding;
+    }
     addMessage(el);
+
   }
 
   return {
     beforeEnter,
     enter,
     msgOffset,
-    addMessage
+    addMessage,
+    afterEnter
   };
 }

diff --git a/src/composables/computed/useMessageItemComp.ts b/src/composables/computed/useMessageItemComp.ts
index ecd15a731c3860d699085a13f6356bd7b96e2e56..d3bf08f78df8c53ae794ff50db8cfece50a23a9b 100644 (file)
--- a/src/composables/computed/useMessageItemComp.ts
+++ b/src/composables/computed/useMessageItemComp.ts
@@ -22,13 +22,24 @@ export default function useMessageItemComp(m: string) {
   });
 
   const startingOffset = computed(() => {
-    switch (m) {
-      case "sf":
-        return "translate(115, 600)";
-      case "ai":
-        return "translate(200, 600)";
-      default:
-        return "translate(20, 600)";
+    const cardsDiv = document.getElementById('cardsDiv')
+    if (cardsDiv) {
+      const rect = cardsDiv.getBoundingClientRect();
+      const sfX = 115;
+      const aiX = 200;
+      const dX = 20;
+      let Y = 600;
+      if (rect.height > 500) {
+        Y = rect.height + 75;
+      }
+      switch (m) {
+        case "sf":
+          return `translate(${sfX} ${Y})`;
+        case "ai":
+          return `translate(${aiX} ${Y})`;
+        default:
+          return `translate(${dX} ${Y})`;
+      }
     }
   });
 

diff --git a/src/types/animejs/index.ts b/src/types/animejs/index.ts
index c3c502ddb174fa23114002f68a82a106fe6e2fd1..0e1c015e25dd8620c2c02fda02858cffb3d20a9d 100644 (file)
--- a/src/types/animejs/index.ts
+++ b/src/types/animejs/index.ts
@@ -1,6 +1,7 @@
 interface AnimeFuncParams {
     targets: HTMLElement | SVGGElement | SVGElement;
-    transform: string;
+    translateY?: number;
+    transform?: string;
     easing?: string;
     duration?: number;
     offset?: number;