aurweb/templates/partials/packages/comments.html

<!--
    This partial requires the following  to render properly
    - pkgname
    - pkgbase-id
    - comments (list)
-->

{% if request.user.is_authenticated() %}
<div id="generic-form" class="box">
    <h2>Add Comment</h2>
    {% include "partials/packages/comment_form.html" %}
</div>
{% endif %}

{% if pinned_comments.count() %}
    <div class="comments package-comments">
        <div class="comments-header">
            <h3>
                <span class="text">{{ "Pinned Comments" | tr }}</span>
                <span class="arrow"></span>
            </h3>
        </div>
        {% for comment in pinned_comments.all() %}
            {% include "partials/packages/comment.html" %}
        {% endfor %}
    </div>
{% endif %}

{% if comments.count() %}
    <div class="comments package-comments">
        <div class="comments-header">
            <h3>
                <span class="text">{{ "Latest Comments" | tr }}</span>
                <span class="arrow"></span>
            </h3>
        </div>
        {% for comment in comments.all() %}
            {% include "partials/packages/comment.html" %}
        {% endfor %}
    </div>
{% endif %}

<script type="text/javascript" nonce="{{ request.user.nonce }}">
function add_busy_indicator(sibling) {
    const img = document.createElement('img');
    img.src = "/images/ajax-loader.gif";
    img.classList.add('ajax-loader');
    img.style.height = 11;
    img.style.width = 16;
    img.alt = "Busy…";

    sibling.insertAdjacentElement('afterend', img);
}

function remove_busy_indicator(sibling) {
    const elem = sibling.nextElementSibling;
    elem.parentNode.removeChild(elem);
}

function getParentsUntil(elem, className) {
    // Limit to 10 depth
    for ( ; elem && elem !== document; elem = elem.parentNode) {
        if (elem.matches(className)) {
            break;
        }
    }

    return elem;
}

function handleEditCommentClick(event) {
    event.preventDefault();
    const parent_element = getParentsUntil(event.target, '.comment-header');
    const parent_id = parent_element.id;
    const comment_id = parent_id.substr(parent_id.indexOf('-') + 1);
    // The div class="article-content" which contains the comment
    const edit_form = parent_element.nextElementSibling;

    const url = "/pkgbase/{{ pkgbase.Name }}/comments/" + comment_id + "/form";

    add_busy_indicator(event.target);

    fetch(url, {
        method: 'GET',
        credentials: 'same-origin'
    })
    .then(function(response) {
        if (!response.ok) {
            throw Error(response.statusText);
        }
        return response.json();
    })
    .then(function(data) {
        remove_busy_indicator(event.target);
        edit_form.innerHTML = data.form;
        edit_form.querySelector('textarea').focus();
    })
    .catch(function(error) {
        remove_busy_indicator(event.target);
        console.error(error);
    });
}

document.addEventListener('DOMContentLoaded', function() {
    const divs = document.querySelectorAll('.edit-comment');;
    for (let div of divs) {
        div.addEventListener('click', handleEditCommentClick);
    }
});
</script>