kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(pagination): align AJAX load-more loading state with reference

Browse Source 
Loading indication now matches the reference theme's post_ajax() contract:

- Stop overwriting the 加载更多 button label with 正在加载...; the button
  keeps its own text and the .post_ajax_loader skeleton carries the busy
  state instead.
- Add the reference fallback loader (.loading ring + 加载中...) when no
  skeleton exists in the DOM, and reinsert the skeleton after the last
  card on every page load like beforeSend does.
- Retext the loader string to 加载中... (zib__('loading')) and make the
  ajax_trigger default a translatable string.
- Route ajax-list.js / comments.js / widgets frontend.js through the
  .is-loading class instead of inline display, which outranked the class
  rule and could freeze the skeleton shut.
- Drop the search.php inline display:none that defeated .is-loading, and
  remove the unproduced .post-ajax-loader / [data-aksrt-ajax-loader] shims.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
kate522
2026-10-03 17:23:44 +08:00
co-authored by Claude Fable 5
parent e506309434
commit b5f37d6d46
10 changed files with 59 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/build/public.css
+8 -7
View File
@@ -6773,17 +6773,18 @@ body.aksrt-modal-runtime-open {
min-height: 80px;
}
/* 骨架默认收起，由 pagination.js 的 showSkeleton() 加 .is-loading 展开。
这里不依赖 .ajaxpager 祖先：首页 tab pane、归档流、评论列表的 loader
层级各不相同，统一按类名自身控制。 */
.post_ajax_loader,
.post-ajax-loader {
/* 骨架默认收起，由 JS 加 .is-loading 展开（参考主题 post_ajax 的 beforeSend
remove + fadeIn / success .hide() 语义等价物）。
这里不依赖 .ajaxpager 祖先：首页 tab pane、归档流、评论列表的 loader 层级各不
相同，而且并非每个 loader 都在 bootstrap 的 .tab-pane 里（bootstrap 只负责
隐藏 tab-pane 内的骨架），统一按类名自身控制。 */
.post_ajax_loader {
display: none;
}
.post_ajax_loader.is-loading,
.post-ajax-loader.is-loading {
.post_ajax_loader.is-loading {
display: block;
animation: aksrtFadeIn 0.2s ease both;
}
.ajax-item.is-fading {
assets/css/build/public.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/css/frontend/modal-runtime.css
+8 -7
View File
@@ -257,17 +257,18 @@ body.aksrt-modal-runtime-open {
min-height: 80px;
}
/* 骨架默认收起，由 pagination.js 的 showSkeleton() 加 .is-loading 展开。
这里不依赖 .ajaxpager 祖先：首页 tab pane、归档流、评论列表的 loader
层级各不相同，统一按类名自身控制。 */
.post_ajax_loader,
.post-ajax-loader {
/* 骨架默认收起，由 JS 加 .is-loading 展开（参考主题 post_ajax 的 beforeSend
remove + fadeIn / success .hide() 语义等价物）。
这里不依赖 .ajaxpager 祖先：首页 tab pane、归档流、评论列表的 loader 层级各不
相同，而且并非每个 loader 都在 bootstrap 的 .tab-pane 里（bootstrap 只负责
隐藏 tab-pane 内的骨架），统一按类名自身控制。 */
.post_ajax_loader {
display: none;
}
.post_ajax_loader.is-loading,
.post-ajax-loader.is-loading {
.post_ajax_loader.is-loading {
display: block;
animation: aksrtFadeIn 0.2s ease both;
}
.ajax-item.is-fading {
assets/js/core/ajax-list.js
+5 -10
View File
@@ -48,13 +48,13 @@
} catch (err) {}
}
// 骨架开关统一走 .is-loading（modal-runtime.css），不写 inline display：
// 内联样式优先级高于类规则，一旦残留会让后续骨架永远打不开。
function showLoader(container) {
if (!container) return;
var loader = container.querySelector(".post_ajax_loader, .post-ajax-loader, [data-aksrt-ajax-loader]");
var loader = container.querySelector(".post_ajax_loader");
if (loader) {
loader.classList.add("is-loading");
loader.hidden = false;
loader.style.display = "";
return;
}
container.classList.add("is-ajax-loading");
@@ -62,13 +62,10 @@
function hideLoader(container) {
if (!container) return;
var loader = container.querySelector(".post_ajax_loader, .post-ajax-loader, [data-aksrt-ajax-loader]");
var loader = container.querySelector(".post_ajax_loader");
if (loader) {
loader.classList.remove("is-loading");
if (loader.hasAttribute("data-aksrt-ajax-loader-hide")) {
loader.hidden = true;
loader.style.display = "none";
}
return;
}
container.classList.remove("is-ajax-loading");
}
@@ -188,8 +185,6 @@
Array.prototype.slice.call(container.children).forEach(function (child) {
if (
child.classList.contains("post_ajax_loader") ||
child.classList.contains("post-ajax-loader") ||
child.hasAttribute("data-aksrt-ajax-loader") ||
child.classList.contains("ajax-pag")
) {
return;
assets/js/core/comments.js
+2 -1
View File
@@ -465,7 +465,8 @@
if (child !== filter && child !== loader) child.remove();
});
if (skeleton) {
skeleton.style.display = "block";
// 骨架开关走 .is-loading 类（modal-runtime.css），克隆时同步清理状态。
skeleton.classList.add("is-loading");
skeleton.removeAttribute("hidden");
list.appendChild(skeleton);
}
assets/js/core/pagination.js
+26 -16
View File
@@ -14,7 +14,6 @@
var triggerText = (window.aksrtData && aksrtData.ajaxTrigger) || "加载更多";
var nomoreText = (window.aksrtData && aksrtData.ajaxNomore) || "没有更多了";
var loadingText = (window.aksrtData && aksrtData.ajaxLoading) || "正在加载...";
var errorText = (window.aksrtData && aksrtData.ajaxLoadError) || "加载失败，请重试";
containers.forEach(function (container) {
@@ -51,18 +50,37 @@
target = container.parentElement.querySelector(".post-grid, .comment-list, .commentlist, .content-stream__list");
}
// 参考主题兜底 loader：DOM 里没有骨架时补一个 .loading 转圈 + 文案，
// 绝不用按钮自身文字来表达加载态。
function fallbackLoader() {
var text = (window.aksrtData && aksrtData.ajaxLoading) || "加载中...";
return (
'<div class="mb20"><div class="text-center muted-2-color mt20">' +
'<i class="loading mr10"></i>' + text +
'</div></div>'
);
}
function showSkeleton() {
if (!target) return;
// PHP 产出下划线类名 post_ajax_loader；这里同时兼容连字符写法。
var loader = target.querySelector(".post_ajax_loader, .post-ajax-loader");
if (loader) {
loader.classList.add("is-loading");
var loader = target.querySelector(".post_ajax_loader");
if (!loader) {
loader = document.createElement("div");
loader.className = "post_ajax_loader";
loader.innerHTML = fallbackLoader();
}
// 参考主题 beforeSend：骨架每次翻页都挪到列表末尾（分页控件之前），
// 紧贴最后一张卡片、位于「加载更多」按钮上方。
target.insertBefore(
loader,
container.parentNode === target ? container : null
);
loader.classList.add("is-loading");
}
function hideSkeleton() {
if (!target) return;
var loader = target.querySelector(".post_ajax_loader, .post-ajax-loader");
var loader = target.querySelector(".post_ajax_loader");
if (loader) {
loader.classList.remove("is-loading");
}
@@ -72,13 +90,11 @@
container.classList.remove("ias-pending");
if (markNomore && loadMoreBtn) {
loadMoreBtn.innerHTML = nomoreText;
loadMoreBtn.classList.remove("is-loading");
loadMoreBtn.classList.add("ajax-nomore");
var nextWrap = loadMoreBtn.closest(".next-page");
if (nextWrap) nextWrap.classList.add("no-more");
loadMoreBtn.style.pointerEvents = "none";
} else if (loadMoreBtn && !loadMoreBtn.classList.contains("ajax-nomore")) {
loadMoreBtn.classList.remove("is-loading");
if (failed) {
loadMoreBtn.textContent = errorText;
} else {
@@ -93,7 +109,6 @@
stopInfinite(false);
if (loadMoreBtn) {
loadMoreBtn.textContent = message || errorText;
loadMoreBtn.classList.remove("is-loading");
loadMoreBtn.classList.remove("ajax-nomore");
loadMoreBtn.style.pointerEvents = "";
}
@@ -107,12 +122,8 @@
}
loading = true;
// 骨架开关统一走 .is-loading（modal-runtime.css），不要直接写
// display:flex —— 那会让卡片型骨架挤成一行而不是纵向堆叠。
if (loadMoreBtn) {
loadMoreBtn.classList.add("is-loading");
loadMoreBtn.textContent = loadingText;
}
// 加载态的呈现完全交给列表末尾的骨架（参考主题 post_ajax beforeSend
// 只操作 .post_ajax_loader，不触碰「加载更多」按钮自身的文字）。
showSkeleton();
var action = isComment ? "aksrt_load_more_comments" : "aksrt_load_more_posts";
@@ -199,7 +210,6 @@
loading = false;
hideSkeleton();
if (loadMoreBtn && !loadMoreBtn.classList.contains("ajax-nomore") && !failed) {
loadMoreBtn.classList.remove("is-loading");
loadMoreBtn.innerHTML = triggerText;
if (mode === "infinite") {
var lazyTrigger = clickTarget.closest(".next-page") || clickTarget;
assets/js/runtime/main.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/widgets/frontend.js
+3 -2
View File
@@ -117,12 +117,13 @@
container.dataset.loading = '1';
container.setAttribute('aria-busy', 'true');
var loader = loaderOf(container);
if (loader) loader.style.display = '';
// 骨架开关走 .is-loading 类（modal-runtime.css），不写 inline display。
if (loader) loader.classList.add('is-loading');
} else {
delete container.dataset.loading;
container.setAttribute('aria-busy', 'false');
var loader = loaderOf(container);
if (loader) loader.style.display = 'none';
if (loader) loader.classList.remove('is-loading');
}
}
search.php
+1 -1
View File
@@ -118,7 +118,7 @@ if (is_active_sidebar('search_top_fluid')) {
<?php else : ?>
<div class="aksrt-panel search-content"><div class="text-center muted-2-color padding-20"><?php esc_html_e('未找到相关内容', 'aksrt'); ?></div></div>
<?php endif; ?>
<div class="post_ajax_loader search-loader" style="display:none"><div class="mb20"><div class="text-center muted-2-color mt20"><i class="loading mr10"></i><?php esc_html_e('加载中...', 'aksrt'); ?></div></div></div>
<div class="post_ajax_loader search-loader"><div class="mb20"><div class="text-center muted-2-color mt20"><i class="loading mr10"></i><?php esc_html_e('加载中...', 'aksrt'); ?></div></div></div>
</div>
<?php if (is_active_sidebar('search_bottom_content')) dynamic_sidebar('search_bottom_content'); ?>
</div>
src/Core/ScriptsPart1c.php
+4 -3
View File
@@ -463,10 +463,11 @@ trait ScriptsPart1c {
'debugLog' => defined('WP_DEBUG') && WP_DEBUG && defined('WP_DEBUG_LOG') && WP_DEBUG_LOG,
'postPaginationMode' => class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::get_post_pagination_mode() : 'load_more',
'commentPaginationMode' => class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::get_comment_pagination_mode() : 'numbered',
// AJAX 翻页文案
'ajaxTrigger' => (class_exists('\AKSRT\Settings\Settings') && ($t = \AKSRT\Settings\Settings::get_post_list_style_settings()['ajax_trigger'] ?? '') !== '') ? $t : '<i class="fa fas fa-angle-right"></i>加载更多',
// AJAX 翻页文案（参考主题 zib__('load_more') / 'ajax_nomore'）
'ajaxTrigger' => (class_exists('\AKSRT\Settings\Settings') && ($t = \AKSRT\Settings\Settings::get_post_list_style_settings()['ajax_trigger'] ?? '') !== '') ? $t : '<i class="fa fas fa-angle-right"></i>' . __('加载更多', 'aksrt'),
'ajaxNomore' => (class_exists('\AKSRT\Settings\Settings') && ($n = \AKSRT\Settings\Settings::get_post_list_style_settings()['ajax_nomore'] ?? '') !== '') ? $n : __('没有更多内容了', 'aksrt'),
'ajaxLoading' => __('正在加载...', 'aksrt'),
// 骨架兜底文案，仅在没有 post_ajax_loader 时使用（参考主题 zib__('loading')）。
'ajaxLoading' => __('加载中...', 'aksrt'),
'iasMax' => class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::get_post_list_style_settings()['ias_max'] : 3,
'commentIasAuto' => class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::get_comment_display_settings()['paging_ajax_ias'] : true,
'commentUploadUrl' => esc_url_raw(rest_url('aksrt/v1/comment/upload-image')),