comment.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414
  1. var list = []; //评论列表
  2. var editorId = "#comment_content";
  3. var verifycodeId = "#img_verifycode";
  4. var listId = "#comment_list";
  5. $(document).ready(init_comment);
  6. function init_comment() {
  7. load_comment_form();
  8. editor = $(editorId);
  9. var editor_inter = null;
  10. if (editor.length > 0) {
  11. // var v = ["html", "objc", "javascript", "css", "php", "csharp", "cpp", "java", "python", "ruby", "vb", "delphi", "sql", "plain"];
  12. // var k = ["HTML/XML","Objective-C", "JavaScript", "CSS", "PHP", "C#", "C++", "Java", "Python", "Ruby", "Visual Basic", "Delphi", "SQL", "其它"];
  13. // for (var i = 0; i < v.length; i++) {
  14. // $("#lang_list").append('<a href="#' + v[i] + '">' + k[i] + '</a>');
  15. // }
  16. $("#lang_list").append('<a class="long_name" href="#html">HTML/XML</a><a class="long_name" href="#objc">objective-c</a><a class="zhong_name" href="#delphi">Delphi</a><a class="zhong_name" href="#ruby">Ruby</a><a href="#php">PHP</a><a class="duan_name" href="#csharp">C#</a><a style=" border-right: none;" class="duan_name" href="#cpp">C++</a><a style=" border-bottom:none;"class="long_name" href="#javascript">JavaScript</a><a style=" border-bottom:none;" class="long_name" href="#vb">Visual Basic</a><a style=" border-bottom:none;" class="zhong_name" href="#python">Python</a><a style=" border-bottom:none;" class="zhong_name" href="#java">Java</a><a style="border-bottom:none;" class="duan_name" href="#css">CSS</a><a style="border-bottom:none;" class="duan_name" href="#sql">SQL</a><a style="border:none;" class="duan_name" href="#plain">其它</a>');
  17. editor.focus(function () {
  18. editor_inter = setInterval(function () {
  19. commentTip("还能输入" + (1000 - editor.val().length) + "个字符");
  20. }, 200);
  21. }).blur(function () {
  22. if (editor_inter) clearInterval(editor_inter);
  23. });
  24. }
  25. //加载列表
  26. loadList(1);
  27. }
  28. function noComments() {
  29. $(listId).html('<br />&nbsp;&nbsp;暂无评论<br /><br /><div class="clear"></div>');
  30. }
  31. function loadList(pageIndex, isSub) {
  32. if (commentscount == 0) {
  33. noComments();
  34. return;
  35. }
  36. pageIndex = parseInt(pageIndex) || 1;
  37. $("#comments_bar").html("正在加载评论...");
  38. //var cmtUrl = "../../comment/list/" + fileName + "?page=" + (pageIndex || 1);
  39. var url = location.href.toString().split('/');
  40. var cmtUrl = "http://"+url[2]+"/"+url[3]+"/comment/list/" + fileName + "?page=" + (pageIndex || 1);
  41. if (isSub) cmtUrl += "&_" + Math.random();
  42. $.get(cmtUrl, function (json) {
  43. if (!json) {
  44. noComments();
  45. return;
  46. }
  47. var data = (typeof json == 'object') ? json : eval("(" + json + ")");
  48. if (isSub) list = data.list;
  49. else list = list.concat(data.list);
  50. var listHtml = '';
  51. //构造主题
  52. var topics = getTopics(list);
  53. var total = data.total > 0 ? data.total : topics.length;
  54. //组装HTM
  55. for (var i = 0; i < topics.length; i++) {
  56. var comment = topics[i];
  57. var layer = total - i;
  58. listHtml += getItemHtml(comment, layer);
  59. }
  60. listHtml += '<div class="clear"></div>';
  61. //输出列表
  62. $(listId).html(listHtml);
  63. //高亮评论中的代码段
  64. dp.SyntaxHighlighter.HighlightAll('code2');
  65. //展示昵称
  66. new CNick(listId + ' a.username').showNickname();
  67. //分页处理
  68. if (data.page.PageIndex >= data.page.PageCount) {
  69. $("#comment_bar").hide();
  70. } else {
  71. $("#comment_bar").html('<div id="load_comments" page="' + (pageIndex + 1) + '">查看更多评论</div>');
  72. }
  73. //添加按钮事件
  74. setBtnEvent();
  75. });
  76. };
  77. //获取评论主题
  78. function getTopics(list) {
  79. var topics = [];
  80. for (var i = 0; i < list.length; i++) {
  81. var t = list[i];
  82. if (t.ParentId == 0) {
  83. t.Replies = getReplies(t, list);
  84. topics.push(t);
  85. }
  86. }
  87. return topics;
  88. }
  89. //获取评论回复
  90. function getReplies(item, list) {
  91. var replies = [];
  92. for (var i = 0; i < list.length; i++) {
  93. var r = list[i];
  94. if (r.ParentId == item.CommentId) {
  95. r.Replies = getReplies(r, list);
  96. replies.push(r);
  97. }
  98. }
  99. return replies;
  100. }
  101. //获取评论的HTML
  102. function getItemHtml(comment, index, floor, deep) {
  103. if (!deep) deep = 0;
  104. var sty = deep > 3 ? ' style="margin-left:0;"' : '';
  105. var html = '<dl class="comment_item comment_' + (comment.ParentId > 0 ? "reply" : "topic") + '" id="comment_item_{id}"' + sty + '>' +
  106. '<dt class="comment_head" floor=' + (floor || index) + '>' + (comment.ParentId > 0 ? "Re:" : index + '楼') + ' <span class="user">';
  107. if (comment.UserName != null && comment.UserName != '')
  108. html += '<a class="username" href="/' + comment.UserName + '" target="_blank">' + comment.UserName + '</a>';
  109. else
  110. html += '[游客]';
  111. html += " <span class='ptime'>" + comment.PostTime + "发表</span> ";
  112. html += ' <a href="#reply" class="cmt_btn reply" title="回复">[回复]</a> <span class="comment_manage" style="display:none;" commentid={id} username={username}> <a href="#quote" class="cmt_btn quote" title="引用">[引用]</a> <a href="#report" class="cmt_btn report" title="举报">[举报]</a>';
  113. if (username == currentUserName || comment.UserName == currentUserName) html += ' <a href="#delete" class="cmt_btn delete" title="删除">[删除]</a>';
  114. html += '</span></dt>';
  115. html += '<dd class="comment_userface"><a href="/' + comment.UserName + '" target="_blank"><img src="' + comment.Userface + '" width="40" height="40" /></a></dd>';
  116. html += '<dd class="comment_body">' + replaceUBBToHTML(comment) + '</dd>';
  117. html = html.replace(/\{id\}/g, comment.CommentId).replace(/\{username\}/g, comment.UserName);
  118. if (comment.Replies != null) {
  119. for (var j = 0; j < comment.Replies.length; j++) {
  120. html += getItemHtml(comment.Replies[j], j + 1, index, deep + 1);
  121. }
  122. }
  123. html += "</dl>";
  124. return html;
  125. }
  126. //获取评论对象
  127. function getComment(commentId, list) {
  128. for (var i = 0; i < list.length; i++) {
  129. var comment = list[i];
  130. if (comment.CommentId == commentId)
  131. return comment;
  132. }
  133. return null;
  134. }
  135. function setBtnEvent() {
  136. $("#load_comments").click(function () {
  137. var page = $(this).attr("page");
  138. loadList(page);
  139. });
  140. //评论按钮点击
  141. $(".comment_head a").click(function () {
  142. var action = $(this).attr("href");
  143. action = action.substring(action.lastIndexOf('#'));
  144. var commentId = $(this).parent().attr("commentid");
  145. switch (action) {
  146. case "#reply":
  147. if (currentUserName) {
  148. commentId = $(".comment_manage", $(this).parent()).attr("commentid");
  149. replyComment(commentId, list);
  150. setEditorFocus();
  151. }
  152. return true;
  153. case "#quote":
  154. if (currentUserName) {
  155. quoteComment(commentId, list);
  156. setEditorFocus();
  157. }
  158. return true;
  159. case "#report":
  160. reportComment(commentId, this);
  161. break;
  162. case "#delete":
  163. deleteComment(commentId);
  164. break;
  165. default:
  166. return true;
  167. }
  168. return false;
  169. });
  170. $(".comment_item").mouseover(function () {
  171. $(".comment_manage", $(this)).eq(0).show();
  172. }).mouseout(function () {
  173. $(".comment_manage", $(this)).eq(0).hide();
  174. });
  175. }
  176. /*使评论框获得焦点*/
  177. function setEditorFocus() {
  178. var val = editor.val();
  179. editor.val('');
  180. editor.focus();
  181. editor.val(val);
  182. }
  183. //引用评论
  184. function quoteComment(commentId, list) {
  185. var comment = getComment(commentId, list);
  186. var content = comment.Content;
  187. if (comment.Content.length > 50) {
  188. content = comment.Content.substring(0, 50) + "...";
  189. }
  190. editor.val("[quote=" + (comment.UserName == null ? "游客" : comment.UserName) + "]" + content + "[/quote]\r\n");
  191. }
  192. //回复评论
  193. function replyComment(commentId, list) {
  194. var comment = getComment(commentId, list);
  195. editor.val('[reply]' + comment.UserName + "[/reply]\r\n");
  196. $("#comment_replyId").val(commentId);
  197. }
  198. //举报评论
  199. function reportComment(commentId, e) {
  200. report(commentId, 3, e);
  201. }
  202. //删除评论
  203. function deleteComment(commentId) {
  204. if (!confirm("你确定要删除这篇评论吗?")) return;
  205. var delUrl = blog_address + "/comment/delete?commentid=" + commentId + "&filename=" + fileName;
  206. $.get(delUrl, function (data) {
  207. if (data.result == 1) {
  208. $("#comment_item_" + commentId).hide().remove();
  209. } else {
  210. alert("你没有删除该评论的权限!");
  211. }
  212. });
  213. }
  214. //替换评论的UBB代码
  215. function replaceUBBToHTML(comment) {
  216. var content = $.trim(comment.Content);
  217. var re = /\[code=([\w#\.]+)\]([\s\S]*?)\[\/code\]/ig;
  218. var codelist = [];
  219. while ((mc = re.exec(content)) != null) {
  220. codelist.push(mc[0]);
  221. content = content.replace(mc[0], "--code--");
  222. }
  223. content = replaceQuote(content);
  224. //content = content.replace(/\[e(\d+)\]/g, "<img src=\"" + static_host + "/images/emotions/e$1.gif\"\/>");
  225. content = content.replace(/\[reply]([\s\S]*?)\[\/reply\][\r\n]{0,2}/gi, "回复$1:");
  226. content = content.replace(/\[url=([^\]]+)]([\s\S]*?)\[\/url\]/gi, '<a href="$1" target="_blank">$2</a>');
  227. content = content.replace(/\[img(=([^\]]+))?]([\s\S]*?)\[\/img\]/gi, '<img src="$3" style="max-width:400px;max-height:200px;" border="0" title="$2" />');
  228. //content = content.replace(/\[(\/?)(b|i|u|p)\]/ig, "<$1$2>");
  229. content = content.replace(/\r?\n/ig, "<br />");
  230. if (codelist.length > 0) {
  231. var re1 = /--code--/ig;
  232. var i = 0;
  233. while ((mc = re1.exec(content)) != null) {
  234. content = content.replace(mc[0], codelist[i]);
  235. i++;
  236. }
  237. }
  238. content = content.replace(/\[code=([\w#\.]+)\]([\s\S]*?)\[\/code\]/ig, function (m0, m1, m2) {
  239. if ($.trim(m2) == "") return '';
  240. return '<pre name="code2" class="' + m1 + '">' + m2 + '</pre>';
  241. });
  242. return content;
  243. }
  244. //替换评论的引用
  245. function replaceQuote(str) {
  246. var m = /\[quote=([^\]]+)]([\s\S]*)\[\/quote\]/gi.exec(str);
  247. if (m) {
  248. return str.replace(m[0], '<fieldset><legend>引用“' + m[1] + '”的评论:</legend>' + replaceQuote(m[2]) + '</fieldset>');
  249. } else {
  250. return str;
  251. }
  252. }
  253. function load_comment_form() {
  254. var un = getcookie("UserName").toLowerCase();
  255. if (islock) {
  256. $("#comment_form").html("<div class='notice'>该文章已被禁止评论!</div>");
  257. } else if (currentUserName || (un != null&&un!=""&&un!=undefined)) {
  258. var html = '<a name="commentbox"></a><a name="reply"></a><a name="quote"></a><form action="/' + username + '/comment/submit?id=' + fileName + '" method="post" onsubmit="return subform(this);">' +
  259. '<div class="commentform"><div class="panel_head">发表评论</div>' +
  260. '<ul><li class="left">用 户 名:</li><li class="right">' + currentUserName + '</li></ul>' +
  261. '<ul><li class="left">评论内容:</li><li class="right" style="position:relative;">' +
  262. '<div id="ubbtools">' +
  263. '<a href="#insertcode" code="code"><img src="' + static_host + '/images/ubb/code.gif" border="0" alt="插入代码" title="插入代码"/></a>' +
  264. '</div>' +
  265. '<div id="lang_list" style="position: absolute; top: 28px; left: 0px; display: none;"></div>' +
  266. '<textarea class="comment_content" name="comment_content" id="comment_content" style="width: 400px; height: 200px;"></textarea>' +
  267. '</li></ul>' +
  268. '<ul><input type="hidden" id="comment_replyId" name="comment_replyId" />' +
  269. '<input type="hidden" id="comment_userId" name="comment_userId" value="521203" />' +
  270. '<input type="hidden" id="commentId" name="commentId" value="" />';
  271. if (isBole)
  272. {
  273. html += '<input type="checkbox" value="1" id="boleattohome" name="boleattohome" />推荐到首页';
  274. }
  275. html+= '<input type="submit" class="comment_btn" value="提交" />&nbsp;&nbsp;<span id="tip_comment" style="color: Red; display: none;"></span>' +
  276. '</ul></div></form>';
  277. $("#comment_form").html(html);
  278. } else {
  279. var curl = encodeURIComponent(location.href);
  280. $("#comment_form").html('<div class="guest_link">您还没有登录,请' +
  281. //'<a href="javascript:void(0);" onclick="javascript:csdn.showLogin(function (dat) {js_logined(dat.data.userName);});">[登录]</a>或' +
  282. '<a href="javascript:void(0);" onclick="javascript:loginbox();">[登录]</a>或' +
  283. '<a href="http://passport.csdn.net/account/register?from=' + curl + '">[注册]</a></div>');
  284. }
  285. ubb_event();
  286. }
  287. function getcookie(name) {
  288. var cookie_start = document.cookie.indexOf(name);
  289. var cookie_end = document.cookie.indexOf(";", cookie_start);
  290. return cookie_start == -1 ? '' : unescape(document.cookie.substring(cookie_start + name.length + 1, (cookie_end > cookie_start ? cookie_end : document.cookie.length)));
  291. }
  292. var c_doing = false;
  293. function subform(e) {
  294. if (c_doing) return false;
  295. var content = $.trim($(editorId).val());
  296. if (content == "") {
  297. commentTip("评论内容没有填写!");
  298. return false;
  299. } else if (content.length > 1000) {
  300. commentTip("评论内容太长了,不能超过1000个字符!");
  301. return false;
  302. }
  303. var commentId = $("#commentId").val();
  304. commentTip("正在发表评论...");
  305. var beginTime = new Date();
  306. $(editorId).attr("disabled", true);
  307. $("button[type=submit]", e).attr("disabled", true);
  308. c_doing = true;
  309. $.ajax({
  310. type: "POST",
  311. url: $(e).attr("action"),
  312. data: {
  313. "commentid": commentId,
  314. "content": content,
  315. "replyId": $("#comment_replyId").val(),
  316. "boleattohome": $("#boleattohome").val()
  317. },
  318. success: function (data) {
  319. c_doing = false;
  320. commentTip(data.content);
  321. if (data.result) {
  322. var rcommentid=$("#comment_replyId").val()
  323. $(editorId).val('');
  324. $("#comment_replyId,#comment_verifycode").val('');
  325. commentscount++;
  326. loadList(1, true);
  327. $(editorId).attr("disabled", false);
  328. $("button[type=submit]", e).attr("disabled", false);
  329. commentTip("发表成功!评论耗时:" + (new Date() - beginTime) + "毫秒")
  330. if (rcommentid!=undefined && rcommentid != "")
  331. {
  332. $("html,body").animate({ scrollTop: $("#comment_item_" + rcommentid).offset().top }, 1000);
  333. }
  334. }
  335. }
  336. });
  337. return false;
  338. }
  339. //操作提示
  340. var _c_t;
  341. function commentTip(message) {
  342. $("#tip_comment").html(message).show();
  343. clearTimeout(_c_t);
  344. _c_t = setTimeout(function () {
  345. $("#tip_comment").hide();
  346. }, 10000);
  347. }
  348. function ubb_event() {
  349. //ubb按钮事件
  350. $("#ubbtools").children().click(function () {
  351. var selectedValue = editor.selection();
  352. editor.focus();
  353. var code = $(this).attr("code");
  354. switch (code) {
  355. case "code":
  356. var lang_list = $("#lang_list");
  357. lang_list.show();
  358. lang_list.children().each(function () {
  359. $(this).unbind("click").click(function () {
  360. editor.val("[code=" + $.trim(this.href.split('#')[1]) + "]\n" + selectedValue + "\n[/code]");
  361. lang_list.hide();
  362. });
  363. });
  364. editor.click(function (e) {
  365. lang_list.hide();
  366. });
  367. break;
  368. default:
  369. editor.val("[" + code + "]" + selectedValue + "[/" + code + "]");
  370. break;
  371. }
  372. return false;
  373. });
  374. }