Hydro/packages/ui-default/templates/components/comments_discussion.html

{% import "components/user.html" as user with context %}

{% macro action(tooltip, operation, type, data, icon) %}
<a href="javascript:;"
{% if tooltip %} data-tooltip="{{ tooltip }}"{% endif %}
 data-op="{{ operation }}" data-type="{{ type }}"
{% if data %} data-form="{{ data|json }}"{% endif %}>
  <span class="icon icon-{{ icon }}"></span>
</a>
{% endmacro %}

{% macro render(
  view, docs, udict,
  comment_ref,
  reply_ref,
  comment_post_perm,
  comment_edit_perm,
  comment_edit_self_perm,
  comment_delete_perm,
  comment_delete_self_perm,
  reply_post_perm,
  reply_edit_perm,
  reply_edit_self_perm,
  reply_delete_perm,
  reply_delete_self_perm,
  comment_placeholder = 'Write Your Comment',
  comment_post_op = 'reply',
  comment_edit_op = 'edit_reply',
  comment_post_text = 'Comment',
  comment_edit_text = 'Update',
  reply_post_op = 'tail_reply',
  reply_post_text = 'Reply',
  reply_edit_op = 'edit_tail_reply',
  reply_edit_text = 'Update',
  comment_delete_op = 'delete_reply',
  reply_delete_op = 'delete_tail_reply',
  reactions = {},
  ddoc = {}
) %}
<ul class="dczcomments__list view--discussion">
{% if handler.user.hasPerm(comment_post_perm) %}
<li class="dczcomments__item">
  <div class="media">
    <div class="media__left top">
      <img src="{{ avatarUrl(handler.user.avatar, 60) }}" width="60" height="60" class="medium user-profile-avatar">
    </div>
    <div class="media__body top">
      {% if ddoc.lock %}
        <textarea class="textbox" name="dczcomments__dummy-box" readonly placeholder="{{ _('The discussion is locked, you can not reply anymore.') }}"></textarea>
      {% else %}
      <div class="hasjs--hide">
        <form method="post" class="dczcomments__box" name="dczcomments__box__form" data-hotkey="ctrl+enter:submit,esc:vjCommentBoxCancel">
          <div>
            <textarea name="content" class="textbox" data-markdown required></textarea>
          </div>
          <div>
            <input type="submit" class="rounded primary button dczcomments__box__submit" value="{{ _(comment_post_text) }} (Ctrl+Enter)" data-value-reply="{{ _(reply_post_text) }} (Ctrl+Enter)" data-value-comment="{{ _(comment_post_text) }} (Ctrl+Enter)" data-value-comment-update="{{ _(comment_edit_text) }} (Ctrl+Enter)" data-value-reply-update="{{ _(reply_edit_text) }} (Ctrl+Enter)">
            <input type="button" class="rounded button nojs--hide" name="dczcomments__box__cancel" value="{{ _('Cancel') }} (Esc)">
          </div>
          <input type="hidden" name="operation" value="{{ comment_post_op }}">
          <input type="hidden" name="csrfToken" value="{{ handler.csrfToken }}">
        </form>
      </div>
      <div class="nojs--hide">
        <textarea class="textbox" name="dczcomments__dummy-box" readonly data-form="{{ {operation: comment_post_op}|json }}" placeholder="{{ _(comment_placeholder) }}"></textarea>
      </div>
      <div class="commentbox-placeholder"></div>
      <ul style="display:none">
        <li class="dczcomments__reply commentbox-container">
          <div class="media">
            <div class="media__left top">
              <img src="{{ avatarUrl(handler.user.avatar, 50) }}" width="50" height="50" class="medium user-profile-avatar">
            </div>
            <div class="media__body top">
              <div class="commentbox-placeholder"></div>
            </div>
          </div>
        </li>
      </ul>
      {% endif %}
    </div>
  </div>
