feature(all): add custom blocks

ajax-comment/app.css

@@ -0,0 +1,25 @@
+.butterBar {
+    margin-left: 36%;
+    max-width: 640px;
+    position: fixed;
+    text-align: center;
+    top: 0;
+    width: 58%;
+    z-index: 800
+}
+
+.butterBar--center {
+    left: 50%;
+    margin-left: -320px
+}
+
+.butterBar-message {
+    background: rgba(255, 255, 255, 0.97);
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.35);
+    display: inline-block;
+    font-size: 14px;
+    margin-bottom: 0;
+    padding: 12px 25px
+}

ajax-comment/app.js

@@ -0,0 +1,69 @@
+$(document).ready(function ($) {
+    var __cancel = $('#cancel-comment-reply-link'),
+        __cancel_text = __cancel.text(),
+        __list = 'commentlist';//your comment wrapprer
+    $(document).on("submit", "#commentform", function () {
+        $.ajax({
+            url: ajaxcomment.ajax_url,
+            data: $(this).serialize() + "&action=ajax_comment",
+            type: $(this).attr('method'),
+            beforeSend: faAjax.createButterbar("提交中...."),
+            error: function (request) {
+                var t = faAjax;
+                t.createButterbar(request.responseText);
+            },
+            success: function (data) {
+                $('textarea').each(function () {
+                    this.value = ''
+                });
+                var t = faAjax,
+                    cancel = t.I('cancel-comment-reply-link'),
+                    temp = t.I('wp-temp-form-div'),
+                    respond = t.I(t.respondId),
+                    post = t.I('comment_post_ID').value,
+                    parent = t.I('comment_parent').value;
+                if (parent != '0') {
+                    $('#comment-nav').before('<ol class="children">' + data + '</ol>');
+                } else if (!$('.' + __list).length) {
+                    if (ajaxcomment.formpostion == 'bottom') {
+                        $('#respond').before('<ol class="' + __list + '">' + data + '</ol>');
+                    } else {
+                        $('#respond').after('<ol class="' + __list + '">' + data + '</ol>');
+                    }
+
+                } else {
+                    if (ajaxcomment.order == 'asc') {
+                        $('.' + __list).append(data); // your comments wrapper
+                    } else {
+                        $('.' + __list).prepend(data); // your comments wrapper
+                    }
+                }
+                t.createButterbar("提交成功");
+                cancel.style.display = 'none';
+                cancel.onclick = null;
+                t.I('comment_parent').value = '0';
+                if (temp && respond) {
+                    temp.parentNode.insertBefore(respond, temp);
+                    temp.parentNode.removeChild(temp)
+                }
+            }
+        });
+        return false;
+    });
+    faAjax = {
+        I: function (e) {
+            return document.getElementById(e);
+        },
+        clearButterbar: function (e) {
+            if ($(".butterBar").length > 0) {
+                $(".butterBar").remove();
+            }
+        },
+        createButterbar: function (message) {
+            var t = this;
+            t.clearButterbar();
+            $("body").append('<div class="butterBar butterBar--center"><p class="butterBar-message">' + message + '</p></div>');
+            setTimeout("$('.butterBar').remove()", 3000);
+        }
+    };
+});

ajax-comment/main.php

