64 lines
1.6 KiB
JavaScript
64 lines
1.6 KiB
JavaScript
const form = document.querySelector(".message-input"),
|
|
selectedId = form.querySelector(".message-input .selected-id").value,
|
|
inputField = form.querySelector(".message-input .message-text"),
|
|
sendButton = form.querySelector(".message-input button"),
|
|
chatBox = document.querySelector(".chat-box");
|
|
|
|
form.onsubmit = (e) => {
|
|
e.preventDefault();
|
|
};
|
|
|
|
inputField.focus();
|
|
inputField.onkeyup = () => {
|
|
if (inputField.value != "") {
|
|
sendButton.classList.add("active");
|
|
} else {
|
|
sendButton.classList.remove("active");
|
|
}
|
|
};
|
|
|
|
sendButton.onclick = () => {
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "php/send_msg.php", true);
|
|
xhr.onload = () => {
|
|
if (xhr.readyState === XMLHttpRequest.DONE) {
|
|
if (xhr.status === 200) {
|
|
inputField.value = "";
|
|
scrollToBottom();
|
|
}
|
|
}
|
|
};
|
|
let formData = new FormData(form);
|
|
xhr.send(formData);
|
|
};
|
|
|
|
chatBox.onmouseenter = () => {
|
|
chatBox.classList.add("active");
|
|
};
|
|
|
|
chatBox.onmouseleave = () => {
|
|
chatBox.classList.remove("active");
|
|
};
|
|
|
|
setInterval(() => {
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "php/get_msg.php", true);
|
|
xhr.onload = () => {
|
|
if (xhr.readyState === XMLHttpRequest.DONE) {
|
|
if (xhr.status === 200) {
|
|
let data = xhr.response;
|
|
chatBox.innerHTML = data;
|
|
if (!chatBox.classList.contains("active")) {
|
|
scrollToBottom();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
|
xhr.send("selected_id=" + selectedId);
|
|
}, 1000);
|
|
|
|
function scrollToBottom() {
|
|
chatBox.scrollTop = chatBox.scrollHeight;
|
|
}
|