/js
jQuery(document).ready(function($) {
$('.option-order ul').hide();
// Toggle ul khi click vào option
$('.option-order .option').on('click', function(e) {
e.preventDefault();
$(this).siblings('ul').slideToggle(200);
});
// Xử lý khi chọn li trong option-order
$('.option-order ul li').on('click', function() {
var selectedText = $(this).text();
var order = $(this).data('order');
var $option = $(this).closest('.option-order').find('.option');
var $container = $(this).closest('.last-blog, .all-list-blog');
var $listBlog = $container.find('.list-blog');
var categorySlug = $('.list-cate .active').data('slug');
$option.text(selectedText);
$(this).parent().slideUp(200);
var isLatest = $container.hasClass('last-blog');
var args = {
post_type: 'post',
posts_per_page: isLatest ? 3 : 9,
orderby: 'date',
order: order,
offset: (isLatest || order === 'DESC') ? (isLatest ? 0 : 3) : 0,
category_name: categorySlug === 'all' ? '' : categorySlug
};
$.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'POST',
data: {
action: 'load_posts_by_order',
query_args: args,
is_latest: isLatest
},
beforeSend: function() {
$listBlog.addClass('loading'); // Thêm class loading
},
success: function(response) {
$listBlog.removeClass('loading').html(response); // Xóa class và cập nhật
}
});
});
// Đóng ul khi click ngoài
$(document).on('click', function(e) {
if (!$(e.target).closest('.option-order').length) {
$('.option-order ul').slideUp(200);
}
});
// Xử lý lọc theo category
$('.list-cate ul li a').on('click', function(e) {
e.preventDefault();
$('.list-cate .active').removeClass('active');
$(this).addClass('active');
var categorySlug = $(this).data('slug');
$('.last-blog, .all-list-blog').each(function() {
var $container = $(this);
var $listBlog = $container.find('.list-blog');
var isLatest = $container.hasClass('last-blog');
var order = $container.find('.option-order .option').text() === 'Newest' ? 'DESC' : 'ASC';
var args = {
post_type: 'post',
posts_per_page: isLatest ? 3 : 9,
orderby: 'date',
order: order,
offset: (isLatest || order === 'DESC') ? (isLatest ? 0 : 3) : 0,
category_name: categorySlug === 'all' ? '' : categorySlug
};
$.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'POST',
data: {
action: 'load_posts_by_order',
query_args: args,
is_latest: isLatest
},
beforeSend: function() {
$listBlog.addClass('loading'); // Thêm class loading
},
success: function(response) {
$listBlog.removeClass('loading').html(response); // Xóa class và cập nhật
}
});
});
});
// Xử lý load thêm bài viết cho All Blog List
$('.btn-see-more').on('click', function(e) {
e.preventDefault();
var $listBlog = $('.all-list-blog .list-blog');
var currentOffset = $listBlog.find('.box-blog').length;
var order = $('.all-list-blog .option-order .option').text() === 'Newest' ? 'DESC' : 'ASC';
var categorySlug = $('.list-cate .active').data('slug');
var args = {
post_type: 'post',
posts_per_page: 9,
orderby: 'date',
order: order,
offset: order === 'DESC' ? currentOffset + 3 : currentOffset,
category_name: categorySlug === 'all' ? '' : categorySlug
};
$.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'POST',
data: {
action: 'load_posts_by_order',
query_args: args,
is_latest: false
},
beforeSend: function() {
$listBlog.addClass('loading'); // Thêm class loading
$('.btn-see-more').text('Loading...');
},
success: function(response) {
$listBlog.removeClass('loading'); // Xóa class loading
if (response.trim()) {
$listBlog.append(response);
$('.btn-see-more').text('See more posts');
} else {
$('.btn-see-more').text('No more posts');
}
}
});
});
});
/css loadding
.list-blog {
position: relative;
}
.list-blog.loading::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.7); /* Nền mờ */
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}
.list-blog.loading::before {
content: '';
width: 40px;
height: 40px;
border: 4px solid #ccc;
border-top: 4px solid #007bff; /* Màu vòng xoay */
border-radius: 50%;
animation: spin 1s linear infinite;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 11;
}
@keyframes spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}