fix(frontend): rehydrate 根节点兼容 Element 无 getElementById
评论排序/点赞在 AJAX rehydrate 时 root 为 Element,调用 getElementById 抛 TypeError;改为 Document/Element 安全查找,并补上评论排序委托点击。
This commit is contained in:
1 parent
ab9bb9a145
commit
4fe4d79da0
2 files changed
+58
-8
No files matched your search
@@ -142,10 +142,26 @@
|
|||||||
button.classList.toggle("is-loading", !!busy);
|
button.classList.toggle("is-loading", !!busy);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function findInScope(scope, id) {
|
||||||
|
scope = scope || document;
|
||||||
|
if (!scope) return null;
|
||||||
|
if (scope.nodeType === 9) {
|
||||||
|
return scope.getElementById(id);
|
||||||
|
}
|
||||||
|
if (scope.nodeType === 1) {
|
||||||
|
if (scope.id === id) return scope;
|
||||||
|
return typeof scope.querySelector === "function"
|
||||||
|
? scope.querySelector("#" + id)
|
||||||
|
: null;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
function initInteractionBar(root) {
|
function initInteractionBar(root) {
|
||||||
var scope = root || document;
|
var scope = root || document;
|
||||||
var likeBtn = scope.getElementById("action-like");
|
// Element roots (AJAX rehydrate) do not implement getElementById
|
||||||
var favBtn = scope.getElementById("action-favorite");
|
var likeBtn = findInScope(scope, "action-like");
|
||||||
|
var favBtn = findInScope(scope, "action-favorite");
|
||||||
|
|
||||||
if (likeBtn && likeBtn.dataset.aksrtInteractionBound) return;
|
if (likeBtn && likeBtn.dataset.aksrtInteractionBound) return;
|
||||||
if (favBtn && favBtn.dataset.aksrtInteractionBound) return;
|
if (favBtn && favBtn.dataset.aksrtInteractionBound) return;
|
||||||
|
|||||||
@@ -555,18 +555,33 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ====== 评论排序(最新 / 最早) ====== */
|
/* ====== 评论排序(最新 / 最早) ====== */
|
||||||
|
/**
|
||||||
|
* Locate #id within a rehydrate root.
|
||||||
|
* Document has getElementById; Element roots (AJAX panels) only have querySelector.
|
||||||
|
*/
|
||||||
|
function findInScope(scope, id) {
|
||||||
|
scope = scope || document;
|
||||||
|
if (!scope) return null;
|
||||||
|
if (scope.nodeType === 9) {
|
||||||
|
return scope.getElementById(id);
|
||||||
|
}
|
||||||
|
if (scope.nodeType === 1) {
|
||||||
|
if (scope.id === id) return scope;
|
||||||
|
return typeof scope.querySelector === "function"
|
||||||
|
? scope.querySelector("#" + id)
|
||||||
|
: null;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
function initCommentOrder(root) {
|
function initCommentOrder(root) {
|
||||||
var scope = root || document;
|
var scope = root || document;
|
||||||
var commentsArea = scope.getElementById("comments");
|
var commentsArea = findInScope(scope, "comments");
|
||||||
if (!commentsArea) return;
|
if (!commentsArea) return;
|
||||||
|
// Event delegation survives filter HTML replacement after AJAX rehydrate.
|
||||||
if (commentsArea.dataset.orderInit === "1") return;
|
if (commentsArea.dataset.orderInit === "1") return;
|
||||||
commentsArea.dataset.orderInit = "1";
|
commentsArea.dataset.orderInit = "1";
|
||||||
|
|
||||||
function getPaginationEl(root) {
|
|
||||||
if (!root) return null;
|
|
||||||
return root.querySelector(".aksrt-comment-pagination, .comment-navigation");
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderLoadingState() {
|
function renderLoadingState() {
|
||||||
var listContainer = commentsArea.querySelector("#comment-list");
|
var listContainer = commentsArea.querySelector("#comment-list");
|
||||||
if (!listContainer) return;
|
if (!listContainer) return;
|
||||||
@@ -625,6 +640,25 @@
|
|||||||
window.location.href = url.toString();
|
window.location.href = url.toString();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
commentsArea.addEventListener("click", function (e) {
|
||||||
|
var target = e.target;
|
||||||
|
if (!target || typeof target.closest !== "function") return;
|
||||||
|
|
||||||
|
// 「只看作者」同时带 comment-orderby,需优先于排序按钮判断
|
||||||
|
var authorBtn = target.closest(".comment-author-filter");
|
||||||
|
if (authorBtn && commentsArea.contains(authorBtn)) {
|
||||||
|
e.preventDefault();
|
||||||
|
applyAuthorFilter(authorBtn.getAttribute("data-author-only") || "0");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var orderBtn = target.closest(".comment-orderby[data-order]");
|
||||||
|
if (orderBtn && commentsArea.contains(orderBtn)) {
|
||||||
|
e.preventDefault();
|
||||||
|
applyCommentOrder(orderBtn.getAttribute("data-order") || "newest");
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
window.AksrtFrontend.register("aksrt-comment-system", function () { initCommentSystem(); });
|
window.AksrtFrontend.register("aksrt-comment-system", function () { initCommentSystem(); });
|
||||||
|
|||||||
Reference in new issue
Block a user