Skip to content

Commit f29816d

Browse files
timkpainetimkpaine
committed
Consolidate custom javascript into single file
1 parent 39ef778 commit f29816d

6 files changed

Lines changed: 116 additions & 241 deletions

File tree

‎sphinxcontrib/mermaid/__init__.py‎

Lines changed: 49 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -44,49 +44,11 @@
4444
# Load fullscreen CSS and JavaScript from external files
4545
_MODULE_DIR = Path(__file__).parent
4646
_FULLSCREEN_CSS = (_MODULE_DIR / "fullscreen.css").read_text(encoding="utf-8")
47-
_MERMAID_RUN_FULLSCREEN = (_MODULE_DIR / "fullscreen.js").read_text(encoding="utf-8")
48-
_MERMAID_RUN_FULLSCREEN_ZOOM = (_MODULE_DIR / "fullscreen_zoom.js").read_text(encoding="utf-8")
47+
_MERMAID_CSS = (_MODULE_DIR / "default.css").read_text(encoding="utf-8")
48+
_MERMAID_RUN = (_MODULE_DIR / "default.js").read_text(encoding="utf-8")
4949

5050
mapname_re = re.compile(r'<map id="(.*?)"')
5151
_MERMAID_INIT_JS_DEFAULT = "mermaid.initialize({startOnLoad:false});"
52-
_MERMAID_RUN_NO_D3_ZOOM = """
53-
import mermaid from "{mermaid_js_url}";
54-
window.addEventListener("load", () => mermaid.run());
55-
"""
56-
57-
_MERMAID_RUN_D3_ZOOM = """
58-
import mermaid from "{mermaid_js_url}";
59-
const load = async () => {{
60-
await mermaid.run();
61-
const all_mermaids = document.querySelectorAll(".mermaid");
62-
const mermaids_to_add_zoom = {d3_node_count} === -1 ? all_mermaids.length : {d3_node_count};
63-
const mermaids_processed = document.querySelectorAll(".mermaid[data-processed='true']");
64-
if(mermaids_to_add_zoom > 0) {{
65-
var svgs = d3.selectAll("{d3_selector}");
66-
if(all_mermaids.length !== mermaids_processed.length) {{
67-
// try again in a sec, wait for mermaids to load
68-
setTimeout(load, 200);
69-
return;
70-
}} else if(svgs.size() !== mermaids_to_add_zoom) {{
71-
// try again in a sec, wait for mermaids to load
72-
setTimeout(load, 200);
73-
return;
74-
}} else {{
75-
svgs.each(function() {{
76-
var svg = d3.select(this);
77-
svg.html("<g class='wrapper'>" + svg.html() + "</g>");
78-
var inner = svg.select("g");
79-
var zoom = d3.zoom().on("zoom", function(event) {{
80-
inner.attr("transform", event.transform);
81-
}});
82-
svg.call(zoom);
83-
}});
84-
}}
85-
}}
86-
}};
87-
88-
window.addEventListener("load", load);
89-
"""
9052

9153

