From 5c2ea58e886092102fde872a800150912c8d31f5 Mon Sep 17 00:00:00 2001 From: riqo Date: Mon, 2 Nov 2020 12:03:49 -0600 Subject: [PATCH] fix scroll offset --- src/components/UI/UIDetails/messages.ts | 203 +++++++++++++----- src/components/UI/index.vue | 4 +- src/composables/anims/useUIindexAnims.ts | 47 ++-- .../computed/useMessageItemComp.ts | 25 ++- src/types/animejs/index.ts | 3 +- 5 files changed, 200 insertions(+), 82 deletions(-) diff --git a/src/components/UI/UIDetails/messages.ts b/src/components/UI/UIDetails/messages.ts index 46724d3..00eb7ae 100644 --- 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 7262812..3b19082 100644 --- 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" > { 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 21eec6a..9c922d9 100644 --- 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 { - 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 ecd15a7..d3bf08f 100644 --- 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 c3c502d..0e1c015 100644 --- 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; -- 2.43.0