81 lines
2 KiB
TypeScript
81 lines
2 KiB
TypeScript
import { computed, onMounted, ref } from "vue";
|
|
export default function useMessageItemComp(m: string, id: string) {
|
|
const x = ref(0)
|
|
const paddingLeft = 30;
|
|
const winW = 350;
|
|
const messageWidth = ref(0);
|
|
const messageMarginTop = 75;
|
|
|
|
const textFill = computed(() => {
|
|
switch (m) {
|
|
case "sf":
|
|
return "#fff";
|
|
default:
|
|
return "#000";
|
|
}
|
|
});
|
|
|
|
const bubbleFill = computed(() => {
|
|
switch (m) {
|
|
case "sf":
|
|
return "#61b4f4";
|
|
default:
|
|
return "#fff";
|
|
}
|
|
});
|
|
|
|
const setMessageWidthRef = async () => {
|
|
const msg = await document.getElementById(id);
|
|
if (msg) {
|
|
messageWidth.value = msg.getBoundingClientRect().width;
|
|
}
|
|
}
|
|
|
|
const selfMessageMarginRight = 2.5;
|
|
const calculateXoffset = async () => {
|
|
switch (m) {
|
|
case "sf":
|
|
x.value = winW - messageWidth.value - selfMessageMarginRight;
|
|
break;
|
|
default:
|
|
x.value = paddingLeft;
|
|
// to center a message
|
|
// x = messageMargin + (winW -messageWidth) / 2;
|
|
}
|
|
}
|
|
|
|
// TODO implement func in order to reduce dual renderer height call startingOffset computed prop
|
|
const getRendererHeight = () => {
|
|
const messageRenderer = document.getElementById('messageRenderer');
|
|
if (messageRenderer) {
|
|
const rect = messageRenderer.getBoundingClientRect();
|
|
return rect.height;
|
|
}
|
|
}
|
|
|
|
const startingOffset = computed(() => {
|
|
const messageRenderer = document.getElementById('messageRenderer');
|
|
if (messageRenderer) {
|
|
const rect = messageRenderer.getBoundingClientRect();
|
|
let Y = 600;
|
|
if (rect.height > 500) {
|
|
Y = rect.height + messageMarginTop;
|
|
}
|
|
return `translate(${x.value} ${Y})`;
|
|
}
|
|
});
|
|
|
|
onMounted(async () => {
|
|
// to calculate X offset:
|
|
// First: set message width ref
|
|
await setMessageWidthRef();
|
|
// Then: calculate message X offset
|
|
calculateXoffset();
|
|
})
|
|
|
|
return {
|
|
textFill,
|
|
bubbleFill,
|
|
startingOffset
|
|
};
|
|
}
|