@@ -0,0 +1,84 @@
+<?php
+define('AC_VERSION','2.0.0');
+
+if ( version_compare( $GLOBALS['wp_version'], '4.4-alpha', '<' ) ) {
+	wp_die('请升级到4.4以上版本');
+}
+
+if(!function_exists('fa_ajax_comment_scripts')) :
+
+    function fa_ajax_comment_scripts(){
+        if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
+            wp_enqueue_script( 'comment-reply' );
+        }
+        wp_enqueue_style( 'ajax-comment', get_template_directory_uri() . '/ajax-comment/app.css', array(), AC_VERSION );
+        wp_enqueue_script( 'ajax-comment', get_template_directory_uri() . '/ajax-comment/app.js', array(), AC_VERSION , true );
+        wp_localize_script( 'ajax-comment', 'ajaxcomment', array(
+            'ajax_url'   => admin_url('admin-ajax.php'),
+            'order' => get_option('comment_order'),
+            'formpostion' => 'bottom', //默认为bottom，如果你的表单在顶部则设置为top。
+        ) );
+    }
+
+endif;
+
+if(!function_exists('fa_ajax_comment_err')) :
+
+    function fa_ajax_comment_err($a) {
+        header('HTTP/1.0 500 Internal Server Error');
+        header('Content-Type: text/plain;charset=UTF-8');
+        echo $a;
+        exit;
+    }
+
+endif;
+
+if(!function_exists('fa_ajax_comment_callback')) :
+
+    function fa_ajax_comment_callback(){
+        $comment = wp_handle_comment_submission( wp_unslash( $_POST ) );
+        if ( is_wp_error( $comment ) ) {
+            $data = $comment->get_error_data();
+            if ( ! empty( $data ) ) {
+            	fa_ajax_comment_err($comment->get_error_message());
+            } else {
+                exit;
+            }
+        }
+        $user = wp_get_current_user();
+        do_action('set_comment_cookies', $comment, $user);
+        $GLOBALS['comment'] = $comment; //根据你的评论结构自行修改，如使用默认主题则无需修改
+        ?>
+    <li class="comment" id="li-comment-<?php comment_ID(); ?>">
+        <div class="media">
+            <div class="media-left">
+                <?php if (function_exists('get_avatar') && get_option('show_avatars')) {
+                    echo get_avatar($comment, 48);
+                } ?>
+            </div>
+            <div class="media-body">
+                <?php printf(__('<p class="author_name">%s'), get_comment_author_link());
+                echo " " . TM_GetUserAgent($comment->comment_agent) . "</p>"; ?>
+                <?php if ($comment->comment_approved == '0') : ?>
+                    <em>评论等待审核...</em><br/>
+                <?php endif; ?>
+                <div class="comment-metadata">
+   			<span class="comment-pub-time">
+   				<?php echo get_comment_time('Y-m-d H:i'); ?>
+   			</span>
+                    <span class="comment-btn-reply">
+ 				<i class="mdui-icon material-icons"
+                   style="font-size: 16px">reply</i> <?php comment_reply_link(array_merge($args, array('reply_text' => '回复', 'depth' => $depth, 'max_depth' => $args['max_depth']))) ?> <?php edit_comment_link(__('(Edit)'), '&nbsp;&nbsp;', ''); ?>
+   			</span>
+                </div>
+                <div class="tm-comment-text"><?php comment_text(); ?></div>
+            </div>
+        </div>
+        <?php die();
+    }
+
+endif;
+
+add_action( 'wp_enqueue_scripts', 'fa_ajax_comment_scripts' );
+add_action('wp_ajax_nopriv_ajax_comment', 'fa_ajax_comment_callback');
+add_action('wp_ajax_ajax_comment', 'fa_ajax_comment_callback');

comments.php

@@ -4,10 +4,11 @@
     return;
 ?>
 <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/comments.css">
-<div id="comments" class="responsesWrapper mdui-typo-subheading mdui-m-a-1 mdui-text-color-grey-600">
+<div id="comments" class="responsesWrapper commentshow mdui-typo-subheading mdui-m-a-1 mdui-text-color-grey-600">
     <meta content="UserComments:<?php echo number_format_i18n(get_comments_number()); ?>" itemprop="interactionCount">
     <h3 class="comments-title">共有 <span
                 class="commentCount"><?php echo number_format_i18n(get_comments_number()); ?></span> 条评论</h3>
+    <div class="comments-loading">Loading...</div>
     <ol class="commentlist">
         <?php
         wp_list_comments(array(
@@ -19,7 +20,7 @@ class="commentCount"><?php echo number_format_i18n(get_comments_number()); ?></s
         ));
         ?>
     </ol>
-    <nav class="navigation comment-navigation u-textAlignCenter" data-fuck="<?php the_ID(); ?>">
+    <nav class="comment-navigation u-textAlignCenter" data-fuck="<?php the_ID(); ?>" id="comment-nav">
         <?php paginate_comments_links(array('prev_next' => true)); ?>
     </nav>
     <?php if (comments_open()) : ?>