phantasmobile/app/static/js/comments.js
2023-07-25 20:18:20 +01:00

282 lines
10 KiB
JavaScript

function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
function getCSRF() {
return document.querySelector('input[name="csrfmiddlewaretoken"]').value
}
function serializeData(fields) {
var data = {};
document.querySelector('.add-comment').querySelectorAll('input,textarea').forEach(input => {
if (fields && !fields.includes(input.name)) {
return
}
if (input.name != 'csrfmiddlewaretoken') {
var value = input.value.trim()
if (value) {
data[input.name] = value
}
}
})
return data
}
async function api(url, data) {
var csrf = getCSRF()
return fetch(url, {
method: 'POST',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': csrf
},
body: JSON.stringify(data)
}).then(response => {
return response.json()
})
}
async function publish_comment(id) {
return api("/comment/publish/", {
"comment": id
})
}
async function logout() {
return api("/logout/", {}).then(response => {
delete user.username
})
}
async function login(data) {
return api("/login/", data)
}
async function register(data) {
return api("/register/", data)
}
function renderComments(cdiv, data) {
cdiv.innerHTML = `
<h3>
<span class="icon">${icon.down}</span>
Comments
</h3>
<div class="block">
<div class="comments-content">
</div>
</div>
`
const content = cdiv.querySelector('.comments-content')
comments.forEach(comment => {
var extra = ''
if (!comment.published) {
if (user.is_moderator) {
extra += `<button class="publish-comment">${icon.publishComment}</button>`
} else {
extra += '(under review)'
}
}
var c = document.createElement('div')
c.className = 'comment'
c.innerHTML = `
<div class="text">${comment.text}</div>
<div class="meta">
by <span class="name">${comment.name}</span>
<span class="date">${comment.date}</span>
${extra}
</div>
`
c.querySelectorAll('button.publish-comment').forEach(button => {
button.title = "click to publish"
button.addEventListener("click", event => {
button.disabled = true
publish_comment(comment.id).then(response => {
button.remove()
})
})
})
content.append(c)
})
var add = document.querySelector('.add-comment')
add.style.display = 'block'
cdiv.querySelector('.block').append(add)
cdiv.querySelector('h3').addEventListener("click", event => {
var img = cdiv.querySelector('h3 .icon')
if (cdiv.classList.contains("collapsed")) {
cdiv.classList.remove("collapsed")
img.innerHTML = icon.down
} else {
cdiv.classList.add("collapsed")
img.innerHTML = icon.right
}
})
}
function clearInvalid() {
document.querySelectorAll('input.invalid, textarea.invalid').forEach(invalid => {
invalid.classList.remove('invalid')
})
}
document.querySelector('button#add-comment').addEventListener('click', event => {
event.preventDefault()
event.stopPropagation()
var valid = true, fields = ['text', 'name', 'email']
var element = document.querySelector('.add-comment .comment-fields')
element.querySelectorAll('input:invalid, textarea:invalid').forEach(invalid => {
if (fields.includes(invalid.name)) {
invalid.classList.add('invalid')
valid = false
console.log('invalid', invalid)
}
})
if (!valid) {
return
}
var data = serializeData(fields);
data.item = pandora.comment
api("/comment/", data).then(response => {
var comment = document.createElement('div')
comment.classList.add('comment')
comment.innerHTML = `
<div class="text"></div>
<div class="meta">
by <span class="name"></span>
<span class="date"></span>
</div>
`
comment.querySelector('.name').innerText = response.name
comment.querySelector('.date').innerText = response.date
comment.querySelector('.text').innerText = response.text
document.querySelector('.comments .comments-content').append(comment)
document.querySelector('.add-comment textarea').value = ''
if (!user.username) {
localStorage.name = data.name
localStorage.email = data.email
}
})
})
function afterLogin() {
document.querySelector('input[name="csrfmiddlewaretoken"]').value = getCookie('csrftoken')
user.username = data.username
document.querySelectorAll('.add-comment input[name="email"]').forEach(input => {
input.required = false
})
document.querySelectorAll('.add-comment input[type="password"]').forEach(input => {
input.value = ""
input.required = false
})
document.querySelector('.add-comment .buttons.login').classList.remove('active')
var buttons = document.querySelector('.add-comment .buttons.guest')
buttons.querySelector('#add-comment').innerText = "Add comment"
buttons.querySelector('#login').remove()
buttons.classList.remove('guest')
buttons.classList.add('active')
var textarea = document.querySelector('.add-comment textarea')
textarea.style.display = ""
textarea.required = true
document.querySelector('.add-comment .login .error').innerText = ''
delete localStorage.name
delete localStorage.email
}
var btnLogin = document.querySelector('.add-comment .buttons.guest button#login')
if (btnLogin) {
btnLogin.addEventListener('click', event => {
event.preventDefault()
event.stopPropagation()
clearInvalid()
document.querySelector('.add-comment .buttons.guest').classList.remove('active')
document.querySelector('.add-comment .user-info').style.display = "none"
document.querySelector('.add-comment .buttons.login').classList.add('active')
var textarea = document.querySelector('.add-comment textarea')
textarea.style.display = "none"
textarea.required = false
})
document.querySelector('.add-comment .buttons.login button#login').addEventListener("click", event => {
event.preventDefault()
event.stopPropagation()
clearInvalid()
if (!document.querySelectorAll('.add-comment .login input:invalid').length) {
event.target.disabled = true
var data = serializeData()
login({
"username": data.username,
"password": data.password,
}).then(response => {
if (response.error) {
document.querySelector('.add-comment .login .error').innerText = response.error
event.target.disabled = false
} else {
afterLogin()
}
})
} else {
document.querySelectorAll('.add-comment .login input:invalid').forEach(invalid => {
invalid.classList.add('invalid')
})
document.querySelector('.add-comment .login .error').innerText = ''
}
})
document.querySelector('.add-comment .buttons.login button#register').addEventListener("click", event => {
event.preventDefault()
event.stopPropagation()
clearInvalid()
var login = document.querySelector('.add-comment .buttons.login button#login')
var email = document.querySelector('.add-comment .buttons.login input[name="email"]')
if (login.style.display == "none") {
if (!document.querySelectorAll('.add-comment .login input:invalid').length) {
event.target.disabled = true
var data = serializeData()
register({
"username": data.username,
"password": data.password,
"email": data.email,
}).then(response => {
if (response.error) {
document.querySelector('.add-comment .login .error').innerText = response.error
event.target.disabled = false
} else {
afterLogin()
}
})
} else {
document.querySelectorAll('.add-comment .login input:invalid').forEach(invalid => {
invalid.classList.add('invalid')
})
document.querySelector('.add-comment .login .error').innerText = ''
}
} else {
document.querySelector('.add-comment .login .error').innerText = ''
login.style.display = "none"
email.required = true
email.style.display = "block"
}
})
}
if (!user.username) {
if (localStorage.name) {
document.querySelector('.add-comment .comment-fields input[name="name"]').value = localStorage.name
}
if (localStorage.email) {
document.querySelector('.add-comment .comment-fields input[name="email"]').value = localStorage.email
}
}