From 0b979b03e426ba5d9646a5c83c8967c74011cc38 Mon Sep 17 00:00:00 2001 From: ohmyga <40896676+ohmyga233@users.noreply.github.com> Date: Wed, 26 Feb 2020 23:19:42 +0800 Subject: =?UTF-8?q?=F0=9F=94=A8=20=E4=BF=AE=E5=A4=8D=E6=9A=97=E8=89=B2?= =?UTF-8?q?=E7=99=BD=E8=89=B2=E8=83=8C=E7=99=BD=E5=AD=97=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/main/dark.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/assets/css/main/dark.css b/assets/css/main/dark.css index 6b67bf0..63aeab3 100644 --- a/assets/css/main/dark.css +++ b/assets/css/main/dark.css @@ -249,13 +249,15 @@ .body-dark .search-close, .body-dark .search-form button, .body-darl .login a, -.body-dark .alert, .body-dark .banner-content.banner-font-black, .body-dark .post-pagenav a, .body-dark .comment-submit, .body-dark .header-meta a { color:#fafafa!important } +.body-dark .comment .cancel-comment-reply a { + color: #000000!important +} .body-dark .options-theme-label { color:#5a5a5a!important } -- cgit v1.2.3 From c08f72691da5f1af30c699e44536b7367a98ce1a Mon Sep 17 00:00:00 2001 From: ohmyga <40896676+ohmyga233@users.noreply.github.com> Date: Wed, 26 Feb 2020 23:23:01 +0800 Subject: =?UTF-8?q?=F0=9F=91=8D=20=E4=BD=BF=E8=AF=84=E8=AE=BA=E6=94=AF?= =?UTF-8?q?=E6=8C=81=20AJAX=20=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/main/comment.css | 31 +++++ assets/js/comment.ajax.js | 315 ++++++++++++++++++++++++++++++-------------- assets/js/miracles.min.js | 2 + includes/comments.php | 8 +- includes/footer.php | 1 + includes/head.php | 2 +- 6 files changed, 254 insertions(+), 105 deletions(-) diff --git a/assets/css/main/comment.css b/assets/css/main/comment.css index 74a8bb3..9b2390c 100644 --- a/assets/css/main/comment.css +++ b/assets/css/main/comment.css @@ -257,4 +257,35 @@ #response { text-align: center; margin-top: 60px; +} + +/* ===== 从左到右淡入 ===== */ +@keyframes fadein { + 0% { + opacity: 0; + transform: translateX(5vh); + } + + 100% { + opacity: 1; + transform: translateX(0); + } +} + +@-webkit-keyframes fadein { + 0% { + opacity: 0; + transform: translateX(5vh); + } + + 100% { + opacity: 1; + transform: translateX(0); + } +} + +.comment-animation-fadein { + animation: fadein; + animation-duration: 0.3s; + -webkit-animation: fadein 0.3s; } \ No newline at end of file diff --git a/assets/js/comment.ajax.js b/assets/js/comment.ajax.js index 44d770e..af12bae 100644 --- a/assets/js/comment.ajax.js +++ b/assets/js/comment.ajax.js @@ -1,109 +1,224 @@ /** * Ajax Comment - * 半成品，还有报错，所以没有引用 + * Last Update: 2020/02/26 */ -var replyTo = ''; -var bindButton = function() { - //绑定“评论回复”和“取消回复”的事件 - $(".comment-reply a").click( - function () { - replyTo = $(this).parent().parent().parent().parent().parent().parent().attr("id"); - } - ); - $(".cancel-comment-reply a").click(function () { replyTo = ''; }); -} -function commentCounts() { - //显示在评论区的评论数加一 - var counts = parseInt($(".comment-title").text()); - $(".comment-title").html($(".comment-title").html().replace(/\d+/, counts + 1)); + +/** + * Tmp + */ +var dataTmp = { + comments: {} }; -function beforeSendComment() { - //发送前的一些处理 - $(".comment-submit button").text("提交中"); -} -function afterSendComment(ok) { - //发送后的处理 - //清空replyTo变量，以及结束过渡动画、重新绑定回复按钮等等 - //ok作为一个评论或失败的标志 - - if (ok) { - $(".comment-textarea").val(''); - replyTo = ''; + +/** + * 评论部分 + */ +var MiraclesComment = { + //评论核心函数 + core: function() { + var commentID = $('.comment-box-id').attr('id'); + window.TypechoComment = { + dom : function (id) { + return document.getElementById(id); + }, + + create : function (tag, attr) { + var el = document.createElement(tag); + + for (var key in attr) { + el.setAttribute(key, attr[key]); + } + + return el; + }, + + reply : function (cid, coid) { + var comment = this.dom(cid), parent = comment.parentNode, + response = this.dom(commentID), input = this.dom('comment-parent'), + form = 'form' == response.tagName ? response : response.getElementsByTagName('form')[0], + textarea = response.getElementsByTagName('textarea')[0]; + + if (null == input) { + input = this.create('input', { + 'type' : 'hidden', + 'name' : 'parent', + 'id' : 'comment-parent' + }); + + form.appendChild(input); } - bindButton(); -} -//主体部分 -beforeSendComment(); -$("#comment-form").submit(function() { - //监听评论表单submit事件 - var commentData = $(this).serializeArray(); //获取表单POST的数据 - beforeSendComment(); - $.ajax({ - type: $(this).attr('method'), - url: $(this).attr('action'), - data: commentData, - error: function(e) { - //失败的处理 - //这里比较随意，比如可以直接刷新页面 - console.log('Ajax Comment Error'); - window.location.realod(); - }, - success: function(data) { - if (!$('.comments', data).length) { - var msg = $('title').eq(0).text().trim().toLowerCase() === 'error' ? $('.container', data).eq(0).text() : '评论提交失败！'; - alertSend(msg); - afterSendComment(false); - return false; - } - } - }) + + input.setAttribute('value', coid); + + if (null == this.dom('comment-form-place-holder')) { + var holder = this.create('div', { + 'id' : 'comment-form-place-holder' + }); + + response.parentNode.insertBefore(holder, response); + } + + comment.appendChild(response); + this.dom('cancel-comment-reply-link').style.display = ''; + + if (null != textarea && 'text' == textarea.name) { + textarea.focus(); + } + return false; -}); -var newComment; -/** 获取新评论的id */ -newCommentId = $(".comment-list", data).html().match(/id=\"?comment-\d+/g).join().match(/\d+/g).sort(function (a, b) { return a - b }).pop(); -if(replyTo === '') { - if(!$('.comment-list').length) { - //检查是否已有评论 - newComment = $("#li-comment-" + newCommentId, data); - //没有的话需要先嵌入评论列表的结构 - //具体结构需要参照评论的模板而定，参照下图 - $('.comment-title').after('
    '); - //插入评论 - $('.comment-list').first().prepend((newComment).addClass('animated fadeInUp')); - } - else if($('.prev').length) { - //这里是当前评论不在第一页的情况 - //所以这里可以进行比如跳转到第一页的操作，当然也可以进行别的操作 - $('.comment-pagenav ul li a').eq(1).click(); - } - else { - //当前页面直接在最前面插入评论 - newComment = $("#li-comment-" + newCommentId, data); - $('.comment-list').first().prepend((newComment).addClass('animated fadeInUp')); - } - //页面滑动到评论列表头部 - $('html,body').animate({scrollTop:$('.comment-title').offset().top - 100},1000); + }, + + cancelReply : function () { + var response = this.dom(commentID), + holder = this.dom('comment-form-place-holder'), input = this.dom('comment-parent'); + + if (null != input) { + input.parentNode.removeChild(input); } -else { - //取数据 - newComment = $("#li-comment-" + newCommentId, data); - //处理子级评论 - if ($('#' + replyTo).find('.comment-children').length) { - //当前父评论已经有嵌套的结构 - //直接插入新的评论 - $('#' + replyTo + ' .comment-children .comment-list').first().prepend((newComment).addClass('animated fadeInUp')); - TypechoComment.cancelReply(); + + if (null == holder) { + return true; } - else { - //当前父评论没有嵌套的结构 - //先构建嵌套的结构再进插入子评论 - //插入的结构视模板具体情况而定 - $('#' + replyTo).append('
      '); - $('#' + replyTo + ' .comment-children .comment-list').first().prepend((newComment).addClass('animated fadeInUp')); - TypechoComment.cancelReply(); + + this.dom('cancel-comment-reply-link').style.display = 'none'; + holder.parentNode.insertBefore(response, holder); + return false; + } + }; + }, + + //提交评论 + submitComment: function() { + //如果获取不到评论提交 URL 则终止 + if(!$('.comment-box-id').attr('data-commentUrl')) { return false; } + + /* ===== 检查是否完整 =====*/ + if (!$('#comment-form #textarea').val()) { + alertSend('请填写评论内容！'); + return false; + } + + if ($('#comment-form .comment-input #author').length && !$('#comment-form .comment-input #author').val()) { + alertSend('请填写您的昵称！'); + return false; + } + + //评论前需要做的事情 + function beforeComment() { + //禁用按钮 + $('#comment-form .comment-submit').attr('disabled', true); + }; + beforeComment(); + + //评论后需要做的事情 + function afterComment(status) { + //取消禁用评论按钮 + $('#comment-form .comment-submit').removeAttr('disabled'); + + //判断是否评论成功 + if(status) { + //如果成功 + alertSend('评论提交成功！'); + //清空被回复 ID + dataTmp.comments.replyTo = ''; + }else{ + //如果失败 + alertSend('评论提交失败！'); + } + + //无论是否成功都要重新绑定回复按钮 ID + MiraclesComment.bindReplyBtn(); + } + + //AJAX 提交 + $.ajax({ + type: 'POST', + url: $('.comment-box-id').attr('data-commentUrl'), + data: $('#comment-form').serialize(), + success: function(data) { + var data = $("").append($(data)); + var $html = $("title", data); //返回的内容 + + //评论成功 + if ($html.html() != 'Error') { + $('#comment-form #textarea').val(''); //清空评论框 + + //获取新评论 ID + if (data.html()) { + dataTmp.comments.NewID = $(".comment-list", data).html().match(/id=\"?comment-\d+/g).join().match(/\d+/g).sort(function (a, b) { return a - b }).pop(); + }else{ + alertSend('评论失败！
      原因：[提交失败，请刷新页面]      '); + return false; + } + + console.log(dataTmp.comments.replyTo); + + //如果是父评论 + if('' === dataTmp.comments.replyTo) { + if(!$('.comment-list').length) { + //检查是否已有评论 + //如果没有先插入评论列表基本结构 + dataTmp.comments.NewComment = $("#comment-" + dataTmp.comments.NewID, data); + $('.comment').prepend('

      已有 0 条评论

      '); + $('.comment .comment-list').first().prepend((dataTmp.comments.NewComment).addClass('comment-animation-fadein')); + } else if($('.prev').length) { + //如果不在第一页 + $('.comment-pagenav li a').eq(1).click(); + } else { + //当前在第一页 + dataTmp.comments.NewComment = $("#comment-" + dataTmp.comments.NewID, data); + $('.comment .comment-list').first().prepend((dataTmp.comments.NewComment).addClass('comment-animation-fadein')); + } + + } else { + //如果是子评论 + dataTmp.comments.NewComment = $("#comment-" + dataTmp.comments.NewID, data); + + if ($('#'+dataTmp.comments.replyTo).find('.comment-children').length) { + //当前父评论已经有嵌套的结构 + //直接插入新的评论 + $('#'+ dataTmp.comments.replyTo +' .comment-children .comment-list').first().prepend((dataTmp.comments.NewComment).addClass('comment-animation-fadein')); + TypechoComment.cancelReply(); + } else { + //当前父评论没有嵌套的结构 + //先构建嵌套的结构再进插入子评论 + $('#'+ dataTmp.comments.replyTo).append('
      '); + $('#'+ dataTmp.comments.replyTo +' .comment-children .comment-list').first().prepend((dataTmp.comments.NewComment).addClass('comment-animation-fadein')); + TypechoComment.cancelReply(); + } + } + + //评论数量增加 + if (/\d+/.test($('.comment .comment-container .comment-title').text())) { + var counts = parseInt($('.comment .comment-container .comment-title').text().replace(/[^0-9]/ig,"")); + $('.comment .comment-container .comment-title').html($('.comment .comment-container .comment-title').html().replace(/\d+/, counts + 1)); + } + + //评论后需要处理的事情 + afterComment(true); + }else{ + //评论失败 + afterComment(false); } -} -commentCounts(); -afterSendComment(true); -alertSend("评论提交成功！"); \ No newline at end of file + } + }); + }, + + //为回复/取消回复按钮绑定事件 + bindReplyBtn: function() { + //如果评论列表不存在 + if(!$('.comment').length) { return false; } + //初始化被回复评论变量 + dataTmp.comments.replyTo = ''; + + for(let i=0; i<$(".comment-reply a").length; ++i) { + $(".comment-reply a")[i].addEventListener('click', function() { + dataTmp.comments.replyTo = $(this).parent().parent().parent().parent().parent().attr("id"); + }); + } + } +}; + +//执行 +MiraclesComment.core(); +MiraclesComment.bindReplyBtn(); \ No newline at end of file diff --git a/assets/js/miracles.min.js b/assets/js/miracles.min.js index ebcf8ef..97c1d86 100644 --- a/assets/js/miracles.min.js +++ b/assets/js/miracles.min.js @@ -430,6 +430,8 @@ if (loadPjax = true) { panguLoad(); getWordsNum(); navColor(); + MiraclesComment.bindReplyBtn(); //Bind Reply Button + MiraclesComment.core(); //Comment Core //Others afterPjax(); }); diff --git a/includes/comments.php b/includes/comments.php index cc53bc1..5bed2d5 100644 --- a/includes/comments.php +++ b/includes/comments.php @@ -9,7 +9,7 @@ } $commentLevelClass = $comments->_levels > 0 ? ' comment-child' : ' comment-parent'; //评论层数大于0为子级，否则是父级 ?> -
      theId(); ?>" class="comment-body_levels > 0) { echo ' comment-child'; $comments->levelsAlt(' comment-level-odd', ' comment-level-even'); @@ -49,7 +49,7 @@ echo $commentClass; fields->commentShow == 0)://如果显示评论列表 ?> have())://如果有评论 则显示 ?>
      -

      commentsNum(_t('暂无评论'), _t('仅有一条评论'), _t('已有 %d 条评论')); ?>

      +

      commentsNum(_t('暂无评论'), _t('已有 1 条评论'), _t('已有 %d 条评论')); ?>

      listComments(array( 'before' => '
      ', 'after' => '
      ', @@ -69,7 +69,7 @@ echo $commentClass;
      allow('comment')): ?> -
      +
      cancelReply(); ?>
      @@ -95,7 +95,7 @@ echo $commentClass;

      - +

      diff --git a/includes/footer.php b/includes/footer.php index 6157c8b..265585c 100644 --- a/includes/footer.php +++ b/includes/footer.php @@ -33,6 +33,7 @@ beforePjax = function() {NProgress.start();}; afterPjax = function() {owoLoad();options->pjax_complete(); ?>}; +