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)
|