github
/
halo
mirror of https://github.com/halo-dev/halo
1
0
Fork 0
Code Issues Releases Wiki Activity

🎨 优化评论模块

pull/37/head
ruibaby 2018-10-05 17:30:49 +08:00
parent 3af2a82c22
commit 7c6a841b07
10 changed files with 268 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/main/java/cc/ryanc/halo/web/controller/front/FrontCommentController.java
View File

@ -126,8 +126,8 @@ public class FrontCommentController {
}
if (comment.getCommentParent() > 0) {
lastComment = commentService.findCommentById(comment.getCommentParent()).get();
String lastContent = "<a href='#comment-id-" + lastComment.getCommentId() + "'>@" + lastComment.getCommentAuthor() + "</a>";
comment.setCommentContent(lastContent + StrUtil.subAfter(OwoUtil.markToImg(HtmlUtil.escape(comment.getCommentContent())), ":", true));
String lastContent = "<a href='#comment-id-" + lastComment.getCommentId() + "'>@" + lastComment.getCommentAuthor() + "</a> ";
comment.setCommentContent(lastContent + OwoUtil.markToImg(HtmlUtil.escape(comment.getCommentContent())));
} else {
//将评论内容的字符专为安全字符
comment.setCommentContent(OwoUtil.markToImg(HtmlUtil.escape(comment.getCommentContent())));

1
src/main/resources/i18n/messages.properties
View File

@ -195,6 +195,7 @@ admin.setting.form.native-comment-avatar-monsterid = 小怪物
admin.setting.form.native-comment-avatar-retro = 复古
admin.setting.form.native-comment-avatar-robohash = 机器人
admin.setting.form.native-comment-avatar-blank = 不显示头像
admin.setting.form.comment-activate-power-mode = 打字特效：
admin.setting.form.new-comment-need-check = 评论审核后才显示：
admin.setting.form.new-comment-notice = 新评论通知：
admin.setting.form.comment-pass-notice = 评论审核通过通知对方：

1
src/main/resources/i18n/messages_en_US.properties
View File

@ -195,6 +195,7 @@ admin.setting.form.native-comment-avatar-monsterid = Monsterid
admin.setting.form.native-comment-avatar-retro = Retro
admin.setting.form.native-comment-avatar-robohash = Robohash
admin.setting.form.native-comment-avatar-blank = Blank
admin.setting.form.comment-activate-power-mode = Typing effect:
admin.setting.form.new-comment-need-check = Need review:
admin.setting.form.new-comment-notice = New comment notification:
admin.setting.form.comment-pass-notice = Comment review by notifying the other party:

1
src/main/resources/i18n/messages_zh_CN.properties
View File

@ -195,6 +195,7 @@ admin.setting.form.native-comment-avatar-monsterid = 小怪物
admin.setting.form.native-comment-avatar-retro = 复古
admin.setting.form.native-comment-avatar-robohash = 机器人
admin.setting.form.native-comment-avatar-blank = 不显示头像
admin.setting.form.comment-activate-power-mode = 打字特效：
admin.setting.form.new-comment-need-check = 评论审核后才显示：
admin.setting.form.new-comment-notice = 新评论通知：
admin.setting.form.comment-pass-notice = 评论审核通过通知对方：

183
src/main/resources/static/css/comment.css
View File

@ -1,32 +1,35 @@
.native-list-one-head a, .native-list-one-content a{
/* color: #424242; */
color: #7575d0;
opacity: 1;!important;
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
-o-transition: all .15s linear;
-ms-transition: all .15s linear;
transition: all .15s linear;
/* color: #424242; */
color: #7575d0;!important;
}
.native-comment {
.comment-container {
padding: 10px;
}
.native-comment img{
display: inline-block;!important;
max-width: 100%;!important;
height: auto;!important;
margin: auto;!important;
.comment-list-one-content img {
display: inline-block !important;
margin: auto !important;
height: auto !important;
max-width: 100% !important;
}
.native-wrap {
border: 1px solid #f0f0f0!important;
padding: 10px!important;
.comment-wrap {
position: relative!important;
margin-left: 58px!important;
margin-left: 64px !important;
padding: 10px !important;
border: 1px solid #f0f0f0 !important;
}
input, textarea, button {
outline: none!important;
}
.comment-submit,.native-list-one-img,.native-list-one-footer-time,.native-list-one-footer-reback,.native-info,.native-nav,.ua,.native-message{
.comment-submit, .native-list-one-img, .native-list-one-footer-time, .native-list-one-footer-reback, .comment-info, .native-nav, .ua, .comment-message {
-webkit-user-select:none!important;
-moz-user-select:none!important;
-ms-user-select:none!important;
@ -37,160 +40,177 @@ input, textarea, button {
line-height: 1.8!important;
}
.comment-input-who, .comment-input-email, .comment-input-website {
width: 33.33% !important;
padding: 10px 0 !important;
font-size: .9rem !important;
float: left !important;
padding: 10px 0 !important;
width: 33.33% !important;
border: none !important;
border-bottom: 1px dashed #dedede !important;
font-size: 16px !important;
}
.comment-input:focus {
border-bottom: 1px dashed red !important;
}
.comment-input-content {
padding: 10px 0 !important;
width: 100% !important;
min-height: 120px !important;
resize: vertical!important;
border: none!important;
font-size: .9rem !important;
padding: 10px 0!important;
}
.comment-OwO{
text-align: left!important;
vertical-align: middle!important;
padding-top: 10px!important;
font-size: 16px !important;
resize: vertical !important;
}
.comment-footer {
text-align: right!important;
vertical-align: middle!important;
padding-top: 10px!important;
}
.comment-submit {
border-radius: 0 !important;
vertical-align: middle!important;
text-align: right !important;
}
.comment-submit, .comment-cancel-reply {
padding: 7px 14px!important;
font-size: .9rem!important;
cursor: pointer!important;
outline: none !important;
border: 1px solid #ededed!important;
border-radius: 0 !important;
background: #ededed!important;
color: #313131!important;
outline: none!important;
vertical-align: middle !important;
font-size: 16px !important;
line-height: normal!important;
cursor: pointer !important;
transition: all .3s ease-in-out!important;
}
.comment-submit:hover{
background-color: #fff !important;
border-radius: 1.9rem !important;
border-color: #859cff !important;
border-radius: 50px !important;
background-color: #fff !important;
color: #859cff !important;
}
.native-list {
list-style: none!important;
.comment-cancel-reply:hover {
border-color: #859cff !important;
border-radius: 50px !important;
background-color: #fff !important;
color: #859cff !important;
}
.comment-list {
margin-top: 0!important;
margin-bottom: 0!important;
padding: 0!important;
list-style: none !important;
}
.native-list .native-list-one {
padding-top: 10px!important;
.comment-list .comment-list-one {
position: relative!important;
display: block!important;
transition: all .3s ease-in-out!important;
margin: 0 !important;
padding-top: 10px !important;
transition: all .3s ease-in-out !important;
}
.native-list .native-list-one .native-list-one-img {
width: 2.5rem!important;
height: 2.5rem!important;
.comment-list .comment-list-one .comment-list-one-img {
float: left!important;
margin-right: 16px !important;
width: 48px !important;
height: 48px !important;
border-radius: 50%!important;
margin-right: .7rem!important;
cursor: pointer!important;
-webkit-transition: 0.4s!important;
-webkit-transition: -webkit-transform 0.4s ease-out!important;
transition: transform 0.4s ease-out!important;
-moz-transition: -moz-transform 0.4s ease-out!important;
transition: transform 0.4s ease-out !important;
}
.native-list-one-img:hover{
.comment-list-one-img:hover {
transform: rotate(360deg)!important;
}
.native-list .native-list-one section {
.comment-list .comment-list-one section {
overflow: hidden!important;
padding-bottom: 1rem!important;
border-bottom: 1px dashed #f5f5f5!important;
}
.native-list .native-list-one section .native-list-one-head {
line-height: 1.5!important;
margin-bottom: .5rem!important;
.comment-list .comment-list-one section .comment-list-one-head {
margin-top: 0!important;
margin-bottom: 5px !important;
line-height: 1.5 !important;
}
.native-list-one-head-name {
font-size: .875rem!important;
font-weight: 700!important;
.comment-list-one-head-name {
color: #555 !important;
text-decoration: none !important;
font-weight: 500!important;
font-size: 16px !important;
cursor: pointer!important;
text-decoration: none!important;
color: #555!important;
}
.native-list-one-head-admin{
padding: .1em 0.2em!important;
border-radius: 2px!important;
font-size: 70%!important;
font-weight: 700!important;
background-color: #87ceeb!important;
.comment-list-one-head-admin {
display: inline-block;
margin-right: 5px !important;
padding: 2px 5px !important;
border-radius: 2px !important;
background: #87ceeb!important;
color: #fff!important;
display: inline!important;
font-size: 12px !important;
}
.ua {
display: inline-block;
padding: .2rem .5rem!important;
margin-right: 5px !important;
padding: 2px 5px !important;
border-radius: 5px !important;
background: #ededed!important;
color: #b3b1b1!important;
font-size: .75rem!important;
border-radius: .2rem!important;
margin-right: .3rem!important;
font-size: 8px !important;
}
.native-list-one-content p {
font-size: 14px!important;
.comment-list-one-content p {
margin: 0 !important;
letter-spacing: 0!important;
margin: 0!important;
font-weight: 400!important;
font-size: 16px !important;
}
.native-list-one-footer-time {
.comment-list-one-footer-time {
margin-right: 5px !important;
color: #b3b3b3!important;
font-size: .75rem!important;
margin-right: .875rem!important;
font-size: 12px !important;
}
.native-list-one-footer-reback {
font-size: .8125rem!important;
.comment-list-one-footer-reback {
color: #ef2f11!important;
font-size: 14px !important;
cursor: pointer!important;
}
.native-info{
.comment-info {
padding-top: 10px!important;
font-size: 12px!important;
color: #555!important;
font-size: 16px !important;
}
.comment-avatar{
position: relative!important;
float: left!important;
}
.comment-avatar img{
width: 56px;
height: 56px;
border-radius: 100%!important;
cursor: pointer;
-webkit-transition: 0.4s!important;
-webkit-transition: -webkit-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
cursor: pointer;
transition: transform 0.4s ease-out;
}
.comment-avatar img:hover{
transform: rotate(360deg)!important;
}
.native-nav{
padding: 10px 0!important;;
padding: 10px 0 !important;
}
.page-nav{
margin: 20px 0!important;;
padding: 0 10px!important;;
list-style: none!important;;
text-align: center!important;;
text-align: center !important;
}
.page-nav li{
display: inline-block!important;
@ -207,7 +227,8 @@ input, textarea, button {
.ua{
display: none!important;
}
.native-list{
.comment-list {
margin-left: 5px!important;
}
}

97
src/main/resources/static/js/comment.js Normal file
View File

@ -0,0 +1,97 @@
var s = new OwO({
logo: 'OωO表情',
container: document.getElementsByClassName('OwO')[0],
target: document.getElementsByClassName('comment-input-content')[0],
position: 'down',
width: '100%',
maxHeight: '210px',
api:"/static/plugins/OwO/OwO.min.json"
});
$(document).ready(function () {
$(".comment-list-one-head").each(function (i) {
var uaInfo = $(this).children(".comment-ua-info").html();
$(this).append(show_ua(uaInfo));
});
$("#commentAuthor").val(localStorage.getItem("author"));
$("#commentAuthorEmail").val(localStorage.getItem("email"));
$("#commentAuthorUrl").val(localStorage.getItem("url"));
loadAvatar();
});
$('#comment-submit').click(function () {
var author = $("#commentAuthor");
var content = $("#commentContent");
var email = $("#commentAuthorEmail");
var url = $("#commentAuthorUrl");
if (author.val() == '' || content.val() == '') {
$(".comment-message").html("<span style='color:red'>请输入必填项！</span>");
$(".comment-message").fadeIn(1000);
setTimeout(function () {
$(".comment-message").fadeOut(1000);
},1500);
return;
}
$(this).attr("disabled","disabled");
$(this).html("提交中...");
$.ajax({
type: 'POST',
url: '/newComment',
async: false,
data: {
'postId': $('input[name=postId]').val(),
'commentContent': $('textarea[name=commentContent]').val(),
'commentAuthor': $('input[name=commentAuthor]').val(),
'commentAuthorEmail': $('input[name=commentAuthorEmail]').val(),
'commentAuthorUrl': $('input[name=commentAuthorUrl]').val(),
'commentAgent': navigator.userAgent,
'commentParent': $('input[name=commentParent]').val()
},
success: function (data) {
localStorage.setItem('author', author.val());
localStorage.setItem('email', email.val());
localStorage.setItem('url', url.val());
if(data.code==1){
$('.comment-input-content').val("");
$(".comment-message").html("<span>"+data.msg+"</span>");
}else{
$(".comment-message").html("<span style='color:red'>"+data.msg+"</span>");
}
$(".comment-message").fadeIn(1000);
setTimeout(function () {
$(".comment-message").fadeOut(1000);
$("#comment-submit").removeAttr("disabled");
$("#comment-submit").html("提交");
window.location.reload();
},1500);
}
});
});
$('.comment-list-one-footer-reback').click(function () {
var at = $(this).attr("at");
var commentParentAuthor = $('#comment-id-'+at).find(".comment-list-one-head-name").html();
$('#commentParent').val(at);
$('#commentContent').attr("placeholder","@"+commentParentAuthor);
$(".comment-cancel-reply").show();
$('#commentContent').focus();
});
$('.comment-cancel-reply').click(function () {
$('#commentParent').val(0);
$('#commentContent').attr("placeholder","");
$(".comment-cancel-reply").hide();
});
function loadAvatar() {
$(".comment-author-avatar").attr("src","//gravatar.loli.net/avatar/"+md5(localStorage.getItem("email"))+"?s=256&d="+avatarType);
if($('input[name=commentAuthorEmail]').val()!='' && $('input[name=commentAuthorEmail]').val()!=null){
$(".comment-author-avatar").attr("src","//gravatar.loli.net/avatar/"+md5($('input[name=commentAuthorEmail]').val())+"?s=256&d="+avatarType);
}
}
var parser = new UAParser();
function show_ua(string){
parser.setUA(string);
var uua = parser.getResult();
if(uua.os.version=='x86_64') {
uua.os.version = 'x64';
}
var browser = uua.browser.name+' '+uua.browser.version;
var os = uua.os.name + ' ' + uua.os.version;
return '<span class="ua">'+browser+'</span><span class="ua">'+os+'</span>';
}

1
src/main/resources/static/plugins/activate-power-mode/activate-power-mode.js Normal file
View File

@ -0,0 +1 @@
(function webpackUniversalModuleDefinition(b,a){if(typeof exports==="object"&&typeof module==="object"){module.exports=a()}else{if(typeof define==="function"&&define.amd){define([],a)}else{if(typeof exports==="object"){exports.POWERMODE=a()}else{b.POWERMODE=a()}}}})(this,function(){return(function(c){var b={};function a(e){if(b[e]){return b[e].exports}var d=b[e]={exports:{},id:e,loaded:false};c[e].call(d.exports,d,d.exports,a);d.loaded=true;return d.exports}a.m=c;a.c=b;a.p="";return a(0)})([function(j,e,a){var b=document.createElement("canvas");b.width=window.innerWidth;b.height=window.innerHeight;b.style.cssText="position:fixed;top:0;left:0;pointer-events:none;z-index:999999";window.addEventListener("resize",function(){b.width=window.innerWidth;b.height=window.innerHeight});document.body.appendChild(b);var c=b.getContext("2d");var l=[];var k=0;m.shake=true;function h(o,n){return Math.random()*(n-o)+o}function g(n){if(m.colorful){var o=h(0,360);return"hsla("+h(o-10,o+10)+", 100%, "+h(50,80)+"%, "+1+")"}else{return window.getComputedStyle(n).color}}function f(){var o=document.activeElement;var n;if(o.tagName==="TEXTAREA"||(o.tagName==="INPUT"&&o.getAttribute("type")==="text")){var p=a(1)(o,o.selectionStart);n=o.getBoundingClientRect();return{x:p.left+n.left,y:p.top+n.top,color:g(o)}}var r=window.getSelection();if(r.rangeCount){var q=r.getRangeAt(0);var s=q.startContainer;if(s.nodeType===document.TEXT_NODE){s=s.parentNode}n=q.getBoundingClientRect();return{x:n.left,y:n.top,color:g(s)}}return{x:0,y:0,color:"transparent"}}function d(o,p,n){return{x:o,y:p,alpha:1,color:n,velocity:{x:-1+Math.random()*2,y:-3.5+Math.random()*2}}}function m(){var n=f();var p=5+Math.round(Math.random()*10);while(p--){l[k]=d(n.x,n.y,n.color);k=(k+1)%500}if(m.shake){var o=1+2*Math.random();var q=o*(Math.random()>0.5?-1:1);var r=o*(Math.random()>0.5?-1:1);document.body.style.marginLeft=q+"px";document.body.style.marginTop=r+"px";setTimeout(function(){document.body.style.marginLeft="";document.body.style.marginTop=""},75)}}m.colorful=false;function i(){requestAnimationFrame(i);c.clearRect(0,0,b.width,b.height);for(var n=0;n<l.length;++n){var o=l[n];if(o.alpha<=0.1){continue}o.velocity.y+=0.075;o.x+=o.velocity.x;o.y+=o.velocity.y;o.alpha*=0.96;c.globalAlpha=o.alpha;c.fillStyle=o.color;c.fillRect(Math.round(o.x-1.5),Math.round(o.y-1.5),3,3)}}requestAnimationFrame(i);j.exports=m},function(b,a){(function(){var e=["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing","tabSize","MozTabSize"];var d=window.mozInnerScreenX!=null;function c(k,m,l){var h=l&&l.debug||false;if(h){var j=document.querySelector("#input-textarea-caret-position-mirror-div");if(j){j.parentNode.removeChild(j)}}var i=document.createElement("div");i.id="input-textarea-caret-position-mirror-div";document.body.appendChild(i);var o=i.style;var f=window.getComputedStyle?getComputedStyle(k):k.currentStyle;o.whiteSpace="pre-wrap";if(k.nodeName!=="INPUT"){o.wordWrap="break-word"}o.position="absolute";if(!h){o.visibility="hidden"}e.forEach(function(p){o[p]=f[p]});if(d){if(k.scrollHeight>parseInt(f.height)){o.overflowY="scroll"}}else{o.overflow="hidden"}i.textContent=k.value.substring(0,m);if(k.nodeName==="INPUT"){i.textContent=i.textContent.replace(/\s/g,"\u00a0")}var n=document.createElement("span");n.textContent=k.value.substring(m)||".";i.appendChild(n);var g={top:n.offsetTop+parseInt(f.borderTopWidth),left:n.offsetLeft+parseInt(f.borderLeftWidth)};if(h){n.style.backgroundColor="#aaa"}else{document.body.removeChild(i)}return g}if(typeof b!="undefined"&&typeof b.exports!="undefined"){b.exports=c}else{window.getCaretCoordinates=c}}())}])});

1
src/main/resources/static/plugins/md5/md5.min.js vendored
View File

@ -1,2 +1 @@
!function(n){"use strict";function t(n,t){var r=(65535&n)+(65535&t);return(n>>16)+(t>>16)+(r>>16)<<16|65535&r}function r(n,t){return n<<t|n>>>32-t}function e(n,e,o,u,c,f){return t(r(t(t(e,n),t(u,f)),c),o)}function o(n,t,r,o,u,c,f){return e(t&r|~t&o,n,t,u,c,f)}function u(n,t,r,o,u,c,f){return e(t&o|r&~o,n,t,u,c,f)}function c(n,t,r,o,u,c,f){return e(t^r^o,n,t,u,c,f)}function f(n,t,r,o,u,c,f){return e(r^(t|~o),n,t,u,c,f)}function i(n,r){n[r>>5]|=128<<r%32,n[14+(r+64>>>9<<4)]=r;var e,i,a,d,h,l=1732584193,g=-271733879,v=-1732584194,m=271733878;for(e=0;e<n.length;e+=16)i=l,a=g,d=v,h=m,g=f(g=f(g=f(g=f(g=c(g=c(g=c(g=c(g=u(g=u(g=u(g=u(g=o(g=o(g=o(g=o(g,v=o(v,m=o(m,l=o(l,g,v,m,n[e],7,-680876936),g,v,n[e+1],12,-389564586),l,g,n[e+2],17,606105819),m,l,n[e+3],22,-1044525330),v=o(v,m=o(m,l=o(l,g,v,m,n[e+4],7,-176418897),g,v,n[e+5],12,1200080426),l,g,n[e+6],17,-1473231341),m,l,n[e+7],22,-45705983),v=o(v,m=o(m,l=o(l,g,v,m,n[e+8],7,1770035416),g,v,n[e+9],12,-1958414417),l,g,n[e+10],17,-42063),m,l,n[e+11],22,-1990404162),v=o(v,m=o(m,l=o(l,g,v,m,n[e+12],7,1804603682),g,v,n[e+13],12,-40341101),l,g,n[e+14],17,-1502002290),m,l,n[e+15],22,1236535329),v=u(v,m=u(m,l=u(l,g,v,m,n[e+1],5,-165796510),g,v,n[e+6],9,-1069501632),l,g,n[e+11],14,643717713),m,l,n[e],20,-373897302),v=u(v,m=u(m,l=u(l,g,v,m,n[e+5],5,-701558691),g,v,n[e+10],9,38016083),l,g,n[e+15],14,-660478335),m,l,n[e+4],20,-405537848),v=u(v,m=u(m,l=u(l,g,v,m,n[e+9],5,568446438),g,v,n[e+14],9,-1019803690),l,g,n[e+3],14,-187363961),m,l,n[e+8],20,1163531501),v=u(v,m=u(m,l=u(l,g,v,m,n[e+13],5,-1444681467),g,v,n[e+2],9,-51403784),l,g,n[e+7],14,1735328473),m,l,n[e+12],20,-1926607734),v=c(v,m=c(m,l=c(l,g,v,m,n[e+5],4,-378558),g,v,n[e+8],11,-2022574463),l,g,n[e+11],16,1839030562),m,l,n[e+14],23,-35309556),v=c(v,m=c(m,l=c(l,g,v,m,n[e+1],4,-1530992060),g,v,n[e+4],11,1272893353),l,g,n[e+7],16,-155497632),m,l,n[e+10],23,-1094730640),v=c(v,m=c(m,l=c(l,g,v,m,n[e+13],4,681279174),g,v,n[e],11,-358537222),l,g,n[e+3],16,-722521979),m,l,n[e+6],23,76029189),v=c(v,m=c(m,l=c(l,g,v,m,n[e+9],4,-640364487),g,v,n[e+12],11,-421815835),l,g,n[e+15],16,530742520),m,l,n[e+2],23,-995338651),v=f(v,m=f(m,l=f(l,g,v,m,n[e],6,-198630844),g,v,n[e+7],10,1126891415),l,g,n[e+14],15,-1416354905),m,l,n[e+5],21,-57434055),v=f(v,m=f(m,l=f(l,g,v,m,n[e+12],6,1700485571),g,v,n[e+3],10,-1894986606),l,g,n[e+10],15,-1051523),m,l,n[e+1],21,-2054922799),v=f(v,m=f(m,l=f(l,g,v,m,n[e+8],6,1873313359),g,v,n[e+15],10,-30611744),l,g,n[e+6],15,-1560198380),m,l,n[e+13],21,1309151649),v=f(v,m=f(m,l=f(l,g,v,m,n[e+4],6,-145523070),g,v,n[e+11],10,-1120210379),l,g,n[e+2],15,718787259),m,l,n[e+9],21,-343485551),l=t(l,i),g=t(g,a),v=t(v,d),m=t(m,h);return[l,g,v,m]}function a(n){var t,r="",e=32*n.length;for(t=0;t<e;t+=8)r+=String.fromCharCode(n[t>>5]>>>t%32&255);return r}function d(n){var t,r=[];for(r[(n.length>>2)-1]=void 0,t=0;t<r.length;t+=1)r[t]=0;var e=8*n.length;for(t=0;t<e;t+=8)r[t>>5]|=(255&n.charCodeAt(t/8))<<t%32;return r}function h(n){return a(i(d(n),8*n.length))}function l(n,t){var r,e,o=d(n),u=[],c=[];for(u[15]=c[15]=void 0,o.length>16&&(o=i(o,8*n.length)),r=0;r<16;r+=1)u[r]=909522486^o[r],c[r]=1549556828^o[r];return e=i(u.concat(d(t)),512+8*t.length),a(i(c.concat(e),640))}function g(n){var t,r,e="";for(r=0;r<n.length;r+=1)t=n.charCodeAt(r),e+="0123456789abcdef".charAt(t>>>4&15)+"0123456789abcdef".charAt(15&t);return e}function v(n){return unescape(encodeURIComponent(n))}function m(n){return h(v(n))}function p(n){return g(m(n))}function s(n,t){return l(v(n),v(t))}function C(n,t){return g(s(n,t))}function A(n,t,r){return t?r?s(t,n):C(t,n):r?m(n):p(n)}"function"==typeof define&&define.amd?define(function(){return A}):"object"==typeof module&&module.exports?module.exports=A:n.md5=A}(this);
//# sourceMappingURL=md5.min.js.map

17
src/main/resources/templates/admin/admin_option.ftl
View File

@ -248,6 +248,23 @@
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-sm-4 control-label"><@spring.message code='admin.setting.form.comment-activate-power-mode' /></label>
<div class="col-lg-4 col-sm-8 control-radio">
<div class="pretty p-default p-round">
<input type="radio" name="comment_activate_power_mode" value="true" ${((options.comment_activate_power_mode?if_exists)=='true')?string('checked','')}>
<div class="state p-primary">
<label><@spring.message code='common.radio.enable' /></label>
</div>
</div>
<div class="pretty p-default p-round">
<input type="radio" name="comment_activate_power_mode" value="false" ${((options.comment_activate_power_mode?default("false"))=='false')?string('checked','')}>
<div class="state p-primary">
<label><@spring.message code='common.radio.disable' /></label>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-sm-4 control-label"><@spring.message code='admin.setting.form.new-comment-need-check' /></label>
<div class="col-lg-4 col-sm-8 control-radio">

160
src/main/resources/templates/common/comment/_native_comment.ftl
View File

@ -4,11 +4,11 @@
<style>
${options.native_css?if_exists}
</style>
<div class="native-comment">
<div class="comment-container">
<div class="comment-avatar">
<img src="//gravatar.loli.net/avatar/none?s=256&d=${options.native_comment_avatar?default('mm')}" height="48" width="48" class="comment-author-avatar">
<img src="//gravatar.loli.net/avatar/none?s=256&d=${options.native_comment_avatar?default('mm')}" class="comment-author-avatar">
</div>
<div class="native-wrap">
<div class="comment-wrap">
<div class="comment-header">
<input type="hidden" name="postId" value="${post.postId?c}">
<input type="hidden" name="commentParent" id="commentParent" value="0">
@ -21,33 +21,34 @@ ${options.native_css?if_exists}
<div class="OwO"></div>
</div>
<div class="comment-footer">
<button type="button" class="comment-submit" id="btn-push">提交</button>
<button type="button" class="comment-cancel-reply" id="comment-cancel-reply" style="display: none;">取消回复</button>
<button type="button" class="comment-submit" id="comment-submit">提交</button>
</div>
</div>
<div class="native-message" style="text-align: center;padding: 20px;display: none"></div>
<div class="native-info">
<span id="native-info-total" style="font-weight: 600">${commentsCount?default(0)}</span>评论
<div class="comment-message" style="text-align: center;padding: 20px;display: none"></div>
<div class="comment-info">
<span id="comment-info-total" style="font-weight: 600">${commentsCount?default(0)}</span>评论
</div>
<#macro childComments comments>
<ul class="native-list" style="margin-left: 30px; border-left: 1px solid #f1f1f1">
<ul class="comment-list" style="margin-left: 30px; border-left: 1px solid #f1f1f1">
<#if comments?? && comments?size gt 0>
<#list comments?sort_by("commentDate") as comment>
<li class="native-list-one" id="comment-id-${comment.commentId?c}" style="margin-left: 5px;">
<img class="native-list-one-img" style="width: 2rem;height: 2rem;" src="//gravatar.loli.net/avatar/${comment.commentAuthorAvatarMd5?if_exists}?s=256&d=${options.native_comment_avatar?default('mm')}">
<li class="comment-list-one" id="comment-id-${comment.commentId?c}" style="margin-left: 5px;">
<img class="comment-list-one-img" style="width: 2rem;height: 2rem;" src="//gravatar.loli.net/avatar/${comment.commentAuthorAvatarMd5?if_exists}?s=256&d=${options.native_comment_avatar?default('mm')}">
<section>
<div class="native-list-one-head">
<a class="native-list-one-head-name" rel="nofollow" href="${comment.commentAuthorUrl?if_exists}">${comment.commentAuthor?if_exists}</a>
<span class="native-comment-ua-info" style="display: none">${comment.commentAgent?if_exists}</span>
<div class="comment-list-one-head">
<a class="comment-list-one-head-name" rel="nofollow" href="${comment.commentAuthorUrl?if_exists}">${comment.commentAuthor?if_exists}</a>
<span class="comment-ua-info" style="display: none">${comment.commentAgent?if_exists}</span>
<#if comment.isAdmin==1>
<label class="native-list-one-head-admin">博主</label>
<span class="comment-list-one-head-admin">博主</span>
</#if>
</div>
<div class="native-list-one-content">
<div class="comment-list-one-content">
<p>${comment.commentContent?if_exists}</p>
</div>
<div class="native-list-one-footer">
<span class="native-list-one-footer-time">${comment.commentDate?string("yyyy-MM-dd HH:mm")}</span>
<span at="${comment.commentId?c}" class="native-list-one-footer-reback">回复</span>
<div class="comment-list-one-footer">
<span class="comment-list-one-footer-time">${comment.commentDate?string("yyyy-MM-dd HH:mm")}</span>
<span at="${comment.commentId?c}" class="comment-list-one-footer-reback">回复</span>
</div>
</section>
<#if comment.childComments?? && comment.childComments?size gt 0>
@ -58,25 +59,25 @@ ${options.native_css?if_exists}
</#if>
</ul>
</#macro>
<ul class="native-list" id="comments-list">
<ul class="comment-list" id="comments-list">
<#if comments?? && comments.getPageList()?size gt 0>
<#list comments.getPageList()?sort_by("commentDate")?reverse as comment>
<li class="native-list-one" id="comment-id-${comment.commentId?c}">
<img class="native-list-one-img" src="//gravatar.loli.net/avatar/${comment.commentAuthorAvatarMd5?if_exists}?s=256&d=${options.native_comment_avatar?default('mm')}">
<li class="comment-list-one" id="comment-id-${comment.commentId?c}">
<img class="comment-list-one-img" src="//gravatar.loli.net/avatar/${comment.commentAuthorAvatarMd5?if_exists}?s=256&d=${options.native_comment_avatar?default('mm')}">
<section>
<div class="native-list-one-head">
<a class="native-list-one-head-name" rel="nofollow" href="${comment.commentAuthorUrl?if_exists}">${comment.commentAuthor?if_exists}</a>
<span class="native-comment-ua-info" style="display: none">${comment.commentAgent?if_exists}</span>
<div class="comment-list-one-head">
<a class="comment-list-one-head-name" rel="nofollow" href="${comment.commentAuthorUrl?if_exists}">${comment.commentAuthor?if_exists}</a>
<span class="comment-ua-info" style="display: none">${comment.commentAgent?if_exists}</span>
<#if comment.isAdmin==1>
<label class="native-list-one-head-admin">博主</label>
<label class="comment-list-one-head-admin">博主</label>
</#if>
</div>
<div class="native-list-one-content">
<div class="comment-list-one-content">
<p>${comment.commentContent?if_exists}</p>
</div>
<div class="native-list-one-footer">
<span class="native-list-one-footer-time">${comment.commentDate?string("yyyy-MM-dd HH:mm")}</span>
<span at="${comment.commentId?c}" class="native-list-one-footer-reback">回复</span>
<div class="comment-list-one-footer">
<span class="comment-list-one-footer-time">${comment.commentDate?string("yyyy-MM-dd HH:mm")}</span>
<span at="${comment.commentId?c}" class="comment-list-one-footer-reback">回复</span>
</div>
</section>
<#if comment.childComments?? && comment.childComments?size gt 0>
@ -116,97 +117,16 @@ ${options.native_css?if_exists}
<script src="/static/plugins/md5/md5.min.js"></script>
<script src="/static/plugins/ua-parser/ua-parser.min.js"></script>
<script src="/static/plugins/OwO/OwO.min.js"></script>
<#if options.comment_activate_power_mode?default("false") == "true">
<script src="/static/plugins/activate-power-mode/activate-power-mode.js"></script>
<script>
var s = new OwO({
logo: 'OωO表情',
container: document.getElementsByClassName('OwO')[0],
target: document.getElementsByClassName('comment-input-content')[0],
position: 'down',
width: '100%',
maxHeight: '210px',
api:"/static/plugins/OwO/OwO.min.json"
});
$(document).ready(function () {
$(".native-list-one-head").each(function (i) {
var uaInfo = $(this).children(".native-comment-ua-info").html();
$(this).append(show_ua(uaInfo));
});
$("#commentAuthor").val(localStorage.getItem("author"));
$("#commentAuthorEmail").val(localStorage.getItem("email"));
$("#commentAuthorUrl").val(localStorage.getItem("url"));
loadAvatar();
});
$('#btn-push').click(function () {
var author = $("#commentAuthor");
var content = $("#commentContent");
var email = $("#commentAuthorEmail");
var url = $("#commentAuthorUrl");
if (author.val() == '' || content.val() == '') {
$(".native-message").html("<span style='color:red'>请输入必填项！</span>");
$(".native-message").fadeIn(1000);
setTimeout(function () {
$(".native-message").fadeOut(1000);
},1500);
return;
}
$(this).attr("disabled","disabled");
$(this).html("提交中...");
$.ajax({
type: 'POST',
url: '/newComment',
async: false,
data: {
'postId': $('input[name=postId]').val(),
'commentContent': $('textarea[name=commentContent]').val(),
'commentAuthor': $('input[name=commentAuthor]').val(),
'commentAuthorEmail': $('input[name=commentAuthorEmail]').val(),
'commentAuthorUrl': $('input[name=commentAuthorUrl]').val(),
'commentAgent': navigator.userAgent,
'commentParent': $('input[name=commentParent]').val()
},
success: function (data) {
localStorage.setItem('author', author.val());
localStorage.setItem('email', email.val());
localStorage.setItem('url', url.val());
if(data.code==1){
$('.comment-input-content').val("");
$(".native-message").html("<span>"+data.msg+"</span>");
}else{
$(".native-message").html("<span style='color:red'>"+data.msg+"</span>");
}
$(".native-message").fadeIn(1000);
setTimeout(function () {
$(".native-message").fadeOut(1000);
$("#btn-push").removeAttr("disabled");
$("#btn-push").html("提交");
window.location.reload();
},1500);
}
});
});
$('.native-list-one-footer-reback').click(function () {
var at = $(this).attr("at");
var commentParentAuthor = $('#comment-id-'+at).find(".native-list-one-head-name").html();
$('#commentParent').val(at);
$('#commentContent').val("@"+commentParentAuthor+": ");
$('#commentContent').focus();
});
function loadAvatar() {
$(".comment-author-avatar").attr("src","//gravatar.loli.net/avatar/"+md5(localStorage.getItem("email"))+"?s=256&d=${options.native_comment_avatar?default('mm')}");
if($('input[name=commentAuthorEmail]').val()!='' && $('input[name=commentAuthorEmail]').val()!=null){
$(".comment-author-avatar").attr("src","//gravatar.loli.net/avatar/"+md5($('input[name=commentAuthorEmail]').val())+"?s=256&d=${options.native_comment_avatar?default('mm')}");
}
}
var parser = new UAParser();
function show_ua(string){
parser.setUA(string);
var uua = parser.getResult();
if(uua.os.version=='x86_64') {
uua.os.version = 'x64';
}
var browser = uua.browser.name+' '+uua.browser.version;
var os = uua.os.name + ' ' + uua.os.version;
return '<span class="ua">'+browser+'</span><span class="ua">'+os+'</span>';
}
POWERMODE.colorful = true;
POWERMODE.shake = false;
document.body.addEventListener('input', POWERMODE);
</script>
</#if>
<script>
var avatarType = "${options.native_comment_avatar?default('mm')}";
</script>
<script src="/static/js/comment.js"></script>
</@compress>