misuzu/templates/_layout/comments.twig

{% macro comments_input(category, user, perms, reply_to) %}
    {% set reply_mode = reply_to is not null %}

    {% from '_layout/input.twig' import input_hidden, input_csrf, input_checkbox %}

    <form class="comment comment--input{% if reply_mode %} comment--reply{% endif %}"
        method="post" action="/comments.php?m=create"
        id="comment-{{ reply_mode ? 'reply-' ~ reply_to.comment_id : 'create-' ~ category.category_id }}">
        {{ input_hidden('comment[category]', category.category_id) }}
        {{ input_csrf('comments') }}

        {% if reply_mode %}
            {{ input_hidden('comment[reply]', reply_to.comment_id) }}
        {% endif %}

        <div class="comment__container">
            <div class="avatar comment__avatar"
                style="background-image:url('/profile.php?m=avatar&amp;u={{ user.user_id }}')">
            </div>
            <div class="comment__content">
                <div class="comment__info">
                    <div class="comment__user"
                        style="{{ user.user_colour|html_colour }}">{{ user.username }}</div>
                </div>
                <textarea
                    class="comment__text input__textarea comment__text--input"
                    name="comment[text]" placeholder="Share your extensive insights..."></textarea>
                <div class="comment__actions">
                    {% if not reply_mode %}
                        {% if perms.can_pin %}
                            {{ input_checkbox('comment[pin]', 'Pin this comment', false, 'comment__action') }}
                        {% endif %}
                        {% if perms.can_lock %}
                            {{ input_checkbox('comment[lock]', 'Toggle locked status', false, 'comment__action') }}
                        {% endif %}
                    {% endif %}
                    <button class="input__button comment__action comment__action--button comment__action--post">
                        {{ reply_mode ? 'Reply' : 'Post' }}
                    </button>
                </div>
            </div>
        </div>
    </form>
{% endmacro %}