9254
class mermaid(nodes.General, nodes.Inline, nodes.Element):
@@ -487,6 +449,8 @@ def install_js(
487449
_wrote_mermaid_run = False
488450
_has_zoom = False
489451
_has_fullscreen = app.config.mermaid_fullscreen
452+
_button_text = app.config.mermaid_fullscreen_button
453+
_button_opacity = app.config.mermaid_fullscreen_button_opacity
490454

491455
if app.config.mermaid_output_format == "raw":
492456
if app.config.d3_use_local:
@@ -500,7 +464,16 @@ def install_js(
500464
if app.config.mermaid_d3_zoom:
501465
_has_zoom = True
502466
if not _has_fullscreen:
503-
_d3_js_script = _MERMAID_RUN_D3_ZOOM.format(d3_selector=".mermaid svg", d3_node_count=-1, mermaid_js_url=_mermaid_js_url)
467+
_d3_js_script = _MERMAID_RUN.format(
468+
mermaid_js_url=_mermaid_js_url,
469+
fullscreen_css="", # ignored
470+
button_text=_button_text, # ignored
471+
button_opacity=_button_opacity, # ignored
472+
d3_selector=".mermaid svg",
473+
d3_node_count=-1,
474+
add_fullscreen=False,
475+
add_zoom=True,
476+
)
504477
app.add_js_file(None, body=_d3_js_script, priority=app.config.mermaid_js_priority, type="module")
505478
_wrote_mermaid_run = True
506479
elif doctree:
@@ -518,14 +491,21 @@ def install_js(
518491
if _d3_selector != "":
519492
_has_zoom = True
520493
if not _has_fullscreen:
521-
_d3_js_script = _MERMAID_RUN_D3_ZOOM.format(d3_selector=_d3_selector, d3_node_count=count, mermaid_js_url=_mermaid_js_url)
494+
_d3_js_script = _MERMAID_RUN.format(
495+
mermaid_js_url=_mermaid_js_url,
496+
fullscreen_css="", # ignored
497+
button_text=_button_text, # ignored
498+
button_opacity=_button_opacity, # ignored
499+
d3_selector=_d3_selector,
500+
d3_node_count=count,
501+
add_zoom=False,
502+
add_fullscreen=True,
503+
)
522504
app.add_js_file(None, body=_d3_js_script, priority=app.config.mermaid_js_priority, type="module")
523505
_wrote_mermaid_run = True
524506

525507
# Handle fullscreen feature
526508
if _has_fullscreen and not _wrote_mermaid_run:
527-
_button_text = app.config.mermaid_fullscreen_button
528-
_button_opacity = app.config.mermaid_fullscreen_button_opacity
529509
if _has_zoom:
530510
# Fullscreen with zoom
531511
_d3_selector = ".mermaid svg" if app.config.mermaid_d3_zoom else ""
@@ -546,27 +526,48 @@ def install_js(
546526
count = -1
547527
else:
548528
count = -1
549-
_d3_js_script = _MERMAID_RUN_FULLSCREEN_ZOOM.format(
529+
_d3_js_script = _MERMAID_RUN.format(
550530
mermaid_js_url=_mermaid_js_url,
551531
fullscreen_css=_FULLSCREEN_CSS,
552532
button_text=_button_text,
553533
button_opacity=_button_opacity,
554534
d3_selector=_d3_selector if _d3_selector else ".mermaid svg",
555535
d3_node_count=count if _d3_selector else -1,
536+
add_zoom=True,
537+
add_fullscreen=True,
556538
)
557539
app.add_js_file(None, body=_d3_js_script, priority=app.config.mermaid_js_priority, type="module")
558540
_wrote_mermaid_run = True
559541
else:
560542
# Fullscreen without zoom
561-
_fullscreen_js_script = _MERMAID_RUN_FULLSCREEN.format(
562-
mermaid_js_url=_mermaid_js_url, fullscreen_css=_FULLSCREEN_CSS, button_text=_button_text
543+
_fullscreen_js_script = _MERMAID_RUN.format(
544+
mermaid_js_url=_mermaid_js_url,
545+
fullscreen_css=_FULLSCREEN_CSS,
546+
button_text=_button_text,
547+
button_opacity=_button_opacity,
548+
d3_selector="", # ignored
549+
d3_node_count=-1, # ignored
550+
add_zoom=False,
551+
add_fullscreen=True,
563552
)
564553
app.add_js_file(None, body=_fullscreen_js_script, priority=app.config.mermaid_js_priority, type="module")
565554
_wrote_mermaid_run = True
566555

567556
if not _wrote_mermaid_run and _mermaid_js_url:
568557
app.add_js_file(
569-
None, body=_MERMAID_RUN_NO_D3_ZOOM.format(mermaid_js_url=_mermaid_js_url), priority=app.config.mermaid_js_priority, type="module"
558+
None,
559+
body=_MERMAID_RUN.format(
560+
mermaid_js_url=_mermaid_js_url,
561+
fullscreen_css="",
562+
button_text="",
563+
button_opacity="",
564+
d3_selector="", # ignored
565+
d3_node_count=-1, # ignored
566+
add_zoom=False,
567+
add_fullscreen=False,
568+
),
569+
priority=app.config.mermaid_js_priority,
570+
type="module",
570571
)
571572

572573

‎sphinxcontrib/mermaid/default.css‎

Whitespace-only changes.

sphinxcontrib/mermaid/fullscreen_zoom.js renamed to sphinxcontrib/mermaid/default.js

Lines changed: 45 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -20,32 +20,43 @@ const isDarkTheme = () => {{
2020

2121
const load = async () => {{
2222
await mermaid.run();
23+
2324
const all_mermaids = document.querySelectorAll(".mermaid");
24-
const mermaids_to_add_zoom = {d3_node_count} === -1 ? all_mermaids.length : {d3_node_count};
2525
const mermaids_processed = document.querySelectorAll(".mermaid[data-processed='true']");
26-
if(mermaids_to_add_zoom > 0) {{
27-
var svgs = d3.selectAll("{d3_selector}");
28-
if(all_mermaids.length !== mermaids_processed.length) {{
29-
setTimeout(load, 200);
30-
return;
31-
}} else if(svgs.size() !== mermaids_to_add_zoom) {{
32-
setTimeout(load, 200);
33-
return;
34-
}} else {{
35-
svgs.each(function() {{
36-
var svg = d3.select(this);
37-
svg.html("<g class='wrapper'>" + svg.html() + "</g>");
38-
var inner = svg.select("g");
39-
var zoom = d3.zoom().on("zoom", function(event) {{
40-
inner.attr("transform", event.transform);
26+
27+
if ("{add_zoom}" === "True") {{
28+
const mermaids_to_add_zoom = {d3_node_count} === -1 ? all_mermaids.length : {d3_node_count};
29+
if(mermaids_to_add_zoom > 0) {{
30+
var svgs = d3.selectAll("{d3_selector}");
31+
if(all_mermaids.length !== mermaids_processed.length) {{
32+
setTimeout(load, 200);
33+
return;
34+
}} else if(svgs.size() !== mermaids_to_add_zoom) {{
35+
setTimeout(load, 200);
36+
return;
37+
}} else {{
38+
svgs.each(function() {{
39+
var svg = d3.select(this);
40+
svg.html("<g class='wrapper'>" + svg.html() + "</g>");
41+
var inner = svg.select("g");
42+
var zoom = d3.zoom().on("zoom", function(event) {{
43+
inner.attr("transform", event.transform);
44+
}});
45+
svg.call(zoom);
4146
}});
42-
svg.call(zoom);
43-
}});
47+
}}
4448
}}
49+
}} else if(all_mermaids.length !== mermaids_processed.length) {{
50+
// Wait for mermaid to process all diagrams
51+
setTimeout(load, 200);
52+
return;
4553
}}
4654

4755
const darkTheme = isDarkTheme();
4856

57+
// Stop here if not adding fullscreen capability
58+
if ("{add_fullscreen}" !== "True") return;
59+
4960
const modal = document.createElement('div');
5061
modal.className = 'mermaid-fullscreen-modal' + (darkTheme ? ' dark-theme' : '');
5162
modal.setAttribute('role', 'dialog');
@@ -120,20 +131,22 @@ const load = async () => {{
120131
svg.style.width = '100%';
121132
svg.style.height = 'auto';
122133
svg.style.maxWidth = '100%';
123-
svg.style.display = 'block';
124-
125-
setTimeout(() => {{
126-
const g = svg.querySelector('g');
127-
if (g) {{
128-
var svgD3 = d3.select(svg);
129-
svgD3.html("<g class='wrapper'>" + svgD3.html() + "</g>");
130-
var inner = svgD3.select("g");
131-
var zoom = d3.zoom().on("zoom", function(event) {{
132-
inner.attr("transform", event.transform);
133-
}});
134-
svgD3.call(zoom);
135-
}}
136-
}}, 100);
134+
svg.style.sdisplay = 'block';
135+
136+
if ("{add_zoom}" === "True") {{
137+
setTimeout(() => {{
138+
const g = svg.querySelector('g');
139+
if (g) {{
140+
var svgD3 = d3.select(svg);
141+
svgD3.html("<g class='wrapper'>" + svgD3.html() + "</g>");
142+
var inner = svgD3.select("g");
143+
var zoom = d3.zoom().on("zoom", function(event) {{
144+
inner.attr("transform", event.transform);
145+
}});
146+
svgD3.call(zoom);
147+
}}
148+
}}, 100);
149+
}}
137150
}}
138151

139152
modal.classList.add('active');

‎sphinxcontrib/mermaid/fullscreen.css‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,27 @@
11
.mermaid-container {
2-
position: relative !important;
3-
display: inline-block;
2+
display: flex;
3+
flex-direction: row;
4+
width: 100%;
5+
}
6+
7+
.mermaid-container > pre {
8+
display: block;
9+
width: 95%;
10+
}
11+
12+
.mermaid-container > pre > svg {
413
width: 100%;
14+
height: auto;
15+
max-width: 100% !important;
516
}
617

718
.mermaid-fullscreen-btn {
8-
position: absolute !important;
919
width: 28px;
1020
height: 28px;
1121
background: rgba(255, 255, 255, 0.95);
1222
border: 1px solid rgba(0, 0, 0, 0.3);
1323
border-radius: 4px;
1424
cursor: pointer;
15-
z-index: 100;
1625
display: flex;
1726
align-items: center;
1827
justify-content: center;
@@ -65,7 +74,7 @@
6574
justify-content: center;
6675
}
6776

68-
.mermaid-container-fullscreen {
77+
.mermaid-fullscreen-content {
6978
position: relative;
7079
width: 95vw;
7180
height: 90vh;
@@ -81,20 +90,20 @@
8190
justify-content: center;
8291
}
8392

84-
.mermaid-container-fullscreen.dark-theme {
93+
.mermaid-fullscreen-content.dark-theme {
8594
background: #1a1a1a;
8695
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
8796
}
8897

89-
.mermaid-container-fullscreen .mermaid {
98+
.mermaid-fullscreen-content .mermaid {
9099
width: 100%;
91100
height: 100%;
92101
display: flex;
93102
align-items: center;
94103
justify-content: center;
95104
}
96105

97-
.mermaid-container-fullscreen .mermaid svg {
106+
.mermaid-fullscreen-content .mermaid svg {
98107
width: 100%;
99108
height: auto;
100109
max-width: 100%;
@@ -142,4 +151,4 @@
142151

143152
.mermaid-fullscreen-modal .mermaid-fullscreen-btn {
144153
display: none !important;
145-
}
154+
}

0 commit comments

Comments
 (0)