diff --git a/.gitmodules b/.gitmodules deleted file mode 100644 index afc79716..00000000 --- a/.gitmodules +++ /dev/null @@ -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/Dockerfile b/Dockerfile index 81f08726..6d75fe0c 100644 --- a/Dockerfile +++ b/Dockerfile @@ -8,8 +8,7 @@ ADD . $APP_HOME WORKDIR $APP_HOME # Install node modules -RUN git submodule init && \ - npm install +RUN npm install # Rebuild node-sass just to be safe RUN npm rebuild node-sass diff --git a/README.md b/README.md index 01f37499..bbad9215 100644 --- a/README.md +++ b/README.md @@ -6,12 +6,11 @@ This project is currently in development! It will be announced when there is a ( 1. Fork this repository. 2. Clone the forked repostory and cd into it -3. `$ git submodule init` -4. `$ npm install` -5. Install MongoDB and make sure it is running +3. `$ npm install` +4. Install MongoDB and make sure it is running * For Mac OSX with [homebrew](http://brew.sh/): `brew install mongodb` then `brew services start mongodb` * For Windows and Linux: [MongoDB Installation](https://docs.mongodb.com/manual/installation/) -6. Create a file called `.env` in the root of this directory that looks like +5. Create a file called `.env` in the root of this directory that looks like ``` API_URL=/api @@ -29,10 +28,10 @@ This project is currently in development! It will be announced when there is a ( If you don't care about being able to upload media files to S3 or Login with Github, you can drop in the file exactly how it is. Or, if you don't want to do that, just ask me to send you mine. Refer to [this gist](https://gist.github.com/catarak/70c9301f0fd1ac2d6b58de03f61997e3) for creating an S3 bucket for testing, or if you don't want to do that, I can add you to one of my S3 buckets. -7. `$ npm run fetch-examples` - this downloads the example sketches into a user called 'p5' -8. `$ npm start` -9. Navigate to [http://localhost:8000](http://localhost:8000) in your browser -10. Install the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en). +6. `$ npm run fetch-examples` - this downloads the example sketches into a user called 'p5' +7. `$ npm start` +8. Navigate to [http://localhost:8000](http://localhost:8000) in your browser +9. Install the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en). 10. Open and close the Redux DevTools using `ctrl+h`, and move them with `ctrl+w` ### Testing SSL on your local machine @@ -68,10 +67,9 @@ If you don't have the full server environment running, you can launch a one-off ## Production Installation 1. Clone this repostory and `cd` into it -2. `$ git submodule init` -3. `$ npm install` -4. Install MongoDB and make sure it is running -5. Create a file called `.env` in the root of this directory that looks like +2. `$ npm install` +3. Install MongoDB and make sure it is running +4. Create a file called `.env` in the root of this directory that looks like ``` API_URL=/api @@ -91,9 +89,9 @@ If you don't have the full server environment running, you can launch a one-off ``` For production, you will need to have real Github and Amazon credentions. Refer to [this gist](https://gist.github.com/catarak/70c9301f0fd1ac2d6b58de03f61997e3) for creating an S3 bucket for testing. -6. `$ npm run fetch-examples` - this downloads the example sketches into a user called 'p5' -7. `$ npm run build` -8. `$ npm run start:prod` +5. `$ npm run fetch-examples` - this downloads the example sketches into a user called 'p5' +6. `$ npm run build` +7. `$ npm run start:prod` ### For Production Setup with PM2 1. `$ npm install -g pm2` @@ -119,7 +117,7 @@ http://docs.aws.amazon.com/AmazonS3/latest/dev/VirtualHosting.html#VirtualHostin ## Accessibility Guidelines -Here is guide on [how to use the accessible editor](https://gist.github.com/MathuraMG/e86666b7b41fbc8c078bad9aff3f666d) +Here is guide on [how to use the accessible editor](https://gist.github.com/MathuraMG/e86666b7b41fbc8c078bad9aff3f666d) and here is an overview of the [p5-accessibility.js](https://github.com/MathuraMG/p5-accessibility/blob/master/README.md) library that makes p5.js sketches accessible to screen readers. The code for the p5.js web editor adheres to web accessibility standards. The following guidelines will help to ensure that accessibility continues to be a priority as development continues. @@ -146,7 +144,7 @@ See [CONTRIBUTING.md](https://github.com/processing/p5.js-web-editor/blob/master The p5.js Web Editor is built on a MERN stack - MongoDB, Express, React/Redux, and Node. For a reference to the file structure format I am using, please look at the [Mern Starter](https://github.com/Hashnode/mern-starter) and [this comment](https://github.com/Hashnode/mern-starter/issues/90#issuecomment-221553573). -This project uses an in-development [p5.js interceptor library](https://github.com/MathuraMG/p5-interceptor) for accessibility as git submodule. Every time you run `npm install`, it will update the interceptor to HEAD, so it is important to do this often. +This project uses an in-development [p5-accessibility.js library](https://github.com/MathuraMG/p5-accessibility) for accessibility. This project does not use CSS Modules, but uses Sass. I like to follow [BEM rules](http://getbem.com/) for CSS naming conventions, write OOSCSS with placeholders and mixins, and follow the [7-1 Pattern](https://sass-guidelin.es/#the-7-1-pattern) for Sass. diff --git a/client/modules/IDE/components/AccessibleOutput.jsx b/client/modules/IDE/components/AccessibleOutput.jsx deleted file mode 100644 index afdf16ea..00000000 --- a/client/modules/IDE/components/AccessibleOutput.jsx +++ /dev/null @@ -1,52 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import GridOutput from '../components/GridOutput'; -import TextOutput from '../components/TextOutput'; - -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 - if (this.props.textOutput) { - return ( - - ); - } - })()} - {(() => { // eslint-disable-line - if (this.props.gridOutput) { - return ( - - ); - } - })()} -
- ); - } -} - -AccessibleOutput.propTypes = { - isPlaying: PropTypes.bool.isRequired, - previewIsRefreshing: PropTypes.bool.isRequired, - textOutput: PropTypes.bool.isRequired, - gridOutput: 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 3f7dcd1b..00000000 --- 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 f0a0255e..e7a114f5 100644 --- a/client/modules/IDE/components/PreviewFrame.jsx +++ b/client/modules/IDE/components/PreviewFrame.jsx @@ -199,49 +199,42 @@ 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/9cb5bd0b/dist/p5-accessibility.js'); + const accessibleOutputs = sketchDoc.createElement('section'); + accessibleOutputs.setAttribute('id', 'accessible-outputs'); + accessibleOutputs.style.position = 'absolute'; + accessibleOutputs.style.left = '-1000px'; + accessibleOutputs.style.top = 'auto'; + accessibleOutputs.style.width = '1px'; + accessibleOutputs.style.height = '1px'; + accessibleOutputs.style.overflow = 'hidden'; + if (this.props.textOutput) { + sketchDoc.body.appendChild(accessibleOutputs); + sketchDoc.body.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.body.appendChild(accessibleOutputs); + sketchDoc.body.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.body.appendChild(accessibleOutputs); + sketchDoc.body.appendChild(accessiblelib); + const soundSection = sketchDoc.createElement('section'); + soundSection.setAttribute('id', 'soundOutput-content'); + sketchDoc.getElementById('accessible-outputs').appendChild(soundSection); } scriptsToInject.forEach((scriptToInject) => { @@ -420,7 +413,6 @@ PreviewFrame.propTypes = { textOutput: PropTypes.bool.isRequired, gridOutput: PropTypes.bool.isRequired, soundOutput: PropTypes.bool.isRequired, - setTextOutput: PropTypes.func.isRequired, htmlFile: PropTypes.shape({ content: PropTypes.string.isRequired }).isRequired, diff --git a/client/modules/IDE/components/TextOutput.jsx b/client/modules/IDE/components/TextOutput.jsx deleted file mode 100644 index f9b528e0..00000000 --- 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; diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx index b7f6a511..66547bd7 100644 --- a/client/modules/IDE/pages/IDEView.jsx +++ b/client/modules/IDE/pages/IDEView.jsx @@ -9,7 +9,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'; @@ -378,14 +377,8 @@ class IDEView extends React.Component { ) && this.props.ide.isPlaying ) || - this.props.ide.isAccessibleOutputPlaying - ) && - + this.props.ide.isAccessibleOutputPlaying + ) } + - + `; diff --git a/package.json b/package.json index 563019fc..ad7f097a 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,7 @@ "build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js --progress", "test": "npm run lint", "fetch-examples": "node fetch-examples.js", - "fetch-examples-gg": "node fetch-examples-gg.js", - "postinstall": "git submodule update --remote --recursive" + "fetch-examples-gg": "node fetch-examples-gg.js" }, "main": "index.js", "author": "Cassie Tarakajian", diff --git a/static/p5-interceptor b/static/p5-interceptor deleted file mode 160000 index 62938f2e..00000000 --- a/static/p5-interceptor +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 62938f2e9cbe1c83a9c1b702a9deccb11a452170