71 lines
1.6 KiB
TypeScript
71 lines
1.6 KiB
TypeScript
import { computed, onMounted, ref } from "vue";
|
|
export default function useMessageItemComp(m: string, id: string) {
|
|
const x = ref(0)
|
|
const xOffset = async () => {
|
|
const paddingLeft = 40;
|
|
const messageMargin = 20;
|
|
const winW = 350;
|
|
let x: number;
|
|
const msg = await document.getElementById(id);
|
|
if (msg) {
|
|
const messageWidth = msg.getBoundingClientRect().width;
|
|
switch (m) {
|
|
case "sf":
|
|
x = winW - messageWidth;
|
|
break;
|
|
case "ai":
|
|
x = messageMargin + (winW -messageWidth) / 2;
|
|
break;
|
|
default:
|
|
x = paddingLeft;
|
|
}
|
|
return x;
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
const result = await xOffset();
|
|
if(result) {
|
|
x.value = result;
|
|
}
|
|
})
|
|
|
|
|
|
const textFill = computed(() => {
|
|
switch (m) {
|
|
case "sf":
|
|
return "#fff";
|
|
default:
|
|
return "#000";
|
|
}
|
|
});
|
|
|
|
const bubbleFill = computed(() => {
|
|
switch (m) {
|
|
case "sf":
|
|
return "#61b4f4";
|
|
case "ai":
|
|
return "#DDDDDD";
|
|
default:
|
|
return "#fff";
|
|
}
|
|
});
|
|
|
|
const startingOffset = computed(() => {
|
|
const messageRenderer = document.getElementById('messageRenderer')
|
|
if (messageRenderer) {
|
|
const rect = messageRenderer.getBoundingClientRect();
|
|
let Y = 600;
|
|
if (rect.height > 500) {
|
|
Y = rect.height + 75;
|
|
}
|
|
return `translate(${x.value} ${Y})`;
|
|
}
|
|
});
|
|
|
|
return {
|
|
textFill,
|
|
bubbleFill,
|
|
startingOffset
|
|
};
|
|
}
|