Merge branch 'develop' into feature/add-japanese-translation

Author: koji

.github/CONTRIBUTING.md

@@ -18,7 +18,7 @@ Hello! We welcome community contributions to the p5.js Web Editor. Contributing
 
 ## Code of Conduct
 
-Please follow the guidelines in the [Code of Conduct](https://github.com/processing/p5.js-web-editor/blob/master/.github/CODE_OF_CONDUCT.md).
+Please follow the guidelines in the [Code of Conduct](https://github.com/processing/p5.js-web-editor/blob/develop/.github/CODE_OF_CONDUCT.md).
 
 ## How Can I Contribute?
 If you're new to open source, [read about how to contribute to open source](https://opensource.guide/how-to-contribute/).
@@ -60,7 +60,7 @@ If you feel like an issue is tagged incorrectly (e.g. it's low priority and you
 
 If you'd like to work on an issue, please comment on it to let the maintainers know, so that they can assign it to you. If someone else has already commented and taken up that issue, please refrain from working on it and submitting a PR without asking the maintainers as it leads to unnecessary duplication of effort.
 
-Then, look at the [development guide](https://github.com/processing/p5.js-web-editor/blob/master/developer_docs/development.md) for instructions on how to install the project locally and follow the right development workflow.
+Then, look at the [development guide](https://github.com/processing/p5.js-web-editor/blob/develop/developer_docs/development.md) for instructions on how to install the project locally and follow the right development workflow.
 
 ### Contribution Guides
 

.github/PULL_REQUEST_TEMPLATE.md

@@ -3,5 +3,5 @@ Fixes #issue-number
 I have verified that this pull request:
 
 * [ ] has no linting errors (`npm run lint`)
-* [ ] is from a uniquely-named feature branch and has been rebased on top of the latest master. (If I was asked to make more changes, I have made sure to rebase onto master then too)
-* [ ] is descriptively named and links to an issue number, i.e. `Fixes #123`
+* [ ] is from a uniquely-named feature branch and has been rebased on top of the latest `develop` branch. (If I was asked to make more changes, I have made sure to rebase onto `develop` then too)
+* [ ] is descriptively named and links to an issue number, i.e. `Fixes #123`

.github/config.yml

@@ -10,8 +10,8 @@ newIssueWelcomeComment: >
 
 # Comment to be posted to on PRs from first time contributors in your repository
 newPRWelcomeComment: >
-  🎉 Thanks for opening this pull request! Please check out our [contributing guidelines](https://github.com/processing/p5.js-web-editor/blob/master/.github/CONTRIBUTING.md) if you haven't already.
+  🎉 Thanks for opening this pull request! Please check out our [contributing guidelines](https://github.com/processing/p5.js-web-editor/blob/develop/.github/CONTRIBUTING.md) if you haven't already.
 
 # Configuration for first-pr-merge - https://github.com/behaviorbot/first-pr-merge
 
-# Comment to be posted to on pull requests merged by a first time user
+# Comment to be posted to on pull requests merged by a first time user

README.md

@@ -3,7 +3,7 @@
 
 Documentation is also available in the following languages:
 
-[한국어](https://github.com/processing/p5.js-web-editor/blob/master/translations/ko)
+[한국어](https://github.com/processing/p5.js-web-editor/blob/develop/translations/ko)
 
 ## Welcome! 👋👋🏿👋🏽👋🏻👋🏾👋🏼
 
@@ -23,7 +23,7 @@ All contributors to the p5.js Web Editor are expected to follow the [Code of Con
 
 The p5.js Web Editor is a collaborative project created by many individuals, and you are invited to help. All types of involvement are welcome! Please check out the [contribution guide](./.github/CONTRIBUTING.md) for more details.
 
-Developers, check the [developer docs](https://github.com/processing/p5.js-web-editor/blob/master/developer_docs/) details about contributing code, bug fixes, and documentation. To start writing code, a great place to start is the [development guide](https://github.com/processing/p5.js-web-editor/blob/master/developer_docs/development.md).
+Developers, check the [developer docs](https://github.com/processing/p5.js-web-editor/blob/develop/developer_docs/) details about contributing code, bug fixes, and documentation. To start writing code, a great place to start is the [development guide](https://github.com/processing/p5.js-web-editor/blob/develop/developer_docs/development.md).
 
 ## Issues
 

client/modules/IDE/components/AssetSize.jsx

@@ -30,9 +30,11 @@ const AssetSize = ({ totalSize }) => {
   const percentSize = percentValue < 1 ? percentValue : 1;
 
   return (
-    <div className="asset-size" style={{ '--percent': percentSize }}>
-      <div className="asset-size-bar" />
-      <p className="asset-current">{currentSize} ({percent})</p>
+    <div className="asset-size">
+      <div className="asset-size-bar" style={{ '--percent': percentSize }} />
+      <p className="asset-current">
+        {currentSize} ({percent})
+      </p>
       <p className="asset-max">Max: {sizeLimit}</p>
     </div>
   );

client/modules/IDE/components/PreviewFrame.jsx

@@ -359,22 +359,38 @@ PreviewFrame.defaultProps = {
   cmController: {}
 };
 
-const mapStateToProps = state => ({
-  files: state.files,
-  htmlFile: getHTMLFile(state.files),
-  content:
-    (state.files.find(file => file.isSelectedFile) ||
-    state.files.find(file => file.name === 'sketch.js') ||
-    state.files.find(file => file.name !== 'root')).content,
-  isPlaying: state.ide.isPlaying,
-  isAccessibleOutputPlaying: state.ide.isAccessibleOutputPlaying,
-  previewIsRefreshing: state.ide.previewIsRefreshing,
-  textOutput: state.preferences.textOutput,
-  gridOutput: state.preferences.gridOutput,
-  soundOutput: state.preferences.soundOutput,
-  language: state.preferences.language,
-  autorefresh: state.preferences.autorefresh,
-});
+function mapStateToProps(state, ownProps) {
+  if (ownProps.fullView) {
+    return {
+      files: state.files,
+      htmlFile: getHTMLFile(state.files),
+      isPlaying: true,
+      isAccessibleOutputPlaying: false,
+      textOutput: false,
+      gridOutput: false,
+      soundOutput: false,
+      language: state.preferences.language,
+      autorefresh: false,
+      previewIsRefreshing: false
+    };
+  }
+  return {
+    files: state.files,
+    htmlFile: getHTMLFile(state.files),
+    content:
+      (state.files.find(file => file.isSelectedFile) ||
+      state.files.find(file => file.name === 'sketch.js') ||
+      state.files.find(file => file.name !== 'root')).content,
+    isPlaying: state.ide.isPlaying,
+    isAccessibleOutputPlaying: state.ide.isAccessibleOutputPlaying,
+    previewIsRefreshing: state.ide.previewIsRefreshing,
+    textOutput: state.preferences.textOutput,
+    gridOutput: state.preferences.gridOutput,
+    soundOutput: state.preferences.soundOutput,
+    language: state.preferences.language,
+    autorefresh: state.preferences.autorefresh
+  };
+}
 
 
 const mapDispatchToProps = {

client/modules/IDE/hooks/useHandleMessageEvent.js

@@ -2,7 +2,7 @@ import { useDispatch } from 'react-redux';
 import { Decode } from 'console-feed';
 import { isEqual } from 'lodash';
 import { dispatchConsoleEvent } from '../actions/console';
-import { stopSketch, expandConsole } from '../actions/console';
+import { stopSketch, expandConsole } from '../actions/ide';
 
 export default function useHandleMessageEvent() {
   const dispatch = useDispatch();

client/modules/IDE/pages/FullView.jsx

@@ -5,16 +5,13 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import PreviewFrame from '../components/PreviewFrame';
 import PreviewNav from '../../../components/PreviewNav';
-import { getHTMLFile, getJSFiles, getCSSFiles } from '../reducers/files';
 import * as ProjectActions from '../actions/project';
 
 class FullView extends React.Component {
   componentDidMount() {
     this.props.getProject(this.props.params.project_id, this.props.params.username);
   }
 
-  ident = () => {}
-
   render() {
     return (
       <div className="fullscreen-preview">
@@ -27,26 +24,7 @@ class FullView extends React.Component {
         />
         <main className="preview-frame-holder">
           <PreviewFrame
-            htmlFile={this.props.htmlFile}
-            jsFiles={this.props.jsFiles}
-            cssFiles={this.props.cssFiles}
-            files={this.props.files}
-            head={
-              <link type="text/css" rel="stylesheet" href="/preview-styles.css" />
-            }
             fullView
-            isPlaying
-            isAccessibleOutputPlaying={false}
-            textOutput={false}
-            gridOutput={false}
-            soundOutput={false}
-            dispatchConsoleEvent={this.ident}
-            endSketchRefresh={this.ident}
-            previewIsRefreshing={false}
-            setBlobUrl={this.ident}
-            stopSketch={this.ident}
-            expandConsole={this.ident}
-            clearConsole={this.ident}
           />
         </main>
       </div>
@@ -65,37 +43,12 @@ FullView.propTypes = {
       username: PropTypes.string
     })
   }).isRequired,
-  htmlFile: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    content: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired
-  }).isRequired,
-  jsFiles: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    content: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired
-  })).isRequired,
-  cssFiles: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    content: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired
-  })).isRequired,
-  getProject: PropTypes.func.isRequired,
-  files: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    content: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired
-  })).isRequired,
+  getProject: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state) {
   return {
-    user: state.user,
-    htmlFile: getHTMLFile(state.files),
-    jsFiles: getJSFiles(state.files),
-    cssFiles: getCSSFiles(state.files),
-    project: state.project,
-    files: state.files
+    project: state.project
   };
 }
 

client/modules/IDE/pages/IDEView.jsx

@@ -42,30 +42,16 @@ function getTitle(props) {
   return id ? `p5.js Web Editor | ${props.project.name}` : 'p5.js Web Editor';
 }
 
-function warnIfUnsavedChanges(props) {
-  // eslint-disable-line
-  const { route } = props.route;
-  if (
-    route &&
-    route.action === 'PUSH' &&
-      (route.pathname === '/login' || route.pathname === '/signup')
-  ) {
-    // don't warn
-    props.persistState();
-    window.onbeforeunload = null;
-  } else if (
-    route &&
-    (props.location.pathname === '/login' ||
-      props.location.pathname === '/signup')
-  ) {
-    // don't warn
-    props.persistState();
-    window.onbeforeunload = null;
-  } else if (props.ide.unsavedChanges) {
+function warnIfUnsavedChanges(props, nextLocation) {
+  const toAuth = nextLocation &&
+    nextLocation.action === 'PUSH' &&
+    (nextLocation.pathname === '/login' || nextLocation.pathname === '/signup');
+  const onAuth = nextLocation &&
+    (props.location.pathname === '/login' || props.location.pathname === '/signup');
+  if (props.ide.unsavedChanges && (!toAuth && !onAuth)) {
     if (!window.confirm(props.t('Nav.WarningUnsavedChanges'))) {
       return false;
     }
-    props.setUnsavedChanges(false);
     return true;
   }
   return true;
@@ -103,7 +89,8 @@ class IDEView extends React.Component {
       this.handleUnsavedChanges
     );
 
-    window.onbeforeunload = this.handleUnsavedChanges;
+    // window.onbeforeunload = this.handleUnsavedChanges;
+    window.addEventListener('beforeunload', this.handleBeforeUnload);
 
     this.autosaveInterval = null;
   }
@@ -247,7 +234,16 @@ class IDEView extends React.Component {
     }
   }
 
-  handleUnsavedChanges = () => warnIfUnsavedChanges(this.props);
+  handleUnsavedChanges = nextLocation => warnIfUnsavedChanges(this.props, nextLocation);
+
+  handleBeforeUnload = (e) => {
+    const confirmationMessage = this.props.t('Nav.WarningUnsavedChanges');
+    if (this.props.ide.unsavedChanges) {
+      (e || window.event).returnValue = confirmationMessage;
+      return confirmationMessage;
+    }
+    return null;
+  }
 
   render() {
     return (

client/styles/components/_keyboard-shortcuts.scss

@@ -1,7 +1,9 @@
 .keyboard-shortcuts {
   padding: #{20 / $base-font-size}rem;
+  margin-right: #{20 / $base-font-size}rem;
   padding-bottom: #{40 / $base-font-size}rem;
   width: #{450 / $base-font-size}rem;
+  overflow-y: scroll;
 }
 
 .keyboard-shortcuts-note {