kate522andClaude Fable 5
b5f37d6d46
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>
311 lines
13 KiB
JavaScript
311 lines
13 KiB
JavaScript
/**
|
|
* AKSRT AJAX Pagination & Lazy Load
|
|
*/
|
|
(function () {
|
|
"use strict";
|
|
|
|
function hasAjaxConfig() {
|
|
return !!(window.aksrtData && aksrtData.ajaxUrl && aksrtData.nonce);
|
|
}
|
|
|
|
function initAjaxPagination(root) {
|
|
var containers = (root || document).querySelectorAll("[data-aksrt-pagination], .aksrt-comment-pagination");
|
|
if (!containers.length) return;
|
|
|
|
var triggerText = (window.aksrtData && aksrtData.ajaxTrigger) || "加载更多";
|
|
var nomoreText = (window.aksrtData && aksrtData.ajaxNomore) || "没有更多了";
|
|
var errorText = (window.aksrtData && aksrtData.ajaxLoadError) || "加载失败，请重试";
|
|
|
|
containers.forEach(function (container) {
|
|
if (container.dataset.aksrtPaginationBound === "1") return;
|
|
container.dataset.aksrtPaginationBound = "1";
|
|
|
|
var mode = container.dataset.mode || "load_more";
|
|
var nextPage = parseInt(container.dataset.nextPage, 10) || 2;
|
|
var maxPages = parseInt(container.dataset.maxPages, 10) || 1;
|
|
var isComment = container.classList.contains("aksrt-comment-pagination");
|
|
var postId = container.dataset.postId || "";
|
|
var commentOrder = container.dataset.commentOrder || "newest";
|
|
var loading = false;
|
|
var failed = false;
|
|
var clickTarget = container.querySelector(".next-page.ajax-next, .ias-btn") || container;
|
|
var loadMoreBtn = container.querySelector("[data-aksrt-load-more]") || clickTarget;
|
|
var successfulAutoLoads = 0;
|
|
var iasMax = isComment
|
|
? ((window.aksrtData && typeof aksrtData.commentIasMax !== "undefined") ? parseInt(aksrtData.commentIasMax, 10) : 0)
|
|
: ((window.aksrtData && typeof aksrtData.iasMax !== "undefined") ? parseInt(aksrtData.iasMax, 10) : 0);
|
|
// legacy 契约：分页容器与列表同处一个 .ajaxpager 内（首页 tab pane、归档流），
|
|
// 此时追加目标就是列表容器本身，新卡片插到分页控件之前。
|
|
var listContainer = container.closest(".ajaxpager, .posts-row");
|
|
var target = container.previousElementSibling;
|
|
if (listContainer && container.parentNode === listContainer) {
|
|
target = listContainer;
|
|
}
|
|
if (isComment) {
|
|
var commentList = container.closest("#comment-list, .commentlist, ol.commentlist") ||
|
|
document.getElementById("comment-list");
|
|
if (commentList) target = commentList;
|
|
}
|
|
if (!target && container.parentElement) {
|
|
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;
|
|
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");
|
|
if (loader) {
|
|
loader.classList.remove("is-loading");
|
|
}
|
|
}
|
|
|
|
function stopInfinite(markNomore) {
|
|
container.classList.remove("ias-pending");
|
|
if (markNomore && loadMoreBtn) {
|
|
loadMoreBtn.innerHTML = nomoreText;
|
|
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")) {
|
|
if (failed) {
|
|
loadMoreBtn.textContent = errorText;
|
|
} else {
|
|
loadMoreBtn.innerHTML = triggerText;
|
|
}
|
|
loadMoreBtn.style.pointerEvents = "";
|
|
}
|
|
}
|
|
|
|
function markFailed(message) {
|
|
failed = true;
|
|
stopInfinite(false);
|
|
if (loadMoreBtn) {
|
|
loadMoreBtn.textContent = message || errorText;
|
|
loadMoreBtn.classList.remove("ajax-nomore");
|
|
loadMoreBtn.style.pointerEvents = "";
|
|
}
|
|
}
|
|
|
|
function loadNextPage(fromAuto) {
|
|
if (loading || failed || nextPage > maxPages || !target) return Promise.resolve(false);
|
|
if (!hasAjaxConfig()) {
|
|
markFailed(errorText);
|
|
return Promise.resolve(false);
|
|
}
|
|
|
|
loading = true;
|
|
// 加载态的呈现完全交给列表末尾的骨架（参考主题 post_ajax beforeSend
|
|
// 只操作 .post_ajax_loader，不触碰「加载更多」按钮自身的文字）。
|
|
showSkeleton();
|
|
|
|
var action = isComment ? "aksrt_load_more_comments" : "aksrt_load_more_posts";
|
|
var queryContext = container.dataset.queryContext || "";
|
|
var queryVars = container.dataset.queryVars || "";
|
|
var renderConfig = container.dataset.renderConfig || "";
|
|
var body = new URLSearchParams();
|
|
body.set("action", action);
|
|
body.set("nonce", aksrtData.nonce);
|
|
body.set("page", String(nextPage));
|
|
if (queryContext) {
|
|
body.set("query_context", queryContext);
|
|
}
|
|
if (!isComment && queryVars) {
|
|
body.set("query_vars", queryVars);
|
|
}
|
|
if (!isComment && renderConfig) {
|
|
body.set("render_config", renderConfig);
|
|
}
|
|
if (isComment && postId) {
|
|
body.set("post_id", postId);
|
|
body.set("comment_order", commentOrder);
|
|
var authorOnly = container.dataset.authorOnly || "0";
|
|
if (authorOnly === "1") body.set("author_only", "1");
|
|
}
|
|
|
|
return fetch(aksrtData.ajaxUrl, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8" },
|
|
credentials: "same-origin",
|
|
body: body.toString(),
|
|
})
|
|
.then(function (r) {
|
|
if (!r.ok) {
|
|
throw new Error("HTTP " + r.status);
|
|
}
|
|
return r.text().then(function (text) {
|
|
try {
|
|
return JSON.parse(text);
|
|
} catch (err) {
|
|
throw new Error("Invalid JSON");
|
|
}
|
|
});
|
|
})
|
|
.then(function (res) {
|
|
if (!(res && res.success && res.data && typeof res.data.html === "string")) {
|
|
var msg = res && res.data && res.data.message ? res.data.message : errorText;
|
|
markFailed(msg);
|
|
return false;
|
|
}
|
|
|
|
var temp = document.createElement("div");
|
|
temp.innerHTML = res.data.html;
|
|
var newItems = temp.children;
|
|
while (newItems.length > 0) {
|
|
if (container.parentNode === target) {
|
|
target.insertBefore(newItems[0], container);
|
|
} else {
|
|
target.appendChild(newItems[0]);
|
|
}
|
|
}
|
|
// legacy 事件顺序：先 post_ajax.ed，再全局 auto_fun 重扫
|
|
target.dispatchEvent(new CustomEvent("post_ajax.ed", { bubbles: true }));
|
|
if (typeof window.auto_fun === "function") window.auto_fun();
|
|
nextPage++;
|
|
container.dataset.nextPage = String(nextPage);
|
|
if (fromAuto) {
|
|
successfulAutoLoads++;
|
|
}
|
|
|
|
if (nextPage > maxPages || !res.data.has_more) {
|
|
stopInfinite(true);
|
|
if (!loadMoreBtn) {
|
|
container.innerHTML = '<span class="ajax-nomore">' + nomoreText + '</span>';
|
|
}
|
|
}
|
|
return true;
|
|
})
|
|
.catch(function () {
|
|
markFailed(errorText);
|
|
return false;
|
|
})
|
|
.finally(function () {
|
|
loading = false;
|
|
hideSkeleton();
|
|
if (loadMoreBtn && !loadMoreBtn.classList.contains("ajax-nomore") && !failed) {
|
|
loadMoreBtn.innerHTML = triggerText;
|
|
if (mode === "infinite") {
|
|
var lazyTrigger = clickTarget.closest(".next-page") || clickTarget;
|
|
if (iasMax > 0 && successfulAutoLoads >= iasMax) {
|
|
container.classList.remove("ias-pending");
|
|
lazyTrigger.classList.remove("lazyload", "lazyloaded", "lazyloading");
|
|
lazyTrigger.removeAttribute("lazyload-action");
|
|
} else {
|
|
lazyTrigger.classList.remove("lazyloaded", "lazyloading");
|
|
lazyTrigger.classList.add("lazyload");
|
|
if (window.lazySizes && lazySizes.loader) {
|
|
lazySizes.loader.checkElems();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
if (loadMoreBtn) {
|
|
clickTarget.addEventListener("click", function(e) {
|
|
e.preventDefault();
|
|
if (loadMoreBtn.dataset.jumpComments === "1") {
|
|
var jumpInput = container.querySelector(".jump-input");
|
|
if (!jumpInput) return;
|
|
var targetPage = parseInt(jumpInput.value, 10) || 1;
|
|
var max = parseInt(jumpInput.dataset.maxPages || String(maxPages), 10) || maxPages;
|
|
targetPage = Math.max(1, Math.min(max, targetPage));
|
|
// 评论跳页：本地 DOM 刷新，地址栏不携带 ? 参数。
|
|
if (window.AksrtComments && typeof window.AksrtComments.loadPage === "function") {
|
|
e.preventDefault();
|
|
window.AksrtComments.loadPage(targetPage);
|
|
return;
|
|
}
|
|
window.location.hash = "comments";
|
|
window.location.reload();
|
|
return;
|
|
}
|
|
if (loadMoreBtn.dataset.jumpArchive === "1") {
|
|
var archiveJumpInput = container.querySelector(".jump-input");
|
|
if (!archiveJumpInput) return;
|
|
var archiveTargetPage = parseInt(archiveJumpInput.value, 10) || 1;
|
|
var archiveMax = parseInt(archiveJumpInput.dataset.maxPages || String(maxPages), 10) || maxPages;
|
|
archiveTargetPage = Math.max(1, Math.min(archiveMax, archiveTargetPage));
|
|
var archiveUrl = new URL(window.location.href);
|
|
archiveUrl.searchParams.set(loadMoreBtn.dataset.pageVar || "paged", String(archiveTargetPage));
|
|
window.location.href = archiveUrl.toString();
|
|
return;
|
|
}
|
|
var fromAuto = clickTarget.dataset.lazyAuto === "1";
|
|
delete clickTarget.dataset.lazyAuto;
|
|
if (fromAuto && iasMax > 0 && successfulAutoLoads >= iasMax) {
|
|
container.classList.remove("ias-pending");
|
|
return;
|
|
}
|
|
// Manual click can recover from a previous auto-load failure.
|
|
failed = false;
|
|
loadNextPage(fromAuto);
|
|
});
|
|
}
|
|
|
|
// The runtime lazySizes dispatches lazybeforeunveil natively but follows up
|
|
// with a jQuery-simulated click, which native listeners never receive.
|
|
// Route the unveil trigger through the same click pipeline.
|
|
if (container.classList.contains("lazyload") || clickTarget.classList.contains("lazyload")) {
|
|
container.addEventListener("lazybeforeunveil", function (e) {
|
|
if (e.target !== container && e.target !== clickTarget) return;
|
|
clickTarget.dataset.lazyAuto = "1";
|
|
clickTarget.click();
|
|
});
|
|
}
|
|
|
|
if (mode === "infinite") {
|
|
if ((isComment && window.aksrtData && aksrtData.commentIasAuto === false) || !hasAjaxConfig()) {
|
|
var autoTrigger = clickTarget.closest(".next-page") || clickTarget;
|
|
autoTrigger.classList.remove("lazyload");
|
|
autoTrigger.removeAttribute("lazyload-action");
|
|
return;
|
|
}
|
|
container.classList.add("ias-pending");
|
|
}
|
|
});
|
|
}
|
|
|
|
function init(root) {
|
|
initAjaxPagination(root);
|
|
}
|
|
|
|
if (document.readyState === "loading") {
|
|
document.addEventListener("DOMContentLoaded", function () { init(); });
|
|
} else {
|
|
init();
|
|
}
|
|
// AJAX 注入新内容后由 auto_fun 重扫（container 级 data 标记保证幂等）。
|
|
if (window.jQuery) {
|
|
window.jQuery(document).on("auto_fun", function () { init(); });
|
|
}
|
|
})();
|