tildes/tildes/tildes/templates/macros/comments.jinja2

{# Copyright (c) 2018 Tildes contributors <code@tildes.net> #}
{# SPDX-License-Identifier: AGPL-3.0-or-later #}

{% from 'buttons.jinja2' import post_action_toggle_button with context %}
{% from 'datetime.jinja2' import adaptive_date_responsive %}
{% from 'links.jinja2' import link_to_user with context %}
{% from 'utils.jinja2' import pluralize %}

{% macro render_single_comment(comment) %}
  {{ render_comment_tree([comment], is_individual_comment=True) }}
{% endmacro %}

{% macro render_comment_tree(comments, mark_newer_than=None, is_individual_comment=False) %}
  {% for comment in comments recursive %}
    {% if not is_individual_comment %}<li class="comment-tree-item">{% endif %}
    <article id="comment-{{ comment.comment_id36 }}"
      class="{{ comment_classes(comment, mark_newer_than)|trim }}"
      data-comment-id36="{{ comment.comment_id36 }}"
      data-comment-replies="{{ comment.replies|length }}"

      {# only add depth attr if we're rendering multiple comments at once #}
      {% if not is_individual_comment %}
        data-comment-depth="{{ comment.depth }}"
      {% endif %}

      {% if request.has_permission("label", comment) %}
        data-comment-user-labels="{{ comment.labels_by_user(request.user)|join(' ') }}"
      {% endif %}
    >
      {{ render_comment_contents(comment, is_individual_comment) }}

      {% if request.has_permission("view", comment) or not comment.removed_marker %}
      <ol class="comment-tree comment-tree-replies">
        {# Recursively display reply comments, unless we hit a "removed marker" #}
        {% if comment.replies %}
          {{ loop(comment.replies) }}
        {% endif %}
      </ol>
      {% endif %}
    </article>
    {% if not is_individual_comment %}</li>{% endif %}
  {% endfor %}
{% endmacro %}

{% macro render_comment_contents(comment, is_individual_comment=False) %}
  <div class="comment-itself">
    <header class="comment-header">
      <button class="btn btn-light btn-comment-collapse" data-js-comment-collapse-button>
        <span class="btn-comment-collapse-label"></span>
      </button>

      {% if not is_individual_comment and comment.num_children > 0 %}
        <div class="comment-branch-counter">[{{ comment.num_children + 1 }}]</div>
      {% endif %}

      {% if request.has_permission('view', comment) %}
        {{ link_to_user(comment.user) }}

        {% if request.has_permission('view_author', comment.topic) and comment.topic.user == comment.user %}
          <span class="comment-user-info">
            (<abbr title="Original Poster (of the topic)">OP</abbr>)
          </span>
        {% endif %}

        <div class="comment-time-info">
          {{ adaptive_date_responsive(comment.created_time, class_="comment-posted-time") }}

          {% if comment.last_edited_time %}
            <span class="comment-edited-time">
              (edited {{ adaptive_date_responsive(comment.last_edited_time) }})
            </span>
          {% endif %}
        </div>
      {% else %}
        {% if comment.is_removed %}
          {% if comment.removed_marker %}
            <div class="is-comment-removed">{{ comment.removed_marker }}</div>
          {% else %}
            <div class="is-comment-removed">Comment removed by site admin</div>
          {% endif %}
        {% elif comment.is_deleted %}
          <div class="is-comment-deleted">Comment deleted by author</div>
        {% endif %}
      {% endif %}

      <a class="comment-nav-link" href="{{ comment.permalink }}">Link</a>
      {% if comment.parent_comment_id %}
        <a class="comment-nav-link"
          href="{{ comment.parent_comment_permalink }}"
          {# don't add the JS behavior (creating a back button) for individual renders #}
          {% if not is_individual_comment %}data-js-comment-parent-button{% endif %}
        >Parent</a>
      {% endif %}

      {% if request.has_permission("view", comment) %}
        <div class="comment-excerpt">{{ comment.excerpt }}</div>
      {% endif %}
    </header>

    {% if request.has_permission('view', comment) %}
      {# Show votes at the top only if it's your own comment #}
      {% if request.user == comment.user and comment.num_votes > 0 and not comment.is_removed %}
        <div class="comment-votes">{{ pluralize(comment.num_votes, "vote") }}</div>
      {% endif %}

      {% if comment.is_label_active("exemplary") %}
        {% if request.has_permission("view_exemplary_reasons", comment) %}
          <details class="comment-exemplary-reasons">
            <summary><span class="label label-comment label-comment-exemplary">Exemplary</span>
              <span class="comment-label-count">x{{ comment.label_counts["exemplary"] }}</span>
            </summary>
            <ul>
            {% for label in comment.labels if label.name == "exemplary" %}
              <li>"{{ label.reason }}"</li>
            {% endfor %}
            </ul>
          </details>
        {% else %}
          <ul class="comment-labels"><li class="label label-comment label-comment-exemplary">Exemplary</li></ul>
        {% endif %}
      {% endif %}

      {% if comment.label_counts and request.has_permission("view_labels", comment) %}
        <ul class="comment-labels">
          {% for label_name, weight in comment.label_weights.most_common() %}
            <li>
              <span class="label label-comment label-comment-{{ label_name|lower }}">{{ label_name }}</span>
              <span class="comment-label-count">
                {{ weight }}:
                {% for label in comment.labels if label.name == label_name %}
                  {{ link_to_user(label.user) }} ({{ label.weight }}{{ ' "%s"' % label.reason if label.reason else '' }})
                {% endfor %}
              </span>
            </li>
          {% endfor %}
        </ul>
      {% endif %}

      <div class="comment-text"
      {% if request.user %}
        {% if request.user.open_new_tab_text %}
          data-js-external-links-new-tabs
        {% endif %}
        {% if request.user.open_new_tab_group %}
          data-js-group-links-new-tabs
        {% endif %}
        {% if request.user.open_new_tab_user %}
          data-js-user-links-new-tabs
        {% endif %}
      {% endif %}
      >
        {% if comment.is_removed %}
          <p class="comment-removed-warning">This comment has been removed and is not visible to other users</p>
        {% endif %}

        {{ comment.rendered_html|safe }}
      </div>

      <menu class="btn-post">
        {# Show non-button vote count if the viewer can't vote and it's not their comment #}
        {% if not request.has_permission("vote", comment) and comment.num_votes > 0 and comment.user != request.user %}
          <div class="comment-votes">{{ pluralize(comment.num_votes, "vote") }}</div>
        {% endif %}

        {% if request.has_permission('vote', comment) %}
          <li>{{ post_action_toggle_button("vote", comment, is_toggled=comment.user_voted) }}</li>
        {% endif %}

        {% if request.has_permission('label', comment) %}
          <li><button class="btn-post-action" name="label" data-js-comment-label-button>Label</button></li>
        {% endif %}

        {% if request.has_permission('edit', comment) %}
          <li><button class="btn-post-action" name="edit"
            data-ic-get-from="{{ request.route_url(
              'ic_comment',
              comment_id36=comment.comment_id36,
            ) }}"
            data-ic-target="#comment-{{ comment.comment_id36 }} .comment-itself:first .comment-text"
            data-ic-scroll-to-target="true"
          >Edit</button></li>
        {% endif %}

        {% if request.has_permission('delete', comment) %}
          <li><button class="btn-post-action"
            data-ic-delete-from="{{ request.route_url(
              'ic_comment',
              comment_id36=comment.comment_id36,
            ) }}"
            data-ic-target="#comment-{{ comment.comment_id36 }} .comment-itself:first"
            data-ic-replace-target="true"
            data-ic-confirm="Delete this comment? This cannot be undone."
          >Delete</button></li>
        {% endif %}

        {% if request.has_permission('bookmark', comment) %}
          <li>{{ post_action_toggle_button("bookmark", comment, is_toggled=comment.user_bookmarked) }}</li>
        {% endif %}

        {% if request.has_permission("remove", comment) %}
          <li>{{ post_action_toggle_button("remove", comment, comment.is_removed) }}</li>
        {% endif %}

        {# Don't show the "View Markdown" button (or dropdown) if the user can edit #}
        {% if request.user and not request.has_permission("edit", comment) %}
        <li>
          <div class="dropdown dropdown-right">
            <button class="btn-post-action dropdown-toggle">
              More...
              <i class="icon icon-caret"></i>
            </button>
            <menu class="menu">
              <li>
                <button class="btn-post-action" name="markdown-source"
                  data-ic-get-from="{{ request.route_url(
                    'ic_comment',
                    comment_id36=comment.comment_id36,
                  ) }}"
                  data-ic-swap-style="replace"
                  data-ic-target="#comment-{{ comment.comment_id36 }} .btn-post:first + .post-action-settings"
                >View Markdown</button>
              </li>
            </menu>
          </div>
        </li>
        {% endif %}

        {% if request.has_permission('reply', comment) %}
          <li>
            <button
              class="btn-post-action"
              name="reply"
              data-ic-get-from="{{ request.route_url(
                "ic_comment_reply",
                comment_id36=comment.comment_id36,
              ) }}"
              data-ic-target="#comment-{{ comment.comment_id36 }} > .comment-tree-replies:first"
              data-ic-scroll-to-target="true"
              data-ic-swap-style="prepend"
            >Reply</button>
          </li>
        {% endif %}
      </menu>
      <div class="post-action-settings"></div>
    {% endif %}
  </div>
{% endmacro %}

