286 lines
11 KiB
Twig
286 lines
11 KiB
Twig
<div id="comments">
|
|
<div class="comment-input-section">
|
|
{% if user.isActive %}
|
|
<div class="comment">
|
|
<div class="avatar avatar--border comment__avatar comment__avatar--big" style="background-image: url('{{ route('user.avatar', user.id) }}');">
|
|
<span class="comment__username">
|
|
{{ user.username }}
|
|
</span>
|
|
</div>
|
|
<div class="comment__pointer"></div>
|
|
<textarea class="comment__content comment__content--create comment__content--parent" name="text" placeholder="Join the conversation..."></textarea>
|
|
<button
|
|
class="comment__submit comment__submit--new"
|
|
name="session"
|
|
value="{{ session_id() }}"
|
|
onclick="commentPost(this.parentNode, '{{ route('comments.category.post', commentsCategory) }}');"
|
|
>
|
|

|
|
</button>
|
|
</div>
|
|
{% else %}
|
|
<h1 class="comments__placeholder">Log in to comment!</h1>
|
|
{% endif %}
|
|
</div>
|
|
<div class="comments">
|
|
<ul class="comments__list">
|
|
{% if comments %}
|
|
{% for comment in comments %}
|
|
{% set comment_depth = 0 %}
|
|
{% include 'elements/comment.twig' %}
|
|
{% endfor %}
|
|
{% else %}
|
|
<h1 class="comments__placeholder">There are no comments yet!</h1>
|
|
{% endif %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{% block js %}
|
|
<script type="text/javascript">
|
|
var commentClient = new Sakura.AJAX();
|
|
|
|
commentClient.ContentType("application/x-www-form-urlencoded");
|
|
|
|
function commentError(text) {
|
|
var error = new Sakura.Dialogue;
|
|
error.Title = "Error";
|
|
error.Text = text;
|
|
error.AddCallback(Sakura.DialogueButton.Ok, function () {
|
|
this.Close();
|
|
});
|
|
error.Display();
|
|
}
|
|
|
|
function commentPost(element, url) {
|
|
var text = element.querySelector('[name="text"]'),
|
|
session = element.querySelector('[name="session"]');
|
|
|
|
commentClient.SetSend({"text":text.value,"session":session.value});
|
|
text.value = '';
|
|
commentClient.SetUrl(url);
|
|
commentClient.AddCallback(200, function () {
|
|
var resp = commentClient.JSON();
|
|
|
|
if (resp.error) {
|
|
commentError(resp.error);
|
|
} else {
|
|
commentAdd(resp);
|
|
}
|
|
|
|
commentClient.SetRawSend("");
|
|
});
|
|
|
|
commentClient.Start(Sakura.HTTPMethod.POST);
|
|
}
|
|
|
|
function commentAdd(obj) {
|
|
var container = document.createElement('li');
|
|
container.id = "comment-" + obj.id;
|
|
container.className = 'comment-container comment-container--indent';
|
|
|
|
var inner = document.createElement('div');
|
|
inner.className = 'comment';
|
|
|
|
var avatar = document.createElement('a');
|
|
avatar.className = 'avatar avatar--border comment__avatar';
|
|
|
|
if (!obj.reply) {
|
|
avatar.className += ' comment__avatar--big';
|
|
}
|
|
|
|
avatar.href = "{{ route('user.profile', 1) }}".replace(1, obj.user);
|
|
avatar.style.backgroundImage = "url('{{ route('user.avatar', 1) }}')".replace(1, obj.user);
|
|
inner.appendChild(avatar);
|
|
|
|
var pointer = document.createElement('div');
|
|
pointer.className = 'comment__pointer';
|
|
inner.appendChild(pointer);
|
|
|
|
var content = document.createElement('div');
|
|
content.className = 'comment__content';
|
|
|
|
var controls = document.createElement('div');
|
|
controls.className = 'comment__controls';
|
|
|
|
var controlsInner = document.createElement('ul');
|
|
|
|
if (Sakura.Config.LoggedIn && Sakura.Config.UserId === obj.user) {
|
|
var controlsTrash = document.createElement('div');
|
|
controlsTrash.title = 'Delete';
|
|
controlsTrash.className = 'fa fa-trash-o comment__control';
|
|
controlsTrash.setAttribute('onclick', 'commentDelete(' + obj.id + ');');
|
|
controls.appendChild(controlsTrash);
|
|
}
|
|
|
|
var controlsReply = document.createElement('div');
|
|
controlsReply.title = 'Reply';
|
|
controlsReply.className = 'fa fa-reply comment__control';
|
|
controlsReply.setAttribute('onclick', 'commentReply(' + obj.id + ', "{{ session_id() }}", "{{ route("user.avatar", user.id) }}");');
|
|
controls.appendChild(controlsReply);
|
|
|
|
var controlsLike = document.createElement('div');
|
|
controlsLike.setAttribute('onclick', 'commentVote(' + obj.id + ', 1);');
|
|
controlsLike.className = 'comment__control comment__control--vote comment__control--vote-up';
|
|
var controlsLikeIcon = document.createElement('span');
|
|
controlsLikeIcon.className = 'fa fa-chevron-up';
|
|
controlsLike.appendChild(controlsLikeIcon);
|
|
controlsLike.innerHTML += "\r\n";
|
|
var controlsLikeCount = document.createElement('span');
|
|
controlsLikeCount.id = 'comment-' + obj.id + '-likes';
|
|
controlsLikeCount.innerText = obj.upvotes;
|
|
controlsLike.appendChild(controlsLikeCount);
|
|
controls.appendChild(controlsLike);
|
|
|
|
var controlsDislike = document.createElement('div');
|
|
controlsDislike.setAttribute('onclick', 'commentVote(' + obj.id + ', 0);');
|
|
controlsDislike.className = 'comment__control comment__control--vote comment__control--vote-down';
|
|
var controlsDislikeIcon = document.createElement('span');
|
|
controlsDislikeIcon.className = 'fa fa-chevron-down';
|
|
controlsDislike.appendChild(controlsDislikeIcon);
|
|
controlsDislike.innerHTML += "\r\n";
|
|
var controlsDislikeCount = document.createElement('span');
|
|
controlsDislikeCount.id = 'comment-' + obj.id + '-dislikes';
|
|
controlsDislikeCount.innerText = obj.upvotes;
|
|
controlsDislike.appendChild(controlsDislikeCount);
|
|
controls.appendChild(controlsDislike);
|
|
|
|
content.appendChild(controls);
|
|
|
|
var text = document.createElement('text');
|
|
text.className = 'comment__text';
|
|
text.innerHTML = obj.text;
|
|
content.appendChild(text);
|
|
|
|
inner.appendChild(content);
|
|
container.appendChild(inner);
|
|
|
|
var replies = document.createElement('ul');
|
|
replies.className = 'comment__replies';
|
|
container.appendChild(replies);
|
|
|
|
var discussion = document.getElementById('comments').querySelector('.comments__list');
|
|
|
|
if (obj.reply) {
|
|
discussion = document.getElementById('comment-' + obj.reply).querySelector('.comment__replies');
|
|
}
|
|
|
|
if (discussion.children.length > 0) {
|
|
discussion.insertBefore(container, discussion.firstChild);
|
|
} else {
|
|
discussion.appendChild(container);
|
|
}
|
|
}
|
|
|
|
function commentReply(id, session, avatar) {
|
|
var url = "{{ route('comments.category.post', [':cat', 1]) }}"
|
|
.replace('1', id)
|
|
.replace(':cat', '{{ commentsCategory }}');
|
|
|
|
// Find subject post
|
|
var replyingTo = document.getElementById('comment-' + id);
|
|
|
|
// Check if it actually exists
|
|
if ((typeof replyingTo).toLowerCase() === 'undefined') {
|
|
return;
|
|
}
|
|
|
|
// Attempt to get previously created box
|
|
var replyBox = document.getElementById('comment-reply-container-' + id);
|
|
|
|
// Remove it if it already exists
|
|
if (replyBox) {
|
|
Sakura.DOM.Remove(replyBox);
|
|
return;
|
|
}
|
|
|
|
// Container
|
|
var replyContainer = document.createElement('li');
|
|
replyContainer.id = 'comment-reply-container-' + id;
|
|
replyContainer.className = 'comment-container comment-container--indent';
|
|
|
|
// Comment container
|
|
var replyDiv = document.createElement('div');
|
|
replyDiv.className = 'comment';
|
|
replyDiv.id = 'comment-reply-' + id;
|
|
|
|
// Avatar
|
|
var replyAvatar = document.createElement('div');
|
|
replyAvatar.className = 'avatar avatar--border comment__avatar';
|
|
replyAvatar.style.backgroundImage = 'url(' + avatar + ')';
|
|
replyDiv.appendChild(replyAvatar);
|
|
|
|
// Pointer
|
|
var replyPoint = document.createElement('div');
|
|
replyPoint.className = 'comment__pointer';
|
|
replyDiv.appendChild(replyPoint);
|
|
|
|
// Textarea
|
|
var replyText = document.createElement('textarea');
|
|
replyText.className = 'comment__content comment__content--create';
|
|
replyText.placeholder = 'Type your reply here...';
|
|
replyText.name = 'text';
|
|
replyDiv.appendChild(replyText);
|
|
|
|
// Submit
|
|
var replySubmit = document.createElement('button');
|
|
replySubmit.className = 'comment__submit';
|
|
replySubmit.name = 'session';
|
|
replySubmit.value = session;
|
|
replySubmit.setAttribute('onclick', 'commentPost(this.parentNode, "' + url + '"); commentReply(' + id + ');');
|
|
replySubmit.innerHTML = "\uf1d8";
|
|
replyDiv.appendChild(replySubmit);
|
|
|
|
// Append form to container
|
|
replyContainer.appendChild(replyDiv);
|
|
|
|
// Insert the HTML
|
|
if (replyingTo.querySelector('.comment__replies').children.length > 0) {
|
|
replyingTo.querySelector('.comment__replies').insertBefore(replyContainer, replyingTo.querySelector('.comment__replies').firstChild);
|
|
} else {
|
|
replyingTo.querySelector('.comment__replies').appendChild(replyContainer);
|
|
}
|
|
}
|
|
|
|
function commentDelete(id) {
|
|
var url = "{{ route('comments.comment.delete', 1) }}".replace(1, id);
|
|
|
|
commentClient.SetUrl(url);
|
|
commentClient.AddCallback(200, function () {
|
|
var resp = JSON.parse(commentClient.Response());
|
|
|
|
if (resp.error) {
|
|
commentError(resp.error);
|
|
} else {
|
|
Sakura.DOM.Remove(Sakura.DOM.ID('comment-' + id));
|
|
}
|
|
});
|
|
|
|
commentClient.Start(Sakura.HTTPMethod.POST);
|
|
}
|
|
|
|
function commentVote(id, vote) {
|
|
var url = "{{ route('comments.comment.vote', 1) }}".replace(1, id),
|
|
upvotes = document.getElementById("comment-" + id + "-likes"),
|
|
downvotes = document.getElementById("comment-" + id + "-dislikes");
|
|
|
|
commentClient.SetSend({"vote":vote});
|
|
commentClient.SetUrl(url);
|
|
commentClient.AddCallback(200, function () {
|
|
var resp = JSON.parse(commentClient.Response());
|
|
|
|
if (resp.error) {
|
|
commentError(resp.error);
|
|
} else {
|
|
upvotes.innerText = resp.upvotes;
|
|
downvotes.innerText = resp.downvotes;
|
|
}
|
|
|
|
commentClient.SetRawSend("");
|
|
});
|
|
|
|
commentClient.Start(Sakura.HTTPMethod.POST);
|
|
}
|
|
</script>
|
|
{% endblock %}
|