48 lines
1.6 KiB
JavaScript
48 lines
1.6 KiB
JavaScript
const runChat = async () => {
|
|
const frenId =
|
|
new URLSearchParams(document.location.search).get("fren_id") ??
|
|
document.getElementById("fren_id").value;
|
|
const html = await fetch(`/chat/messages?fren_id=${frenId}`).then((r) =>
|
|
r.text(),
|
|
);
|
|
|
|
const { scrollTop, scrollHeight, clientTop } = document.getElementById(
|
|
"chat-container",
|
|
) ?? { scrollTop: 0, scrollHeight: 0, clientTop: 0};
|
|
const scrollTopMax = scrollHeight - clientTop;
|
|
const isAtEdge = scrollTop > (0.92 * scrollTopMax) || scrollTop === 0;
|
|
document.getElementById("messages").innerHTML = html;
|
|
await new Promise((res) => setTimeout(res, 200)); // wait for html to emplace.
|
|
const emplacedScrollTopMax = document.getElementById("chat-container").scrollHeight - document.getElementById("chat-container").clientTop;
|
|
if (isAtEdge) {
|
|
document.getElementById("chat-container").scrollTop = scrollTopMax;
|
|
} else {
|
|
// save the position.
|
|
document.getElementById("chat-container").scrollTop = scrollTop;
|
|
}
|
|
};
|
|
|
|
setTimeout(() => {
|
|
if (document.location.pathname.startsWith("/chat")) {
|
|
runChat().then(() => setInterval(runChat, 2_500));
|
|
}
|
|
}, 200);
|
|
|
|
const form = document.getElementById("chat-form");
|
|
form.addEventListener('submit', (event) => {
|
|
event.preventDefault();
|
|
|
|
const message = document.getElementById("message-content").value;
|
|
const fren_id = document.getElementById("fren-id").value;
|
|
const params = new URLSearchParams();
|
|
params.append("fren_id", fren_id);
|
|
params.append("message", message);
|
|
fetch("/chat", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/x-www-form-urlencoded"
|
|
},
|
|
body: params,
|
|
}).then(runChat);
|
|
});
|