{% macro comment_classes(comment, mark_newer_than=None) %}
  {% set classes = ['comment'] %}

  {% if not comment.is_deleted %}
    {% if request.user == comment.user %}
      {% do classes.append('is-comment-mine') %}
    {# done as an elif so we never mark a user's own comments as "new" #}
    {% elif mark_newer_than and comment.created_time > mark_newer_than %}
      {% do classes.append('is-comment-new') %}
    {% endif %}

    {% if request.has_permission('view_author', comment.topic) and request.has_permission("view", comment) and comment.user == comment.topic.user %}
      {% do classes.append('is-comment-by-op') %}
    {% endif %}

    {% if request.has_permission('view', comment) and comment.is_label_active("exemplary") %}
      {% do classes.append("is-comment-exemplary") %}
    {% endif %}
  {% endif %}

  {% if comment.collapsed_state == "full" %}
    {% do classes.append("is-comment-collapsed") %}
  {% elif comment.collapsed_state == "individual" %}
    {% do classes.append("is-comment-collapsed-individual") %}
  {% endif %}

  {{ classes|join(' ') }}
{% endmacro %}

{% macro comment_label_options_template(options) %}
  <template id="comment-label-options">
    <menu class="comment-label-buttons">
      {% for label in options if request.user.is_label_available(label) %}
        <li>
          <button class="btn-comment-label btn-comment-label-{{ label.name|lower }}"
            data-js-label-name="{{ label.name|lower }}"
            {% if label.reason_prompt %}
              data-js-reason-prompt="{{ label.reason_prompt }}"
            {% endif %}
          >{{ label.name|lower }}{% if label.reason_prompt %}...{% endif %}</button>
        </li>
      {% endfor %}
    </menu>
  </template>
{% endmacro %}