You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
2.3 KiB
JavaScript
79 lines
2.3 KiB
JavaScript
(function () {
|
|
// FUNCTION TO ADJUST TEXTAREA HEIGHT AND SUBMIT BUTTON VISIBILITY
|
|
function adjustTextAreaAndButton(textarea, submitButton) {
|
|
// Adjust the height of the textarea
|
|
if (textarea.value.trim() === '') {
|
|
textarea.style.height = '50px';
|
|
} else {
|
|
textarea.style.height = textarea.scrollHeight + 'px';
|
|
}
|
|
|
|
// Display and hide the submit button
|
|
if (textarea.value.trim() === '') {
|
|
submitButton.classList.add('hidden');
|
|
} else {
|
|
submitButton.classList.remove('hidden');
|
|
}
|
|
}
|
|
|
|
function scrollBottom() {
|
|
const conversationContainer = document.getElementById('conversation');
|
|
conversationContainer.scrollTop = conversationContainer.scrollHeight;
|
|
}
|
|
|
|
|
|
|
|
// INITIALIZE ELEMENTS
|
|
const form = document.querySelector('#sendMessage');
|
|
const textarea = document.querySelector('#dynamicTextarea');
|
|
const conversationContainer = document.getElementById('conversation');
|
|
const submitButton = document.getElementById('submitMessageButton');
|
|
let typingTimeout;
|
|
let isTyping = false;
|
|
|
|
|
|
// EVENT LISTENERS
|
|
textarea.addEventListener('input', function () {
|
|
// Adjust textarea and button
|
|
adjustTextAreaAndButton(dynamicTextarea, submitButton);
|
|
|
|
if (!isTyping) {
|
|
osichatSocket.send(JSON.stringify({
|
|
'event_type': 'typing',
|
|
'typing_status': 'typing'
|
|
}));
|
|
isTyping = true;
|
|
}
|
|
|
|
clearTimeout(typingTimeout);
|
|
typingTimeout = setTimeout(function() {
|
|
osichatSocket.send(JSON.stringify({
|
|
'event_type': 'typing',
|
|
'typing_status': 'stopped_typing'
|
|
}));
|
|
isTyping = false;
|
|
}, 3000);
|
|
});
|
|
|
|
|
|
form.addEventListener('submit', (event) => {
|
|
textarea.style.height = '50px';
|
|
submitButton.classList.add('hidden');
|
|
|
|
setTimeout(() => {
|
|
scrollBottom();
|
|
}, 100);
|
|
});
|
|
|
|
textarea.addEventListener('keydown', (event) => {
|
|
if (event.key === 'Enter' && !event.shiftKey) {
|
|
event.preventDefault();
|
|
if (!submitButton.classList.contains('hidden')) {
|
|
submitButton.click();
|
|
}
|
|
scrollBottom();
|
|
}
|
|
});
|
|
|
|
})();
|