282 lines
10 KiB
JavaScript
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
|
|
}
|
|
}
|