sakura/resources/views/yuuno/elements/comments.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) }}');"
                >
                    &#xf1d8;
                </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 %}