Skip to content

Fix HTML/JS/CSS issues in Broadcast Registry Mermaid template #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nevstop merged 8 commits into from
Apr 27, 2026
Merged

Fix HTML/JS/CSS issues in Broadcast Registry Mermaid template #17

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8683c67
Add DOCTYPE, lang attribute, and title tag
Copilot Apr 27, 2026
c64359b
Remove deprecated navigator.userLanguage fallback
Copilot Apr 27, 2026
ffcd39a
Mark wheel event listener as non-passive
Copilot Apr 27, 2026
4bfedf4
Round scale to one decimal place to avoid float precision drift
Copilot Apr 27, 2026
58c6298
Add maximum zoom limit to wheel scaling
Copilot Apr 27, 2026
56920be
Remove redundant DOMContentLoaded with dead setTimeout block
Copilot Apr 27, 2026
0598cfa
Constrain operation-tips max-width to viewport
Copilot Apr 27, 2026
fd70ac8
更新 Broadcast Registry Mermaid.html
nevstop Apr 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 11 additions & 15 deletions src/_support/html/Broadcast Registry Mermaid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSM Mermaid Diagram</title>
<style>
.mermaid-container {
overflow: visible;
Expand Down Expand Up @@ -29,6 +31,8 @@
font-size: 14px;
margin-bottom: 10px;
width: fit-content;
max-width: calc(100vw - 30px);
box-sizing: border-box;
position: fixed;
top: 10px;
left: 10px;
Expand All @@ -51,7 +55,7 @@
// 根据浏览器语言设置提示文本
function setTipsByBrowserLanguage() {
const tipsElement = document.getElementById('operation-tips');
const browserLanguage = navigator.language || navigator.userLanguage;
const browserLanguage = navigator.language || 'en';

// 检测是否为中文
if (browserLanguage.includes('zh')) {
Expand All @@ -67,6 +71,8 @@
// 初始化缩放因子
let scale = 1;
const scaleStep = 0.1;
const scaleMax = 5;
const scaleMin = 0.1;
const container = document.querySelector('.mermaid-container');
const mermaidElement = document.querySelector('.mermaid');

Expand All @@ -83,31 +89,21 @@
// 计算新的缩放因子
if (e.deltaY < 0) {
// 向上滚动，放大
scale += scaleStep;
scale = Math.round(Math.min(scaleMax, scale + scaleStep) * 10) / 10; // 最大缩放到 scaleMax
} else {
// 向下滚动，缩小
scale = Math.max(0.1, scale - scaleStep); // 最小缩放到 0.1
scale = Math.round(Math.max(scaleMin, scale - scaleStep) * 10) / 10; // 最小缩放到 scaleMin
}

// 应用缩放
mermaidElement.style.transform = `scale(${scale})`;
});
}, { passive: false });

// 双击重置缩放
container.addEventListener('dblclick', function() {
scale = 1;
mermaidElement.style.transform = 'scale(1)';
});

// 等待 mermaid 渲染完成后再应用缩放
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
// 确保 mermaid 已经渲染完成
if (mermaidElement) {
mermaidElement.style.transform = `scale(${scale})`;
}
}, 100);
});
</script>

</body>
Expand Down
Loading