Update lưu trạng thái cho chức năng sắp xếp nhận xét theo thời gian cho Threaded Comments

Từ bài viết của tác giả hung1001 tại bài viết này và mình chỉ update thêm tính năng lưu trạng thái sắp xếp vào localStorage.
Mình sẽ hướng dẫn lại từ đầu nhé!

Thêm bộ sắp xếp vào vị trí mong muốn

<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>

Giao diện

.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}

JS để tiện ích hoạt động

Đoạn JS bên dưới mình đã update để có thêm tính năng lưu trạng thái

$.fn.reverseChildren = function() {
    return this.each(function() {
        var $this = $(this);
        $this.children().each(function() {
            $this.prepend(this);
        });
    });
};
function reverseCommentsOrder() {
    $(".comments-content ol").reverseChildren();
}
$(document).ready(function() {
    if (localStorage.getItem("commentsOrder") === "reversed") {
        reverseCommentsOrder();
    }
});
$(".sort-option").on("change", function() {
    reverseCommentsOrder();
    localStorage.setItem("commentsOrder", "reversed");
});

Lưu ý: Template của bạn phải có thư viện jQuery mới hoạt động
Chúc anh em một ngày vui! 😁