246 lines
9.0 KiB
JavaScript
246 lines
9.0 KiB
JavaScript
|
// ========================================
|
|||
|
|
// 顶栏合并左右间距功能模块
|
|||
|
|
// ========================================
|
|||
|
|
|
|||
|
|
import { debounce, throttle } from './utils.js';
|
|||
|
|
|
|||
|
|
// 存储观察器实例
|
|||
|
|
let rightPanelObserver = null;
|
|||
|
|
let leftPanelObserver = null;
|
|||
|
|
let dockVerticalObserver = null;
|
|||
|
|
let layoutCenterObserver = null;
|
|||
|
|
|
|||
|
|
// 存储更新函数
|
|||
|
|
let updateRightMargins = null;
|
|||
|
|
let updateLeftMargins = null;
|
|||
|
|
|
|||
|
|
// 检测是否为 macOS 平台
|
|||
|
|
const isMacOS = () => {
|
|||
|
|
return navigator.userAgent.includes('Macintosh') || navigator.userAgent.includes('Mac OS X');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 初始化顶栏合并左右间距功能
|
|||
|
|
* @param {string} direction - 方向，"right" 或 "left"
|
|||
|
|
*/
|
|||
|
|
export const initTabBarsMarginUnified = (direction = "right") => {
|
|||
|
|
const isRight = direction === "right";
|
|||
|
|
|
|||
|
|
// 更新边距的函数
|
|||
|
|
const updateMargins = () => {
|
|||
|
|
const isTopbarMerged = document.documentElement.getAttribute('savor-tabbar') === 'merge';
|
|||
|
|
const tabBarSelector = isRight
|
|||
|
|
? ".layout__center .layout-tab-bar--readonly"
|
|||
|
|
: ".layout__center .layout-tab-bar:not(.layout-tab-bar--readonly)";
|
|||
|
|
const allTabBars = document.querySelectorAll(tabBarSelector);
|
|||
|
|
|
|||
|
|
if (!isTopbarMerged) {
|
|||
|
|
allTabBars.forEach(tabBar => {
|
|||
|
|
tabBar.style[isRight ? "marginRight" : "marginLeft"] = "0px";
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取窗口和drag元素的位置信息
|
|||
|
|
const drag = document.getElementById("drag");
|
|||
|
|
let marginValue = "0px";
|
|||
|
|
|
|||
|
|
if (drag) {
|
|||
|
|
if (isRight) {
|
|||
|
|
// 计算 #drag 到窗口右边界的距离
|
|||
|
|
const dragRect = drag.getBoundingClientRect();
|
|||
|
|
const windowWidth = window.innerWidth;
|
|||
|
|
let distanceToWindowRight = windowWidth - dragRect.right;
|
|||
|
|
|
|||
|
|
// 减去右侧dock的宽度
|
|||
|
|
const rightDock = document.querySelector(".layout__dockr");
|
|||
|
|
const rightDockWidth = rightDock?.classList.contains("layout--float")
|
|||
|
|
? rightDock.querySelector(".dock")?.offsetWidth ?? 0
|
|||
|
|
: rightDock?.offsetWidth ?? 0;
|
|||
|
|
const rightDockSelector = "#dockRight";
|
|||
|
|
const rightDockRealWidth = document.querySelector(rightDockSelector)?.offsetWidth ?? 0;
|
|||
|
|
|
|||
|
|
distanceToWindowRight -= (rightDockWidth + rightDockRealWidth);
|
|||
|
|
|
|||
|
|
// 如果结果是负数，直接为0
|
|||
|
|
distanceToWindowRight = Math.max(0, distanceToWindowRight);
|
|||
|
|
|
|||
|
|
marginValue = `${distanceToWindowRight}px`;
|
|||
|
|
} else {
|
|||
|
|
// 计算 #drag 到窗口左边界的距离
|
|||
|
|
const dragRect = drag.getBoundingClientRect();
|
|||
|
|
let distanceToWindowLeft = dragRect.left;
|
|||
|
|
|
|||
|
|
// 减去左侧dock的宽度
|
|||
|
|
const leftDock = document.querySelector(".layout__dockl");
|
|||
|
|
const leftDockWidth = leftDock?.classList.contains("layout--float")
|
|||
|
|
? leftDock.querySelector(".dock")?.offsetWidth ?? 0
|
|||
|
|
: leftDock?.offsetWidth ?? 0;
|
|||
|
|
const leftDockSelector = "#dockLeft";
|
|||
|
|
const leftDockRealWidth = document.querySelector(leftDockSelector)?.offsetWidth ?? 0;
|
|||
|
|
|
|||
|
|
distanceToWindowLeft -= (leftDockWidth + leftDockRealWidth);
|
|||
|
|
|
|||
|
|
// 如果结果是负数，直接为0
|
|||
|
|
distanceToWindowLeft = Math.max(0, distanceToWindowLeft);
|
|||
|
|
|
|||
|
|
marginValue = `${distanceToWindowLeft}px`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 应用 margin
|
|||
|
|
if (isRight) {
|
|||
|
|
allTabBars.forEach(tabBar => tabBar.style.marginRight = "0px");
|
|||
|
|
const resizers = document.querySelectorAll(".layout__center .layout__resize:not(.layout__resize--lr)");
|
|||
|
|
if (resizers.length === 0) {
|
|||
|
|
const lastTabBar = allTabBars[allTabBars.length - 1];
|
|||
|
|
if (lastTabBar && (lastTabBar.closest(".layout__dockr") || lastTabBar.closest(".layout__center"))) {
|
|||
|
|
lastTabBar.style.marginRight = marginValue;
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
resizers.forEach(resizer => {
|
|||
|
|
let prevElement = resizer.previousElementSibling;
|
|||
|
|
if (!prevElement) return;
|
|||
|
|
const prevTabBars = prevElement.querySelectorAll(".layout-tab-bar--readonly");
|
|||
|
|
if (prevTabBars.length > 0) {
|
|||
|
|
const lastTabBar = prevTabBars[prevTabBars.length - 1];
|
|||
|
|
if (lastTabBar.closest(".layout__dockr") || lastTabBar.closest(".layout__center")) {
|
|||
|
|
lastTabBar.style.marginRight = marginValue;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
const firstTabBar = allTabBars[0];
|
|||
|
|
if (firstTabBar) {
|
|||
|
|
firstTabBar.style.marginLeft = marginValue;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 为右/左侧分别存储更新函数
|
|||
|
|
if (isRight) {
|
|||
|
|
updateRightMargins = updateMargins;
|
|||
|
|
window.updateTabBarsMargin = updateMargins;
|
|||
|
|
} else {
|
|||
|
|
updateLeftMargins = updateMargins;
|
|||
|
|
window.updateTabBarsMarginLeft = updateMargins;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// observer 只初始化一次
|
|||
|
|
const dockSelector = isRight ? ".layout__dockr" : ".layout__dockl";
|
|||
|
|
const dockVerticalSelector = ".dock--vertical";
|
|||
|
|
|
|||
|
|
// 创建观察器
|
|||
|
|
const panelObserver = new ResizeObserver(updateMargins);
|
|||
|
|
const dockVerticalObserverInstance = new MutationObserver(updateMargins);
|
|||
|
|
|
|||
|
|
function observeDock() {
|
|||
|
|
const dock = document.querySelector(dockSelector);
|
|||
|
|
if (dock) panelObserver.observe(dock);
|
|||
|
|
const dockVertical = document.querySelector(dockVerticalSelector);
|
|||
|
|
if (dockVertical) {
|
|||
|
|
dockVerticalObserverInstance.observe(dockVertical, {
|
|||
|
|
attributes: true,
|
|||
|
|
attributeFilter: ["class"]
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 监听 body 结构变化，dock/dockVertical 变化时重新 observe
|
|||
|
|
new MutationObserver(() => {
|
|||
|
|
panelObserver.disconnect();
|
|||
|
|
dockVerticalObserverInstance.disconnect();
|
|||
|
|
observeDock();
|
|||
|
|
updateMargins();
|
|||
|
|
}).observe(document.body, { childList: true, subtree: true });
|
|||
|
|
|
|||
|
|
// 主题和页面加载时刷新
|
|||
|
|
window.addEventListener("load", updateMargins);
|
|||
|
|
document.addEventListener("themechange", updateMargins);
|
|||
|
|
|
|||
|
|
// 首次初始化
|
|||
|
|
observeDock();
|
|||
|
|
updateMargins();
|
|||
|
|
setTimeout(updateMargins, 500);
|
|||
|
|
setTimeout(updateMargins, 1000);
|
|||
|
|
|
|||
|
|
// 存储观察器实例以便后续清理
|
|||
|
|
if (isRight) {
|
|||
|
|
rightPanelObserver = panelObserver;
|
|||
|
|
dockVerticalObserver = dockVerticalObserverInstance;
|
|||
|
|
} else {
|
|||
|
|
leftPanelObserver = panelObserver;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 清理顶栏合并状态的辅助函数
|
|||
|
|
*/
|
|||
|
|
export const cleanupTopbarMerge = () => {
|
|||
|
|
// 断开观察器
|
|||
|
|
if (rightPanelObserver) {
|
|||
|
|
rightPanelObserver.disconnect();
|
|||
|
|
rightPanelObserver = null;
|
|||
|
|
}
|
|||
|
|
if (leftPanelObserver) {
|
|||
|
|
leftPanelObserver.disconnect();
|
|||
|
|
leftPanelObserver = null;
|
|||
|
|
}
|
|||
|
|
if (dockVerticalObserver) {
|
|||
|
|
dockVerticalObserver.disconnect();
|
|||
|
|
dockVerticalObserver = null;
|
|||
|
|
}
|
|||
|
|
if (layoutCenterObserver) {
|
|||
|
|
layoutCenterObserver.disconnect();
|
|||
|
|
layoutCenterObserver = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 重置边距（参考旧版本实现）
|
|||
|
|
document.querySelectorAll(".layout__center .layout-tab-bar--readonly").forEach(tabBar => {
|
|||
|
|
tabBar.style.marginRight = "0px";
|
|||
|
|
});
|
|||
|
|
document.querySelectorAll(".layout__center .layout-tab-bar:not(.layout-tab-bar--readonly)").forEach(tabBar => {
|
|||
|
|
tabBar.style.marginLeft = "0px";
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 清理全局变量
|
|||
|
|
if (window.updateTabBarsMargin) {
|
|||
|
|
window.updateTabBarsMargin = null;
|
|||
|
|
}
|
|||
|
|
if (window.updateTabBarsMarginLeft) {
|
|||
|
|
window.updateTabBarsMarginLeft = null;
|
|||
|
|
}
|
|||
|
|
if (window._tabBarsResizeObserver) {
|
|||
|
|
window._tabBarsResizeObserver.disconnect();
|
|||
|
|
window._tabBarsResizeObserver = null;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 初始化左右两侧的顶栏合并功能
|
|||
|
|
*/
|
|||
|
|
export const initTopbarMergeMargins = () => {
|
|||
|
|
initTabBarsMarginUnified("right");
|
|||
|
|
initTabBarsMarginUnified("left");
|
|||
|
|
|
|||
|
|
// layoutCenter observer 保留
|
|||
|
|
const layoutCenter = document.querySelector(".layout__center");
|
|||
|
|
if (layoutCenter) {
|
|||
|
|
let marginUpdateTimer = null;
|
|||
|
|
const resizeObserver = new MutationObserver(() => {
|
|||
|
|
if (marginUpdateTimer) return;
|
|||
|
|
marginUpdateTimer = requestAnimationFrame(() => {
|
|||
|
|
window.updateTabBarsMargin?.();
|
|||
|
|
window.updateTabBarsMarginLeft?.();
|
|||
|
|
marginUpdateTimer = null;
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
resizeObserver.observe(layoutCenter, { childList: true, subtree: true });
|
|||
|
|
layoutCenterObserver = resizeObserver;
|
|||
|
|
window._tabBarsResizeObserver = resizeObserver;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 初始化功能
|
|||
|
|
initTopbarMergeMargins();
|