</li>
{% endif %}
{%- for doc in docs -%}
  {% set udoc = udict[doc.owner] %}
  <li class="dczcomments__item">
  <div class="media">
    <div class="media__left top">
      <img src="{{ avatarUrl(udoc.avatar, 60) }}" width="60" height="60" class="medium user-profile-avatar">
    </div>
    <div class="media__body top" id="comment-{{ doc.docId }}">
      <div class="clearfix">
        <div class="supplementary dczcomments__supplementary">
          {{ user.render_inline(udoc, avatar=false) }}
          @ {{ datetimeSpan(doc['_id'])|safe }}
        </div>
        <div class="dczcomments__operations nojs--hide">
        {% if handler.user.hasPerm(reply_post_perm) %}
          {{ action(_('Reply'), 'reply', 'comment', {operation: reply_post_op, drid: doc._id}, 'reply') }}
        {% endif %}
        {% if (handler.user.hasPerm(comment_edit_self_perm) and handler.user.own(doc)) or handler.user.hasPerm(comment_edit_perm) %}
          {{ action(_('Edit'), 'edit', 'comment', {operation: comment_edit_op, drid: doc._id}, 'edit') }}
        {% endif %}
        {% if (handler.user.hasPerm(comment_delete_self_perm) and handler.user.own(doc)) or handler.user.hasPerm(comment_delete_perm) %}
          {{ action(_('Delete'), 'delete', 'comment', {operation: comment_delete_op, drid: doc._id}, 'delete') }}
        {% endif %}
        {% if (handler.user.hasPerm(perm.PERM_ADD_REACTION)) %}
          {{ action('', 'react', 'comment', {operation: 'reaction', type:'drid', id: doc._id}, 'emoji') }}
        {% endif %}
        </div>
      </div>
      <div class="typo" data-emoji-enabled data-drid="{{ doc.docId }}" data-raw-url="{{ url('discussion_reply_raw', did=doc.parentId, drid=doc._id) }}">
        {{ doc['content']|markdown|safe }}
        <div class="reactions list" data-type="drid" data-drid="{{ doc._id }}">
          {% for e in Object.entries(doc.react or {})|sort(true, false, 1)|selectattr(1) %}
            <div class="reaction{% if reactions[doc.docId][e[0]] %} active{% endif %}"><span class="emoji">{{ e[0] }}</span> {{ e[1] }}</div>
          {% endfor %}
        </div>
      </div>
      <div class="commentbox-edit-target"></div>
      <ul class="dczcomments__replies commentbox-reply-target">
      {%- for rdoc in doc['reply'] -%}
        {% set udoc = udict[rdoc.owner] %}
        <li class="dczcomments__reply">
          <div class="media">
            <div class="media__left top">
              <img src="{{ avatarUrl(udoc.avatar, 50) }}" width="50" height="50" class="medium user-profile-avatar">
            </div>
            <div class="media__body top">
              <div class="clearfix">
                <div class="supplementary dczcomments__supplementary">
                  {{ user.render_inline(udoc, avatar=false) }}
                  @ {{ datetimeSpan(rdoc._id)|safe }}
                </div>
                <div class="dczcomments__operations nojs--hide">
                {% if handler.user.hasPerm(reply_post_perm) %}
                  {{ action(_('Reply'), 'reply', 'reply', {}, 'reply') }}
                {% endif %}
                {% if handler.user.own(doc) or handler.user.hasPerm(reply_edit_perm) %}
                  {{ action(_('Edit'), 'edit', 'reply', {operation: reply_edit_op, drid: doc._id, drrid: rdoc._id}, 'edit') }}
                {% endif %}
                {% if handler.user.own(doc) or handler.user.hasPerm(reply_delete_perm) %}
                  {{ action(_('Delete'), 'delete', 'reply', {operation: reply_delete_op, drid: doc._id, drrid: rdoc._id}, 'delete') }}
                {% endif %}
                </div>
              </div>
              <div class="typo" data-emoji-enabled data-raw-url="{{ url('discussion_tail_reply_raw', did=doc.parentId, drid=doc._id, drrid=rdoc._id) }}">
                {{ rdoc.content|markdown|safe }}
              </div>
              <div class="commentbox-edit-target"></div>
            </div>
          </div>
        </li>
      {%- endfor -%}
      </ul>
    </div>
  </div>
</li>
{%- endfor -%}
</ul>
{% endmacro %}