Skip to content

Commit

Permalink
doc: rename possibly confusing variable and CSS class
Browse files Browse the repository at this point in the history
A "selector" usually refers to a CSS selector, when here it refers to a
checkbox.

PR-URL: #49536
Reviewed-By: Claudio Wunder <cwunder@gnome.org>
Reviewed-By: Tierney Cyren <hello@bnb.im>
Reviewed-By: Chemi Atlow <chemi@atlow.co.il>
  • Loading branch information
aduh95 authored and ruyadorno committed Sep 28, 2023
1 parent 4126a6e commit 8e033c3
Show file tree
Hide file tree
Showing 5 changed files with 18 additions and 18 deletions.
6 changes: 3 additions & 3 deletions doc/api_assets/api.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
22 changes: 11 additions & 11 deletions doc/api_assets/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -950,7 +950,7 @@ kbd {
display: block;
}

.js-flavor-selector {
.js-flavor-toggle {
-webkit-appearance: none;
appearance: none;
float: right;
Expand All @@ -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);
}

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}
}
4 changes: 2 additions & 2 deletions test/doctool/test-doctool-html.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -138,11 +138,11 @@ const testData = [
},
{
file: fixtures.path('document_with_esm_and_cjs_code_snippet.md'),
html: '<input class="js-flavor-selector" type="checkbox" checked',
html: '<input class="js-flavor-toggle" type="checkbox" checked',
},
{
file: fixtures.path('document_with_cjs_and_esm_code_snippet.md'),
html: '<input class="js-flavor-selector" type="checkbox" aria-label',
html: '<input class="js-flavor-toggle" type="checkbox" aria-label',
},
];

Expand Down
2 changes: 1 addition & 1 deletion tools/doc/buildCSSForFlavoredJS.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export default function buildCSSForFlavoredJS(dynamicSizes) {
`@media(max-width:${getMarginLeft(charCount) + getPaddingLeft(charCount) +
charCount * ESTIMATED_CHAR_WIDTH + TOGGLE_WIDTH +
getPaddingRight(charCount) + getMarginRight(charCount)}px){` +
`.with-${charCount}-chars>.js-flavor-selector{` +
`.with-${charCount}-chars>.js-flavor-toggle{` +
'float:none;' +
'margin:0 0 1em auto;' +
'}' +
Expand Down
2 changes: 1 addition & 1 deletion tools/doc/html.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,7 @@ export function preprocessElements({ filename }) {
const actualCharCount = Math.max(charCountFirstTwoLines, previousNode.charCountFirstTwoLines);
(dynamicSizes[filename] ??= new Set()).add(actualCharCount);
node.value = `<pre class="with-${actualCharCount}-chars">` +
'<input class="js-flavor-selector" type="checkbox"' +
'<input class="js-flavor-toggle" type="checkbox"' +
// If CJS comes in second, ESM should display by default.
(node.lang === 'cjs' ? ' checked' : '') +
' aria-label="Show modern ES modules syntax">' +
Expand Down

0 comments on commit 8e033c3

Please sign in to comment.