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

302 lines
12 KiB
Twig
Raw Normal View History

<div id="comments">
<div class="comment-input-section">
{% if user.isActive %}
<div class="comment">
<div class="comment-avatar" style="background-image: url('{{ route('file.avatar', user.id) }}');"></div>
<div class="comment-pointer"></div>
<textarea class="comment-content" name="text" placeholder="Join the conversation..."></textarea>
<button class="comment-submit new" name="session" value="{{ session_id() }}" onclick="commentPost(this.parentNode, '{{ route('comments.category.post', commentsCategory) }}');">&#xf1d8;</button>
</div>
{% else %}
<h1 class="stylised" style="text-align: center; padding: 10px 0">Log in to comment!</h1>
{% endif %}
</div>
<div class="comments-discussion">
<ul class="comments-list">
{% if comments %}
{% for comment in comments %}
{% include 'elements/comment.twig' %}
{% endfor %}
{% else %}
<h1 class="stylised" style="text-align: center; padding: 10px 0">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");
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);
2016-07-31 19:36:13 +00:00
commentClient.AddCallback(200, function () {
var resp = JSON.parse(commentClient.Response());
if (resp.error) {
ajaxBusyView(true, resp.error, 'fail');
setTimeout(function () {
ajaxBusyView(false);
}, 1500);
} 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;
var inner = document.createElement('div');
inner.className = 'comment';
var avatar = document.createElement('a');
avatar.className = 'comment-avatar clean';
avatar.href = "{{ route('user.profile', 1) }}".replace(1, obj.user);
avatar.style.backgroundImage = "url('{{ route('file.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');
2016-07-31 19:36:13 +00:00
if (Sakura.Cookies.Get(sakuraVars.cookie.prefix + 'id') == obj.user) {
var controlsTrashContainer = document.createElement('li');
var controlsTrash = document.createElement('a');
controlsTrash.href = 'javascript:void(0);';
controlsTrash.title = 'Delete';
controlsTrash.className = 'clean fa fa-trash-o';
controlsTrash.setAttribute('onclick', 'commentDelete(' + obj.id + ');');
controlsTrashContainer.appendChild(controlsTrash);
controlsInner.appendChild(controlsTrashContainer);
} else {
var controlsReportContainer = document.createElement('li');
var controlsReport = document.createElement('a');
controlsReport.href = '#';
controlsReport.title = 'Report';
controlsReport.className = 'clean fa fa-trash-o';
controlsReportContainer.appendChild(controlsReport);
controlsInner.appendChild(controlsReportContainer);
}
var controlsReplyContainer = document.createElement('li');
var controlsReply = document.createElement('a');
controlsReply.href = 'javascript:void(0);';
controlsReply.title = 'Reply';
controlsReply.className = 'clean fa fa-reply';
controlsReply.setAttribute('onclick', 'commentReply(' + obj.id + ', "{{ session_id() }}", "{{ route("file.avatar", user.id) }}");');
controlsReplyContainer.appendChild(controlsReply);
controlsInner.appendChild(controlsReplyContainer);
var controlsLikeContainer = document.createElement('li');
controlsLikeContainer.className = 'shown voting like';
var controlsLike = document.createElement('a');
controlsLike.href = 'javascript:void(0);';
controlsLike.setAttribute('onclick', 'commentVote(' + obj.id + ', 1);');
controlsLike.className = 'clean';
var controlsLikeIcon = document.createElement('span');
controlsLikeIcon.className = 'fa fa-thumbs-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);
controlsLikeContainer.appendChild(controlsLike);
controlsInner.appendChild(controlsLikeContainer);
var controlsDislikeContainer = document.createElement('li');
controlsDislikeContainer.className = 'shown voting dislike';
var controlsDislike = document.createElement('a');
controlsDislike.href = 'javascript:void(0);';
controlsDislike.setAttribute('onclick', 'commentVote(' + obj.id + ', 0);');
controlsDislike.className = 'clean';
var controlsDislikeIcon = document.createElement('span');
controlsDislikeIcon.className = 'fa fa-thumbs-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);
controlsDislikeContainer.appendChild(controlsDislike);
controlsInner.appendChild(controlsDislikeContainer);
controls.appendChild(controlsInner);
var clear = document.createElement('div');
clear.className = 'clear';
controls.appendChild(clear);
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) {
2016-07-31 19:36:13 +00:00
(new Sakura.DOM('comment-reply-container-' + id, Sakura.DOMSelector.ID)).Remove();
return;
}
// Container
var replyContainer = document.createElement('li');
replyContainer.id = 'comment-reply-container-' + id;
// Comment container
var replyDiv = document.createElement('div');
replyDiv.className = 'comment';
replyDiv.id = 'comment-reply-' + id;
// Avatar
var replyAvatar = document.createElement('div');
replyAvatar.className = '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';
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);
2016-07-31 19:36:13 +00:00
commentClient.SetUrl(url);
2016-07-31 19:36:13 +00:00
commentClient.AddCallback(200, function () {
var resp = JSON.parse(commentClient.Response());
if (resp.error) {
ajaxBusyView(true, resp.error, 'fail');
setTimeout(function () {
ajaxBusyView(false);
}, 1500);
} else {
2016-07-31 19:36:13 +00:00
(new Sakura.DOM("comment-" + id, Sakura.DOMSelector.ID)).Remove();
}
});
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});
2016-07-31 19:36:13 +00:00
commentClient.SetUrl(url);
2016-07-31 19:36:13 +00:00
commentClient.AddCallback(200, function () {
var resp = JSON.parse(commentClient.Response());
if (resp.error) {
ajaxBusyView(true, resp.error, 'fail');
setTimeout(function () {
ajaxBusyView(false);
}, 1500);
} 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 %}