fair-web/views/article.ejs

<% this.title = article.title + ' - 帖子'; %>
<% include header %>
<style type="text/css" xmlns:style="http://www.w3.org/1999/xhtml">
.small{
  font-size: 0.7em;
}
.reply{
    margin-left: 45px !important;
}
.article-comment{
    cursor: pointer;
    display: inline-block;
    margin: 0 .75em 0 0;
    color: rgba(0,0,0,.4);
}
.article-comment:hover{
    color: rgba(0,0,0,.8);
}
</style>
<div class="padding">
  <div class="ui breadcrumb">
    <div class="section">讨论</div>
    <i class="right angle icon divider"></i>
    <% if (problem) { %>
      <div class="section"><a href="<%= syzoj.utils.makeUrl(['discussion', 'problems']) %>">题目</a></div>
      <i class="right angle icon divider"></i>
      <a href="<%= syzoj.utils.makeUrl(['discussion', 'problem', problem.id]) %>" class="active section"><%= problem.title %></a>
    <% } else { %>
      <a href="<%= syzoj.utils.makeUrl(['discussion', 'global']) %>" class="section">全局板块</a>
    <% } %>
  </div>
  <span id="user-info" style="display: none"><%= user %></span>
  <h1><%= article.title %></h1>
 	<p style="margin-bottom: -5px; ">
	<img style="vertical-align: middle; margin-bottom: 2px; margin-right: 2px; " src="<%= syzoj.utils.gravatar(article.user.email, 34) %>" width="17" height="17">
	<b style="margin-right: 30px; "><a class="black-link" href="<%= syzoj.utils.makeUrl(['user', article.user_id]) %>"><%= article.user.username %></a><% if (article.user.nameplate) { %><%- article.user.nameplate %><% } %></b>
	<b style="margin-right: 30px; "><i class="calendar icon"></i> <%= syzoj.utils.formatDate(article.public_time) %></b>
    <% if(user) {%>
        <span class="article-comment" onclick="reply('comment')">回复</span>
    <%}%>
	<% if (article.public_time !== article.update_time) { %><b style="margin-right: 30px; "><i class="edit icon"></i> <%= syzoj.utils.formatDate(article.update_time) %></b><% } %>
        <% if (article.allowedEdit) { %>
        <a style="margin-top: -4px; " class="ui mini right floated labeled icon button" href="<%= syzoj.utils.makeUrl(['article', article.id, 'edit']) %>"><i class="ui edit icon"></i>编辑</a>
        <a style="margin-top: -4px; margin-right: 3px; " class="ui mini red right floated labeled icon button" onclick="$('#modal-delete').modal('show')"><i class="ui trash icon"></i>删除</a>
        <div class="ui basic modal right floated" id="modal-delete">
          <div class="ui icon header">
            <i class="trash icon"></i>
            <p style="margin-top: 15px; ">删除文章</p>
          </div>
          <div class="content" style="text-align: center; ">
            <p>确认删除这篇文章吗？</p>
          </div>
          <div class="actions">
            <div class="ui red basic cancel inverted button">
              <i class="remove icon"></i>
              否
            </div>
            <a class="ui green ok inverted button" href-post="<%= syzoj.utils.makeUrl(['article', article.id, 'delete']) %>">
              <i class="checkmark icon"></i>
              是
            </a>
          </div>
        </div>
        <% } %>
 	</p>
  <div class="ui existing segment">
	  <div id="content" class="font-content"><%- article.content %></div>
  </div>
  <% if (comments.length) { %>
  <div class="ui comments" style="max-width: none;">
    <h3 class="ui dividing header">共 <%= commentsCount %> 条回复</h3>
    <% for (let comment of comments) { %>
      <div class="comment">
        <a class="avatar">
          <img src="<%= syzoj.utils.gravatar(comment.user.email, 120) %>">
        </a>
        <div class="content">
          <a class="author" href="<%= syzoj.utils.makeUrl(['user', comment.user_id]) %>"><%= comment.user.username %></a><% if (comment.user.nameplate) { %><%- comment.user.nameplate %><% } %>
          <div class="metadata">
            <span class="date"><%= syzoj.utils.formatDate(comment.public_time) %></span>
          </div>
          <div class="text font-content" style="min-height: 19.5px; "><%- comment.content %></div>
          <% if (comment.allowedEdit) { %>
            <div class="actions"><a onclick="$('#modal-delete-<%= comment.id %>').modal('show')">删除</a><a onclick="reply('reply', <%= comment.id %>)">回复</a></div>
            <div class="ui basic modal" id="modal-delete-<%= comment.id %>">
              <div class="ui icon header">
                <i class="trash icon"></i>
                <p style="margin-top: 15px; ">删除评论</p>
              </div>
              <div class="content" style="text-align: center; ">
                <p>确认删除这条评论吗？评论下所有回复也会被删除</p>
              </div>
              <div class="actions">
                <div class="ui red basic cancel inverted button">
                  <i class="remove icon"></i>
                  否
                </div>
                <a class="ui green ok inverted button" href-post="<%= syzoj.utils.makeUrl(['article', article.id, 'comment', comment.id, 'delete']) %>">
                  <i class="checkmark icon"></i>
                  是
                </a>
              </div>
            </div>
          <% } else { %>
            <div class="actions">
                <% if(user){%>
                    <a onclick="reply('reply', <%= comment.id %>)">回复</a>
                <%}%>
            </div>
          <%}%>
        </div>
      </div>
      <% for (let reply of comment.reply) { %>
        <div class="comment reply">
          <a class="avatar">
              <img src="<%= syzoj.utils.gravatar(reply.reply_user.email, 120) %>" alt="">
          </a>
          <div class="content">
              <a class="author" href="<%= syzoj.utils.makeUrl(['user', reply.user_id]) %>"><%= reply.reply_user.username %></a><% if (reply.reply_user.nameplate) { %><%- reply.reply_user.nameplate %><% } %>
              <div class="metadata">
                  <span class="date"><%= syzoj.utils.formatDate(reply.public_time) %></span>
              </div>
              <div class="text font-content" style="min-height: 19.5px; "><%- reply.content %></div>
              <% if (comment.allowedEdit) { %>
              <div class="actions"><a onclick="$('#modal-delete-reply-<%= reply.id %>').modal('show')">删除</a></div>
              <div class="ui basic modal" id="modal-delete-reply-<%= reply.id %>">
                  <div class="ui icon header">
                      <i class="trash icon"></i>
                      <p style="margin-top: 15px; ">删除回复</p>
                  </div>
                  <div class="content" style="text-align: center; ">
                      <p>确认删除这条回复吗？</p>
                  </div>
                  <div class="actions">
                      <div class="ui red basic cancel inverted button">
                          <i class="remove icon"></i>
                          否
                      </div>
                      <a class="ui green ok inverted button" href-post="<%= syzoj.utils.makeUrl(['article', article.id, 'reply', reply.id, 'delete']) %>">
                          <i class="checkmark icon"></i>
                          是
                      </a>
                  </div>
              </div>
              <% } %>
          </div>
      </div>
      <% } %>
      <% } %>
  </div>
  <div style="margin-bottom: 50px; ">
    <% include page %>
  </div>
  <% } %>
    <% if (article.allowedComment) { %>
    <% include monaco-editor %>
    <form id="comment-box" class="ui reply form" method="post" action="" style="visibility:hidden">
      <div id="comment" class="editor editor-with-border" style="height: 200px; width: 100%; margin-bottom: 1em; ">
        <%- this.showLoadingEditor(); %>
      </div>
      <input type="hidden" name="comment">
      <div style="text-align: center; ">
      <button id="submit_button" type="submit" class="ui disabled labeled submit icon button">
        <i class="icon edit"></i> <span id="reply-text">回复</span>
      </button>
      </div>
    </form>
    <script>
      var editors = {
        comment: { defaultValue: '' }
      };

      window.onEditorLoaded(function () {
        for (var name in editors) {
          var editor = editors[name];
          var editorElement = document.getElementById(name);
          var input = document.getElementsByName(name)[0];
          editor.editor = window.createMarkdownEditor(editorElement, editor.defaultValue, input);
        }

        $('#submit_button').removeClass('disabled');
      });
    </script>
  <% } %>
</div>
<% include footer %>
<script>
    function reply(type, replyId){
      const id = document.getElementById('user-info').innerHTML;
      if (id) {
        const editorDom = document.getElementById('comment-box');
        const editorBtn = document.getElementById('reply-text');
        const articleId = <%= article.id %>;
        let actionUrl = null;
        let btnText = null;
        if (type === 'comment') {
          actionUrl = `/article/${articleId}/comment`;
          btnText='回复帖子';
        } else if (type === 'reply' && replyId) {
          actionUrl = `/article/${articleId}/comment/${replyId}`;
          btnText='回复评论';
        }
        editorDom.setAttribute('action', actionUrl);
        editorBtn.innerText=btnText;
        editorDom.style.visibility='initial';
      }
    }
</script>