{% macro comments_entry(comment, indent, category, user, perms) %}
    {% if comment.comment_deleted is null or comment.comment_replies|length > 0 %}
        <div class="comment" id="comment-{{ comment.comment_id }}">
            <div class="comment__container">
                <a class="avatar comment__avatar"
                    href="/profile.php?u={{ comment.user_id }}"
                    style="background-image:url('/profile.php?m=avatar&amp;u={{ comment.user_id }}')">
                </a>
                <div class="comment__content">
                    <div class="comment__info">
                        <a class="comment__user comment__user--link"
                            href="/profile.php?u={{ comment.user_id }}"
                            style="{{ comment.user_colour|html_colour }}">{{ comment.username }}</a>
                        <a class="comment__link" href="#comment-{{ comment.comment_id }}">
                            <time class="comment__date"
                                title="{{ comment.comment_created|date('r') }}"
                                datetime="{{ comment.comment_created|date('c') }}">
                                {{ comment.comment_created|time_diff }}
                            </time>
                        </a>
                        {% if comment.comment_pinned is not null %}
                            <span class="comment__pin">{% spaceless %}
                                Pinned
                                {% if comment.comment_pinned != comment.comment_created %}
                                    <time title="{{ comment.comment_pinned|date('r') }}"
                                        datetime="{{ comment.comment_pinned|date('c') }}">
                                        {{ comment.comment_pinned|time_diff }}
                                    </time>
                                {% endif %}
                            {% endspaceless %}</span>
                        {% endif %}
                    </div>
                    <div class="comment__text{{ comment.comment_deleted is null ? '' : ' comment__text--deleted' }}">
                        {{ comment.comment_deleted is null ? (comment.comment_html is defined ? comment.comment_html|raw : comment.comment_text|nl2br) : 'deleted' }}
                    </div>
                    {% if comment.comment_deleted is null and user is not null %}
                        <div class="comment__actions">
                            {% if perms.can_vote %}
                                <a class="comment__action comment__action--link comment__action--like{% if comment.comment_user_vote == 'Like' %} comment__action--voted{% endif %}"
                                    href="/comments.php?m=vote&amp;c={{ comment.comment_id }}&amp;v={{ comment.comment_user_vote == 'Like' ? '0' : '1' }}&amp;csrf={{ csrf_token('comments') }}">
                                    Like
                                    {% if comment.comment_likes > 0 %}
                                        ({{ comment.comment_likes|number_format }})
                                    {% endif %}
                                </a>
                                <a class="comment__action comment__action--link comment__action--dislike{% if comment.comment_user_vote == 'Dislike' %} comment__action--voted{% endif %}"
                                    href="/comments.php?m=vote&amp;c={{ comment.comment_id }}&amp;v={{ comment.comment_user_vote == 'Dislike' ? '0' : '-1' }}&amp;csrf={{ csrf_token('comments') }}">
                                    Dislike
                                    {% if comment.comment_dislikes > 0 %}
                                        ({{ comment.comment_dislikes|number_format }})
                                    {% endif %}
                                </a>
                            {% endif %}
                            {% if perms.can_comment %}
                                <label class="comment__action comment__action--link" for="comment-reply-toggle-{{ comment.comment_id }}">Reply</label>
                            {% endif %}
                            {% if perms.can_delete_any or (comment.user_id == user.user_id and perms.can_delete) %}
                                <a class="comment__action comment__action--link comment__action--hide comment__action--delete"
                                    href="/comments.php?m=delete&amp;c={{ comment.comment_id }}&amp;csrf={{ csrf_token('comments') }}">Delete</a>
                            {% endif %}
                            {# if user is not null %}
                                <a class="comment__action comment__action--link comment__action--hide" href="#">Report</a>
                            {% endif #}
                        </div>
                    {% endif %}
                </div>
            </div>

            <div class="comment__replies comment__replies--indent-{{ indent }}" id="comment-{{ comment.comment_id }}-replies">
                {% from _self import comments_entry, comments_input %}
                {% if user|default(null) is not null and category|default(null) is not null and perms|default(null) is not null and perms.can_comment %}
                    <input type="checkbox" class="comment__reply-toggle" id="comment-reply-toggle-{{ comment.comment_id }}">
                    {{ comments_input(category, user, perms, comment) }}
                {% endif %}
                {% if comment.comment_replies is defined and comment.comment_replies|length > 0 %}
                    {% for reply in comment.comment_replies %}
                        {{ comments_entry(reply, indent + 1, category, user, perms) }}
                    {% endfor %}
                {% endif %}
            </div>
        </div>
    {% endif %}
{% endmacro %}

{% macro comments_section(comments, category, user, perms) %}
    <div class="comments">
        <div class="comments__input">
            {% if user|default(null) is null %}
                <div class="comments__notice">
                    Please <a href="/auth.php?m=login" class="comments__notice__link">login</a> to comment.
                </div>
            {% elseif category|default(null) is null or perms|default(null) is null %}
                <div class="comments__notice">
                    Posting new comments here is disabled.
                </div>
            {% elseif not perms.can_lock and category.category_locked is not null %}
                <div class="comments__notice">
                    This comment section was locked, <time datetime="{{ category.category_locked|date('c') }}" title="{{ category.category_locked|date('r') }}">{{ category.category_locked|time_diff }}</time>.
                </div>
            {% elseif not perms.can_comment %}
                <div class="comments__notice">
                    You are not allowed to post comments.
                </div>
            {% else %}
                {% from _self import comments_input %}
                {{ comments_input(category, user, perms) }}
            {% endif %}
        </div>

        {% if perms.can_lock and category.category_locked is not null %}
            <div class="comments__notice comments__notice--staff">
                This comment section was locked, <time datetime="{{ category.category_locked|date('c') }}" title="{{ category.category_locked|date('r') }}">{{ category.category_locked|time_diff }}</time>.
            </div>
        {% endif %}

        <noscript>
            <div class="comments__javascript">
                While the comments work fine without Javascript, it is recommended you enable it as it has a lower bandwidth overhead.
            </div>
        </noscript>

        <div class="comments__listing">
            {% if comments|length > 0 %}
                {% from _self import comments_entry %}
                {% for comment in comments %}
                    {{ comments_entry(comment, 1, category, user, perms) }}
                {% endfor %}
            {% else %}
                <div class="comments__none" id="_no_comments_notice_{{ category.category_id }}">
                    There are no comments yet.
                </div>
            {% endif %}
        </div>
    </div>

    <script>
        window.addEventListener('load', function () {
            if (typeof commentVote === 'function') { // if this exists, the user is allowed to vote
                var likeButtons = document.getElementsByClassName('comment__action--like'),
                    dislikeButtons = document.getElementsByClassName('comment__action--dislike');

                for (var i = 0; i < likeButtons.length; i++) // there's gonna be an equal amount of like and dislike buttons
                {
                    likeButtons[i].href = 'javascript:void(0);';
                    likeButtons[i].onclick = commentVote;
                    dislikeButtons[i].href = 'javascript:void(0);';
                    dislikeButtons[i].onclick = commentVote;
                }
            }

            if (typeof commentPost === 'function') { // can comment
                var commentForms = document.getElementsByClassName('comment--input');

                for (var i = 0; i < commentForms.length; i++) {
                    commentForms[i].action = 'javascript:void(0);';
                    commentForms[i].onsubmit = commentPost;
                }
            }

            if (typeof commentDelete === 'function') { // can delete
                var commentDeletes = document.getElementsByClassName('comment__action--delete');

                for (var i = 0; i < commentDeletes.length; i++) {
                    commentDeletes[i].onclick = commentDelete;
                    commentDeletes[i].dataset.href = commentDeletes[i].href;
                    commentDeletes[i].href = 'javascript:void(0);';
                }
            }
        });
    </script>

    {% if perms.can_delete %}
        <script>
            var commentDeleteLock = false;

            function commentDelete(ev)
            {
                if (commentDeleteLock)
                    return;
                commentDeleteLock = true;

                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                    if (this.readyState !== 4)
                        return;
                    commentDeleteLock = false;

                    var json = JSON.parse(this.responseText),
                        message = json.error || json.message;

                    if (message)
                        alert(message);
                    else {
                        var elem = document.getElementById('comment-' + json.comment_id);

                        if (elem)
                            elem.parentNode.removeChild(elem);
                    }
                };
                xhr.open('GET', ev.target.dataset.href);
                xhr.setRequestHeader('X-Misuzu-XHR', 'comments');
                xhr.send();
            }
        </script>
    {% endif %}

    {% if perms.can_comment %}
        <script>
            var commentPostLock = false;

            function commentPost(ev)
            {
                // the moment we find the id we engage vote lock
                if (commentPostLock)
                    return;
                commentPostLock = true;

                var form = ev.target,
                    formData = new FormData;

                for (var i = 0; i < form.length; i++) {
                    var isCheckbox = form[i].type === 'checkbox';
                    if (isCheckbox && !form[i].checked)
                        continue;
                    formData.append(form[i].name, form[i].value || '');

                    if (isCheckbox)
                        form[i].checked = false;
                    else if (form[i].type !== 'hidden')
                        form[i].value = '';
                }

                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                    if (this.readyState !== 4)
                        return;

                    var json = JSON.parse(this.responseText),
                        message = json.error || json.message;

                    if (message)
                        alert(message);
                    else {
                        if (form.classList.contains('comment--reply'))
                            form.parentNode.parentNode.querySelector('label.comment__action').click();
                        commentInsert(json, form);
                    }

                    commentPostLock = false;
                };

                xhr.open('POST', '/comments.php?m=create');
                xhr.setRequestHeader('X-Misuzu-XHR', 'comments');
                xhr.send(formData);
            }

            // this is the biggest doozy of them all, this should create an element identical to comments_entry
            function commentInsert(comment, form)
            {
                var isReply = form.classList.contains('comment--reply'),
                    parent = isReply
                        ? form.parentNode
                        : form.parentNode.parentNode.getElementsByClassName('comments__listing')[0],
                    repliesIndent = isReply
                        ? (parseInt(parent.classList[1].substr(25)) + 1)
                        : 1;

                // layer 1
                var commentElement = document.createElement('div');
                commentElement.className = 'comment';
                commentElement.id = 'comment-' + comment.comment_id;

                // layer 2
                var commentContainer = document.createElement('div');
                commentContainer.className = 'comment__container';
                commentElement.appendChild(commentContainer);

                var commentReplies = document.createElement('div');
                commentReplies.className = 'comment__replies comment__replies--indent-' + repliesIndent;
                commentReplies.id = commentElement.id + '-replies';
                commentElement.appendChild(commentReplies);

                // container
                var commentAvatar = document.createElement('a');
                commentAvatar.className = 'avatar comment__avatar';
                commentAvatar.href = '/profile.php?u=' + comment.user_id;
                commentAvatar.style.backgroundImage = 'url(\'/profile.php?m=avatar&u={0}\')'.replace('{0}', comment.user_id);
                commentContainer.appendChild(commentAvatar);

                var commentContent = document.createElement('div');
                commentContent.className = 'comment__content';
                commentContainer.appendChild(commentContent);

                // content
                var commentInfo = document.createElement('div');
                commentInfo.className = 'comment__info';
                commentContent.appendChild(commentInfo);

                var commentText = document.createElement('div');
                commentText.className = 'comment__text';

                if (comment.comment_html)
                    commentText.innerHTML = comment.comment_html;
                else
                    commentText.textContent = comment.comment_text;

                commentContent.appendChild(commentText);

                var commentActions = document.createElement('div');
                commentActions.className = 'comment__actions';
                commentContent.appendChild(commentActions);

                // info
                var commentUser = document.createElement('a');
                commentUser.className = 'comment__user comment__user--link';
                commentUser.textContent = comment.username;
                commentUser.href = '/profile?u=' + comment.user_id;
                commentUser.style.color = comment.user_colour == null || (comment.user_colour & 0x40000000) > 0
                    ? 'inherit'
                    : '#' + (comment.user_colour & 0xFFFFFF).toString(16);
                commentInfo.appendChild(commentUser);

                var commentLink = document.createElement('a');
                commentLink.className = 'comment__link';
                commentLink.href = '#' + commentElement.id;
                commentInfo.appendChild(commentLink);

                var commentTime = document.createElement('time'),
                    commentDate = new Date(comment.comment_created + 'Z');
                commentTime.className = 'comment__date';
                commentTime.title = commentDate.toLocaleString();
                commentTime.dateTime = commentDate.toISOString();
                commentTime.textContent = timeago().format(commentDate);
                commentLink.appendChild(commentTime);

                // actions
                if (typeof commentVote === 'function') {
                    var commentLike = document.createElement('a');
                    commentLike.className = 'comment__action comment__action--link comment__action--like';
                    commentLike.href = 'javascript:void(0);';
                    commentLike.textContent = 'Like';
                    commentLike.onclick = commentVote;
                    commentActions.appendChild(commentLike);

                    var commentDislike = document.createElement('a');
                    commentDislike.className = 'comment__action comment__action--link comment__action--dislike';
                    commentDislike.href = 'javascript:void(0);';
                    commentDislike.textContent = 'Dislike';
                    commentDislike.onclick = commentVote;
                    commentActions.appendChild(commentDislike);
                }

                // if we're executing this it's fairly obvious that we can reply,
                // so no need to have a permission check on it here
                var commentReply = document.createElement('label');
                commentReply.className = 'comment__action comment__action--link';
                commentReply.htmlFor = 'comment-reply-toggle-' + comment.comment_id;
                commentReply.textContent = 'Reply';
                commentActions.appendChild(commentReply);

                // reply section
                var commentReplyState = document.createElement('input');
                commentReplyState.id = commentReply.htmlFor;
                commentReplyState.type = 'checkbox';
                commentReplyState.className = 'comment__reply-toggle';
                commentReplies.appendChild(commentReplyState);

                var commentReplyInput = document.createElement('form');
                commentReplyInput.id = 'comment-reply-' + comment.comment_id;
                commentReplyInput.className = 'comment comment--input comment--reply';
                commentReplyInput.method = 'post';
                commentReplyInput.action = 'javascript:void(0);';
                commentReplyInput.onsubmit = commentPost;
                commentReplies.appendChild(commentReplyInput);

                // reply attributes
                var replyCategory = document.createElement('input');
                replyCategory.name = 'comment[category]';
                replyCategory.value = comment.category_id;
                replyCategory.type = 'hidden';
                commentReplyInput.appendChild(replyCategory);

                var replyCsrf = document.createElement('input');
                replyCsrf.name = 'csrf';
                replyCsrf.value = '{{ csrf_token("comments") }}';
                replyCsrf.type = 'hidden';
                commentReplyInput.appendChild(replyCsrf);

                var replyId = document.createElement('input');
                replyId.name = 'comment[reply]';
                replyId.value = comment.comment_id;
                replyId.type = 'hidden';
                commentReplyInput.appendChild(replyId);

                var replyContainer = document.createElement('div');
                replyContainer.className = 'comment__container';
                commentReplyInput.appendChild(replyContainer);

                // reply container
                var replyAvatar = document.createElement('div');
                replyAvatar.className = 'avatar comment__avatar';
                replyAvatar.style.backgroundImage = 'url(\'/profile.php?m=avatar&u={0}\')'.replace('{0}', comment.user_id);
                replyContainer.appendChild(replyAvatar);

                var replyContent = document.createElement('div');
                replyContent.className = 'comment__content';
                replyContainer.appendChild(replyContent);

                // reply content
                var replyInfo = document.createElement('div');
                replyInfo.className = 'comment__info';
                replyContent.appendChild(replyInfo);

                var replyUser = document.createElement('div');
                replyUser.className = 'comment__user';
                replyUser.textContent = comment.username;
                replyUser.style.color = comment.user_colour == null || (comment.user_colour & 0x40000000) > 0
                    ? 'inherit'
                    : '#' + (comment.user_colour & 0xFFFFFF).toString(16);
                replyInfo.appendChild(replyUser);

                var replyText = document.createElement('textarea');
                replyText.className = 'comment__text input__textarea comment__text--input';
                replyText.name = 'comment[text]';
                replyText.placeholder = 'Share your extensive insights...';
                replyContent.appendChild(replyText);

                var replyActions = document.createElement('div');
                replyActions.className = 'comment__actions';
                replyContent.appendChild(replyActions);

                var replyButton = document.createElement('button');
                replyButton.className = 'input__button comment__action comment__action--button comment__action--post';
                replyButton.textContent = 'Reply';
                replyActions.appendChild(replyButton);

                if (isReply)
                    parent.appendChild(commentElement);
                else
                    parent.insertBefore(commentElement, parent.firstElementChild);

                timeago().render(commentTime);

                var placeholder = document.getElementById('_no_comments_notice_' + comment.category_id);
                placeholder.parentNode.removeChild(placeholder);
            }
        </script>
    {% endif %}

    {% if perms.can_vote %}
        <script>
            var commentVoteLock = false,
                commentLikeClass = 'comment__action--like',
                commentDislikeClass = 'comment__action--dislike',
                commentVotedClass = 'comment__action--voted',
                commentLikeText = 'Like',
                commentDislikeText = 'Dislike',
                commentVoteCountSuffix = ' ({0})';

            // DEBUG THIS IF YOU MAKE MAJOR DOM CHANGES TO COMMENTS
            function commentVote(ev)
            {
                var elem = ev.target,
                    id = elem.parentNode.parentNode.parentNode.parentNode.id.substr(8); // STACK UP

                // the moment we find the id we engage vote lock
                if (id < 1 || commentVoteLock)
                    return;
                commentVoteLock = true;
                elem.textContent = '.';

                var isLike = elem.classList.contains(commentLikeClass),
                    isDislike = elem.classList.contains(commentDislikeClass),
                    isIndifferent = elem.classList.contains(commentVotedClass),
                    vote = isIndifferent ? 0 : (isLike ? 1 : -1);

                elem.textContent += '.';

                // find friendo (the other vote button), this'll fuck up if the parent element is fucked with
                for (var i = 0; i < elem.parentNode.childNodes.length; i++) {
                    var current = elem.parentNode.childNodes[i];
                    if (current.nodeName.toLowerCase() === 'a' && current !== elem) {
                        var friend = current;
                        break;
                    }
                }

                if (typeof friend !== 'object') {
                    console.error('something happened');
                    return;
                }

                friend.classList.remove(commentVotedClass);

                friend.textContent = '';

                elem.textContent += '.';

                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                    if (this.readyState !== 4)
                        return;

                    if (vote)
                        elem.classList.add(commentVotedClass);
                    else
                        elem.classList.remove(commentVotedClass);

                    var json = JSON.parse(this.responseText),
                        message = json.error || json.message;

                    if (message)
                        alert(message);

                    var likes = json.likes || 0,
                        dislikes = json.dislikes || 0;

                    if (isLike) { // somewhat implicitly defined, like will always come before dislike
                        elem.textContent = commentLikeText + (likes > 0 ? commentVoteCountSuffix.replace('{0}', likes.toLocaleString()) : '');
                        friend.textContent = commentDislikeText + (dislikes > 0 ? commentVoteCountSuffix.replace('{0}', dislikes.toLocaleString()) : '');
                    } else {
                        elem.textContent = commentDislikeText + (dislikes > 0 ? commentVoteCountSuffix.replace('{0}', dislikes.toLocaleString()) : '');
                        friend.textContent = commentLikeText + (likes > 0 ? commentVoteCountSuffix.replace('{0}', likes.toLocaleString()) : '');
                    }

                    commentVoteLock = false;
                };
                xhr.open('GET', '/comments.php?m=vote&c={0}&v={1}&csrf={{ csrf_token("comments") }}'.replace('{0}', id).replace('{1}', vote));
                xhr.setRequestHeader('X-Misuzu-XHR', 'comments');
                xhr.send();
            }
        </script>
    {% endif %}
{% endmacro %}