You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
231 lines
8.5 KiB
231 lines
8.5 KiB
<% 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); |
|
} |
|
.border{ |
|
padding-bottom: 10px !important; |
|
border-bottom: 1px solid #DEDEDF !important; |
|
} |
|
.border:last-child{ |
|
border-bottom: none !important; |
|
} |
|
</style> |
|
|
|
<div class="padding" id="comment-zone"> |
|
<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> |
|
<comment-box v-for="(item, index) in comments" :key="index" :data="item" :index="index" :user="user"></comment-box> |
|
</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> |
|
<div class="ui basic modal" id="modal-comment-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="" id="modal-comment-delete-href"> |
|
<i class="checkmark icon"></i> |
|
是 |
|
</a> |
|
</div> |
|
</div> |
|
|
|
<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> |
|
<script type="text/x-template" id="test-comment"> |
|
<div class="comment" :class="{ reply: data.firstComment, border:!data.parent_id }"> |
|
<a class="avatar"> |
|
<img :src="data.avatarUrl"> |
|
</a> |
|
<div class="content"> |
|
<a class="author" :href="userUrl(data.user.id)" >{{data.user.username}}</a> |
|
回复给 |
|
<a class="author" :href="userUrl(data.toUser.id)" >{{data.toUser.username}}</a> |
|
<div v-if="data.user.nameplate">{{data.user.nameplate}}</div> |
|
<div class="metadata"> |
|
<span class="date">{{data.date}}</span> |
|
</div> |
|
<div class="text font-content" style="min-height: 19.5px; ">{{data.content}}</div> |
|
<div class="actions"> |
|
<template v-if="data.allowedEdit"> |
|
<a @click="deleteComment(data.id)">删除</a> |
|
</template> |
|
<template v-if="user"> |
|
<a @click="reply('reply', data.id)">回复</a> |
|
</template> |
|
</div> |
|
</div> |
|
<node v-for="(item, index) in data.children" :key="index" :data="item" :index="index" :user="user"></node> |
|
</div> |
|
</script> |
|
|
|
<script> |
|
var comments = <%- serializejs(comments) %> |
|
var user = <%- serializejs(user) %> |
|
var testComponent = Vue.component("comment-box", { |
|
template: "#test-comment", |
|
name: "Node", |
|
props: { |
|
data: { |
|
type: Object, |
|
default() { |
|
return {}; |
|
} |
|
}, |
|
index:{ |
|
type:Number, |
|
default(){ |
|
return 0 |
|
} |
|
}, |
|
user: { |
|
type:Object, |
|
} |
|
}, |
|
computed:{ |
|
userUrl() { |
|
return function(id){ |
|
return `user/${id}` |
|
} |
|
} |
|
} |
|
}) |
|
new Vue({ |
|
el: '#comment-zone', |
|
data:{ |
|
comments:comments, |
|
user |
|
} |
|
}) |
|
</script> |
|
<% 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'; |
|
} |
|
document.body.scrollTo({ |
|
top: document.body.scrollHeight, |
|
behavior: "smooth" |
|
}); |
|
} |
|
function deleteComment(id){ |
|
const articleId = <%= article.id %>; |
|
$('#modal-comment-delete').modal('show') |
|
$('#modal-comment-delete-href').attr('href-post',`/article/${articleId}/comment/${id}/delete`) |
|
} |
|
</script>
|
|
|