Skip to content

Commit

Permalink
doc: fix api docs when JS is disabled
Browse files Browse the repository at this point in the history
  • Loading branch information
ShogunPanda committed Feb 1, 2022
1 parent 304f37d commit f0ca620
Show file tree
Hide file tree
Showing 5 changed files with 112 additions and 81 deletions.
4 changes: 4 additions & 0 deletions doc/api_assets/README.md
@@ -1,5 +1,9 @@
# API Reference Document Assets

## api.js

The main script for API reference documents.

## hljs.css

The syntax theme for code snippets in API reference documents.
Expand Down
89 changes: 89 additions & 0 deletions doc/api_assets/api.js
@@ -0,0 +1,89 @@
'use strict';

// Check if we have Javascript support
const root = document.querySelector(':root');
root.classList.remove('no-js');
root.classList.add('has-js');

// Restore user mode preferences
const kCustomPreference = 'customDarkTheme';
const userSettings = sessionStorage.getItem(kCustomPreference);
const themeToggleButton = document.getElementById('theme-toggle-btn');
if (userSettings === null && window.matchMedia) {
const mq = window.matchMedia('(prefers-color-scheme: dark)');
if ('onchange' in mq) {
function mqChangeListener(e) {
document.body.classList.toggle('dark-mode', e.matches);
}
mq.addEventListener('change', mqChangeListener);
if (themeToggleButton) {
themeToggleButton.addEventListener('click', function() {
mq.removeEventListener('change', mqChangeListener);
}, { once: true });
}
}
if (mq.matches) {
document.body.classList.add('dark-mode');
}
} else if (userSettings === 'true') {
document.body.classList.add('dark-mode');
}
if (themeToggleButton) {
themeToggleButton.hidden = false;
themeToggleButton.addEventListener('click', function() {
sessionStorage.setItem(
kCustomPreference,
document.body.classList.toggle('dark-mode')
);
});
}

// Handle pickers with click/taps rather than hovers
const pickers = document.querySelectorAll('.picker-header');
for(const picker of pickers) {
picker.addEventListener('click', e => {
if (!e.target.closest('.picker')) {
e.preventDefault();
}

if (picker.classList.contains('expanded')) {
picker.classList.remove('expanded');
} else {
for (const other of pickers) {
other.classList.remove('expanded');
}

picker.classList.add('expanded');
}
});
}

// Track when the header is in sticky position
const header = document.querySelector(".header");
let ignoreNextIntersection = false;
new IntersectionObserver(
([e]) => {
const currentStatus = header.classList.contains('is-pinned');
const newStatus = e.intersectionRatio < 1;

// Same status, do nothing
if(currentStatus === newStatus) {
return;
} else if(ignoreNextIntersection) {
ignoreNextIntersection = false;
return;
}

/*
To avoid flickering, ignore the next change event that is triggered
as the visible elements in the header change once we pin it.
The timer is reset anyway after few milliseconds
*/
ignoreNextIntersection = true;
setTimeout(() => ignoreNextIntersection = false, 50);

header.classList.toggle('is-pinned', newStatus);
},
{ threshold: [1] }
).observe(header);
30 changes: 15 additions & 15 deletions doc/api_assets/style.css
Expand Up @@ -165,10 +165,6 @@ em code {
line-height: 1.5rem;
}

/* #gtoc li {
white-space: nowrap;
} */

li.picker-header {
position: relative;
}
Expand All @@ -186,19 +182,23 @@ li.picker-header .expanded-arrow {
display: none;
}

li.picker-header.expanded .collapsed-arrow {
li.picker-header.expanded .collapsed-arrow,
:root.no-js li.picker-header:hover .collapsed-arrow {
display: none;
}

li.picker-header.expanded .expanded-arrow {
li.picker-header.expanded .expanded-arrow,
:root.no-js li.picker-header:hover .expanded-arrow {
display: inline-block;
}

li.picker-header.expanded > a {
li.picker-header.expanded > a,
:root.no-js li.picker-header:hover > a {
border-radius: 2px 2px 0 0;
}

li.picker-header.expanded > .picker {
li.picker-header.expanded > .picker,
:root.no-js li.picker-header:hover > .picker {
display: block;
z-index: 1;
}
Expand Down Expand Up @@ -797,10 +797,15 @@ kbd {
}

.header {
position: sticky;
top: -1px;
position: relative;
padding-top: 1rem;
background-color: var(--color-fill-app);
z-index: 1;
top: -1px;
}

:root.has-js .header {
position: sticky;
}

.header .pinner-header {
Expand All @@ -809,11 +814,6 @@ kbd {
font-weight: 700;
}

.header.is-pinned {
background-color: var(--color-fill-app);
z-index: 1;
}

.header.is-pinned .header-container {
display: none;
}
Expand Down
67 changes: 2 additions & 65 deletions doc/template.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
Expand Down Expand Up @@ -74,69 +74,6 @@ <h1>Node.js __VERSION__ documentation</h1>
</div>
</div>
</div>
<script>
'use strict';
{
const kCustomPreference = 'customDarkTheme';
const userSettings = sessionStorage.getItem(kCustomPreference);
const themeToggleButton = document.getElementById('theme-toggle-btn');
if (userSettings === null && window.matchMedia) {
const mq = window.matchMedia('(prefers-color-scheme: dark)');
if ('onchange' in mq) {
function mqChangeListener(e) {
document.body.classList.toggle('dark-mode', e.matches);
}
mq.addEventListener('change', mqChangeListener);
if (themeToggleButton) {
themeToggleButton.addEventListener('click', function() {
mq.removeEventListener('change', mqChangeListener);
}, { once: true });
}
}
if (mq.matches) {
document.body.classList.add('dark-mode');
}
} else if (userSettings === 'true') {
document.body.classList.add('dark-mode');
}
if (themeToggleButton) {
themeToggleButton.hidden = false;
themeToggleButton.addEventListener('click', function() {
sessionStorage.setItem(
kCustomPreference,
document.body.classList.toggle('dark-mode')
);
});
}

// Handle pickers with click/taps rather than hovers
const pickers = document.querySelectorAll('.picker-header');
for(const picker of pickers) {
picker.addEventListener('click', e => {
if (!e.target.closest('.picker')) {
e.preventDefault();
}

if (picker.classList.contains('expanded')) {
picker.classList.remove('expanded');
} else {
for (const other of pickers) {
other.classList.remove('expanded');
}

picker.classList.add('expanded');
}
});
}

// This snippet allows to track when the header is in sticky position
new IntersectionObserver(
([e]) => {
e.target.classList.toggle("is-pinned", e.intersectionRatio < 1)
},
{ threshold: [1] }
).observe(document.querySelector(".header"));
}
</script>
<script src="assets/api.js" type="text/javascript"></script>
</body>
</html>
3 changes: 2 additions & 1 deletion test/doctool/test-make-doc.mjs
Expand Up @@ -40,7 +40,8 @@ const links = toc.match(globalRe);
assert.notStrictEqual(links, null);

// Filter out duplicate links, leave just filenames, add expected JSON files.
const linkedHtmls = [...new Set(links)].map((link) => link.match(re)[1]);
const linkedHtmls = [...new Set(links)].map((link) => link.match(re)[1])
.concat(['index.html']);
const expectedJsons = linkedHtmls
.map((name) => name.replace('.html', '.json'));
const expectedDocs = linkedHtmls.concat(expectedJsons);
Expand Down

0 comments on commit f0ca620

Please sign in to comment.