merge master

client/components/Nav.js

@@ -8,7 +8,7 @@ function Nav(props) {
         <li className="nav__item">
           <a
             className="nav__new"
-            onClick={props.createProject}
+            onClick={props.newProject}
           >
             New
           </a>
@@ -21,6 +21,16 @@ function Nav(props) {
             Save
           </a>
         </li>
+        <li className="nav__item">
+          <a className="nav__clone" onClick={props.cloneProject}>
+            Duplicate
+          </a>
+        </li>
+        <li className="nav__item">
+          <a className="nav__export" onClick={props.exportProjectAsZip}>
+            Download
+          </a>
+        </li>
         <li className="nav__item">
           <p className="nav__open">
             <Link to="/sketches">
@@ -28,16 +38,6 @@ function Nav(props) {
             </Link>
           </p>
         </li>
-        <li className="nav__item">
-          <a className="nav__export" onClick={props.exportProjectAsZip}>
-            Export (zip)
-          </a>
-        </li>
-        <li className="nav__item">
-          <a className="nav__clone" onClick={props.cloneProject}>
-            Clone
-          </a>
-        </li>
       </ul>
       <ul className="nav__items-right" title="user-menu">
         <li className="nav__item">
@@ -50,7 +50,7 @@ function Nav(props) {
 }
 
 Nav.propTypes = {
-  createProject: PropTypes.func.isRequired,
+  newProject: PropTypes.func.isRequired,
   saveProject: PropTypes.func.isRequired,
   exportProjectAsZip: PropTypes.func.isRequired,
   cloneProject: PropTypes.func.isRequired,

client/constants.js

@@ -29,6 +29,7 @@ export const SET_PROJECT_NAME = 'SET_PROJECT_NAME';
 export const PROJECT_SAVE_SUCCESS = 'PROJECT_SAVE_SUCCESS';
 export const PROJECT_SAVE_FAIL = 'PROJECT_SAVE_FAIL';
 export const NEW_PROJECT = 'NEW_PROJECT';
+export const RESET_PROJECT = 'RESET_PROJECT';
 
 export const SET_PROJECT = 'SET_PROJECT';
 export const SET_PROJECTS = 'SET_PROJECTS';

client/modules/IDE/actions/editorAccessibility.js

@@ -15,9 +15,9 @@ export function clearLintMessage() {
   };
 }
 
-export function updateLineNumber(lineNo) {
+export function updateLineNumber(lineNumber) {
   return {
     type: ActionTypes.UPDATE_LINENUMBER,
-    lineNo
+    lineNumber
   };
 }

client/modules/IDE/actions/project.js

@@ -52,6 +52,9 @@ export function setProjectName(event) {
 export function saveProject() {
   return (dispatch, getState) => {
     const state = getState();
+    if (state.user.id && state.project.owner && state.project.owner.id !== state.user.id) {
+      return;
+    }
     const formParams = Object.assign({}, state.project);
     formParams.files = [...state.files];
     if (state.project.id) {
@@ -116,7 +119,6 @@ export function createProject() {
 
 export function exportProjectAsZip() {
   return (dispatch, getState) => {
-    console.log('exporting project!');
     const state = getState();
     const zip = new JSZip();
     async.each(state.files, (file, cb) => {
@@ -139,6 +141,13 @@ export function exportProjectAsZip() {
   };
 }
 
+export function newProject() {
+  browserHistory.push('/');
+  return {
+    type: ActionTypes.RESET_PROJECT
+  };
+}
+
 export function cloneProject() {
   return (dispatch, getState) => {
     const state = getState();

client/modules/IDE/components/Editor.js

@@ -18,14 +18,14 @@ import { CSSLint } from 'csslint';
 window.CSSLint = CSSLint;
 import { HTMLHint } from 'htmlhint';
 window.HTMLHint = HTMLHint;
+const beepUrl = require('../../../sounds/audioAlert.mp3');
 
 import { debounce } from 'throttle-debounce';
 
 class Editor extends React.Component {
 
   componentDidMount() {
-    // TODO: replace with wav file and loader
+    this.beep = new Audio(beepUrl);
-    this.beep = new Audio('data:audio/wav;base64,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qJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l//8elePK/Lf//IInrOF/FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go+8xJ0UiCb8LHHdftWyLJE0QIAIsI+UbXu67dZMjmgDGCGl1H+vpF4NSDckSIkk7Vd+sxEhBQMRU8j/12UIRhzSaUdQ+rQU5kGeFxm+hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf/pD6ElLqSX+rUmOQNpJFa/r+sa4e/pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj+NIEig0YfyWUho1VBBBA//uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y+IDGid/9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN/9Robv/Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV/YcS+XVLnSS+WLDroqArFkMEsAS+eWmrUzrO0oEmE40RlMZ5+ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j+LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI/gviKL6qvvFs1+bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a/EEBUdU1KrXLf40GoiiFXK///qpoiDXrOgqDR38JB0bw7SoL+ZB9o1RCkQjQ2CBYZKd/+VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt/WKi2N4d//uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF/Mg+0aohSIRobBAsMlO//Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR+LsS4W/rFRb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU='); // eslint-disable-line
     this._cm = CodeMirror(this.refs.container, { // eslint-disable-line
       theme: 'p5-widget',
       value: this.props.file.content,
@@ -89,6 +89,8 @@ class Editor extends React.Component {
         this._cm.setOption('mode', 'htmlmixed');
       }
     }
+
+    console.log('componentDidUpdate in editor');
   }
 
   componentWillUnmount() {
@@ -104,7 +106,7 @@ class Editor extends React.Component {
         </div>
         <EditorAccessibility
           lintMessages={this.props.lintMessages}
-          lineNo={this.props.lineNo}
+          lineNumber={this.props.lineNumber}
         />
       </section>
     );
@@ -113,7 +115,7 @@ class Editor extends React.Component {
 
 Editor.propTypes = {
   lintWarning: PropTypes.bool.isRequired,
-  lineNo: PropTypes.string.isRequired,
+  lineNumber: PropTypes.string.isRequired,
   lintMessages: PropTypes.array.isRequired,
   updateLintMessage: PropTypes.func.isRequired,
   clearLintMessage: PropTypes.func.isRequired,

client/modules/IDE/components/EditorAccessibility.js

@@ -27,7 +27,7 @@ class EditorAccessibility extends React.Component {
           {messages}
         </ul>
         <p> Current line
-          <span className="editor-linenumber" aria-live="polite" aria-atomic="true" id="current-line"> {this.props.lineNo} </span>
+          <span className="editor-linenumber" aria-live="polite" aria-atomic="true" id="current-line"> {this.props.lineNumber} </span>
         </p>
       </div>
     );
@@ -36,7 +36,7 @@ class EditorAccessibility extends React.Component {
 
 EditorAccessibility.propTypes = {
   lintMessages: PropTypes.array.isRequired,
-  lineNo: PropTypes.string.isRequired,
+  lineNumber: PropTypes.string.isRequired,
 };
 
 export default EditorAccessibility;

client/modules/IDE/components/PreviewFrame.js

@@ -33,7 +33,7 @@ const hijackConsoleScript = `<script>
     });
 
     // catch reference errors, via http://stackoverflow.com/a/12747364/2994108
-    window.onerror = function (msg, url, lineNo, columnNo, error) {
+    window.onerror = function (msg, url, lineNumber, columnNo, error) {
         var string = msg.toLowerCase();
         var substring = "script error";
         var data = {};
@@ -41,7 +41,7 @@ const hijackConsoleScript = `<script>
         if (string.indexOf(substring) > -1){
           data = 'Script Error: See Browser Console for Detail';
         } else {
-          data = msg + ' Line: ' + lineNo + 'column: ' + columnNo;
+          data = msg + ' Line: ' + lineNumber + 'column: ' + columnNo;
         }
         window.parent.postMessage({
           method: 'error',

client/modules/IDE/pages/IDEView.js

@@ -40,6 +40,7 @@ class IDEView extends React.Component {
 
     this.consoleSize = this.props.ide.consoleIsExpanded ? 180 : 29;
     this.sidebarSize = this.props.ide.sidebarIsExpanded ? 180 : 20;
+    this.forceUpdate();
   }
 
   componentWillUpdate(nextProps) {
@@ -67,11 +68,18 @@ class IDEView extends React.Component {
         this.autosaveInterval = null;
       }
     }
+
+    if (this.autosaveInterval && !this.props.project.id) {
+      clearInterval(this.autosaveInterval);
+      this.autosaveInterval = null;
+    }
   }
 
   componentWillUnmount() {
     clearInterval(this.autosaveInterval);
     this.autosaveInterval = null;
+    this.consoleSize = undefined;
+    this.sidebarSize = undefined;
   }
 
   _handleConsolePaneOnDragFinished() {
@@ -83,6 +91,7 @@ class IDEView extends React.Component {
   }
 
   _handleSidebarPaneOnDragFinished() {
+    console.log('setting sidebar size');
     this.sidebarSize = this.refs.sidebarPane.state.draggedSize;
     this.refs.sidebarPane.setState({
       resized: false,
@@ -95,7 +104,7 @@ class IDEView extends React.Component {
       <div className="ide">
         <Nav
           user={this.props.user}
-          createProject={this.props.createProject}
+          newProject={this.props.newProject}
           saveProject={this.props.saveProject}
           exportProjectAsZip={this.props.exportProjectAsZip}
           cloneProject={this.props.cloneProject}
@@ -138,6 +147,7 @@ class IDEView extends React.Component {
             ref="sidebarPane"
             onDragFinished={this._handleSidebarPaneOnDragFinished}
             allowResize={this.props.ide.sidebarIsExpanded}
+            minSize={20}
           >
             <Sidebar
               files={this.props.files}
@@ -181,7 +191,7 @@ class IDEView extends React.Component {
                   isTabIndent={this.props.preferences.isTabIndent}
                   files={this.props.files}
                   lintMessages={this.props.editorAccessibility.lintMessages}
-                  lineNo={this.props.editorAccessibility.lineNo}
+                  lineNumber={this.props.editorAccessibility.lineNumber}
                 />
                 <Console
                   consoleEvent={this.props.ide.consoleEvent}
@@ -246,7 +256,7 @@ IDEView.propTypes = {
     authenticated: PropTypes.bool.isRequired,
     id: PropTypes.string
   }).isRequired,
-  createProject: PropTypes.func.isRequired,
+  newProject: PropTypes.func.isRequired,
   saveProject: PropTypes.func.isRequired,
   ide: PropTypes.shape({
     isPlaying: PropTypes.bool.isRequired,
@@ -273,7 +283,7 @@ IDEView.propTypes = {
   openPreferences: PropTypes.func.isRequired,
   editorAccessibility: PropTypes.shape({
     lintMessages: PropTypes.array.isRequired,
-    lineNo: PropTypes.string.isRequired
+    lineNumber: PropTypes.string.isRequired
   }).isRequired,
   updateLintMessage: PropTypes.func.isRequired,
   clearLintMessage: PropTypes.func.isRequired,

client/modules/IDE/reducers/editorAccessibility.js

@@ -1,7 +1,7 @@
 import * as ActionTypes from '../../../constants';
 
 const initialState = {
-  lineNo: 'line',
+  lineNumber: 'line',
   lintMessages: []
 };
 
@@ -15,7 +15,7 @@ const editorAccessibility = (state = initialState, action) => {
     case ActionTypes.CLEAR_LINT_MESSAGE:
       return Object.assign({}, state, { lintMessages: [] });
     case ActionTypes.UPDATE_LINENUMBER:
-      return Object.assign({}, state, { lineNo: `line ${action.lineNo}` });
+      return Object.assign({}, state, { lineNumber: `line ${action.lineNumber}` });
     default:
       return state;
   }

client/modules/IDE/reducers/files.js

@@ -71,6 +71,8 @@ const files = (state = initialState, action) => {
       return [...action.files];
     case ActionTypes.SET_PROJECT:
       return [...action.files];
+    case ActionTypes.RESET_PROJECT:
+      return initialState;
     case ActionTypes.CREATE_FILE:
       return [...state, { name: action.name, id: action.id, content: '', url: action.url }];
     case ActionTypes.SHOW_FILE_OPTIONS:

client/modules/IDE/reducers/ide.js

@@ -48,6 +48,8 @@ const ide = (state = initialState, action) => {
       return Object.assign({}, state, { preferencesIsVisible: true });
     case ActionTypes.CLOSE_PREFERENCES:
       return Object.assign({}, state, { preferencesIsVisible: false });
+    case ActionTypes.RESET_PROJECT:
+      return initialState;
     default:
       return state;
   }

client/modules/IDE/reducers/project.js

@@ -20,6 +20,8 @@ const project = (state = initialState, action) => {
         name: action.project.name,
         owner: action.owner
       };
+    case ActionTypes.RESET_PROJECT:
+      return initialState;
     default:
       return state;
   }

client/modules/Sketch/pages/SketchListView.js

@@ -17,7 +17,7 @@ class SketchListView extends React.Component {
       <div className="sketch-list">
         <Nav
           user={this.props.user}
-          createProject={this.props.createProject}
+          newProject={this.props.newProject}
           saveProject={this.props.saveProject}
           exportProjectAsZip={this.props.exportProjectAsZip}
           cloneProject={this.props.cloneProject}
@@ -47,7 +47,7 @@ class SketchListView extends React.Component {
 
 SketchListView.propTypes = {
   user: PropTypes.object.isRequired,
-  createProject: PropTypes.func.isRequired,
+  newProject: PropTypes.func.isRequired,
   saveProject: PropTypes.func.isRequired,
   getProjects: PropTypes.func.isRequired,
   sketches: PropTypes.array.isRequired,

client/styles/abstracts/_placeholders.scss

@@ -71,7 +71,7 @@
 	color: $light-primary-text-color;
 	background-color: $light-modal-button-background-color;
 	padding: 0;
-	margin-bottom: #{20 / $base-font-size}rem;
+	margin-bottom: #{28 / $base-font-size}rem;
 	line-height: #{50 / $base-font-size}rem;
 	& g {
 		fill: $light-primary-text-color;

client/styles/layout/_ide.scss

@@ -44,6 +44,7 @@
   width: 100%;
   position: absolute;
   z-index: 10;
+  display: none;
 }
 
 .toolbar {

webpack.config.dev.js

@@ -36,7 +36,7 @@ module.exports = {
         loaders: ['style', 'css', 'sass']
       },
       {
-        test: /\.svg$/,
+        test: /\.(svg|mp3)$/,
         loader: 'file'
       }
     ],

webpack.config.prod.js

@@ -37,7 +37,7 @@ module.exports = {
         loader: 'babel'
       },
       {
-        test: /\.svg$/,
+        test: /\.(svg|mp3)$/,
         loader: 'file'
       }
     ]