Skip to content

Commit 89f0d5e

Browse files
davepagurekdavepagurek
committed
Start to add code to do addon toggles
1 parent 066bdf6 commit 89f0d5e

File tree

3 files changed

+113
-20
lines changed

3 files changed

+113
-20
lines changed

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

Lines changed: 55 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
} from '../../actions/preferences';
2222
import { useP5Version } from '../../hooks/useP5Version';
2323
import VersionPicker from '../VersionPicker';
24+
import { updateFileContent } from '../../actions/files';
2425

2526
export default function Preferences() {
2627
const { t } = useTranslation();
@@ -42,7 +43,7 @@ export default function Preferences() {
4243
} = useSelector((state) => state.preferences);
4344

4445
const [state, setState] = useState({ fontSize });
45-
const { versionInfo } = useP5Version();
46+
const { versionInfo, indexID } = useP5Version();
4647

4748
function onFontInputChange(event) {
4849
const INTEGER_REGEX = /^[0-9\b]+$/;
@@ -476,7 +477,7 @@ export default function Preferences() {
476477
</h4>
477478
<div>
478479
<VersionPicker />
479-
{versionInfo ? (
480+
{versionInfo && indexID ? (
480481
<p className="preference__paragraph">
481482
{t('Preferences.LibraryVersionInfo')}
482483
</p>
@@ -496,7 +497,7 @@ export default function Preferences() {
496497
)}
497498
</div>
498499
</div>
499-
{versionInfo && (
500+
{versionInfo && indexID && (
500501
<>
501502
<div className="preference">
502503
<h4 className="preference__title">
@@ -505,26 +506,37 @@ export default function Preferences() {
505506
<div className="preference__options">
506507
<input
507508
type="radio"
508-
onChange={() => dispatch(setAutosave(true))}
509+
onChange={() =>
510+
dispatch(
511+
updateFileContent(indexID, versionInfo.setP5Sound(true))
512+
)
513+
}
509514
aria-label={t('Preferences.AutosaveOnARIA')}
510515
name="soundaddon"
511516
id="soundaddon-on"
512517
className="preference__radio-button"
513518
value="On"
514-
checked={autosave}
519+
checked={versionInfo.p5Sound}
515520
/>
516521
<label htmlFor="soundaddon-on" className="preference__option">
517522
{t('Preferences.On')}
518523
</label>
519524
<input
520525
type="radio"
521-
onChange={() => dispatch(setAutosave(false))}
526+
onChange={() =>
527+
dispatch(
528+
updateFileContent(
529+
indexID,
530+
versionInfo.setP5Sound(false)
531+
)
532+
)
533+
}
522534
aria-label={t('Preferences.AutosaveOffARIA')}
523535
name="soundaddon"
524536
id="soundaddon-off"
525537
className="preference__radio-button"
526538
value="Off"
527-
checked={!autosave}
539+
checked={!versionInfo.p5Sound}
528540
/>
529541
<label
530542
htmlFor="soundaddon-off"
@@ -541,13 +553,20 @@ export default function Preferences() {
541553
<div className="preference__options">
542554
<input
543555
type="radio"
544-
onChange={() => dispatch(setAutosave(true))}
556+
onChange={() =>
557+
dispatch(
558+
updateFileContent(
559+
indexID,
560+
versionInfo.setP5PreloadAddon(true)
561+
)
562+
)
563+
}
545564
aria-label={t('Preferences.AutosaveOnARIA')}
546565
name="preloadaddon"
547566
id="preloadaddon-on"
548567
className="preference__radio-button"
549568
value="On"
550-
checked={autosave}
569+
checked={versionInfo.p5PreloadAddon}
551570
/>
552571
<label
553572
htmlFor="preloadaddon-on"
@@ -557,13 +576,20 @@ export default function Preferences() {
557576
</label>
558577
<input
559578
type="radio"
560-
onChange={() => dispatch(setAutosave(false))}
579+
onChange={() =>
580+
dispatch(
581+
updateFileContent(
582+
indexID,
583+
versionInfo.setP5PreloadAddon(false)
584+
)
585+
)
586+
}
561587
aria-label={t('Preferences.AutosaveOffARIA')}
562588
name="preloadaddon"
563589
id="preloadaddon-off"
564590
className="preference__radio-button"
565591
value="Off"
566-
checked={!autosave}
592+
checked={!versionInfo.p5PreloadAddon}
567593
/>
568594
<label
569595
htmlFor="preloadaddon-off"
@@ -580,13 +606,20 @@ export default function Preferences() {
580606
<div className="preference__options">
581607
<input
582608
type="radio"
583-
onChange={() => dispatch(setAutosave(true))}
609+
onChange={() =>
610+
dispatch(
611+
updateFileContent(
612+
indexID,
613+
versionInfo.setP5ShapesAddon(true)
614+
)
615+
)
616+
}
584617
aria-label={t('Preferences.AutosaveOnARIA')}
585618
name="shapesaddon"
586619
id="shapesaddon-on"
587620
className="preference__radio-button"
588621
value="On"
589-
checked={autosave}
622+
checked={versionInfo.p5ShapesAdddon}
590623
/>
591624
<label
592625
htmlFor="shapesaddon-on"
@@ -596,13 +629,20 @@ export default function Preferences() {
596629
</label>
597630
<input
598631
type="radio"
599-
onChange={() => dispatch(setAutosave(false))}
632+
onChange={() =>
633+
dispatch(
634+
updateFileContent(
635+
indexID,
636+
versionInfo.setP5ShapesAddon(false)
637+
)
638+
)
639+
}
600640
aria-label={t('Preferences.AutosaveOffARIA')}
601641
name="shapesaddon"
602642
id="shapesaddon-off"
603643
className="preference__radio-button"
604644
value="Off"
605-
checked={!autosave}
645+
checked={!versionInfo.p5ShapesAdddon}
606646
/>
607647
<label
608648
htmlFor="shapesaddon-off"

‎client/modules/IDE/components/VersionPicker.jsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,13 @@ const VersionPicker = () => {
2121

2222
if (!versionInfo) {
2323
return (
24-
<button disabled className="versionPicker">
25-
{t('Toolbar.CustomLibraryVersion')}
26-
</button>
24+
<span className="versionPicker">{t('Toolbar.CustomLibraryVersion')}</span>
2725
);
2826
}
2927

3028
return (
3129
<DropdownMenu
32-
anchor={<button className="versionPicker">{versionInfo.version}</button>}
30+
anchor={<span className="versionPicker">{versionInfo.version}</span>}
3331
align="left"
3432
>
3533
{p5Versions.map((version) => (

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

Lines changed: 56 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,11 @@ export const p5Versions = [
132132
'0.2.1'
133133
];
134134

135+
export const p5SoundURL =
136+
'https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/addons/p5.sound.min.js';
137+
export const p5PreloadAddonURL = 'https://TODO/preload.js';
138+
export const p5ShapesAddonURL = 'https://TODO/shapes.js';
139+
135140
export function useP5Version() {
136141
const files = useSelector((state) => state.files);
137142
const indexFile = files.find(
@@ -176,7 +181,57 @@ export function useP5Version() {
176181
);
177182
return dom.documentElement.outerHTML;
178183
};
179-
return { version, minified, replaceVersion };
184+
185+
const p5SoundNode = [
186+
...dom.documentElement.querySelectorAll('script')
187+
].find((s) => s.getAttribute('src') === p5SoundURL);
188+
const setP5Sound = function (enabled) {
189+
if (!enabled && p5SoundNode) {
190+
p5SoundNode.parentNode.removeChild(p5SoundNode);
191+
} else if (enabled && !p5SoundNode) {
192+
const newNode = document.createElement('script');
193+
newNode.setAttribute('src', p5SoundURL);
194+
scriptNode.parentNode.insertBefore(newNode, scriptNode.nextSibling);
195+
}
196+
};
197+
198+
const p5PreloadAddonNode = [
199+
...dom.documentElement.querySelectorAll('script')
200+
].find((s) => s.getAttribute('src') === p5PreloadAddonURL);
201+
const setP5PreloadAddon = function (enabled) {
202+
if (!enabled && p5PreloadAddonNode) {
203+
p5PreloadAddonNode.parentNode.removeChild(p5PreloadAddonNode);
204+
} else if (enabled && !p5PreloadAddonNode) {
205+
const newNode = document.createElement('script');
206+
newNode.setAttribute('src', p5PreloadAddonURL);
207+
scriptNode.parentNode.insertBefore(newNode, scriptNode.nextSibling);
208+
}
209+
};
210+
211+
const p5ShapesAddonNode = [
212+
...dom.documentElement.querySelectorAll('script')
213+
].find((s) => s.getAttribute('src') === p5ShapesAddonURL);
214+
const setP5ShapesAddon = function (enabled) {
215+
if (!enabled && p5ShapesAddonNode) {
216+
p5ShapesAddonNode.parentNode.removeChild(p5ShapesAddonNode);
217+
} else if (enabled && !p5ShapesAddonNode) {
218+
const newNode = document.createElement('script');
219+
newNode.setAttribute('src', p5ShapesAddonURL);
220+
scriptNode.parentNode.insertBefore(newNode, scriptNode.nextSibling);
221+
}
222+
};
223+
224+
return {
225+
version,
226+
minified,
227+
replaceVersion,
228+
p5Sound: !!p5SoundNode,
229+
setP5Sound,
230+
p5PreloadAddon: !!p5PreloadAddonNode,
231+
setP5PreloadAddon,
232+
p5ShapesAdddon: !!p5ShapesAddonNode,
233+
setP5ShapesAddon
234+
};
180235
}
181236
return null;
182237
}, [indexSrc]);

0 commit comments

Comments
 (0)