Skip to content

Commit f0ca620

Browse files
ShogunPandaShogunPanda
committed
doc: fix api docs when JS is disabled
1 parent 304f37d commit f0ca620

5 files changed

Lines changed: 112 additions & 81 deletions

File tree

‎doc/api_assets/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# API Reference Document Assets
22

3+
## api.js
4+
5+
The main script for API reference documents.
6+
37
## hljs.css
48

59
The syntax theme for code snippets in API reference documents.

‎doc/api_assets/api.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
'use strict';
2+
3+
// Check if we have Javascript support
4+
const root = document.querySelector(':root');
5+
root.classList.remove('no-js');
6+
root.classList.add('has-js');
7+
8+
// Restore user mode preferences
9+
const kCustomPreference = 'customDarkTheme';
10+
const userSettings = sessionStorage.getItem(kCustomPreference);
11+
const themeToggleButton = document.getElementById('theme-toggle-btn');
12+
if (userSettings === null && window.matchMedia) {
13+
const mq = window.matchMedia('(prefers-color-scheme: dark)');
14+
if ('onchange' in mq) {
15+
function mqChangeListener(e) {
16+
document.body.classList.toggle('dark-mode', e.matches);
17+
}
18+
mq.addEventListener('change', mqChangeListener);
19+
if (themeToggleButton) {
20+
themeToggleButton.addEventListener('click', function() {
21+
mq.removeEventListener('change', mqChangeListener);
22+
}, { once: true });
23+
}
24+
}
25+
if (mq.matches) {
26+
document.body.classList.add('dark-mode');
27+
}
28+
} else if (userSettings === 'true') {
29+
document.body.classList.add('dark-mode');
30+
}
31+
if (themeToggleButton) {
32+
themeToggleButton.hidden = false;
33+
themeToggleButton.addEventListener('click', function() {
34+
sessionStorage.setItem(
35+
kCustomPreference,
36+
document.body.classList.toggle('dark-mode')
37+
);
38+
});
39+
}
40+
41+
// Handle pickers with click/taps rather than hovers
42+
const pickers = document.querySelectorAll('.picker-header');
43+
for(const picker of pickers) {
44+
picker.addEventListener('click', e => {
45+
if (!e.target.closest('.picker')) {
46+
e.preventDefault();
47+
}
48+
49+
if (picker.classList.contains('expanded')) {
50+
picker.classList.remove('expanded');
51+
} else {
52+
for (const other of pickers) {
53+
other.classList.remove('expanded');
54+
}
55+
56+
picker.classList.add('expanded');
57+
}
58+
});
59+
}
60+
61+
// Track when the header is in sticky position
62+
const header = document.querySelector(".header");
63+
let ignoreNextIntersection = false;
64+
new IntersectionObserver(
65+
([e]) => {
66+
const currentStatus = header.classList.contains('is-pinned');
67+
const newStatus = e.intersectionRatio < 1;
68+
69+
// Same status, do nothing
70+
if(currentStatus === newStatus) {
71+
return;
72+
} else if(ignoreNextIntersection) {
73+
ignoreNextIntersection = false;
74+
return;
75+
}
76+
77+
/*
78+
To avoid flickering, ignore the next change event that is triggered
79+
as the visible elements in the header change once we pin it.
80+
81+
The timer is reset anyway after few milliseconds
82+
*/
83+
ignoreNextIntersection = true;
84+
setTimeout(() => ignoreNextIntersection = false, 50);
85+
86+
header.classList.toggle('is-pinned', newStatus);
87+
},
88+
{ threshold: [1] }
89+
).observe(header);

‎doc/api_assets/style.css‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -165,10 +165,6 @@ em code {
165165
line-height: 1.5rem;
166166
}
167167

168-
/* #gtoc li {
169-
white-space: nowrap;
170-
} */
171-
172168
li.picker-header {
173169
position: relative;
174170
}
@@ -186,19 +182,23 @@ li.picker-header .expanded-arrow {
186182
display: none;
187183
}
188184

