Merge pull request #506 from lm-n/accessibilitylib

Transition from Interceptor to Accessibility Library

Author: MathuraMG

.gitmodules

@@ -1,4 +0,0 @@
-[submodule "static/p5-interceptor"]
-	path = static/p5-interceptor
-	url = git://github.com/MathuraMG/p5-interceptor.git
-	branch = master

client/modules/IDE/components/AccessibleOutput.jsx

@@ -198,49 +198,31 @@ class PreviewFrame extends React.Component {
     this.resolveScripts(sketchDoc, resolvedFiles);
     this.resolveStyles(sketchDoc, resolvedFiles);
 
-    let scriptsToInject = [
+    const scriptsToInject = [
       '/loop-protect.min.js',
       '/hijackConsole.js'
     ];
-    if (
-      this.props.isAccessibleOutputPlaying ||
-      ((this.props.textOutput || this.props.gridOutput || this.props.soundOutput) && this.props.isPlaying)) {
-      let interceptorScripts = [];
-      interceptorScripts = [
-        '/p5-interceptor/registry.js',
-        '/p5-interceptor/loadData.js',
-        '/p5-interceptor/interceptorHelperFunctions.js',
-        '/p5-interceptor/baseInterceptor.js',
-        '/p5-interceptor/entities/entity.min.js',
-        '/p5-interceptor/ntc.min.js'
-      ];
-      if (!this.props.textOutput && !this.props.gridOutput && !this.props.soundOutput) {
-        this.props.setTextOutput(true);
-      }
-      if (this.props.textOutput) {
-        let textInterceptorScripts = [];
-        textInterceptorScripts = [
-          '/p5-interceptor/textInterceptor/interceptorFunctions.js',
-          '/p5-interceptor/textInterceptor/interceptorP5.js'
-        ];
-        interceptorScripts = interceptorScripts.concat(textInterceptorScripts);
-      }
-      if (this.props.gridOutput) {
-        let gridInterceptorScripts = [];
-        gridInterceptorScripts = [
-          '/p5-interceptor/gridInterceptor/interceptorFunctions.js',
-          '/p5-interceptor/gridInterceptor/interceptorP5.js'
-        ];
-        interceptorScripts = interceptorScripts.concat(gridInterceptorScripts);
-      }
-      if (this.props.soundOutput) {
-        let soundInterceptorScripts = [];
-        soundInterceptorScripts = [
-          '/p5-interceptor/soundInterceptor/interceptorP5.js'
-        ];
-        interceptorScripts = interceptorScripts.concat(soundInterceptorScripts);
-      }
-      scriptsToInject = scriptsToInject.concat(interceptorScripts);
+    const accessiblelib = sketchDoc.createElement('script');
+    accessiblelib.setAttribute('src', 'https://cdn.rawgit.com/MathuraMG/p5-accessibility/e856365c/dist/p5-accessibility.js');
+    if (this.props.textOutput) {
+      sketchDoc.getElementById('accessibility-library').appendChild(accessiblelib);
+      const textSection = sketchDoc.createElement('section');
+      textSection.setAttribute('id', 'textOutput-content');
+      sketchDoc.getElementById('accessible-outputs').appendChild(textSection);
+      this.iframeElement.focus();
+    }
+    if (this.props.gridOutput) {
+      sketchDoc.getElementById('accessibility-library').appendChild(accessiblelib);
+      const gridSection = sketchDoc.createElement('section');
+      gridSection.setAttribute('id', 'gridOutput-content');
+      sketchDoc.getElementById('accessible-outputs').appendChild(gridSection);
+      this.iframeElement.focus();
+    }
+    if (this.props.soundOutput) {
+      sketchDoc.getElementById('accessibility-library').appendChild(accessiblelib);
+      const soundSection = sketchDoc.createElement('section');
+      soundSection.setAttribute('id', 'soundOutput-content');
+      sketchDoc.getElementById('accessible-outputs').appendChild(soundSection);
     }
 
     scriptsToInject.forEach((scriptToInject) => {
@@ -419,7 +401,7 @@ PreviewFrame.propTypes = {
   textOutput: PropTypes.bool.isRequired,
   gridOutput: PropTypes.bool.isRequired,
   soundOutput: PropTypes.bool.isRequired,
-  setTextOutput: PropTypes.func.isRequired,
+  // setTextOutput: PropTypes.func.isRequired,
   htmlFile: PropTypes.shape({
     content: PropTypes.string.isRequired
   }).isRequired,

client/modules/IDE/components/GridOutput.jsx

@@ -8,7 +8,6 @@ import Editor from '../components/Editor';
 import Sidebar from '../components/Sidebar';
 import PreviewFrame from '../components/PreviewFrame';
 import Toolbar from '../components/Toolbar';
-import AccessibleOutput from '../components/AccessibleOutput';
 import Preferences from '../components/Preferences';
 import NewFileModal from '../components/NewFileModal';
 import NewFolderModal from '../components/NewFolderModal';
@@ -375,14 +374,8 @@ class IDEView extends React.Component {
                         ) &&
                           this.props.ide.isPlaying
                       ) ||
-                        this.props.ide.isAccessibleOutputPlaying
-                    ) &&
-                      <AccessibleOutput
-                        isPlaying={this.props.ide.isPlaying}
-                        previewIsRefreshing={this.props.ide.previewIsRefreshing}
-                        textOutput={this.props.preferences.textOutput}
-                        gridOutput={this.props.preferences.gridOutput}
-                      />
+                      this.props.ide.isAccessibleOutputPlaying
+                    )
                   }
                 </div>
                 <PreviewFrame

client/modules/IDE/components/PreviewFrame.jsx

@@ -13,15 +13,19 @@ const defaultHTML =
 `<!DOCTYPE html>
 <html>
   <head>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script>
     <link rel="stylesheet" type="text/css" href="style.css">
     <meta charset="utf-8" />
+
   </head>
   <body>
+    <section aria-label='accessible output' id='accessible-outputs'></section>
     <script src="sketch.js"></script>
-  </body>
+    <div id='accessibility-library'></div>
+    </body>
 </html>
 `;
 
@@ -30,6 +34,15 @@ const defaultCSS =
   margin: 0;
   padding: 0;
 }
+
+#accessible-outputs {
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
 `;
 
 const initialState = () => {

client/modules/IDE/components/TextOutput.jsx

@@ -9,8 +9,7 @@
     "lint-fix": "eslint client server --ext .jsx --ext .js --fix",
     "build": "NODE_ENV=production webpack --config webpack.config.prod.js --progress",
     "test": "npm run lint",
-    "fetch-examples": "node fetch-examples.js",
-    "postinstall": "git submodule update --remote --recursive"
+    "fetch-examples": "node fetch-examples.js"
   },
   "main": "index.js",
   "author": "Cassie Tarakajian",