Skip to content

Commit e510b8f

Browse files
authored
Merge pull request #506 from lm-n/accessibilitylib
Transition from Interceptor to Accessibility Library
2 parents c50f64c + d98e700 commit e510b8f

File tree

8 files changed

+40
-184
lines changed

8 files changed

+40
-184
lines changed

.gitmodules

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +0,0 @@
1-
[submodule "static/p5-interceptor"]
2-
path = static/p5-interceptor
3-
url = git://github.com/MathuraMG/p5-interceptor.git
4-
branch = master

client/modules/IDE/components/AccessibleOutput.jsx

Lines changed: 0 additions & 51 deletions
This file was deleted.

client/modules/IDE/components/GridOutput.jsx

Lines changed: 0 additions & 38 deletions
This file was deleted.

client/modules/IDE/components/PreviewFrame.jsx

Lines changed: 23 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -198,49 +198,31 @@ class PreviewFrame extends React.Component {
198198
this.resolveScripts(sketchDoc, resolvedFiles);
199199
this.resolveStyles(sketchDoc, resolvedFiles);
200200

201-
let scriptsToInject = [
201+
const scriptsToInject = [
202202
'/loop-protect.min.js',
203203
'/hijackConsole.js'
204204
];
205-
if (
206-
this.props.isAccessibleOutputPlaying ||
207-
((this.props.textOutput || this.props.gridOutput || this.props.soundOutput) && this.props.isPlaying)) {
208-
let interceptorScripts = [];
209-
interceptorScripts = [
210-
'/p5-interceptor/registry.js',
211-
'/p5-interceptor/loadData.js',
212-
'/p5-interceptor/interceptorHelperFunctions.js',
213-
'/p5-interceptor/baseInterceptor.js',
214-
'/p5-interceptor/entities/entity.min.js',
215-
'/p5-interceptor/ntc.min.js'
216-
];
217-
if (!this.props.textOutput && !this.props.gridOutput && !this.props.soundOutput) {
218-
this.props.setTextOutput(true);
219-
}
220-
if (this.props.textOutput) {
221-
let textInterceptorScripts = [];
222-
textInterceptorScripts = [
223-
'/p5-interceptor/textInterceptor/interceptorFunctions.js',
224-
'/p5-interceptor/textInterceptor/interceptorP5.js'
225-
];
226-
interceptorScripts = interceptorScripts.concat(textInterceptorScripts);
227-
}
228-
if (this.props.gridOutput) {
229-
let gridInterceptorScripts = [];
230-
gridInterceptorScripts = [
231-
'/p5-interceptor/gridInterceptor/interceptorFunctions.js',
232-
'/p5-interceptor/gridInterceptor/interceptorP5.js'
233-
];
234-
interceptorScripts = interceptorScripts.concat(gridInterceptorScripts);
235-
}
236-
if (this.props.soundOutput) {
237-
let soundInterceptorScripts = [];
238-
soundInterceptorScripts = [
239-
'/p5-interceptor/soundInterceptor/interceptorP5.js'
240-
];
241-
interceptorScripts = interceptorScripts.concat(soundInterceptorScripts);
242-
}
243-
scriptsToInject = scriptsToInject.concat(interceptorScripts);
205+
const accessiblelib = sketchDoc.createElement('script');
206+
accessiblelib.setAttribute('src', 'https://cdn.rawgit.com/MathuraMG/p5-accessibility/e856365c/dist/p5-accessibility.js');
207+
if (this.props.textOutput) {
208+
sketchDoc.getElementById('accessibility-library').appendChild(accessiblelib);
209+
const textSection = sketchDoc.createElement('section');
210+
textSection.setAttribute('id', 'textOutput-content');
211+
sketchDoc.getElementById('accessible-outputs').appendChild(textSection);
212+
this.iframeElement.focus();
213+
}
214+
if (this.props.gridOutput) {
215+
sketchDoc.getElementById('accessibility-library').appendChild(accessiblelib);
216+
const gridSection = sketchDoc.createElement('section');
217+
gridSection.setAttribute('id', 'gridOutput-content');
218+
sketchDoc.getElementById('accessible-outputs').appendChild(gridSection);
219+
this.iframeElement.focus();
220+
}
221+
if (this.props.soundOutput) {
222+
sketchDoc.getElementById('accessibility-library').appendChild(accessiblelib);
223+
const soundSection = sketchDoc.createElement('section');
224+
soundSection.setAttribute('id', 'soundOutput-content');
225+
sketchDoc.getElementById('accessible-outputs').appendChild(soundSection);
244226
}
245227

246228
scriptsToInject.forEach((scriptToInject) => {
@@ -419,7 +401,7 @@ PreviewFrame.propTypes = {
419401
textOutput: PropTypes.bool.isRequired,
420402
gridOutput: PropTypes.bool.isRequired,
421403
soundOutput: PropTypes.bool.isRequired,
422-
setTextOutput: PropTypes.func.isRequired,
404+
// setTextOutput: PropTypes.func.isRequired,
423405
htmlFile: PropTypes.shape({
424406
content: PropTypes.string.isRequired
425407
}).isRequired,

client/modules/IDE/components/TextOutput.jsx

Lines changed: 0 additions & 38 deletions
This file was deleted.

client/modules/IDE/pages/IDEView.jsx

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import Editor from '../components/Editor';
88
import Sidebar from '../components/Sidebar';
99
import PreviewFrame from '../components/PreviewFrame';
1010
import Toolbar from '../components/Toolbar';
11-
import AccessibleOutput from '../components/AccessibleOutput';
1211
import Preferences from '../components/Preferences';
1312
import NewFileModal from '../components/NewFileModal';
1413
import NewFolderModal from '../components/NewFolderModal';
@@ -375,14 +374,8 @@ class IDEView extends React.Component {
375374
) &&
376375
this.props.ide.isPlaying
377376
) ||
378-
this.props.ide.isAccessibleOutputPlaying
379-
) &&
380-
<AccessibleOutput
381-
isPlaying={this.props.ide.isPlaying}
382-
previewIsRefreshing={this.props.ide.previewIsRefreshing}
383-
textOutput={this.props.preferences.textOutput}
384-
gridOutput={this.props.preferences.gridOutput}
385-
/>
377+
this.props.ide.isAccessibleOutputPlaying
378+
)
386379
}
387380
</div>
388381
<PreviewFrame

client/modules/IDE/reducers/files.js

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,19 @@ const defaultHTML =
1313
`<!DOCTYPE html>
1414
<html>
1515
<head>
16+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
1617
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
1718
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
1819
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script>
1920
<link rel="stylesheet" type="text/css" href="style.css">
2021
<meta charset="utf-8" />
22+
2123
</head>
2224
<body>
25+
<section aria-label='accessible output' id='accessible-outputs'></section>
2326
<script src="sketch.js"></script>
24-
</body>
27+
<div id='accessibility-library'></div>
28+
</body>
2529
</html>
2630
`;
2731

@@ -30,6 +34,15 @@ const defaultCSS =
3034
margin: 0;
3135
padding: 0;
3236
}
37+
38+
#accessible-outputs {
39+
position: absolute;
40+
left: -10000px;
41+
top: auto;
42+
width: 1px;
43+
height: 1px;
44+
overflow: hidden;
45+
}
3346
`;
3447

3548
const initialState = () => {

package.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@
99
"lint-fix": "eslint client server --ext .jsx --ext .js --fix",
1010
"build": "NODE_ENV=production webpack --config webpack.config.prod.js --progress",
1111
"test": "npm run lint",
12-
"fetch-examples": "node fetch-examples.js",
13-
"postinstall": "git submodule update --remote --recursive"
12+
"fetch-examples": "node fetch-examples.js"
1413
},
1514
"main": "index.js",
1615
"author": "Cassie Tarakajian",

0 commit comments

Comments
 (0)