84 lines
2.1 KiB
JavaScript
84 lines
2.1 KiB
JavaScript
const LEGEND_MODES = {
|
|
cables: { title: "海缆" },
|
|
satellites: { title: "卫星" },
|
|
bgp: { title: "BGP" },
|
|
};
|
|
|
|
let currentLegendMode = "cables";
|
|
let legendItemsByMode = {
|
|
cables: [],
|
|
satellites: [],
|
|
bgp: [],
|
|
};
|
|
|
|
export function initLegend() {
|
|
// Tab click → switch mode
|
|
const tabsEl = document.getElementById("legend-tabs");
|
|
if (tabsEl) {
|
|
tabsEl.addEventListener("click", (e) => {
|
|
const btn = e.target.closest(".legend-tab");
|
|
if (!btn) return;
|
|
const mode = btn.dataset.legendMode;
|
|
if (mode) setLegendMode(mode);
|
|
});
|
|
}
|
|
|
|
// Collapse toggle
|
|
const collapseBtn = document.getElementById("legend-collapse");
|
|
const legend = document.getElementById("legend");
|
|
if (collapseBtn && legend) {
|
|
collapseBtn.addEventListener("click", (e) => {
|
|
e.stopPropagation();
|
|
legend.classList.toggle("legend--collapsed");
|
|
});
|
|
}
|
|
|
|
renderLegend(currentLegendMode);
|
|
}
|
|
|
|
export function setLegendMode(mode) {
|
|
const nextMode = LEGEND_MODES[mode] ? mode : "cables";
|
|
currentLegendMode = nextMode;
|
|
syncTabs(nextMode);
|
|
renderLegend(nextMode);
|
|
}
|
|
|
|
export function getLegendMode() {
|
|
return currentLegendMode;
|
|
}
|
|
|
|
export function refreshLegend() {
|
|
renderLegend(currentLegendMode);
|
|
}
|
|
|
|
export function setLegendItems(mode, items) {
|
|
if (!LEGEND_MODES[mode]) return;
|
|
legendItemsByMode[mode] = Array.isArray(items) ? items : [];
|
|
if (mode === currentLegendMode) {
|
|
renderLegend(currentLegendMode);
|
|
}
|
|
}
|
|
|
|
function syncTabs(mode) {
|
|
const tabs = document.querySelectorAll("#legend-tabs .legend-tab");
|
|
tabs.forEach((tab) => {
|
|
tab.classList.toggle("legend-tab--active", tab.dataset.legendMode === mode);
|
|
});
|
|
}
|
|
|
|
function renderLegend(mode) {
|
|
const listEl = document.querySelector("#legend .legend-list");
|
|
if (!listEl) return;
|
|
|
|
const items = legendItemsByMode[mode] || [];
|
|
listEl.innerHTML = items
|
|
.map(
|
|
(item) => `
|
|
<div class="legend-item">
|
|
<span class="legend-dot" style="background:${item.color}"></span>
|
|
<span class="legend-label">${item.label}</span>
|
|
</div>`,
|
|
)
|
|
.join("");
|
|
}
|