From 344e50e6fe92b83bbc8a3dcb989101583b77847f Mon Sep 17 00:00:00 2001 From: Luis Morales-Navarro Date: Fri, 22 Dec 2017 11:47:04 +0800 Subject: [PATCH 1/7] added library to iframe --- .gitmodules | 4 -- .../modules/IDE/components/PreviewFrame.jsx | 57 ++++++------------- client/modules/IDE/reducers/files.js | 5 ++ package.json | 3 +- 4 files changed, 22 insertions(+), 47 deletions(-) diff --git a/.gitmodules b/.gitmodules index afc7971610..e69de29bb2 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,4 +0,0 @@ -[submodule "static/p5-interceptor"] - path = static/p5-interceptor - url = git://github.com/MathuraMG/p5-interceptor.git - branch = master diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx index 6f28cc9943..f64ae408bc 100644 --- a/client/modules/IDE/components/PreviewFrame.jsx +++ b/client/modules/IDE/components/PreviewFrame.jsx @@ -198,49 +198,24 @@ 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); + if (this.props.textOutput) { + const textSection = sketchDoc.createElement('section'); + textSection.setAttribute('id', 'textOutput-content'); + sketchDoc.body.appendChild(textSection); + } + if (this.props.gridOutput) { + const gridSection = sketchDoc.createElement('section'); + gridSection.setAttribute('id', 'gridOutput-content'); + sketchDoc.body.appendChild(gridSection); + } + if (this.props.soundOutput) { + const soundSection = sketchDoc.createElement('section'); + soundSection.setAttribute('id', 'soundOutput-content'); + sketchDoc.body.appendChild(soundSection); } scriptsToInject.forEach((scriptToInject) => { @@ -419,7 +394,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, diff --git a/client/modules/IDE/reducers/files.js b/client/modules/IDE/reducers/files.js index a6678d8f42..eb928d9321 100644 --- a/client/modules/IDE/reducers/files.js +++ b/client/modules/IDE/reducers/files.js @@ -13,6 +13,7 @@ const defaultHTML = ` + @@ -20,7 +21,11 @@ const defaultHTML = +
+
+
+ `; diff --git a/package.json b/package.json index afebb2c673..8862b029f0 100644 --- a/package.json +++ b/package.json @@ -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", From cff4819c21806d7874577e98ee56baa3c0d06ca1 Mon Sep 17 00:00:00 2001 From: Luis Morales-Navarro Date: Fri, 22 Dec 2017 15:12:01 +0800 Subject: [PATCH 2/7] changed preview to add accessible elements to iframe --- client/modules/IDE/components/PreviewFrame.jsx | 6 +++--- client/modules/IDE/reducers/files.js | 4 +--- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx index f64ae408bc..63e9c7eb4f 100644 --- a/client/modules/IDE/components/PreviewFrame.jsx +++ b/client/modules/IDE/components/PreviewFrame.jsx @@ -205,17 +205,17 @@ class PreviewFrame extends React.Component { if (this.props.textOutput) { const textSection = sketchDoc.createElement('section'); textSection.setAttribute('id', 'textOutput-content'); - sketchDoc.body.appendChild(textSection); + sketchDoc.getElementById('outputs').appendChild(textSection); } if (this.props.gridOutput) { const gridSection = sketchDoc.createElement('section'); gridSection.setAttribute('id', 'gridOutput-content'); - sketchDoc.body.appendChild(gridSection); + sketchDoc.getElementById('outputs').appendChild(gridSection); } if (this.props.soundOutput) { const soundSection = sketchDoc.createElement('section'); soundSection.setAttribute('id', 'soundOutput-content'); - sketchDoc.body.appendChild(soundSection); + sketchDoc.getElementById('outputs').appendChild(soundSection); } scriptsToInject.forEach((scriptToInject) => { diff --git a/client/modules/IDE/reducers/files.js b/client/modules/IDE/reducers/files.js index eb928d9321..fdfbb3de70 100644 --- a/client/modules/IDE/reducers/files.js +++ b/client/modules/IDE/reducers/files.js @@ -21,9 +21,7 @@ const defaultHTML = -
-
-
+
From dcda574989ed3b140c81c93a0499894c20f3ea5f Mon Sep 17 00:00:00 2001 From: Luis Morales-Navarro Date: Mon, 25 Dec 2017 18:28:36 +0800 Subject: [PATCH 3/7] add library only when accesible output is seleceted --- client/modules/IDE/components/PreviewFrame.jsx | 11 ++++++++--- client/modules/IDE/reducers/files.js | 6 +++--- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx index 63e9c7eb4f..14a5b08db9 100644 --- a/client/modules/IDE/components/PreviewFrame.jsx +++ b/client/modules/IDE/components/PreviewFrame.jsx @@ -202,20 +202,25 @@ class PreviewFrame extends React.Component { '/loop-protect.min.js', '/hijackConsole.js' ]; + 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('outputs').appendChild(textSection); + sketchDoc.getElementById('accessible-outputs').appendChild(textSection); } if (this.props.gridOutput) { + sketchDoc.getElementById('accessibility-library').appendChild(accessiblelib); const gridSection = sketchDoc.createElement('section'); gridSection.setAttribute('id', 'gridOutput-content'); - sketchDoc.getElementById('outputs').appendChild(gridSection); + sketchDoc.getElementById('accessible-outputs').appendChild(gridSection); } if (this.props.soundOutput) { + sketchDoc.getElementById('accessibility-library').appendChild(accessiblelib); const soundSection = sketchDoc.createElement('section'); soundSection.setAttribute('id', 'soundOutput-content'); - sketchDoc.getElementById('outputs').appendChild(soundSection); + sketchDoc.getElementById('accessible-outputs').appendChild(soundSection); } scriptsToInject.forEach((scriptToInject) => { diff --git a/client/modules/IDE/reducers/files.js b/client/modules/IDE/reducers/files.js index fdfbb3de70..2441c1fce7 100644 --- a/client/modules/IDE/reducers/files.js +++ b/client/modules/IDE/reducers/files.js @@ -21,10 +21,10 @@ const defaultHTML = -
+
- - +
+ `; From cf76989bb1ebd556e04b488ac94d1342df4ff03c Mon Sep 17 00:00:00 2001 From: Luis Morales-Navarro Date: Tue, 16 Jan 2018 17:35:50 +0800 Subject: [PATCH 4/7] focus on iframe when plaing --- .../IDE/components/AccessibleOutput.jsx | 16 +------- client/modules/IDE/components/GridOutput.jsx | 38 ------------------- .../modules/IDE/components/PreviewFrame.jsx | 2 + client/modules/IDE/components/TextOutput.jsx | 38 ------------------- 4 files changed, 3 insertions(+), 91 deletions(-) delete mode 100644 client/modules/IDE/components/GridOutput.jsx delete mode 100644 client/modules/IDE/components/TextOutput.jsx diff --git a/client/modules/IDE/components/AccessibleOutput.jsx b/client/modules/IDE/components/AccessibleOutput.jsx index a3688bd7d0..1e19c0e427 100644 --- a/client/modules/IDE/components/AccessibleOutput.jsx +++ b/client/modules/IDE/components/AccessibleOutput.jsx @@ -1,6 +1,4 @@ import React, { PropTypes } from 'react'; -import GridOutput from '../components/GridOutput'; -import TextOutput from '../components/TextOutput'; class AccessibleOutput extends React.Component { componentDidMount() { @@ -23,18 +21,8 @@ class AccessibleOutput extends React.Component { title="canvas text output" > {(() => { // eslint-disable-line - if (this.props.textOutput) { - return ( - - ); - } })()} {(() => { // eslint-disable-line - if (this.props.gridOutput) { - return ( - - ); - } })()} ); @@ -43,9 +31,7 @@ class AccessibleOutput extends React.Component { AccessibleOutput.propTypes = { isPlaying: PropTypes.bool.isRequired, - previewIsRefreshing: PropTypes.bool.isRequired, - textOutput: PropTypes.bool.isRequired, - gridOutput: PropTypes.bool.isRequired + previewIsRefreshing: PropTypes.bool.isRequired }; export default AccessibleOutput; diff --git a/client/modules/IDE/components/GridOutput.jsx b/client/modules/IDE/components/GridOutput.jsx deleted file mode 100644 index 3f7dcd1b5d..0000000000 --- a/client/modules/IDE/components/GridOutput.jsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; - -class GridOutput extends React.Component { - componentDidMount() { - this.GridOutputModal.focus(); - } - render() { - return ( -
{ this.GridOutputModal = element; }} - > -

table Output

-

-

- -
-
-
-
- ); - } -} - -export default GridOutput; diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx index 14a5b08db9..1250025882 100644 --- a/client/modules/IDE/components/PreviewFrame.jsx +++ b/client/modules/IDE/components/PreviewFrame.jsx @@ -209,12 +209,14 @@ class PreviewFrame extends React.Component { 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); diff --git a/client/modules/IDE/components/TextOutput.jsx b/client/modules/IDE/components/TextOutput.jsx deleted file mode 100644 index f9b528e0fe..0000000000 --- a/client/modules/IDE/components/TextOutput.jsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; - -class TextOutput extends React.Component { - componentDidMount() { - this.TextOutputModal.focus(); - } - render() { - return ( -
{ this.TextOutputModal = element; }} - > -

Text Output

-

-

- -
-
-
-
- ); - } -} - -export default TextOutput; From 1ae2c6f67c3fac3dc2742c1ad7e4d97ec33840fd Mon Sep 17 00:00:00 2001 From: Luis Morales-Navarro Date: Tue, 16 Jan 2018 18:16:12 +0800 Subject: [PATCH 5/7] css --- client/modules/IDE/reducers/files.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/client/modules/IDE/reducers/files.js b/client/modules/IDE/reducers/files.js index 2441c1fce7..55220ff904 100644 --- a/client/modules/IDE/reducers/files.js +++ b/client/modules/IDE/reducers/files.js @@ -19,9 +19,10 @@ const defaultHTML = + -
+
@@ -33,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 = () => { From 709780809eb79970781b8e66426caa78c010c080 Mon Sep 17 00:00:00 2001 From: Luis Morales-Navarro Date: Wed, 17 Jan 2018 14:38:08 +0800 Subject: [PATCH 6/7] deleted accessibleOutput.jsx and edited IDEView to integrate accessibility library --- .../IDE/components/AccessibleOutput.jsx | 37 ------------------- client/modules/IDE/pages/IDEView.jsx | 18 ++++----- 2 files changed, 9 insertions(+), 46 deletions(-) delete mode 100644 client/modules/IDE/components/AccessibleOutput.jsx diff --git a/client/modules/IDE/components/AccessibleOutput.jsx b/client/modules/IDE/components/AccessibleOutput.jsx deleted file mode 100644 index 1e19c0e427..0000000000 --- a/client/modules/IDE/components/AccessibleOutput.jsx +++ /dev/null @@ -1,37 +0,0 @@ -import React, { PropTypes } from 'react'; - -class AccessibleOutput extends React.Component { - componentDidMount() { - this.accessibleOutputModal.focus(); - } - componentDidUpdate(prevProps) { - // if the user explicitly clicks on the play button, want to refocus on the text output - if (this.props.isPlaying && this.props.previewIsRefreshing) { - this.accessibleOutputModal.focus(); - } - } - render() { - return ( -
{ this.accessibleOutputModal = element; }} - tabIndex="0" - aria-label="accessible-output" - title="canvas text output" - > - {(() => { // eslint-disable-line - })()} - {(() => { // eslint-disable-line - })()} -
- ); - } -} - -AccessibleOutput.propTypes = { - isPlaying: PropTypes.bool.isRequired, - previewIsRefreshing: PropTypes.bool.isRequired -}; - -export default AccessibleOutput; diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx index 9bfbe4dfb6..7ec1450955 100644 --- a/client/modules/IDE/pages/IDEView.jsx +++ b/client/modules/IDE/pages/IDEView.jsx @@ -8,7 +8,7 @@ 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 AccessibleOutput from '../components/AccessibleOutput'; import Preferences from '../components/Preferences'; import NewFileModal from '../components/NewFileModal'; import NewFolderModal from '../components/NewFolderModal'; @@ -375,14 +375,14 @@ class IDEView extends React.Component { ) && this.props.ide.isPlaying ) || - this.props.ide.isAccessibleOutputPlaying - ) && - + this.props.ide.isAccessibleOutputPlaying + ) // && + // } Date: Wed, 17 Jan 2018 22:34:59 +0800 Subject: [PATCH 7/7] deleted comments --- client/modules/IDE/pages/IDEView.jsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx index 7ec1450955..8e0ad0c644 100644 --- a/client/modules/IDE/pages/IDEView.jsx +++ b/client/modules/IDE/pages/IDEView.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'; @@ -376,13 +375,7 @@ class IDEView extends React.Component { this.props.ide.isPlaying ) || this.props.ide.isAccessibleOutputPlaying - ) // && - // + ) }