From 8e033c3963ae92d76832fe927d546faad5a9e31b Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Fri, 8 Sep 2023 17:03:57 +0200 Subject: [PATCH] doc: rename possibly confusing variable and CSS class A "selector" usually refers to a CSS selector, when here it refers to a checkbox. PR-URL: https://github.com/nodejs/node/pull/49536 Reviewed-By: Claudio Wunder Reviewed-By: Tierney Cyren Reviewed-By: Chemi Atlow --- doc/api_assets/api.js | 6 +++--- doc/api_assets/style.css | 22 +++++++++++----------- test/doctool/test-doctool-html.mjs | 4 ++-- tools/doc/buildCSSForFlavoredJS.mjs | 2 +- tools/doc/html.mjs | 2 +- 5 files changed, 18 insertions(+), 18 deletions(-) diff --git a/doc/api_assets/api.js b/doc/api_assets/api.js index c1151ae493e8da..f63074ef39bc80 100644 --- a/doc/api_assets/api.js +++ b/doc/api_assets/api.js @@ -142,12 +142,12 @@ button.addEventListener('click', (el) => { const parentNode = el.target.parentNode; - const flavorSelector = parentNode.querySelector('.js-flavor-selector'); + const flavorToggle = parentNode.querySelector('.js-flavor-toggle'); let code = ''; - if (flavorSelector) { - if (flavorSelector.checked) { + if (flavorToggle) { + if (flavorToggle.checked) { code = parentNode.querySelector('.mjs').textContent; } else { code = parentNode.querySelector('.cjs').textContent; diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css index 15e7b73f770eab..d5c708be0bf3ef 100644 --- a/doc/api_assets/style.css +++ b/doc/api_assets/style.css @@ -950,7 +950,7 @@ kbd { display: block; } -.js-flavor-selector { +.js-flavor-toggle { -webkit-appearance: none; appearance: none; float: right; @@ -963,14 +963,14 @@ kbd { cursor: pointer; margin: 0; } -.js-flavor-selector:checked { +.js-flavor-toggle:checked { background-image: url(./js-flavor-esm.svg); } -.js-flavor-selector:not(:checked) ~ .mjs, -.js-flavor-selector:checked ~ .cjs { +.js-flavor-toggle:not(:checked) ~ .mjs, +.js-flavor-toggle:checked ~ .cjs { display: none; } -.dark-mode .js-flavor-selector { +.dark-mode .js-flavor-toggle { filter: invert(1); } @@ -1001,7 +1001,7 @@ kbd { } @supports (aspect-ratio: 1 / 1) { - .js-flavor-selector { + .js-flavor-toggle { height: 1.5em; width: auto; aspect-ratio: 2719 / 384; @@ -1058,24 +1058,24 @@ kbd { #apicontent { overflow: hidden; } - .js-flavor-selector { + .js-flavor-toggle { display: none; } - .js-flavor-selector + * { + .js-flavor-toggle + * { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--color-text-primary); } - .js-flavor-selector ~ * { + .js-flavor-toggle ~ * { display: block !important; background-position: top right; background-size: 142px 20px; background-repeat: no-repeat; } - .js-flavor-selector ~ .cjs { + .js-flavor-toggle ~ .cjs { background-image: url(./js-flavor-cjs.svg); } - .js-flavor-selector ~ .mjs { + .js-flavor-toggle ~ .mjs { background-image: url(./js-flavor-esm.svg); } } diff --git a/test/doctool/test-doctool-html.mjs b/test/doctool/test-doctool-html.mjs index 6fbca131851f3b..08a6af4299c33e 100644 --- a/test/doctool/test-doctool-html.mjs +++ b/test/doctool/test-doctool-html.mjs @@ -138,11 +138,11 @@ const testData = [ }, { file: fixtures.path('document_with_esm_and_cjs_code_snippet.md'), - html: '.js-flavor-selector{` + + `.with-${charCount}-chars>.js-flavor-toggle{` + 'float:none;' + 'margin:0 0 1em auto;' + '}' + diff --git a/tools/doc/html.mjs b/tools/doc/html.mjs index d5dd7973e206ac..168f68c1b03f21 100644 --- a/tools/doc/html.mjs +++ b/tools/doc/html.mjs @@ -250,7 +250,7 @@ export function preprocessElements({ filename }) { const actualCharCount = Math.max(charCountFirstTwoLines, previousNode.charCountFirstTwoLines); (dynamicSizes[filename] ??= new Set()).add(actualCharCount); node.value = `
` +
-              '' +