This repository has been archived on 2024-06-26. You can view files and clone it, but cannot push or open issues or pull requests.
sakura/resources/views/yuuno/elements/comments.twig

286 lines
11 KiB
Twig
Raw Normal View History

<div id="comments">
<div class="comment-input-section">
{% if user.isActive %}
<div class="comment">
2016-11-12 18:49:38 +00:00
<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>
2016-12-06 19:27:58 +00:00
<textarea class="comment__content comment__content--create comment__content--parent" name="text" placeholder="Join the conversation..."></textarea>
2016-11-12 18:49:38 +00:00
<button
class="comment__submit comment__submit--new"
name="session"
value="{{ session_id() }}"
onclick="commentPost(this.parentNode, '{{ route('comments.category.post', commentsCategory) }}');"
>
&#xf1d8;
</button>
</div>
{% else %}
2016-12-04 14:55:53 +00:00
<h1 class="comments__placeholder">Log in to comment!</h1>
{% endif %}
</div>
2016-11-12 18:49:38 +00:00
<div class="comments">
<ul class="comments__list">
{% if comments %}
{% for comment in comments %}
2016-11-12 18:49:38 +00:00
{% set comment_depth = 0 %}
{% include 'elements/comment.twig' %}
{% endfor %}
{% else %}
2016-12-04 14:55:53 +00:00
<h1 class="comments__placeholder">There are no comments yet!</h1>
{% endif %}
</ul>
</div>
</div>
{% block js %}
<script type="text/javascript">
2016-07-31 19:36:13 +00:00
var commentClient = new Sakura.AJAX();
2016-07-31 19:36:13 +00:00
commentClient.ContentType("application/x-www-form-urlencoded");
2016-12-09 15:48:35 +00:00
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"]');
2016-07-31 19:36:13 +00:00
commentClient.SetSend({"text":text.value,"session":session.value});
text.value = '';
2016-07-31 19:36:13 +00:00
commentClient.SetUrl(url);
commentClient.AddCallback(200, function () {
2016-12-09 15:48:35 +00:00
var resp = commentClient.JSON();
if (resp.error) {
2016-12-09 15:48:35 +00:00
commentError(resp.error);
} else {
commentAdd(resp);
}
2016-07-31 19:36:13 +00:00
commentClient.SetRawSend("");
});
2016-07-31 19:36:13 +00:00
commentClient.Start(Sakura.HTTPMethod.POST);
}
function commentAdd(obj) {
var container = document.createElement('li');
container.id = "comment-" + obj.id;
2016-12-07 13:51:25 +00:00
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);
2016-09-13 22:05:03 +00:00
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';
2016-09-13 22:05:03 +00:00
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);
2016-11-12 18:49:38 +00:00
var discussion = document.getElementById('comments').querySelector('.comments__list');
if (obj.reply) {
2016-12-06 19:27:58 +00:00
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) {
2016-12-06 19:27:58 +00:00
Sakura.DOM.Remove(replyBox);
return;
}
// Container
var replyContainer = document.createElement('li');
replyContainer.id = 'comment-reply-container-' + id;
2016-12-07 13:51:25 +00:00
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');
2016-12-06 19:27:58 +00:00
replyAvatar.className = 'avatar avatar--border comment__avatar';
replyAvatar.style.backgroundImage = 'url(' + avatar + ')';
replyDiv.appendChild(replyAvatar);
// Pointer
var replyPoint = document.createElement('div');
2016-12-06 19:27:58 +00:00
replyPoint.className = 'comment__pointer';
replyDiv.appendChild(replyPoint);
// Textarea
var replyText = document.createElement('textarea');
2016-12-06 19:27:58 +00:00
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');
2016-12-06 19:27:58 +00:00
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);
2016-07-31 19:36:13 +00:00
commentClient.SetUrl(url);
commentClient.AddCallback(200, function () {
var resp = JSON.parse(commentClient.Response());
if (resp.error) {
2016-12-09 15:48:35 +00:00
commentError(resp.error);
} else {
2016-12-06 19:27:58 +00:00
Sakura.DOM.Remove(Sakura.DOM.ID('comment-' + id));
}
});
2016-07-31 19:36:13 +00:00
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");
2016-07-31 19:36:13 +00:00
commentClient.SetSend({"vote":vote});
commentClient.SetUrl(url);
commentClient.AddCallback(200, function () {
var resp = JSON.parse(commentClient.Response());
if (resp.error) {
2016-12-09 15:48:35 +00:00
commentError(resp.error);
} else {
upvotes.innerText = resp.upvotes;
downvotes.innerText = resp.downvotes;
}
2016-07-31 19:36:13 +00:00
commentClient.SetRawSend("");
});
2016-07-31 19:36:13 +00:00
commentClient.Start(Sakura.HTTPMethod.POST);
}
</script>
{% endblock %}