141 lines
3.7 KiB
JavaScript
141 lines
3.7 KiB
JavaScript
/**
|
|
* AKSRT Footer Tabbar
|
|
*/
|
|
(function () {
|
|
"use strict";
|
|
|
|
function initFooterTabbar() {
|
|
var tabbar = document.getElementById("footer-tabbar");
|
|
if (!tabbar) return;
|
|
var addBackdrop = document.getElementById("tabbar-add-backdrop");
|
|
|
|
var ticking = false;
|
|
var scrollThreshold = 100;
|
|
var isHidden = false;
|
|
|
|
// Use body scroll bus classes from aksrt-runtime.js
|
|
function handleScrollDownHide() {
|
|
var body = document.body;
|
|
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
|
|
|
if (scrollTop > scrollThreshold) {
|
|
if (body.classList.contains("scroll-down") && !isHidden) {
|
|
// 向下滚动 - 隐藏
|
|
tabbar.classList.add("is-hidden");
|
|
isHidden = true;
|
|
} else if (body.classList.contains("scroll-up") && isHidden) {
|
|
tabbar.classList.remove("is-hidden");
|
|
isHidden = false;
|
|
}
|
|
} else {
|
|
tabbar.classList.remove("is-hidden");
|
|
isHidden = false;
|
|
}
|
|
}
|
|
|
|
// 返回顶部按钮切换
|
|
function handleOntopWrap() {
|
|
var ontopWraps = tabbar.querySelectorAll(".tabbar-ontop-wrap");
|
|
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
|
|
|
ontopWraps.forEach(function (wrap) {
|
|
if (scrollTop > scrollThreshold) {
|
|
wrap.classList.add("is-scrolled");
|
|
} else {
|
|
wrap.classList.remove("is-scrolled");
|
|
}
|
|
});
|
|
}
|
|
|
|
// 滚动事件处理
|
|
function onScroll() {
|
|
if (!ticking) {
|
|
requestAnimationFrame(function () {
|
|
if (tabbar.classList.contains("scroll-down-hide")) {
|
|
handleScrollDownHide();
|
|
}
|
|
handleOntopWrap();
|
|
ticking = false;
|
|
});
|
|
ticking = true;
|
|
}
|
|
}
|
|
|
|
window.addEventListener("scroll", onScroll, { passive: true });
|
|
|
|
function closeAddPanels() {
|
|
document.querySelectorAll(".tabbar-add-panel").forEach(function (panel) {
|
|
panel.setAttribute("hidden", "");
|
|
});
|
|
if (addBackdrop) addBackdrop.setAttribute("hidden", "");
|
|
document.body.classList.remove("tabbar-add-open");
|
|
}
|
|
|
|
function openAddPanel(panelId) {
|
|
closeAddPanels();
|
|
var panel = document.getElementById(panelId);
|
|
if (!panel) return;
|
|
panel.removeAttribute("hidden");
|
|
if (addBackdrop) addBackdrop.removeAttribute("hidden");
|
|
document.body.classList.add("tabbar-add-open");
|
|
}
|
|
|
|
if (addBackdrop) {
|
|
addBackdrop.addEventListener("click", closeAddPanels);
|
|
}
|
|
|
|
document.addEventListener("keydown", function (e) {
|
|
if (e.key === "Escape") closeAddPanels();
|
|
});
|
|
|
|
// 返回顶部点击事件 + 双击首页刷新
|
|
var homeClickTimer = null;
|
|
tabbar.addEventListener("click", function (e) {
|
|
var addBtn = e.target.closest('.tabbar-item[data-type="add"]');
|
|
if (addBtn) {
|
|
e.preventDefault();
|
|
openAddPanel(addBtn.getAttribute("data-panel-id"));
|
|
return;
|
|
}
|
|
|
|
var searchBtn = e.target.closest('.tabbar-item[data-type="search"]');
|
|
if (searchBtn) {
|
|
e.preventDefault();
|
|
if (typeof window.__aksrtOpenSearchPanel === "function") {
|
|
window.__aksrtOpenSearchPanel();
|
|
}
|
|
return;
|
|
}
|
|
|
|
var ontopBtn = e.target.closest(".tabbar-ontop-btn");
|
|
if (ontopBtn) {
|
|
e.preventDefault();
|
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
return;
|
|
}
|
|
|
|
// 双击首页Tab刷新页面
|
|
var homeBtn = e.target.closest('.tabbar-item[data-type="home"]');
|
|
if (homeBtn && tabbar.classList.contains("has-animation")) {
|
|
if (homeClickTimer) {
|
|
clearTimeout(homeClickTimer);
|
|
homeClickTimer = null;
|
|
window.location.reload();
|
|
return;
|
|
}
|
|
homeClickTimer = setTimeout(function () {
|
|
homeClickTimer = null;
|
|
}, 350);
|
|
}
|
|
});
|
|
|
|
document.addEventListener("click", function (e) {
|
|
if (e.target.closest("[data-close-tabbar-add-panel]")) {
|
|
closeAddPanels();
|
|
}
|
|
});
|
|
}
|
|
|
|
window.AksrtFrontend.register("aksrt-footer-tabbar", function () { initFooterTabbar(); });
|
|
})();
|