| FazBrowse GitHub Viewer | Trending | | Home |
| Tools: [Download Repo ZIP] [Original HTTPS Page] |
1 parent 4829d97 commit d74cff7
5 files changed
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -142,12 +142,12 @@ | |||
| 142 | 142 | button.addEventListener('click', (el) => { | |
| 143 | 143 | const parentNode = el.target.parentNode; | |
| 144 | 144 | ||
| 145 | - const flavorSelector = parentNode.querySelector('.js-flavor-selector'); | ||
| 145 | + const flavorToggle = parentNode.querySelector('.js-flavor-toggle'); | ||
| 146 | 146 | ||
| 147 | 147 | let code = ''; | |
| 148 | 148 | ||
| 149 | - if (flavorSelector) { | ||
| 150 | - if (flavorSelector.checked) { | ||
| 149 | + if (flavorToggle) { | ||
| 150 | + if (flavorToggle.checked) { | ||
| 151 | 151 | code = parentNode.querySelector('.mjs').textContent; | |
| 152 | 152 | } else { | |
| 153 | 153 | code = parentNode.querySelector('.cjs').textContent; | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -950,7 +950,7 @@ kbd { | |||
| 950 | 950 | display: block; | |
| 951 | 951 | } | |
| 952 | 952 | ||
| 953 | - .js-flavor-selector { | ||
| 953 | + .js-flavor-toggle { | ||
| 954 | 954 | -webkit-appearance: none; | |
| 955 | 955 | appearance: none; | |
| 956 | 956 | float: right; | |
@@ -963,14 +963,14 @@ kbd { | |||
| 963 | 963 | cursor: pointer; | |
| 964 | 964 | margin: 0; | |
| 965 | 965 | } | |
| 966 | - .js-flavor-selector:checked { | ||
| 966 | + .js-flavor-toggle:checked { | ||
| 967 | 967 | background-image: url(./js-flavor-esm.svg); | |
| 968 | 968 | } | |
| 969 | - .js-flavor-selector:not(:checked) ~ .mjs, | ||
| 970 | - .js-flavor-selector:checked ~ .cjs { | ||
| 969 | + .js-flavor-toggle:not(:checked) ~ .mjs, | ||
| 970 | + .js-flavor-toggle:checked ~ .cjs { | ||
| 971 | 971 | display: none; | |
| 972 | 972 | } | |
| 973 | - .dark-mode .js-flavor-selector { | ||
| 973 | + .dark-mode .js-flavor-toggle { | ||
| 974 | 974 | filter: invert(1); | |
| 975 | 975 | } | |
| 976 | 976 | ||
@@ -1001,7 +1001,7 @@ kbd { | |||
| 1001 | 1001 | } | |
| 1002 | 1002 | ||
| 1003 | 1003 | @supports (aspect-ratio: 1 / 1) { | |
| 1004 | - .js-flavor-selector { | ||
| 1004 | + .js-flavor-toggle { | ||
| 1005 | 1005 | height: 1.5em; | |
| 1006 | 1006 | width: auto; | |
| 1007 | 1007 | aspect-ratio: 2719 / 384; | |
@@ -1058,24 +1058,24 @@ kbd { | |||
| 1058 | 1058 | #apicontent { | |
| 1059 | 1059 | overflow: hidden; | |
| 1060 | 1060 | } | |
| 1061 | - .js-flavor-selector { | ||
| 1061 | + .js-flavor-toggle { | ||
| 1062 | 1062 | display: none; | |
| 1063 | 1063 | } | |
| 1064 | - .js-flavor-selector + * { | ||
| 1064 | + .js-flavor-toggle + * { | ||
| 1065 | 1065 | margin-bottom: 2rem; | |
| 1066 | 1066 | padding-bottom: 2rem; | |
| 1067 | 1067 | border-bottom: 1px solid var(--color-text-primary); | |
| 1068 | 1068 | } | |
| 1069 | - .js-flavor-selector ~ * { | ||
| 1069 | + .js-flavor-toggle ~ * { | ||
| 1070 | 1070 | display: block !important; | |
| 1071 | 1071 | background-position: top right; | |
| 1072 | 1072 | background-size: 142px 20px; | |
| 1073 | 1073 | background-repeat: no-repeat; | |
| 1074 | 1074 | } | |
| 1075 | - .js-flavor-selector ~ .cjs { | ||
| 1075 | + .js-flavor-toggle ~ .cjs { | ||
| 1076 | 1076 | background-image: url(./js-flavor-cjs.svg); | |
| 1077 | 1077 | } | |
| 1078 | - .js-flavor-selector ~ .mjs { | ||
| 1078 | + .js-flavor-toggle ~ .mjs { | ||
| 1079 | 1079 | background-image: url(./js-flavor-esm.svg); | |
| 1080 | 1080 | } | |
| 1081 | 1081 | } | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -138,11 +138,11 @@ const testData = [ | |||
| 138 | 138 | }, | |
| 139 | 139 | { | |
| 140 | 140 | file: fixtures.path('document_with_esm_and_cjs_code_snippet.md'), | |
| 141 | - html: '<input class="js-flavor-selector" type="checkbox" checked', | ||
| 141 | + html: '<input class="js-flavor-toggle" type="checkbox" checked', | ||
| 142 | 142 | }, | |
| 143 | 143 | { | |
| 144 | 144 | file: fixtures.path('document_with_cjs_and_esm_code_snippet.md'), | |
| 145 | - html: '<input class="js-flavor-selector" type="checkbox" aria-label', | ||
| 145 | + html: '<input class="js-flavor-toggle" type="checkbox" aria-label', | ||
| 146 | 146 | }, | |
| 147 | 147 | ]; | |
| 148 | 148 | ||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -45,7 +45,7 @@ export default function buildCSSForFlavoredJS(dynamicSizes) { | |||
| 45 | 45 | `@media(max-width:${getMarginLeft(charCount) + getPaddingLeft(charCount) + | |
| 46 | 46 | charCount * ESTIMATED_CHAR_WIDTH + TOGGLE_WIDTH + | |
| 47 | 47 | getPaddingRight(charCount) + getMarginRight(charCount)}px){` + | |
| 48 | - `.with-${charCount}-chars>.js-flavor-selector{` + | ||
| 48 | + `.with-${charCount}-chars>.js-flavor-toggle{` + | ||
| 49 | 49 | 'float:none;' + | |
| 50 | 50 | 'margin:0 0 1em auto;' + | |
| 51 | 51 | '}' + | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -250,7 +250,7 @@ export function preprocessElements({ filename }) { | |||
| 250 | 250 | const actualCharCount = Math.max(charCountFirstTwoLines, previousNode.charCountFirstTwoLines); | |
| 251 | 251 | (dynamicSizes[filename] ??= new Set()).add(actualCharCount); | |
| 252 | 252 | node.value = `<pre class="with-${actualCharCount}-chars">` + | |
| 253 | - '<input class="js-flavor-selector" type="checkbox"' + | ||
| 253 | + '<input class="js-flavor-toggle" type="checkbox"' + | ||
| 254 | 254 | // If CJS comes in second, ESM should display by default. | |
| 255 | 255 | (node.lang === 'cjs' ? ' checked' : '') + | |
| 256 | 256 | ' aria-label="Show modern ES modules syntax">' + | |
| Back | FazBrowse Home | New Git URL |
0 commit comments