feat(runtime): 全站前端脚本统一接入 AksrtFrontend 全局 DOM 生命周期
- rehydrate.js 新增 boot()/aksrt:ready 事件，支持 boot 后晚注册立即以 init 触发 - aksrt-runtime.js 初始加载改走 AksrtFrontend.boot，tooltip/倒计时注册为组件 - 约 30 个前端脚本（首页、评论、支付、路由、页面叶子、widgets） 从直接 DOMContentLoaded 迁移为 AksrtFrontend.register，并加幂等标记 - section-navs 依赖改为 aksrt-runtime，保证注册时序 - 清理死代码：删除孤儿 loader.js/main.js 及 runtime/page-navs 遗留副本 - loader.js 移除已迁移模块的 tbquire 路径映射，main.js 相应瘦身 - build-public-assets.mjs 增加 runtime/main.min.js 自动压缩步骤 - 新增 4 个契约测试（homepage-dom/rehydrate-runtime/global-dom-init/ public-bundle-parity），3 个既有 harness 适配注册表初始化方式
This commit is contained in:
@@ -39,19 +39,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('click', function (e) {
|
||||
var trigger = e.target && e.target.closest ? e.target.closest('[fixed-input]') : null;
|
||||
if (!trigger) return;
|
||||
e.preventDefault();
|
||||
var targetSel = trigger.getAttribute('fixed-input') || '#respond';
|
||||
var panel = document.querySelector(targetSel);
|
||||
var comments = document.getElementById('comments');
|
||||
if (comments && comments.scrollIntoView) {
|
||||
comments.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
FixedInput(panel, 'show');
|
||||
});
|
||||
|
||||
// Autoheight textareas.
|
||||
function bindAutoheight(ta) {
|
||||
if (!ta || ta.dataset.autoheightBound) return;
|
||||
@@ -67,24 +54,49 @@
|
||||
resize();
|
||||
}
|
||||
|
||||
function scan() {
|
||||
document.querySelectorAll('textarea[autoheight], textarea.grin').forEach(bindAutoheight);
|
||||
function scopeFor(root) {
|
||||
return root && root.querySelectorAll ? root : document;
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', scan);
|
||||
if (window.AksrtFrontend && typeof window.AksrtFrontend.register === 'function') {
|
||||
window.AksrtFrontend.register('aksrt-comment-fixed-input', function (root) {
|
||||
scan();
|
||||
// Expose for submit hide.
|
||||
root = root || document;
|
||||
var respond = root.querySelector ? root.querySelector('#respond') : document.getElementById('respond');
|
||||
if (respond) {
|
||||
respond.aksrtFixedInput = function (action) {
|
||||
FixedInput(respond, action);
|
||||
};
|
||||
function scan(root) {
|
||||
var scope = scopeFor(root);
|
||||
if (scope.nodeType === 1 && scope.matches('textarea[autoheight], textarea.grin')) {
|
||||
bindAutoheight(scope);
|
||||
}
|
||||
scope.querySelectorAll('textarea[autoheight], textarea.grin').forEach(bindAutoheight);
|
||||
}
|
||||
|
||||
var globalsBound = false;
|
||||
function bindGlobals() {
|
||||
if (globalsBound) return;
|
||||
globalsBound = true;
|
||||
document.addEventListener('click', function (e) {
|
||||
var trigger = e.target && e.target.closest ? e.target.closest('[fixed-input]') : null;
|
||||
if (!trigger) return;
|
||||
e.preventDefault();
|
||||
var targetSel = trigger.getAttribute('fixed-input') || '#respond';
|
||||
var panel = document.querySelector(targetSel);
|
||||
var comments = document.getElementById('comments');
|
||||
if (comments && comments.scrollIntoView) {
|
||||
comments.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
FixedInput(panel, 'show');
|
||||
});
|
||||
}
|
||||
|
||||
window.AksrtFrontend.register('aksrt-comment-fixed-input', function (root, reason) {
|
||||
bindGlobals();
|
||||
scan(root);
|
||||
root = root || document;
|
||||
var respond = root.nodeType === 1 && root.matches && root.matches('#respond')
|
||||
? root
|
||||
: (root.querySelector ? root.querySelector('#respond') : document.getElementById('respond'));
|
||||
if (respond) {
|
||||
respond.aksrtFixedInput = function (action) {
|
||||
FixedInput(respond, action);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
window.AksrtFixedInput = FixedInput;
|
||||
})();
|
||||
|
||||
+48
-59
@@ -4,6 +4,18 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
var globalsBound = false;
|
||||
|
||||
function scopeFor(root) {
|
||||
return root && root.querySelectorAll ? root : document;
|
||||
}
|
||||
|
||||
function eachMatch(root, selector, callback) {
|
||||
var scope = scopeFor(root);
|
||||
if (scope.nodeType === 1 && scope.matches(selector)) callback(scope);
|
||||
scope.querySelectorAll(selector).forEach(callback);
|
||||
}
|
||||
|
||||
function renderGradientBackground(container) {
|
||||
if (!container || container.dataset.aksrtGradientState || typeof window.Grade !== "function") return;
|
||||
|
||||
@@ -32,26 +44,15 @@
|
||||
}
|
||||
|
||||
function initGradientBackgrounds(root) {
|
||||
var scope = root || document;
|
||||
if (scope.nodeType === 1 && scope.matches(".gradient-bg")) {
|
||||
renderGradientBackground(scope);
|
||||
}
|
||||
scope.querySelectorAll(".gradient-bg").forEach(renderGradientBackground);
|
||||
eachMatch(root, ".gradient-bg", renderGradientBackground);
|
||||
}
|
||||
|
||||
document.addEventListener("lazyloaded", function (event) {
|
||||
if (!(event.target instanceof Element) || !event.target.matches(".gradient-bg img")) return;
|
||||
renderGradientBackground(event.target.closest(".gradient-bg"));
|
||||
}, true);
|
||||
|
||||
function initPostThumbMedia(root) {
|
||||
var scope = root || document;
|
||||
|
||||
scope.querySelectorAll("[data-post-thumb-video]").forEach(function (box) {
|
||||
eachMatch(root, "[data-post-thumb-video]", function (box) {
|
||||
if (box.dataset.aksrtThumbVideoBound === "1") return;
|
||||
box.dataset.aksrtThumbVideoBound = "1";
|
||||
var video = box.querySelector("video");
|
||||
if (!video) return;
|
||||
box.dataset.aksrtThumbVideoBound = "1";
|
||||
|
||||
function loadVideo() {
|
||||
if (!video.getAttribute("src") && video.dataset.src) {
|
||||
@@ -82,25 +83,17 @@
|
||||
});
|
||||
}
|
||||
|
||||
window.AksrtFrontend.register("aksrt-post-thumb-media", function (root) {
|
||||
initPostThumbMedia(root);
|
||||
initGradientBackgrounds(root);
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function initSlideCovers() {
|
||||
var covers = document.querySelectorAll(".single-cover--slide");
|
||||
covers.forEach(function (cover) {
|
||||
function initSlideCovers(root) {
|
||||
eachMatch(root, ".single-cover--slide", function (cover) {
|
||||
if (cover.dataset.aksrtSlideCoverBound === "1") return;
|
||||
var slides = cover.querySelectorAll(".single-cover__slide");
|
||||
var dots = cover.querySelectorAll(".single-cover__dot");
|
||||
if (slides.length < 2) return;
|
||||
cover.dataset.aksrtSlideCoverBound = "1";
|
||||
|
||||
var current = 0;
|
||||
var interval = 5000;
|
||||
var timer = null;
|
||||
|
||||
function goTo(idx) {
|
||||
slides[current].classList.remove("is-active");
|
||||
@@ -110,33 +103,32 @@
|
||||
if (dots[current]) dots[current].classList.add("is-active");
|
||||
}
|
||||
|
||||
var timer = setInterval(function () {
|
||||
goTo((current + 1) % slides.length);
|
||||
}, interval);
|
||||
function startTimer() {
|
||||
timer = window.setInterval(function () {
|
||||
goTo((current + 1) % slides.length);
|
||||
}, interval);
|
||||
}
|
||||
|
||||
startTimer();
|
||||
dots.forEach(function (dot, i) {
|
||||
dot.addEventListener("click", function () {
|
||||
clearInterval(timer);
|
||||
window.clearInterval(timer);
|
||||
goTo(i);
|
||||
timer = setInterval(function () {
|
||||
goTo((current + 1) % slides.length);
|
||||
}, interval);
|
||||
startTimer();
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", initSlideCovers);
|
||||
} else {
|
||||
initSlideCovers();
|
||||
}
|
||||
})();
|
||||
function bindGlobals() {
|
||||
if (globalsBound) return;
|
||||
globalsBound = true;
|
||||
|
||||
(function () {
|
||||
"use strict";
|
||||
document.addEventListener("lazyloaded", function (event) {
|
||||
if (!(event.target instanceof Element) || !event.target.matches(".gradient-bg img")) return;
|
||||
renderGradientBackground(event.target.closest(".gradient-bg"));
|
||||
}, true);
|
||||
|
||||
function initHiddenContent() {
|
||||
document.addEventListener("click", function (e) {
|
||||
var btn = e.target.closest(".aksrt-hidden-content__submit-btn");
|
||||
if (!btn) return;
|
||||
@@ -157,7 +149,7 @@
|
||||
|
||||
var formData = new FormData();
|
||||
formData.append("action", "aksrt_check_visibility");
|
||||
formData.append("_nonce", (window.aksrtData && aksrtData.visibilityNonce) || "");
|
||||
formData.append("_nonce", (window.aksrtData && window.aksrtData.visibilityNonce) || "");
|
||||
formData.append("mode", mode);
|
||||
formData.append("pid", pid);
|
||||
if (password) formData.append("password", password);
|
||||
@@ -165,7 +157,7 @@
|
||||
btn.disabled = true;
|
||||
btn.textContent = "...";
|
||||
|
||||
fetch((window.aksrtData && aksrtData.ajaxUrl) || "/wp-admin/admin-ajax.php", {
|
||||
fetch((window.aksrtData && window.aksrtData.ajaxUrl) || "/wp-admin/admin-ajax.php", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
credentials: "same-origin",
|
||||
@@ -188,22 +180,19 @@
|
||||
});
|
||||
});
|
||||
|
||||
// Handle Enter key on password input
|
||||
document.addEventListener("keydown", function (e) {
|
||||
if (e.key === "Enter" && e.target.classList.contains("aksrt-hidden-content__password-input")) {
|
||||
e.preventDefault();
|
||||
var wrapper = e.target.closest(".aksrt-hidden-content--locked");
|
||||
if (wrapper) {
|
||||
var btn = wrapper.querySelector(".aksrt-hidden-content__submit-btn");
|
||||
if (btn) btn.click();
|
||||
}
|
||||
}
|
||||
if (e.key !== "Enter" || !e.target.classList.contains("aksrt-hidden-content__password-input")) return;
|
||||
e.preventDefault();
|
||||
var wrapper = e.target.closest(".aksrt-hidden-content--locked");
|
||||
var btn = wrapper ? wrapper.querySelector(".aksrt-hidden-content__submit-btn") : null;
|
||||
if (btn) btn.click();
|
||||
});
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", initHiddenContent);
|
||||
} else {
|
||||
initHiddenContent();
|
||||
}
|
||||
window.AksrtFrontend.register("aksrt-misc", function (root, reason) {
|
||||
bindGlobals();
|
||||
initPostThumbMedia(root);
|
||||
initGradientBackgrounds(root);
|
||||
initSlideCovers(root);
|
||||
});
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user