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>
    <form action="/pkgbase/{{ pkgname }}/" method="post">
        <fieldset>
            <div>
                <input type="hidden" name="action" value="do_AddComment"/>
                <input type="hidden" name="ID" value="{{ pkgbase_id }}"/>
            </div>
            <p>
                {{
                "Git commit identifiers referencing commits in the AUR package"
                " repository and URLs are converted to links automatically."
                | tr
                }}
                {{
                "%sMarkdown Syntax%s is partially supported."
                | tr
                | format('<a href="https://daringfireball.net/projects/markdown/syntax">', '</a>')
                | safe
                }}
            </p>
            <p>
                <textarea id="id_comment" name="comment" cols="80" rows="10"></textarea>
            </p>
            <p>
                <input type="submit" value="{{ 'Add Comment' | tr }}"/>
                {% if not notifications_enabled %}
                    <span class="comment-enable-notifications">
                        <input id="id_enable_notifications"
                               type="checkbox"
                               name="enable_notifications"
                        />
                        <label for="id_enable_notifications">
                            {{ "Enable notifications" | tr }}
                        </label>
                    </span>
                {% endif %}
            </p>
        </fieldset>
    </form>
</div>
{% endif %}

{% if comments %}
    <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 params = new URLSearchParams({
        type: "get-comment-form",
        arg: comment_id,
        base_id: {{ pkgbase.ID }},
        pkgbase_name: {{ pkgbase.Name }}
    });

    const url = '/rpc?' + params.toString();

    add_busy_indicator(event.target);

    fetch(url, {
        method: 'GET'
    })
    .then(function(response) { return response.json(); })
    .then(function(data) {
        remove_busy_indicator(event.target);
        if (data.success) {
            edit_form.innerHTML = data.form;
            edit_form.querySelector('textarea').focus();
        } else {
            alert(data.error);
        }
    });
}

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