112 lines
3.9 KiB
JavaScript
112 lines
3.9 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) {
|
|
var 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) {
|
|
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 = ''
|
|
|
|
var 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(function (data) {
|
|
getMessages()
|
|
})
|
|
.catch(function (error) {
|
|
console.log(error)
|
|
})
|
|
})
|
|
|
|
function getMessages() {
|
|
const timestamp = (document.querySelector('.chat').lastElementChild) ? document.querySelector('.chat').lastElementChild.getAttribute('data-timestamp') : 0
|
|
|
|
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()
|
|
setInterval(function () {
|
|
getMessages()
|
|
}, 2000)
|