me/mime-chat
Watch
1
0
Fork
You've already forked mime-chat
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'scroll_offset_v2' into 'master'

Browse source 
fix scroll offset

See merge request crimata-ai/crimata-electron!4
This commit is contained in:
Enrique Hernandez 2020-11-02 19:28:39 +00:00
commit 8062a09552
5 changed files with 200 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

203
src/components/UI/UIDetails/messages.ts
View file

@ -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;

4
src/components/UI/index.vue
View file

@ -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
}
},
});

47
src/composables/anims/useUIindexAnims.ts
View file

@ -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
};
}

25
src/composables/computed/useMessageItemComp.ts
View file

@ -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})`;
}
}
});

3
src/types/animejs/index.ts
View file

@ -1,6 +1,7 @@
interface AnimeFuncParams {
targets: HTMLElement | SVGGElement | SVGElement;
transform: string;
translateY?: number;
transform?: string;
easing?: string;
duration?: number;
offset?: number;