fix(pagination): align AJAX load-more loading state with reference
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:
1 parent
e506309434
commit
b5f37d6d46
10 files changed
+59
-49
No files matched your search
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in new issue
Block a user