Skip to content

Commit 3f9c28b

Browse files
davepagurekdavepagurek
committed
Use fieldsets, fix aria labels
1 parent 22871b5 commit 3f9c28b

File tree

3 files changed

+90
-14
lines changed

3 files changed

+90
-14
lines changed

‎client/modules/IDE/components/Preferences/index.jsx‎

Lines changed: 61 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -583,7 +583,9 @@ export default function Preferences() {
583583
updateHTML(versionInfo.setP5Sound(true));
584584
}
585585
}}
586-
aria-label={t('Preferences.AutosaveOnARIA')}
586+
aria-label={`${t('Preferences.SoundAddon')} ${t(
587+
'Preferences.AddonOn'
588+
)}`}
587589
name="soundaddon"
588590
id="soundaddon-on"
589591
className="preference__radio-button"
@@ -604,7 +606,9 @@ export default function Preferences() {
604606
}
605607
updateHTML(versionInfo.setP5Sound(false));
606608
}}
607-
aria-label={t('Preferences.AutosaveOffARIA')}
609+
aria-label={`${t('Preferences.SoundAddon')} ${t(
610+
'Preferences.AddonOff'
611+
)}`}
608612
name="soundaddon"
609613
id="soundaddon-off"
610614
className="preference__radio-button"
@@ -634,7 +638,9 @@ export default function Preferences() {
634638
onChange={() =>
635639
updateHTML(versionInfo.setP5PreloadAddon(true))
636640
}
637-
aria-label={t('Preferences.AutosaveOnARIA')}
641+
aria-label={`${t('Preferences.PreloadAddon')} ${t(
642+
'Preferences.AddonOn'
643+
)}`}
638644
name="preloadaddon"
639645
id="preloadaddon-on"
640646
className="preference__radio-button"
@@ -652,7 +658,9 @@ export default function Preferences() {
652658
onChange={() =>
653659
updateHTML(versionInfo.setP5PreloadAddon(false))
654660
}
655-
aria-label={t('Preferences.AutosaveOffARIA')}
661+
aria-label={`${t('Preferences.PreloadAddon')} ${t(
662+
'Preferences.AddonOff'
663+
)}`}
656664
name="preloadaddon"
657665
id="preloadaddon-off"
658666
className="preference__radio-button"
@@ -677,12 +685,14 @@ export default function Preferences() {
677685
onChange={() =>
678686
updateHTML(versionInfo.setP5ShapesAddon(true))
679687
}
680-
aria-label={t('Preferences.AutosaveOnARIA')}
688+
aria-label={`${t('Preferences.ShapesAddon')} ${t(
689+
'Preferences.AddonOn'
690+
)}`}
681691
name="shapesaddon"
682692
id="shapesaddon-on"
683693
className="preference__radio-button"
684694
value="On"
685-
checked={versionInfo.p5ShapesAdddon}
695+
checked={versionInfo.p5ShapesAddon}
686696
/>
687697
<label
688698
htmlFor="shapesaddon-on"
@@ -695,12 +705,14 @@ export default function Preferences() {
695705
onChange={() =>
696706
updateHTML(versionInfo.setP5ShapesAddon(false))
697707
}
698-
aria-label={t('Preferences.AutosaveOffARIA')}
708+
aria-label={`${t('Preferences.ShapesAddon')} ${t(
709+
'Preferences.AddonOff'
710+
)}`}
699711
name="shapesaddon"
700712
id="shapesaddon-off"
701713
className="preference__radio-button"
702714
value="Off"
703-
checked={!versionInfo.p5ShapesAdddon}
715+
checked={!versionInfo.p5ShapesAddon}
704716
/>
705717
<label
706718
htmlFor="shapesaddon-off"
@@ -710,6 +722,47 @@ export default function Preferences() {
710722
</label>
711723
</fieldset>
712724
</div>
725+
<div className="preference">
726+
<h4 className="preference__title">
727+
{t('Preferences.DataAddon')}
728+
</h4>
729+
<fieldset className="preference__options">
730+
<input
731+
type="radio"
732+
onChange={() =>
733+
updateHTML(versionInfo.setP5DataAddon(true))
734+
}
735+
aria-label={`${t('Preferences.DataAddon')} ${t(
736+
'Preferences.AddonOn'
737+
)}`}
738+
name="dataaddon"
739+
id="dataaddon-on"
740+
className="preference__radio-button"
741+
value="On"
742+
checked={versionInfo.p5DataAddon}
743+
/>
744+
<label htmlFor="dataaddon-on" className="preference__option">
745+
{t('Preferences.On')}
746+
</label>
747+
<input
748+
type="radio"
749+
onChange={() =>
750+
updateHTML(versionInfo.setP5DataAddon(false))
751+
}
752+
aria-label={`${t('Preferences.DataAddon')} ${t(
753+
'Preferences.AddonOff'
754+
)}`}
755+
name="dataaddon"
756+
id="dataaddon-off"
757+
className="preference__radio-button"
758+
value="Off"
759+
checked={!versionInfo.p5DataAddon}
760+
/>
761+
<label htmlFor="dataaddon-off" className="preference__option">
762+
{t('Preferences.Off')}
763+
</label>
764+
</fieldset>
765+
</div>
713766
</>
714767
)}
715768
</TabPanel>

‎client/modules/IDE/hooks/useP5Version.jsx‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -136,8 +136,12 @@ export const p5Versions = [
136136
export const currentP5Version = p5Versions[0];
137137

138138
export const p5SoundURL = `https://cdnjs.cloudflare.com/ajax/libs/p5.js/${currentP5Version}/addons/p5.sound.min.js`;
139-
export const p5PreloadAddonURL = 'https://TODO/preload.js';
140-
export const p5ShapesAddonURL = 'https://TODO/shapes.js';
139+
export const p5PreloadAddonURL =
140+
'https://cdn.jsdelivr.net/npm/p5.js-compatibility@0.0.1/src/preload.js';
141+
export const p5ShapesAddonURL =
142+
'https://cdn.jsdelivr.net/npm/p5.js-compatibility@0.0.1/src/shapes.js';
143+
export const p5DataAddonURL =
144+
'https://cdn.jsdelivr.net/npm/p5.js-compatibility@0.0.1/src/data.js';
141145
export const p5URL = `https://cdnjs.cloudflare.com/ajax/libs/p5.js/${currentP5Version}/p5.js`;
142146

143147
const P5VersionContext = React.createContext({});
@@ -259,6 +263,20 @@ export function P5VersionProvider(props) {
259263
return serializeResult();
260264
};
261265

266+
const p5DataAddonNode = [
267+
...dom.documentElement.querySelectorAll('script')
268+
].find((s) => s.getAttribute('src') === p5DataAddonURL);
269+
const setP5DataAddon = function (enabled) {
270+
if (!enabled && p5DataAddonNode) {
271+
p5DataAddonNode.parentNode.removeChild(p5DataAddonNode);
272+
} else if (enabled && !p5DataAddonNode) {
273+
const newNode = document.createElement('script');
274+
newNode.setAttribute('src', p5DataAddonURL);
275+
scriptNode.parentNode.insertBefore(newNode, scriptNode.nextSibling);
276+
}
277+
return serializeResult();
278+
};
279+
262280
return {
263281
version,
264282
minified,
@@ -271,8 +289,10 @@ export function P5VersionProvider(props) {
271289
setLastP5SoundURL,
272290
p5PreloadAddon: !!p5PreloadAddonNode,
273291
setP5PreloadAddon,
274-
p5ShapesAdddon: !!p5ShapesAddonNode,
275-
setP5ShapesAddon
292+
p5ShapesAddon: !!p5ShapesAddonNode,
293+
setP5ShapesAddon,
294+
p5DataAddon: !!p5DataAddonNode,
295+
setP5DataAddon
276296
};
277297
}
278298
return null;

‎translations/locales/en-US/translations.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -222,8 +222,11 @@
222222
"CustomVersionInfo": "The version of p5.js is currently being managed in the code of index.html. This means it can't be adjusted from this tab.",
223223
"CustomVersionReset": "If you'd like to use the default libraries, you can replace the script tags in index.html with the following:",
224224
"SoundAddon": "p5.sound.js Addon",
225-
"PreloadAddon": "p5.js 2.0 Addon - Preload",
226-
"ShapesAddon": "p5.js 2.0 Addon - Shapes",
225+
"PreloadAddon": "p5.js 1.x Compatibility Add-on — Preload",
226+
"ShapesAddon": "p5.js 1.x Compatibility Add-on — Shapes",
227+
"DataAddon": "p5.js 1.x Compatibility Add-on — Data Structures",
228+
"AddonOnARIA": "on",
229+
"AddonOffARIA": "off",
227230
"UndoSoundVersion": "Want to use p5.sound.js again? Turning it back on will restore the version you were using before.",
228231
"CopyToClipboardSuccess": "Copied to clipboard!",
229232
"CopyToClipboardFailure": "We weren't able to copy the text, try selecting it and copying it manually."

0 commit comments

Comments
 (0)