189-
li.picker-header.expanded .collapsed-arrow {
185+
li.picker-header.expanded .collapsed-arrow,
186+
:root.no-js li.picker-header:hover .collapsed-arrow {
190187
display: none;
191188
}
192189

193-
li.picker-header.expanded .expanded-arrow {
190+
li.picker-header.expanded .expanded-arrow,
191+
:root.no-js li.picker-header:hover .expanded-arrow {
194192
display: inline-block;
195193
}
196194

197-
li.picker-header.expanded > a {
195+
li.picker-header.expanded > a,
196+
:root.no-js li.picker-header:hover > a {
198197
border-radius: 2px 2px 0 0;
199198
}
200199

201-
li.picker-header.expanded > .picker {
200+
li.picker-header.expanded > .picker,
201+
:root.no-js li.picker-header:hover > .picker {
202202
display: block;
203203
z-index: 1;
204204
}
@@ -797,10 +797,15 @@ kbd {
797797
}
798798

799799
.header {
800-
position: sticky;
801-
top: -1px;
800+
position: relative;
802801
padding-top: 1rem;
802+
background-color: var(--color-fill-app);
803803
z-index: 1;
804+
top: -1px;
805+
}
806+
807+
:root.has-js .header {
808+
position: sticky;
804809
}
805810

806811
.header .pinner-header {
@@ -809,11 +814,6 @@ kbd {
809814
font-weight: 700;
810815
}
811816

812-
.header.is-pinned {
813-
background-color: var(--color-fill-app);
814-
z-index: 1;
815-
}
816-
817817
.header.is-pinned .header-container {
818818
display: none;
819819
}

‎doc/template.html‎

Lines changed: 2 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" class="no-js">
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width">
@@ -74,69 +74,6 @@ <h1>Node.js __VERSION__ documentation</h1>
7474
</div>
7575
</div>
7676
</div>
77-
<script>
78-
'use strict';
79-
{
80-
const kCustomPreference = 'customDarkTheme';
81-
const userSettings = sessionStorage.getItem(kCustomPreference);
82-
const themeToggleButton = document.getElementById('theme-toggle-btn');
83-
if (userSettings === null && window.matchMedia) {
84-
const mq = window.matchMedia('(prefers-color-scheme: dark)');
85-
if ('onchange' in mq) {
86-
function mqChangeListener(e) {
87-
document.body.classList.toggle('dark-mode', e.matches);
88-
}
89-
mq.addEventListener('change', mqChangeListener);
90-
if (themeToggleButton) {
91-
themeToggleButton.addEventListener('click', function() {
92-
mq.removeEventListener('change', mqChangeListener);
93-
}, { once: true });
94-
}
95-
}
96-
if (mq.matches) {
97-
document.body.classList.add('dark-mode');
98-
}
99-
} else if (userSettings === 'true') {
100-
document.body.classList.add('dark-mode');
101-
}
102-
if (themeToggleButton) {
103-
themeToggleButton.hidden = false;
104-
themeToggleButton.addEventListener('click', function() {
105-
sessionStorage.setItem(
106-
kCustomPreference,
107-
document.body.classList.toggle('dark-mode')
108-
);
109-
});
110-
}
111-
112-
// Handle pickers with click/taps rather than hovers
113-
const pickers = document.querySelectorAll('.picker-header');
114-
for(const picker of pickers) {
115-
picker.addEventListener('click', e => {
116-
if (!e.target.closest('.picker')) {
117-
e.preventDefault();
118-
}
119-
120-
if (picker.classList.contains('expanded')) {
121-
picker.classList.remove('expanded');
122-
} else {
123-
for (const other of pickers) {
124-
other.classList.remove('expanded');
125-
}
126-
127-
picker.classList.add('expanded');
128-
}
129-
});
130-
}
131-
132-
// This snippet allows to track when the header is in sticky position
133-
new IntersectionObserver(
134-
([e]) => {
135-
e.target.classList.toggle("is-pinned", e.intersectionRatio < 1)
136-
},
137-
{ threshold: [1] }
138-
).observe(document.querySelector(".header"));
139-
}
140-
</script>
77+
<script src="assets/api.js" type="text/javascript"></script>
14178
</body>
14279
</html>

‎test/doctool/test-make-doc.mjs‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,8 @@ const links = toc.match(globalRe);
4040
assert.notStrictEqual(links, null);
4141

4242
// Filter out duplicate links, leave just filenames, add expected JSON files.
43-
const linkedHtmls = [...new Set(links)].map((link) => link.match(re)[1]);
43+
const linkedHtmls = [...new Set(links)].map((link) => link.match(re)[1])
44+
.concat(['index.html']);
4445
const expectedJsons = linkedHtmls
4546
.map((name) => name.replace('.html', '.json'));
4647
const expectedDocs = linkedHtmls.concat(expectedJsons);

0 commit comments

Comments
 (0)