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

refactor UI index

Browse source
This commit is contained in:
riqo 2020-10-25 16:28:58 -05:00 • committed by Enrique Hernandez
commit fbfd5a6831
4 changed files with 104 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/UI/UIDetails/messageItem.vue
View file

@ -74,8 +74,8 @@ export default defineComponent({
const { textFill, bubbleFill, startingOffset } = useMessageItemComp(props.item.modifier);
const { textWrap } = useTextWrap();
const { drawMessage, signatureTranslate } = useMessageItemAnims({
mr: messageRect,
tr: messageText
mr: messageRect,
tr: messageText
})
// wraps message text before render

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

@ -87,24 +87,15 @@ import { defineComponent, inject, onMounted, reactive } from "vue";
import MessageItem from './UIDetails/messageItem.vue';
import InputItem from "./UIDetails/inputItem.vue";
import Messages from "./UIDetails/messages";
import useUIindexAnims from "@/composables/anims/useUIindexAnims";
export default defineComponent({
name: 'UIindex',
components: { MessageItem, InputItem },
setup() {
const anime: object | any = inject('animejs');
const timeline: typeof anime = anime.timeline({ loop: true });
const renderArr: Message[] = reactive([])
const messages = Messages;
const msgOffset = {
x: 0 ,
y: 0
}
let messenger: any;
let winW: number;
let modifier: string;
let msg: any;
let cardsDiv: any;
let prevCardH = 0;
const { beforeEnter, enter, msgOffset } = useUIindexAnims();
function renderMsg(i: number): void {
setTimeout(() => {
@ -118,75 +109,21 @@ export default defineComponent({
}
}
async function beforeEnter(el: any) {
modifier = el.className.baseVal.substring(0, 2);
// TODO implemeant Undo animation
function leave() {
}
async function enter(el: any, done: any) {
const paddingLeft = 40;
msg = await document.getElementById(el.id);
const rect = msg.getBoundingClientRect();
const msgW = rect.width;
const msgH = rect.height;
cardsDiv = await document.getElementById("cardsDiv");
const cdBox = cardsDiv.getBBox();
if (prevCardH === 0) {
msgOffset.y += cdBox.height;
} else if (prevCardH > msgH) {
// cardsDiv is offset by 17.5
msgOffset.y += prevCardH + msgH / 2 + 17.5;
} else {
msgOffset.y += cdBox.height - 20;
}
prevCardH = msgH;
switch (modifier) {
case "sf":
msgOffset.x = winW - msgW;
break;
case "ai":
msgOffset.x = (winW - msgW) / 2;
break;
default:
msgOffset.x = paddingLeft;
}
const translateUp = `translate(${msgOffset.x} ${msgOffset.y})`;
const translateDown = `translate(${msgOffset.x} ${msgOffset.y + 5})`;
timeline
.add({
targets: el,
transform: translateUp,
easing: "easeInOutQuad",
duration: 1000
})
.add({
targets: el,
transform: translateDown,
easing: "easeInOutQuad",
duration: 500,
offset: 1000
});
done();
onMounted(() => {
runAnim();
});
return {
renderArr,
msgOffset,
beforeEnter,
enter,
leave
}
function leave() {
}
onMounted(() => {
messenger = document.getElementById('messenger');
winW = messenger.clientWidth;
runAnim();
});
return {
renderArr,
msgOffset,
beforeEnter,
enter,
leave
}
},
});
</script>

12
src/composables/anims/useMessageItemAnims.ts
View file

@ -1,8 +1,14 @@
import { ref, onMounted } from "vue";
interface Ref {
value: string;
interface Ref<A> {
value: A;
}
export default function useMessageItemAnims({ mr, tr }: { mr: Ref; tr: Ref }) {
export default function useMessageItemAnims({
mr,
tr
}: {
mr: Ref<string>;
tr: Ref<string>;
}) {
const signatureTranslate = ref("");
let messageRect: SVGSVGElement & SVGRectElement;
let messageText: SVGSVGElement & SVGTextElement;

78
src/composables/anims/useUIindexAnims.ts Normal file
View file

@ -0,0 +1,78 @@
import { inject, onMounted } from "vue";
export default function useUIindexAnims() {
const anime: any = inject("animejs");
const timeline = anime.timeline({ loop: true });
const msgOffset = {
x: 0,
y: 0
};
let winW: number;
let modifier: string;
let msg: any;
let cardsDiv: any;
let prevCardH = 0;
let messenger: any;
onMounted(() => {
messenger = document.getElementById("messenger");
winW = messenger.clientWidth;
});
async function beforeEnter(el: any) {
modifier = el.className.baseVal.substring(0, 2);
}
async function enter(el: SVGGElement, done: any) {
console.log(done);
const paddingLeft = 40;
msg = await document.getElementById(el.id);
const rect = msg.getBoundingClientRect();
const msgW = rect.width;
const msgH = rect.height;
cardsDiv = await document.getElementById("cardsDiv");
const cdBox = cardsDiv.getBBox();
if (prevCardH === 0) {
msgOffset.y += cdBox.height;
} else if (prevCardH > msgH) {
// cardsDiv is offset by 17.5
msgOffset.y += prevCardH + msgH / 2 + 17.5;
} else {
msgOffset.y += cdBox.height - 20;
}
prevCardH = msgH;
switch (modifier) {
case "sf":
msgOffset.x = winW - msgW;
break;
case "ai":
msgOffset.x = (winW - msgW) / 2;
break;
default:
msgOffset.x = paddingLeft;
}
const translateUp = `translate(${msgOffset.x} ${msgOffset.y})`;
const translateDown = `translate(${msgOffset.x} ${msgOffset.y + 5})`;
timeline
.add({
targets: el,
transform: translateUp,
easing: "easeInOutQuad",
duration: 1000
})
.add({
targets: el,
transform: translateDown,
easing: "easeInOutQuad",
duration: 500,
offset: 1000
});
}
return {
beforeEnter,
enter,
msgOffset
};
}