Skip to content

Commit 9686236

Browse files
catarakcatarak
committed
Add p5.accessibility, remove sound output, update line offset for index.html errors
1 parent 7a79098 commit 9686236

File tree

19 files changed

+76
-92
lines changed

19 files changed

+76
-92
lines changed

‎client/modules/IDE/actions/ide.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -258,7 +258,9 @@ export function startSketch() {
258258
type: MessageTypes.SKETCH,
259259
payload: {
260260
files: state.files,
261-
basePath: window.location.pathname
261+
basePath: window.location.pathname,
262+
gridOutput: state.preferences.gridOutput,
263+
textOutput: state.preferences.textOutput
262264
}
263265
});
264266
dispatchMessage({

‎client/modules/IDE/actions/preferences.js

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -159,24 +159,6 @@ export function setGridOutput(value) {
159159
};
160160
}
161161

162-
export function setSoundOutput(value) {
163-
return (dispatch, getState) => {
164-
dispatch({
165-
type: ActionTypes.SET_SOUND_OUTPUT,
166-
value
167-
});
168-
const state = getState();
169-
if (state.user.authenticated) {
170-
const formParams = {
171-
preferences: {
172-
soundOutput: value
173-
}
174-
};
175-
updatePreferences(formParams, dispatch);
176-
}
177-
};
178-
}
179-
180162
export function setTheme(value) {
181163
// return {
182164
// type: ActionTypes.SET_THEME,
@@ -225,7 +207,6 @@ export function setAllAccessibleOutput(value) {
225207
return (dispatch) => {
226208
dispatch(setTextOutput(value));
227209
dispatch(setGridOutput(value));
228-
dispatch(setSoundOutput(value));
229210
};
230211
}
231212

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

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -437,23 +437,6 @@ class Preferences extends React.Component {
437437
>
438438
{this.props.t('Preferences.TableText')}
439439
</label>
440-
<input
441-
type="checkbox"
442-
onChange={(event) => {
443-
this.props.setSoundOutput(event.target.checked);
444-
}}
445-
aria-label={this.props.t('Preferences.SoundOutputARIA')}
446-
name="sound output"
447-
id="sound-output-on"
448-
value="On"
449-
checked={this.props.soundOutput}
450-
/>
451-
<label
452-
htmlFor="sound-output-on"
453-
className="preference__option preference__canvas"
454-
>
455-
{this.props.t('Preferences.Sound')}
456-
</label>
457440
</div>
458441
</div>
459442
</TabPanel>
@@ -474,10 +457,8 @@ Preferences.propTypes = {
474457
setLinewrap: PropTypes.func.isRequired,
475458
textOutput: PropTypes.bool.isRequired,
476459
gridOutput: PropTypes.bool.isRequired,
477-
soundOutput: PropTypes.bool.isRequired,
478460
setTextOutput: PropTypes.func.isRequired,
479461
setGridOutput: PropTypes.func.isRequired,
480-
setSoundOutput: PropTypes.func.isRequired,
481462
lintWarning: PropTypes.bool.isRequired,
482463
setLintWarning: PropTypes.func.isRequired,
483464
theme: PropTypes.string.isRequired,

‎client/modules/IDE/pages/IDEView.jsx

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -282,10 +282,8 @@ class IDEView extends React.Component {
282282
setLintWarning={this.props.setLintWarning}
283283
textOutput={this.props.preferences.textOutput}
284284
gridOutput={this.props.preferences.gridOutput}
285-
soundOutput={this.props.preferences.soundOutput}
286285
setTextOutput={this.props.setTextOutput}
287286
setGridOutput={this.props.setGridOutput}
288-
setSoundOutput={this.props.setSoundOutput}
289287
theme={this.props.preferences.theme}
290288
setTheme={this.props.setTheme}
291289
autocloseBracketsQuotes={
@@ -369,8 +367,7 @@ class IDEView extends React.Component {
369367
/>
370368
<div>
371369
{((this.props.preferences.textOutput ||
372-
this.props.preferences.gridOutput ||
373-
this.props.preferences.soundOutput) &&
370+
this.props.preferences.gridOutput) &&
374371
this.props.ide.isPlaying) ||
375372
this.props.ide.isAccessibleOutputPlaying}
376373
</div>
@@ -514,7 +511,6 @@ IDEView.propTypes = {
514511
lintWarning: PropTypes.bool.isRequired,
515512
textOutput: PropTypes.bool.isRequired,
516513
gridOutput: PropTypes.bool.isRequired,
517-
soundOutput: PropTypes.bool.isRequired,
518514
theme: PropTypes.string.isRequired,
519515
autorefresh: PropTypes.bool.isRequired,
520516
language: PropTypes.string.isRequired,
@@ -529,7 +525,6 @@ IDEView.propTypes = {
529525
setLintWarning: PropTypes.func.isRequired,
530526
setTextOutput: PropTypes.func.isRequired,
531527
setGridOutput: PropTypes.func.isRequired,
532-
setSoundOutput: PropTypes.func.isRequired,
533528
setAllAccessibleOutput: PropTypes.func.isRequired,
534529
files: PropTypes.arrayOf(
535530
PropTypes.shape({

‎client/modules/IDE/reducers/preferences.js

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ const initialState = {
88
lintWarning: false,
99
textOutput: false,
1010
gridOutput: false,
11-
soundOutput: false,
1211
theme: 'light',
1312
autorefresh: false,
1413
language: 'en-US',
@@ -29,8 +28,6 @@ const preferences = (state = initialState, action) => {
2928
return Object.assign({}, state, { textOutput: action.value });
3029
case ActionTypes.SET_GRID_OUTPUT:
3130
return Object.assign({}, state, { gridOutput: action.value });
32-
case ActionTypes.SET_SOUND_OUTPUT:
33-
return Object.assign({}, state, { soundOutput: action.value });
3431
case ActionTypes.SET_PREFERENCES:
3532
return action.preferences;
3633
case ActionTypes.SET_THEME:

‎client/modules/Mobile/MobilePreferences.jsx

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ const MobilePreferences = () => {
4242
linewrap,
4343
textOutput,
4444
gridOutput,
45-
soundOutput,
4645
lineNumbers,
4746
lintWarning
4847
} = useSelector((state) => state.preferences);
@@ -54,7 +53,6 @@ const MobilePreferences = () => {
5453
setLinewrap,
5554
setTextOutput,
5655
setGridOutput,
57-
setSoundOutput,
5856
setLineNumbers,
5957
setLintWarning
6058
} = bindActionCreators(
@@ -102,12 +100,6 @@ const MobilePreferences = () => {
102100
gridOutput,
103101
setGridOutput,
104102
'table output'
105-
),
106-
preferenceOnOff(
107-
t('MobilePreferences.Sound'),
108-
soundOutput,
109-
setSoundOutput,
110-
'sound output'
111103
)
112104
];
113105

‎client/modules/Mobile/MobileSketchView.jsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ const MobileSketchView = () => {
3333
const {
3434
setTextOutput,
3535
setGridOutput,
36-
setSoundOutput,
3736
dispatchConsoleEvent,
3837
endSketchRefresh,
3938
stopSketch,
@@ -76,11 +75,9 @@ const MobileSketchView = () => {
7675
previewIsRefreshing={ide.previewIsRefreshing}
7776
textOutput={preferences.textOutput}
7877
gridOutput={preferences.gridOutput}
79-
soundOutput={preferences.soundOutput}
8078
autorefresh={preferences.autorefresh}
8179
setTextOutput={setTextOutput}
8280
setGridOutput={setGridOutput}
83-
setSoundOutput={setSoundOutput}
8481
dispatchConsoleEvent={dispatchConsoleEvent}
8582
endSketchRefresh={endSketchRefresh}
8683
stopSketch={stopSketch}

‎client/modules/Preview/EmbedFrame.jsx

Lines changed: 35 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,8 @@ function addLoopProtect(sketchDoc) {
204204
});
205205
}
206206

207-
function injectLocalFiles(files, htmlFile, basePath) {
207+
function injectLocalFiles(files, htmlFile, options) {
208+
const { basePath, gridOutput, textOutput } = options;
208209
let scriptOffs = [];
209210
objectUrls = {};
210211
objectPaths = {};
@@ -223,6 +224,29 @@ function injectLocalFiles(files, htmlFile, basePath) {
223224
resolveScripts(sketchDoc, resolvedFiles);
224225
resolveStyles(sketchDoc, resolvedFiles);
225226

227+
const accessiblelib = sketchDoc.createElement('script');
228+
accessiblelib.setAttribute(
229+
'src',
230+
'https://cdn.jsdelivr.net/gh/processing/[email protected]/dist/p5.accessibility.js'
231+
);
232+
const accessibleOutputs = sketchDoc.createElement('section');
233+
accessibleOutputs.setAttribute('id', 'accessible-outputs');
234+
accessibleOutputs.setAttribute('aria-label', 'accessible-output');
235+
if (textOutput || gridOutput) {
236+
sketchDoc.body.appendChild(accessibleOutputs);
237+
sketchDoc.body.appendChild(accessiblelib);
238+
if (textOutput) {
239+
const textSection = sketchDoc.createElement('section');
240+
textSection.setAttribute('id', 'textOutput-content');
241+
sketchDoc.getElementById('accessible-outputs').appendChild(textSection);
242+
}
243+
if (gridOutput) {
244+
const gridSection = sketchDoc.createElement('section');
245+
gridSection.setAttribute('id', 'tableOutput-content');
246+
sketchDoc.getElementById('accessible-outputs').appendChild(gridSection);
247+
}
248+
}
249+
226250
const previewScripts = sketchDoc.createElement('script');
227251
previewScripts.src = `${window.location.origin}${getConfig(
228252
'PREVIEW_SCRIPTS_URL'
@@ -249,7 +273,7 @@ function getHtmlFile(files) {
249273
return files.filter((file) => file.name.match(/.*\.html$/i))[0];
250274
}
251275

252-
function EmbedFrame({ files, isPlaying, basePath }) {
276+
function EmbedFrame({ files, isPlaying, basePath, gridOutput, textOutput }) {
253277
const iframe = useRef();
254278
const htmlFile = useMemo(() => getHtmlFile(files), [files]);
255279

@@ -266,23 +290,22 @@ function EmbedFrame({ files, isPlaying, basePath }) {
266290
function renderSketch() {
267291
const doc = iframe.current;
268292
if (isPlaying) {
269-
const htmlDoc = injectLocalFiles(files, htmlFile, basePath);
293+
const htmlDoc = injectLocalFiles(files, htmlFile, {
294+
basePath,
295+
gridOutput,
296+
textOutput
297+
});
270298
const generatedHtmlFile = {
271299
name: 'index.html',
272300
content: htmlDoc
273301
};
274302
const htmlUrl = createBlobUrl(generatedHtmlFile);
303+
// BRO FOR SOME REASON YOU HAVE TO DO THIS TO GET IT TO WORK ON SAFARI
275304
setTimeout(() => {
276305
doc.src = htmlUrl;
277306
}, 0);
278-
// BRO FOR SOME REASON YOU HAVE TO DO THIS TO GET IT TO WORK ON SAFARI
279-
// setTimeout(() => {
280-
// srcDoc.set(doc, htmlDoc);
281-
// }, 0);
282307
} else {
283308
doc.src = '';
284-
// doc.srcdoc = '';
285-
// srcDoc.set(doc, ' ');
286309
}
287310
}
288311

@@ -306,7 +329,9 @@ EmbedFrame.propTypes = {
306329
})
307330
).isRequired,
308331
isPlaying: PropTypes.bool.isRequired,
309-
basePath: PropTypes.string.isRequired
332+
basePath: PropTypes.string.isRequired,
333+
gridOutput: PropTypes.bool.isRequired,
334+
textOutput: PropTypes.bool.isRequired
310335
};
311336

312337
export default EmbedFrame;

‎client/modules/Preview/previewIndex.jsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ const App = () => {
2222
const [state, dispatch] = useReducer(filesReducer, [], initialState);
2323
const [isPlaying, setIsPlaying] = useState(false);
2424
const [basePath, setBasePath] = useState('');
25+
const [textOutput, setTextOutput] = useState(false);
26+
const [gridOutput, setGridOutput] = useState(false);
2527
registerFrame(window.parent, getConfig('EDITOR_URL'));
2628

2729
function handleMessageEvent(message) {
@@ -30,6 +32,8 @@ const App = () => {
3032
case MessageTypes.SKETCH:
3133
dispatch(setFiles(payload.files));
3234
setBasePath(payload.basePath);
35+
setTextOutput(payload.textOutput);
36+
setGridOutput(payload.gridOutput);
3337
break;
3438
case MessageTypes.START:
3539
setIsPlaying(true);
@@ -57,7 +61,13 @@ const App = () => {
5761
return (
5862
<React.Fragment>
5963
<GlobalStyle />
60-
<EmbedFrame files={state} isPlaying={isPlaying} basePath={basePath} />
64+
<EmbedFrame
65+
files={state}
66+
isPlaying={isPlaying}
67+
basePath={basePath}
68+
gridOutput={gridOutput}
69+
textOutput={textOutput}
70+
/>
6171
</React.Fragment>
6272
);
6373
};

‎client/testData/testReduxStore.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,6 @@ const initialTestState = {
9292
lintWarning: false,
9393
textOutput: false,
9494
gridOutput: false,
95-
soundOutput: false,
9695
theme: 'light',
9796
autorefresh: false,
9897
language: 'en-US',

0 commit comments

Comments
 (0)