Thêm chức năng sắp xếp bình luận theo thời gian cho Threaded Comments

Mặc định khi bạn xuất bản bình luận trên blog thì bình luận đó sẽ được đẩy xuống cuối, điều này làm cho việc hiển thị không được đẹp vì theo thói quen của chúng ta, cái gì mới nhất phải được đưa lên đầu. Trong bài viết này tôi sẽ cùng các bạn tạo thêm chức năng sắp xếp bình luận theo thời gian bằng việc sử dụng các method js hoặc jQuery cơ bản

Ok rất đơn giản thôi, blogger sắp xếp bình luận từ cũ nhất đến mới nhất, nếu ta muốn đảo ngược lại chỉ cần lật ngược lại các child của thằng .comments-content ol (đây là selector mặc định khi dùng blogger comment, nếu bạn tự code hệ thống mới phải trỏ cho đúng)

Bước chung

Bạn tìm đến thẻ <div class='comments-content'> và chèn code markup theo mẫu sau (lưu ý chỉ chèn phần tôi đánh dấu thôi nhé)

<div class='comments-content'>
    <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threadedCommentJs' />
    </b:if>

    <!-- HTML Markup go here -->
    <div class='sort-comment'>
        <span class='sort-title'>Sort by</span>
        <div class='sort-sel'>
           <select class='sort-option'>
              <option selected='selected' value='newest'>Newest</option>
              <option value='oldest'>Oldest</option>
           </select>
        </div>
    </div>
    <!-- End HTML Markup -->

    <div id='comment-holder'>
        <data:post.commentHtml/>
    </div>
</div>

Viết CSS ngay dưới vị trí kết thúc <div class='comments-content'>

<style type='text/css'>/*<![CDATA[*/
.sort-comment{text-align:right}
.sort-comment .sort-title{font-size:14px;display:inline-block;margin-right:3px}
.sort-comment .sort-sel{display:inline-block;position:relative}
.sort-comment .sort-sel::after,.sort-comment .sort-sel::before{position:absolute;content:"";right:7px;border-style:solid;border-width:4px;width:0;height:0}
.sort-comment .sort-sel::after{top:2px;border-color:transparent transparent #333}
.sort-comment .sort-sel::before{bottom:2px;border-color:#333 transparent transparent}
.sort-comment .sort-sel .sort-option{cursor:pointer;background:#fff;border:1px solid #aaa;padding:2px 20px 2px 7px;color:#656565;font-size:14px;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-moz-appearance:window;-webkit-appearance:none;outline:0}
/*]]>*/</style>

Cách 1. Sử dụng jQuery

Bạn tự tích hợp thư viện jQuery nếu chưa có

Dán tiếp script sau ngay dưới thẻ style bên trên

<script type='text/javascript'>//<![CDATA[
// by Hung1001

$.fn.reverseChildren = function() {
    return this.each(function() {
        var $this = $(this);
        $this.children().each(function() {
            $this.prepend(this);
        });
    });
};
// Định nghĩa method mới

$(".comments-content ol").reverseChildren(); // on load

// on change
$(".sort-option").on("change", function() {
  $(".comments-content ol").reverseChildren();
})
//]]>
</script>

Cách 2. Sử dụng Pure JavaScript 

Nếu bạn không muốn dùng jQuery thì có thể dùng script sau

<script type='text/javascript'>//<![CDATA[
// by Hung1001
HTMLElement.prototype.reverseChildren = function() {
    for (var c = this.children, d = 0; d < c.length; d++) this.insertBefore(c[d], this.firstChild)
}
// Định nghĩa method mới

var _cmt = document.querySelector(".comments-content ol");
_cmt.reverseChildren();
// on load

// on change
document.getElementsByClassName("sort-option")[0].addEventListener("change", function() {
    _cmt.reverseChildren();
})
//]]>
</script>

Lưu mẫu lại và kiểm tra thành quả !

Thủ thuật đơn giản vậy thôi chỉ cần bạn hiểu được bản chất vấn đề là mọi chuyện sẽ không có gì khó, tuy đơn giản nhưng cũng khá quan trọng với trải nghiệm người dùng

Để lại bình luận nếu bạn gặp khó khăn và chúc thành công !