merge master

client/constants.js

@@ -30,6 +30,8 @@ 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 SHOW_EDIT_PROJECT_NAME = 'SHOW_EDIT_PROJECT_NAME';
+export const HIDE_EDIT_PROJECT_NAME = 'HIDE_EDIT_PROJECT_NAME';
 
 export const SET_PROJECT = 'SET_PROJECT';
 export const SET_PROJECTS = 'SET_PROJECTS';

client/modules/App/components/Overlay.js

@@ -0,0 +1,17 @@
+import React, { PropTypes } from 'react';
+
+function Overlay(props) {
+  return (
+    <div className="overlay">
+      <div className="overlay-content">
+        {props.children}
+      </div>
+    </div>
+  );
+}
+
+Overlay.propTypes = {
+  children: PropTypes.object
+};
+
+export default Overlay;

client/modules/IDE/actions/project.js

@@ -41,8 +41,7 @@ export function getProject(id) {
   };
 }
 
-export function setProjectName(event) {
-  const name = event.target.textContent;
+export function setProjectName(name) {
   return {
     type: ActionTypes.SET_PROJECT_NAME,
     name
@@ -171,3 +170,15 @@ export function cloneProject() {
   };
 }
 
+export function showEditProjectName() {
+  return {
+    type: ActionTypes.SHOW_EDIT_PROJECT_NAME
+  };
+}
+
+export function hideEditProjectName() {
+  return {
+    type: ActionTypes.HIDE_EDIT_PROJECT_NAME
+  };
+}
+

client/modules/IDE/actions/projects.js

@@ -0,0 +1,25 @@
+import * as ActionTypes from '../../../constants';
+import { browserHistory } from 'react-router';
+import axios from 'axios';
+
+const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
+
+export function getProjects() {
+  return (dispatch) => {
+    axios.get(`${ROOT_URL}/projects`, { withCredentials: true })
+      .then(response => {
+        dispatch({
+          type: ActionTypes.SET_PROJECTS,
+          projects: response.data
+        });
+      })
+      .catch(response => dispatch({
+        type: ActionTypes.ERROR,
+        error: response.data
+      }));
+  };
+}
+
+export function closeSketchList() {
+  browserHistory.push('/');
+}

client/modules/IDE/components/SidebarItem.js

@@ -16,7 +16,6 @@ class SidebarItem extends React.Component {
   }
 
   handleKeyPress(event) {
-    console.log(event.key);
     if (event.key === 'Enter') {
       this.props.hideEditFileName(this.props.file.id);
     }

client/modules/IDE/components/SketchList.js

@@ -0,0 +1,68 @@
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import moment from 'moment';
+import { Link } from 'react-router';
+import * as SketchActions from '../actions/projects';
+import * as ProjectActions from '../actions/project';
+import InlineSVG from 'react-inlinesvg';
+const exitUrl = require('../../../images/exit.svg');
+
+class SketchList extends React.Component {
+  componentDidMount() {
+    this.props.getProjects();
+  }
+
+  render() {
+    return (
+      <div className="sketch-list">
+        <header className="sketch-list__header">
+          <h2>Sketches</h2>
+          <button className="sketch-list__exit-button" onClick={this.props.closeSketchList}>
+            <InlineSVG src={exitUrl} alt="Close Sketch List Overlay" />
+          </button>
+        </header>
+        <div className="sketches-table-container">
+          <table className="sketches-table" summary="table containing all saved projects">
+            <thead>
+              <tr>
+                <th scope="col">Name</th>
+                <th scope="col">Created</th>
+                <th scope="col">Last Updated</th>
+              </tr>
+            </thead>
+            <tbody>
+              {this.props.sketches.map(sketch =>
+                <tr className="sketches-table__row" key={sketch.id}>
+                  <td scope="row"><Link to={`/projects/${sketch._id}`}>{sketch.name}</Link></td>
+                  <td>{moment(sketch.createdAt).format('MMM D, YYYY h:mm:ss A')}</td>
+                  <td>{moment(sketch.updatedAt).format('MMM D, YYYY h:mm:ss A')}</td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    );
+  }
+}
+
+SketchList.propTypes = {
+  user: PropTypes.object.isRequired,
+  getProjects: PropTypes.func.isRequired,
+  sketches: PropTypes.array.isRequired,
+  closeSketchList: PropTypes.func.isRequired
+};
+
+function mapStateToProps(state) {
+  return {
+    user: state.user,
+    sketches: state.sketches
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(Object.assign({}, SketchActions, ProjectActions), dispatch);
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SketchList);

client/modules/IDE/components/TextOutput.js

@@ -10,7 +10,6 @@ class TextOutput extends React.Component {
         className="text-output"
         id="canvas-sub"
         tabIndex="0"
-        role="main"
         aria-label="text-output"
         title="canvas text output"
       >
@@ -18,23 +17,17 @@ class TextOutput extends React.Component {
         </section>
         <p
           tabIndex="0"
-          role="main"
+          role="region"
           id="textOutput-content-summary"
           aria-label="text output summary"
         >
         </p>
-        <p
+        <table
           tabIndex="0"
-          role="main"
+          role="region"
           id="textOutput-content-details"
           aria-label="text output summary details"
         >
-        </p>
-        <table
-          id="textOutput-content-table"
-          summary="text output object details"
-          title="output details"
-        >
         </table>
       </section>
     );

client/modules/IDE/components/Toolbar.js

@@ -6,67 +6,106 @@ const stopUrl = require('../../../images/stop.svg');
 const preferencesUrl = require('../../../images/preferences.svg');
 import classNames from 'classnames';
 
-function Toolbar(props) {
-  let playButtonClass = classNames({
-    'toolbar__play-button': true,
-    'toolbar__play-button--selected': props.isPlaying
-  });
-  let stopButtonClass = classNames({
-    'toolbar__stop-button': true,
-    'toolbar__stop-button--selected': !props.isPlaying
-  });
-  let preferencesButtonClass = classNames({
-    'toolbar__preferences-button': true,
-    'toolbar__preferences-button--selected': props.preferencesIsVisible
-  });
+class Toolbar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleKeyPress = this.handleKeyPress.bind(this);
+    this.handleProjectNameChange = this.handleProjectNameChange.bind(this);
+  }
 
-  return (
-    <section className="toolbar" title="toolbar" role="main">
-      <img className="toolbar__logo" src={logoUrl} alt="p5js Logo" />
-      <button className={playButtonClass} onClick={props.startSketch} aria-label="play sketch">
-        <InlineSVG src={playUrl} alt="Play Sketch" />
-      </button>
-      <button
-        className="toolbar__play-sketch-button"
-        onClick={() => { props.startTextOutput(); props.startSketch(); }}
-        aria-label="play sketch with output text"
-      >
-        <InlineSVG src={playUrl} alt="Play Sketch with output text" />
-      </button>
-      <button
-        className={stopButtonClass}
-        onClick={() => { props.stopTextOutput(); props.stopSketch(); }}
-        aria-label="stop sketch"
-      >
-        <InlineSVG src={stopUrl} alt="Stop Sketch" />
-      </button>
-      <div className="toolbar__project-name-container">
-        <span
-          className="toolbar__project-name"
-          // TODO change this span into an input
-          onBlur={props.setProjectName.bind(this)} // eslint-disable-line
-          contentEditable
-          suppressContentEditableWarning
+  handleKeyPress(event) {
+    if (event.key === 'Enter') {
+      this.props.hideEditProjectName();
+    }
+  }
+
+  handleProjectNameChange(event) {
+    this.props.setProjectName(event.target.value);
+  }
+
+  validateProjectName() {
+    if (this.props.project.name === '') {
+      this.props.setProjectName(this.originalProjectName);
+    }
+  }
+
+  render() {
+    let playButtonClass = classNames({
+      'toolbar__play-button': true,
+      'toolbar__play-button--selected': this.props.isPlaying
+    });
+    let stopButtonClass = classNames({
+      'toolbar__stop-button': true,
+      'toolbar__stop-button--selected': !this.props.isPlaying
+    });
+    let preferencesButtonClass = classNames({
+      'toolbar__preferences-button': true,
+      'toolbar__preferences-button--selected': this.props.preferencesIsVisible
+    });
+    let nameContainerClass = classNames({
+      'toolbar__project-name-container': true,
+      'toolbar__project-name-container--editing': this.props.project.isEditingName
+    });
+
+    return (
+      <div className="toolbar">
+        <img className="toolbar__logo" src={logoUrl} alt="p5js Logo" />
+        <button className={playButtonClass} onClick={this.props.startSketch} aria-label="play sketch">
+          <InlineSVG src={playUrl} alt="Play Sketch" />
+        </button>
+        <button
+          className="toolbar__play-sketch-button"
+          onClick={() => { this.props.startTextOutput(); this.props.startSketch(); }}
+          aria-label="play sketch with output text"
         >
-          {props.projectName}
-        </span>
-        {(() => { // eslint-disable-line
-          if (props.owner) {
-            return (
-              <p className="toolbar__project-owner">by <span>{props.owner.username}</span></p>
-            );
-          }
-        })()}
+          <InlineSVG src={playUrl} alt="Play Sketch with output text" />
+        </button>
+        <button
+          className={stopButtonClass}
+          onClick={() => { this.props.stopTextOutput(); this.props.stopSketch(); }}
+          aria-label="stop sketch"
+        >
+          <InlineSVG src={stopUrl} alt="Stop Sketch" />
+        </button>
+        <div className={nameContainerClass}>
+          <a
+            className="toolbar__project-name"
+            onClick={() => {
+              this.originalProjectName = this.props.project.name;
+              this.props.showEditProjectName();
+              setTimeout(() => this.refs.projectNameInput.focus(), 0);
+            }}
+          >{this.props.project.name}</a>
+          <input
+            type="text"
+            className="toolbar__project-name-input"
+            value={this.props.project.name}
+            onChange={this.handleProjectNameChange}
+            ref="projectNameInput"
+            onBlur={() => {
+              this.validateProjectName();
+              this.props.hideEditProjectName();
+            }}
+            onKeyPress={this.handleKeyPress}
+          />
+          {(() => { // eslint-disable-line
+            if (this.props.owner) {
+              return (
+                <p className="toolbar__project-owner">by <span>{this.props.owner.username}</span></p>
+              );
+            }
+          })()}
+        </div>
+        <button
+          className={preferencesButtonClass}
+          onClick={this.props.openPreferences}
+          aria-label="open preferences"
+        >
+          <InlineSVG src={preferencesUrl} alt="Show Preferences" />
+        </button>
       </div>
-      <button
-        className={preferencesButtonClass}
-        onClick={props.openPreferences}
-        aria-label="open preferences"
-      >
-        <InlineSVG src={preferencesUrl} alt="Show Preferences" />
-      </button>
-    </section>
-  );
+    );
+  }
 }
 
 Toolbar.propTypes = {
@@ -77,11 +116,16 @@ Toolbar.propTypes = {
   startTextOutput: PropTypes.func.isRequired,
   stopTextOutput: PropTypes.func.isRequired,
   setProjectName: PropTypes.func.isRequired,
-  projectName: PropTypes.string.isRequired,
   openPreferences: PropTypes.func.isRequired,
   owner: PropTypes.shape({
     username: PropTypes.string
-  })
+  }),
+  project: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    isEditingName: PropTypes.bool
+  }).isRequired,
+  showEditProjectName: PropTypes.func.isRequired,
+  hideEditProjectName: PropTypes.func.isRequired
 };
 
 export default Toolbar;

client/modules/IDE/pages/IDEView.js

@@ -17,9 +17,12 @@ import * as EditorAccessibilityActions from '../actions/editorAccessibility';
 import * as PreferencesActions from '../actions/preferences';
 import { getFile, getHTMLFile, getJSFiles, getCSSFiles, setSelectedFile } from '../reducers/files';
 import SplitPane from 'react-split-pane';
+import Overlay from '../../App/components/Overlay';
+import SketchList from '../components/SketchList';
 
 class IDEView extends React.Component {
   constructor(props) {
+    console.log(props);
     super(props);
     this._handleConsolePaneOnDragFinished = this._handleConsolePaneOnDragFinished.bind(this);
     this._handleSidebarPaneOnDragFinished = this._handleSidebarPaneOnDragFinished.bind(this);
@@ -51,6 +54,10 @@ class IDEView extends React.Component {
     if (this.props.ide.sidebarIsExpanded !== nextProps.ide.sidebarIsExpanded) {
       this.sidebarSize = nextProps.ide.sidebarIsExpanded ? 180 : 20;
     }
+
+    if (nextProps.params.project_id && !this.props.params.project_id) {
+      this.props.getProject(nextProps.params.project_id);
+    }
   }
 
   componentDidUpdate(prevProps) {
@@ -118,10 +125,13 @@ class IDEView extends React.Component {
           stopTextOutput={this.props.stopTextOutput}
           projectName={this.props.project.name}
           setProjectName={this.props.setProjectName}
+          showEditProjectName={this.props.showEditProjectName}
+          hideEditProjectName={this.props.hideEditProjectName}
           openPreferences={this.props.openPreferences}
           preferencesIsVisible={this.props.ide.preferencesIsVisible}
           setTextOutput={this.props.setTextOutput}
           owner={this.props.project.owner}
+          project={this.props.project}
         />
         <Preferences
           isVisible={this.props.ide.preferencesIsVisible}
@@ -243,6 +253,15 @@ class IDEView extends React.Component {
           }
           return '';
         })()}
+        {(() => { // eslint-disable-line
+          if (this.props.location.pathname === '/sketches') {
+            return (
+              <Overlay>
+                <SketchList />
+              </Overlay>
+            );
+          }
+        })()}
       </div>
 
     );
@@ -253,6 +272,9 @@ IDEView.propTypes = {
   params: PropTypes.shape({
     project_id: PropTypes.string
   }),
+  location: PropTypes.shape({
+    pathname: PropTypes.string
+  }),
   getProject: PropTypes.func.isRequired,
   user: PropTypes.shape({
     authenticated: PropTypes.bool.isRequired,
@@ -330,7 +352,9 @@ IDEView.propTypes = {
   deleteFile: PropTypes.func.isRequired,
   showEditFileName: PropTypes.func.isRequired,
   hideEditFileName: PropTypes.func.isRequired,
-  updateFileName: PropTypes.func.isRequired
+  updateFileName: PropTypes.func.isRequired,
+  showEditProjectName: PropTypes.func.isRequired,
+  hideEditProjectName: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state) {

client/modules/IDE/reducers/project.js

@@ -22,6 +22,10 @@ const project = (state = initialState, action) => {
       };
     case ActionTypes.RESET_PROJECT:
       return initialState;
+    case ActionTypes.SHOW_EDIT_PROJECT_NAME:
+      return Object.assign({}, state, { isEditingName: true });
+    case ActionTypes.HIDE_EDIT_PROJECT_NAME:
+      return Object.assign({}, state, { isEditingName: false });
     default:
       return state;
   }

client/modules/IDE/reducers/projects.js

@@ -0,0 +1,12 @@
+import * as ActionTypes from '../../../constants';
+
+const sketches = (state = [], action) => {
+  switch (action.type) {
+    case ActionTypes.SET_PROJECTS:
+      return action.projects;
+    default:
+      return state;
+  }
+};
+
+export default sketches;

client/modules/Sketch/pages/SketchListView.js

@@ -22,24 +22,26 @@ class SketchListView extends React.Component {
           exportProjectAsZip={this.props.exportProjectAsZip}
           cloneProject={this.props.cloneProject}
         />
-        <table className="sketches-table" summary="table containing all saved projects">
-          <thead>
-            <tr>
-              <th scope="col">Name</th>
-              <th scope="col">Created</th>
-              <th scope="col">Last Updated</th>
-            </tr>
-          </thead>
-          <tbody>
-            {this.props.sketches.map(sketch =>
-              <tr className="sketches-table__row" key={sketch.id}>
-                <td scope="row"><Link to={`/projects/${sketch._id}`}>{sketch.name}</Link></td>
-                <td>{moment(sketch.createdAt).format('MMM D, YYYY')}</td>
-                <td>{moment(sketch.updatedAt).format('MMM D, YYYY')}</td>
+        <div className="sketches-table-container">
+          <table className="sketches-table" summary="table containing all saved projects">
+            <thead>
+              <tr>
+                <th scope="col">Name</th>
+                <th scope="col">Created</th>
+                <th scope="col">Last Updated</th>
               </tr>
-            )}
-          </tbody>
-        </table>
+            </thead>
+            <tbody>
+              {this.props.sketches.map(sketch =>
+                <tr className="sketches-table__row" key={sketch.id}>
+                  <td scope="row"><Link to={`/projects/${sketch._id}`}>{sketch.name}</Link></td>
+                  <td>{moment(sketch.createdAt).format('MMM D, YYYY')}</td>
+                  <td>{moment(sketch.updatedAt).format('MMM D, YYYY')}</td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
       </div>
     );
   }

client/routes.js

@@ -4,7 +4,7 @@ import App from './modules/App/App';
 import IDEView from './modules/IDE/pages/IDEView';
 import LoginView from './modules/User/pages/LoginView';
 import SignupView from './modules/User/pages/SignupView';
-import SketchListView from './modules/Sketch/pages/SketchListView';
+// import SketchListView from './modules/Sketch/pages/SketchListView';
 import { getUser } from './modules/User/actions';
 
 const checkAuth = (store) => {
@@ -18,7 +18,7 @@ const routes = (store) =>
     <Route path="/login" component={LoginView} />
     <Route path="/signup" component={SignupView} />
     <Route path="/projects/:project_id" component={IDEView} />
-    <Route path="/sketches" component={SketchListView} />
+    <Route path="/sketches" component={IDEView} />
   </Route>
   );
 

client/styles/components/_overlay.scss

@@ -0,0 +1,17 @@
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.overlay-content {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

client/styles/components/_sketch-list.scss

@@ -1,9 +1,25 @@
+.sketch-list__header {
+  display: flex;
+  justify-content: space-between;
+  padding: #{20 / $base-font-size}rem;
+}
+
+.sketches-table-container {
+  flex: 1 0 0%;
+  overflow-y: scroll;
+}
+
 .sketches-table {
   width: 100%;
   padding: #{10 / $base-font-size}rem 0;
-  padding-left: #{170 / $base-font-size}rem;
+  padding-left: #{20 / $base-font-size}rem;
+  height: 100%;
 }
 
 .sketches-table__row {
   margin: #{10 / $base-font-size}rem;
+}
+
+.sketch-list__exit-button {
+  @extend %icon;
 }

client/styles/components/_toolbar.scss

@@ -57,6 +57,18 @@
 	&:focus {
 		color: $light-inactive-text-color;
 	}
+
+	.toolbar__project-name-container--editing & {
+		display: none;
+	}
+}
+
+.toolbar__project-name-input {
+	display: none;
+	border: 0px;
+	.toolbar__project-name-container--editing & {
+		display: block;
+	}
 }
 
 .toolbar__project-owner {

client/styles/layout/_sketch-list.scss

@@ -1,6 +1,8 @@
 .sketch-list {
+  @extend %modal;
   display: flex;
   flex-wrap: wrap;
-  height: 100%;
   flex-flow: column;
-}
+  width: #{1000 / $base-font-size}rem;
+  height: #{700 / $base-font-size}rem;
+}

client/styles/main.scss

@@ -20,6 +20,7 @@
 @import 'components/modal';
 @import 'components/console';
 @import 'components/resizer';
+@import 'components/overlay';
 
 @import 'layout/ide';
 @import 'layout/sketch-list';

static/interceptor-functions.js

@@ -188,7 +188,7 @@ var Interceptor = {
         if(!(typeof(arguments[i])).localeCompare('number')){
           arguments[i] = round(arguments[i]);
         }
-        objectArray[objectCount][x.params[i].description]=arguments[i];
+        objectArray[objectCount][x.params[i].description.slice(3,-5)]=arguments[i];
       }
       if(objectTypeCount[x.name]) {
         objectTypeCount[x.name]++;
@@ -215,7 +215,7 @@ var Interceptor = {
           var tempCol = row.children.length;
           var properties =  Object.keys(objectArray[j]);
 
-          if(tempCol<properties.length){ //ie - there are more cols now
+          if(tempCol<=properties.length){ //ie - there are more cols now
             for(var i =0;i<tempCol;i++) {
               row.children[i].innerHTML = properties[i] + ' : ' + objectArray[j][properties[i]];
             }
@@ -247,8 +247,8 @@ var Interceptor = {
           var tempCol = row.children.length;
           var properties =  Object.keys(objectArray[j]);
 
-          if(tempCol<properties.length){ //ie - there are more cols now
-            for(var i =0;i<=tempCol;i++) {
+          if(tempCol<=properties.length){ //ie - there are more cols now
+              for(var i =0;i<tempCol;i++) {
               row.children[i].innerHTML = properties[i] + ' : ' + objectArray[j][properties[i]];
             }
             for(var i=tempCol;i < properties.length;i++) {