118 lines
No EOL
4.1 KiB
JavaScript
118 lines
No EOL
4.1 KiB
JavaScript
// modal form handle
|
|
if (document.querySelector('.modal__form-submit')) {
|
|
document.querySelector('.modal__form-submit').addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const value = document.querySelector('.modal__form-input').value;
|
|
if (value.length >= 3) {
|
|
let date = new Date(Date.now());
|
|
date = date.setTime(date.getTime() + (90 * 24 * 60 * 60 * 1000));
|
|
date = new Date(date);
|
|
const expires = '; expires=' + date.toUTCString();
|
|
document.cookie = 'outchat_name=' + (value || '') + expires + '; path=/';
|
|
window.location.href = '';
|
|
}
|
|
});
|
|
}
|
|
|
|
document.querySelector('.form__input-message').addEventListener('keydown', function (e) {
|
|
if (!e.ctrlKey && e.keyCode === 13) {
|
|
e.preventDefault();
|
|
document.querySelector('.form__input-submit').click();
|
|
}
|
|
});
|
|
|
|
document.querySelector('.form__input-submit').addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
|
|
const name = getCookie('outchat_name');
|
|
const text = document.querySelector('.form__input-message').value;
|
|
document.querySelector('.form__input-message').value = '';
|
|
|
|
let formData = new FormData();
|
|
formData.append(name, text);
|
|
|
|
fetch('api.php?action=createMessage', {
|
|
method: 'post',
|
|
headers: {
|
|
"Content-Type": "application/x-www-form-urlencoded",
|
|
},
|
|
body: 'name=' + name + '&text=' + text,
|
|
}).then(() => {
|
|
getMessages();
|
|
}).catch((error) => {
|
|
console.log(error);
|
|
});
|
|
});
|
|
|
|
function getMessages() {
|
|
const timestamp = (document.querySelector('.chat').lastElementChild) ? document.querySelector('.chat').lastElementChild.getAttribute('data-timestamp') : 0;
|
|
|
|
return fetch('api.php?action=getMessages×tamp=' + timestamp)
|
|
.then(function (data) {
|
|
return data.json();
|
|
})
|
|
.then(function (data) {
|
|
if (data.length > 0) {
|
|
if ((window.scrollY + window.innerHeight) === document.body.scrollHeight) {
|
|
setTimeout(function () {
|
|
scrollWindowDown();
|
|
}, 100);
|
|
}
|
|
for (message of data) {
|
|
createMessageNode(message.name, message.text_processed, message.timestamp, message.datetime);
|
|
}
|
|
}
|
|
})
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
}
|
|
|
|
function createMessageNode(name, text, timestamp, datetime) {
|
|
const elementMain = document.createElement('div', {class: 'message'});
|
|
const elementText = document.createElement('div', {class: 'message__text'});
|
|
const elementInfo = document.createElement('div', {class: 'message__info'});
|
|
const elementName = document.createElement('div', {id: 'message__info-name'});
|
|
const elementDatetime = document.createElement('div', {id: 'message__info-datetime'});
|
|
const contentName = document.createTextNode(name);
|
|
const contentDatetime = document.createTextNode('[' + datetime + ']');
|
|
//const contentText = document.createTextNode(text)
|
|
|
|
// element creation
|
|
elementMain.classList.add('message');
|
|
elementText.classList.add('message__text');
|
|
elementInfo.classList.add('message__info');
|
|
elementDatetime.classList.add('message__info-datetime');
|
|
elementName.classList.add('message__info-name');
|
|
|
|
// "hash" name color
|
|
elementName.style.color = "#" + intToRGB(hashCode(name));
|
|
|
|
// append everything to chat
|
|
elementName.appendChild(contentName);
|
|
elementDatetime.appendChild(contentDatetime);
|
|
elementText.innerHTML = text;
|
|
|
|
elementInfo.appendChild(elementName);
|
|
elementInfo.appendChild(elementDatetime);
|
|
|
|
elementMain.appendChild(elementInfo);
|
|
elementMain.appendChild(elementText);
|
|
elementMain.setAttribute('data-timestamp', timestamp);
|
|
|
|
document.querySelector('.chat').appendChild(elementMain);
|
|
|
|
return true;
|
|
}
|
|
|
|
getMessages().then(() => {
|
|
scrollWindowDown();
|
|
});
|
|
|
|
setInterval(function () {
|
|
getMessages();
|
|
}, 2000);
|
|
|
|
if (inIframe()) {
|
|
document.querySelector('.modal__info_url').style.visibility = 'visible';
|
|
} |