diff --git a/client/components/Nav.js b/client/components/Nav.js
index 687f4b7a..ddccbc1a 100644
--- a/client/components/Nav.js
+++ b/client/components/Nav.js
@@ -21,6 +21,13 @@ function Nav(props) {
Save
+
+
+
+ Open
+
+
+
-
diff --git a/client/constants.js b/client/constants.js
index 00480bcd..967df39b 100644
--- a/client/constants.js
+++ b/client/constants.js
@@ -1,4 +1,4 @@
-export const CHANGE_SELECTED_FILE = 'CHANGE_SELECTED_FILE';
+export const UPDATE_FILE_CONTENT = 'UPDATE_FILE_CONTENT';
export const TOGGLE_SKETCH = 'TOGGLE_SKETCH';
export const START_SKETCH = 'START_SKETCH';
@@ -27,6 +27,9 @@ export const PROJECT_SAVE_FAIL = 'PROJECT_SAVE_FAIL';
export const NEW_PROJECT = 'NEW_PROJECT';
export const SET_PROJECT = 'SET_PROJECT';
+export const SET_PROJECTS = 'SET_PROJECTS';
+
+export const SET_SELECTED_FILE = 'SET_SELECTED_FILE';
// eventually, handle errors more specifically and better
export const ERROR = 'ERROR';
diff --git a/client/modules/IDE/actions/files.js b/client/modules/IDE/actions/files.js
index 40438b1e..f7ebd8f3 100644
--- a/client/modules/IDE/actions/files.js
+++ b/client/modules/IDE/actions/files.js
@@ -1,8 +1,8 @@
import * as ActionTypes from '../../../constants';
-export function updateFile(name, content) {
+export function updateFileContent(name, content) {
return {
- type: ActionTypes.CHANGE_SELECTED_FILE,
+ type: ActionTypes.UPDATE_FILE_CONTENT,
name,
content
};
diff --git a/client/modules/IDE/actions/ide.js b/client/modules/IDE/actions/ide.js
index 1d40ed12..0bcbc414 100644
--- a/client/modules/IDE/actions/ide.js
+++ b/client/modules/IDE/actions/ide.js
@@ -17,3 +17,10 @@ export function stopSketch() {
type: ActionTypes.STOP_SKETCH
};
}
+
+export function setSelectedFile(fileId) {
+ return {
+ type: ActionTypes.SET_SELECTED_FILE,
+ selectedFile: fileId
+ };
+}
diff --git a/client/modules/IDE/actions/project.js b/client/modules/IDE/actions/project.js
index 1759c74b..8f820c30 100644
--- a/client/modules/IDE/actions/project.js
+++ b/client/modules/IDE/actions/project.js
@@ -12,7 +12,8 @@ export function getProject(id) {
dispatch({
type: ActionTypes.SET_PROJECT,
project: response.data,
- file: response.data.file
+ files: response.data.files,
+ selectedFile: response.data.selectedFile
});
})
.catch(response => dispatch({
@@ -34,7 +35,7 @@ export function saveProject() {
return (dispatch, getState) => {
const state = getState();
const formParams = Object.assign({}, state.project);
- formParams.file = state.file;
+ formParams.files = [...state.files];
if (state.project.id) {
axios.put(`${ROOT_URL}/projects/${state.project.id}`, formParams, { withCredentials: true })
.then(() => {
@@ -47,6 +48,12 @@ export function saveProject() {
error: response.data
}));
} else {
+ // this might be unnecessary, but to prevent collisions in mongodb
+ formParams.files.map(file => {
+ const newFile = Object.assign({}, file);
+ delete newFile.id;
+ return newFile;
+ });
axios.post(`${ROOT_URL}/projects`, formParams, { withCredentials: true })
.then(response => {
browserHistory.push(`/projects/${response.data.id}`);
@@ -54,10 +61,8 @@ export function saveProject() {
type: ActionTypes.NEW_PROJECT,
name: response.data.name,
id: response.data.id,
- file: {
- name: response.data.file.name,
- content: response.data.file.content
- }
+ selectedFile: response.data.selectedFile,
+ files: response.data.files
});
})
.catch(response => dispatch({
@@ -78,10 +83,8 @@ export function createProject() {
type: ActionTypes.NEW_PROJECT,
name: response.data.name,
id: response.data.id,
- file: {
- name: response.data.file.name,
- content: response.data.file.content
- }
+ selectedFile: response.data.selectedFile,
+ files: response.data.files
});
})
.catch(response => dispatch({
diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js
index 5375ff04..a2639912 100644
--- a/client/modules/IDE/components/Editor.js
+++ b/client/modules/IDE/components/Editor.js
@@ -8,13 +8,14 @@ class Editor extends React.Component {
componentDidMount() {
this._cm = CodeMirror(this.refs.container, { // eslint-disable-line
theme: 'p5-widget',
- value: this.props.content,
+ value: this.props.file.content,
lineNumbers: true,
styleActiveLine: true,
mode: 'javascript'
});
this._cm.on('change', () => { // eslint-disable-line
- this.props.updateFile('sketch.js', this._cm.getValue());
+ // this.props.updateFileContent('sketch.js', this._cm.getValue());
+ this.props.updateFileContent(this.props.file.name, this._cm.getValue());
});
this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`;
this._cm.setOption('indentWithTabs', this.props.isTabIndent);
@@ -22,9 +23,9 @@ class Editor extends React.Component {
}
componentDidUpdate(prevProps) {
- if (this.props.content !== prevProps.content &&
- this.props.content !== this._cm.getValue()) {
- this._cm.setValue(this.props.content); // eslint-disable-line no-underscore-dangle
+ if (this.props.file.content !== prevProps.file.content &&
+ this.props.file.content !== this._cm.getValue()) {
+ this._cm.setValue(this.props.file.content); // eslint-disable-line no-underscore-dangle
}
if (this.props.fontSize !== prevProps.fontSize) {
this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`;
@@ -54,6 +55,12 @@ Editor.propTypes = {
fontSize: PropTypes.number.isRequired,
indentationAmount: PropTypes.number.isRequired,
isTabIndent: PropTypes.bool.isRequired
+ file: PropTypes.shape({
+ name: PropTypes.string.isRequired,
+ content: PropTypes.string.isRequired
+ }),
+ updateFileContent: PropTypes.func.isRequired,
+ fontSize: PropTypes.number.isRequired
};
export default Editor;
diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js
index 94d5d7ce..56a14393 100644
--- a/client/modules/IDE/components/PreviewFrame.js
+++ b/client/modules/IDE/components/PreviewFrame.js
@@ -1,5 +1,7 @@
import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
+import escapeStringRegexp from 'escape-string-regexp';
+import srcDoc from 'srcdoc-polyfill';
class PreviewFrame extends React.Component {
@@ -11,11 +13,7 @@ class PreviewFrame extends React.Component {
componentDidUpdate(prevProps) {
if (this.props.isPlaying !== prevProps.isPlaying) {
- if (this.props.isPlaying) {
- this.renderSketch();
- } else {
- this.clearPreview();
- }
+ this.renderSketch();
}
if (this.props.isPlaying && this.props.content !== prevProps.content) {
@@ -28,22 +26,48 @@ class PreviewFrame extends React.Component {
}
clearPreview() {
- const doc = ReactDOM.findDOMNode(this).contentDocument;
- doc.write('');
- doc.close();
+ const doc = ReactDOM.findDOMNode(this);
+ doc.srcDoc = '';
+ }
+
+ injectLocalFiles() {
+ let htmlFile = this.props.htmlFile.content;
+
+ this.props.jsFiles.forEach(jsFile => {
+ const fileName = escapeStringRegexp(jsFile.name);
+ const fileRegex = new RegExp(`([\s\S]*?)<\/script>`, 'gmi');
+ htmlFile = htmlFile.replace(fileRegex, ``);
+ });
+
+ this.props.cssFiles.forEach(cssFile => {
+ const fileName = escapeStringRegexp(cssFile.name);
+ const fileRegex = new RegExp(``, 'gmi');
+ htmlFile = htmlFile.replace(fileRegex, ``);
+ });
+
+ // const htmlHead = htmlFile.match(/(?:)([\s\S]*?)(?:<\/head>)/gmi);
+ // const headRegex = new RegExp('head', 'i');
+ // let htmlHeadContents = htmlHead[0].split(headRegex)[1];
+ // htmlHeadContents = htmlHeadContents.slice(1, htmlHeadContents.length - 2);
+ // htmlHeadContents += '\n';
+ // htmlFile = htmlFile.replace(/(?:)([\s\S]*?)(?:<\/head>)/gmi, `\n${htmlHeadContents}\n`);
+
+ return htmlFile;
}
renderSketch() {
- const doc = ReactDOM.findDOMNode(this).contentDocument;
- this.clearPreview();
- ReactDOM.render(this.props.head, doc.head);
- const p5Script = doc.createElement('script');
- p5Script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js');
- doc.body.appendChild(p5Script);
-
- const sketchScript = doc.createElement('script');
- sketchScript.textContent = this.props.content;
- doc.body.appendChild(sketchScript);
+ const doc = ReactDOM.findDOMNode(this);
+ if (this.props.isPlaying) {
+ // TODO add polyfill for this
+ // doc.srcdoc = this.injectLocalFiles();
+ srcDoc.set(doc, this.injectLocalFiles());
+ } else {
+ // doc.srcdoc = '';
+ srcDoc.set(doc, '');
+ doc.contentWindow.document.open();
+ doc.contentWindow.document.write('');
+ doc.contentWindow.document.close();
+ }
}
renderFrameContents() {
@@ -60,8 +84,8 @@ class PreviewFrame extends React.Component {
);
}
@@ -70,7 +94,12 @@ class PreviewFrame extends React.Component {
PreviewFrame.propTypes = {
isPlaying: PropTypes.bool.isRequired,
head: PropTypes.object.isRequired,
- content: PropTypes.string.isRequired
+ content: PropTypes.string.isRequired,
+ htmlFile: PropTypes.shape({
+ content: PropTypes.string.isRequired
+ }),
+ jsFiles: PropTypes.array.isRequired,
+ cssFiles: PropTypes.array.isRequired
};
export default PreviewFrame;
diff --git a/client/modules/IDE/components/Sidebar.js b/client/modules/IDE/components/Sidebar.js
new file mode 100644
index 00000000..cd75d0a7
--- /dev/null
+++ b/client/modules/IDE/components/Sidebar.js
@@ -0,0 +1,34 @@
+import React, { PropTypes } from 'react';
+import classNames from 'classnames';
+
+function Sidebar(props) {
+ return (
+
+
+ {props.files.map(file => {
+ let itemClass = classNames({
+ 'sidebar__file-item': true,
+ 'sidebar__file-item--selected': file.id === props.selectedFile.id
+ });
+ return (
+ - props.setSelectedFile(file.id)}
+ >{file.name}
+ );
+ })}
+
+
+ );
+}
+
+Sidebar.propTypes = {
+ files: PropTypes.array.isRequired,
+ selectedFile: PropTypes.shape({
+ id: PropTypes.string.isRequired
+ }),
+ setSelectedFile: PropTypes.func.isRequired
+};
+
+export default Sidebar;
diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js
index 2eead4f9..84d86289 100644
--- a/client/modules/IDE/pages/IDEView.js
+++ b/client/modules/IDE/pages/IDEView.js
@@ -1,5 +1,6 @@
import React, { PropTypes } from 'react';
import Editor from '../components/Editor';
+import Sidebar from '../components/Sidebar';
import PreviewFrame from '../components/PreviewFrame';
import Toolbar from '../components/Toolbar';
import Preferences from '../components/Preferences';
@@ -10,6 +11,7 @@ import * as FileActions from '../actions/files';
import * as IDEActions from '../actions/ide';
import * as PreferencesActions from '../actions/preferences';
import * as ProjectActions from '../actions/project';
+import { getFile, getHTMLFile, getJSFiles, getCSSFiles } from '../reducers/files';
class IDEView extends React.Component {
componentDidMount() {
@@ -52,15 +54,25 @@ class IDEView extends React.Component {
indentWithSpace={this.props.indentWithSpace}
indentWithTab={this.props.indentWithTab}
/>
+
}
@@ -98,6 +110,7 @@ IDEView.propTypes = {
closePreferences: PropTypes.func.isRequired,
increaseFont: PropTypes.func.isRequired,
decreaseFont: PropTypes.func.isRequired,
+<<<<<<< HEAD
updateFont: PropTypes.func.isRequired,
increaseIndentation: PropTypes.func.isRequired,
decreaseIndentation: PropTypes.func.isRequired,
@@ -105,14 +118,27 @@ IDEView.propTypes = {
indentWithSpace: PropTypes.func.isRequired,
indentWithTab: PropTypes.func.isRequired,
file: PropTypes.shape({
+=======
+ files: PropTypes.array.isRequired,
+ updateFileContent: PropTypes.func.isRequired,
+ selectedFile: PropTypes.shape({
+ id: PropTypes.string.isRequired,
+>>>>>>> b89a1103b9c5616820f4b6b005c118d9f1f9bf13
content: PropTypes.string.isRequired
- }).isRequired,
- updateFile: PropTypes.func.isRequired
+ }),
+ setSelectedFile: PropTypes.func.isRequired,
+ htmlFile: PropTypes.object.isRequired,
+ jsFiles: PropTypes.array.isRequired,
+ cssFiles: PropTypes.array.isRequired
};
function mapStateToProps(state) {
return {
- file: state.file,
+ files: state.files,
+ selectedFile: getFile(state.files, state.ide.selectedFile),
+ htmlFile: getHTMLFile(state.files),
+ jsFiles: getJSFiles(state.files),
+ cssFiles: getCSSFiles(state.files),
ide: state.ide,
preferences: state.preferences,
user: state.user,
diff --git a/client/modules/IDE/reducers/files.js b/client/modules/IDE/reducers/files.js
index 3067b546..5e47a1d6 100644
--- a/client/modules/IDE/reducers/files.js
+++ b/client/modules/IDE/reducers/files.js
@@ -1,50 +1,75 @@
import * as ActionTypes from '../../../constants';
-const initialState = {
- name: 'sketch.js',
- content: `function setup() {
+const defaultSketch = `function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
-}`
-};
+}`;
-const file = (state = initialState, action) => {
+const defaultHTML =
+`
+
+
+
+
+
+
+
+
+
+`;
+
+const defaultCSS =
+`html, body {
+ overflow: hidden;
+ margin: 0;
+ padding: 0;
+}
+`;
+
+// if the project has never been saved,
+const initialState = [
+ {
+ name: 'sketch.js',
+ content: defaultSketch,
+ id: '1'
+ },
+ {
+ name: 'index.html',
+ content: defaultHTML,
+ id: '2'
+ },
+ {
+ name: 'style.css',
+ content: defaultCSS,
+ id: '3'
+ }];
+
+
+const files = (state = initialState, action) => {
switch (action.type) {
- case ActionTypes.CHANGE_SELECTED_FILE:
- return {
- name: action.name,
- content: action.content
- };
+ case ActionTypes.UPDATE_FILE_CONTENT:
+ return state.map(file => {
+ if (file.name !== action.name) {
+ return file;
+ }
+
+ return Object.assign({}, file, { content: action.content });
+ });
case ActionTypes.NEW_PROJECT:
- return {
- name: action.file.name,
- content: action.file.content
- };
+ return [...action.files];
case ActionTypes.SET_PROJECT:
- return {
- name: action.file.name,
- content: action.file.content
- };
+ return [...action.files];
default:
return state;
}
};
-export default file;
+export const getFile = (state, id) => state.filter(file => file.id === id)[0];
+export const getHTMLFile = (state) => state.filter(file => file.name.match(/.*\.html$/))[0];
+export const getJSFiles = (state) => state.filter(file => file.name.match(/.*\.js$/));
+export const getCSSFiles = (state) => state.filter(file => file.name.match(/.*\.css$/));
-// i'll add this in when there are multiple files
-// const files = (state = [], action) => {
-// switch (action.type) {
-// case ActionTypes.CHANGE_SELECTED_FILE:
-// //find the file with the name
-// //update it
-// //put in into the new array of files
-// default:
-// return state
-// }
-// }
-
-// export default files
+export default files;
diff --git a/client/modules/IDE/reducers/ide.js b/client/modules/IDE/reducers/ide.js
index e89ffdee..9c4c5b88 100644
--- a/client/modules/IDE/reducers/ide.js
+++ b/client/modules/IDE/reducers/ide.js
@@ -1,23 +1,22 @@
import * as ActionTypes from '../../../constants';
const initialState = {
- isPlaying: false
+ isPlaying: false,
+ selectedFile: '1'
};
const ide = (state = initialState, action) => {
switch (action.type) {
case ActionTypes.TOGGLE_SKETCH:
- return {
- isPlaying: !state.isPlaying
- };
+ return Object.assign({}, state, { isPlaying: !state.isPlaying });
case ActionTypes.START_SKETCH:
- return {
- isPlaying: true
- };
+ return Object.assign({}, state, { isPlaying: true });
case ActionTypes.STOP_SKETCH:
- return {
- isPlaying: false
- };
+ return Object.assign({}, state, { isPlaying: false });
+ case ActionTypes.SET_SELECTED_FILE:
+ case ActionTypes.SET_PROJECT:
+ case ActionTypes.NEW_PROJECT:
+ return Object.assign({}, state, { selectedFile: action.selectedFile });
default:
return state;
}
diff --git a/client/modules/Sketch/actions.js b/client/modules/Sketch/actions.js
new file mode 100644
index 00000000..ed980d4e
--- /dev/null
+++ b/client/modules/Sketch/actions.js
@@ -0,0 +1,20 @@
+import * as ActionTypes from '../../constants';
+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
+ }));
+ };
+}
diff --git a/client/modules/Sketch/pages/SketchListView.js b/client/modules/Sketch/pages/SketchListView.js
new file mode 100644
index 00000000..fec25baf
--- /dev/null
+++ b/client/modules/Sketch/pages/SketchListView.js
@@ -0,0 +1,63 @@
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import moment from 'moment';
+import { Link } from 'react-router';
+import Nav from '../../../components/Nav';
+import * as SketchActions from '../actions';
+import * as ProjectActions from '../../IDE/actions/project';
+
+class SketchListView extends React.Component {
+ componentDidMount() {
+ this.props.getProjects();
+ }
+
+ render() {
+ return (
+
+
+
+
+ Name |
+ Created |
+ Last Updated |
+
+
+ {this.props.sketches.map(sketch =>
+
+ {sketch.name} |
+ {moment(sketch.createdAt).format('MMM D, YYYY')} |
+ {moment(sketch.updatedAt).format('MMM D, YYYY')} |
+
+ )}
+
+
+
+ );
+ }
+}
+
+SketchListView.propTypes = {
+ user: PropTypes.object.isRequired,
+ createProject: PropTypes.func.isRequired,
+ saveProject: PropTypes.func.isRequired,
+ getProjects: PropTypes.func.isRequired,
+ sketches: PropTypes.array.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)(SketchListView);
diff --git a/client/modules/Sketch/reducers.js b/client/modules/Sketch/reducers.js
new file mode 100644
index 00000000..6f0d2e14
--- /dev/null
+++ b/client/modules/Sketch/reducers.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;
diff --git a/client/reducers.js b/client/reducers.js
index 839e4d75..1dfafa9e 100644
--- a/client/reducers.js
+++ b/client/reducers.js
@@ -1,18 +1,20 @@
import { combineReducers } from 'redux';
-import file from './modules/IDE/reducers/files';
+import files from './modules/IDE/reducers/files';
import ide from './modules/IDE/reducers/ide';
import preferences from './modules/IDE/reducers/preferences';
import project from './modules/IDE/reducers/project';
import user from './modules/User/reducers';
+import sketches from './modules/Sketch/reducers';
import { reducer as form } from 'redux-form';
const rootReducer = combineReducers({
form,
ide,
- file,
+ files,
preferences,
user,
- project
+ project,
+ sketches
});
export default rootReducer;
diff --git a/client/routes.js b/client/routes.js
index 12523a3d..e071eb7f 100644
--- a/client/routes.js
+++ b/client/routes.js
@@ -4,6 +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 { getUser } from './modules/User/actions';
const checkAuth = (store) => {
@@ -17,6 +18,7 @@ const routes = (store) =>
+
);
diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index 30f866ac..007b0433 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -84,7 +84,7 @@
}
%fake-link {
- color: $light-secondary-text-color;
+ color: $light-inactive-text-color;
cursor: pointer;
&:hover {
color: $light-primary-text-color;
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index a0e4da39..805bd0fc 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -36,6 +36,6 @@ $dark-button-background-active-color: #f10046;
$dark-button-hover-color: $white;
$dark-button-active-color: $white;
-$editor-border-color: #f4f4f4;
+$ide-border-color: #f4f4f4;
$editor-selected-line-color: #f3f3f3;
$input-border-color: #979797;
diff --git a/client/styles/base/_base.scss b/client/styles/base/_base.scss
index 5f451ca7..fda0b662 100644
--- a/client/styles/base/_base.scss
+++ b/client/styles/base/_base.scss
@@ -18,7 +18,7 @@ body, input, button {
a {
text-decoration: none;
- color: $light-secondary-text-color;
+ color: $light-inactive-text-color;
&:hover {
text-decoration: none;
color: $light-primary-text-color;
@@ -46,11 +46,12 @@ h2 {
h3 {
font-weight: normal;
}
-
h4 {
font-weight: normal;
}
-
h6 {
font-weight: normal;
}
+thead {
+ text-align: left;
+}
diff --git a/client/styles/base/_reset.scss b/client/styles/base/_reset.scss
index c36505ce..33cf3b32 100644
--- a/client/styles/base/_reset.scss
+++ b/client/styles/base/_reset.scss
@@ -14,4 +14,8 @@ ul, p {
h2, h3 {
margin: 0;
+}
+
+ul {
+ list-style: none;
}
\ No newline at end of file
diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss
index 65b8b2e8..5209e517 100644
--- a/client/styles/components/_editor.scss
+++ b/client/styles/components/_editor.scss
@@ -1,7 +1,7 @@
.CodeMirror {
font-family: Inconsolata, monospace;
height: 100%;
- border: 1px solid $editor-border-color;
+ border: 1px solid $ide-border-color;
}
.CodeMirror-linenumbers {
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
new file mode 100644
index 00000000..f7fb4ff8
--- /dev/null
+++ b/client/styles/components/_sidebar.scss
@@ -0,0 +1,12 @@
+.sidebar__file-list {
+ border-top: 1px solid $ide-border-color;
+}
+
+.sidebar__file-item {
+ padding: #{8 / $base-font-size}rem #{20 / $base-font-size}rem;
+ color: $light-inactive-text-color;
+}
+
+.sidebar__file-item--selected {
+ background-color: $ide-border-color;
+}
\ No newline at end of file
diff --git a/client/styles/components/_sketch-list.scss b/client/styles/components/_sketch-list.scss
new file mode 100644
index 00000000..9ef6a786
--- /dev/null
+++ b/client/styles/components/_sketch-list.scss
@@ -0,0 +1,9 @@
+.sketches-table {
+ width: 100%;
+ padding: #{10 / $base-font-size}rem 0;
+ padding-left: #{170 / $base-font-size}rem;
+}
+
+.sketches-table__row {
+ margin: #{10 / $base-font-size}rem;
+}
\ No newline at end of file
diff --git a/client/styles/components/_toolbar.scss b/client/styles/components/_toolbar.scss
index 30cabff6..1bad6fd1 100644
--- a/client/styles/components/_toolbar.scss
+++ b/client/styles/components/_toolbar.scss
@@ -45,12 +45,12 @@
}
.toolbar__project-name {
- color: $light-secondary-text-color;
+ color: $light-inactive-text-color;
cursor: pointer;
&:hover {
color: $light-primary-text-color;
}
&:focus {
- color: $light-secondary-text-color;
+ color: $light-inactive-text-color;
}
}
diff --git a/client/styles/layout/_ide.scss b/client/styles/layout/_ide.scss
index 6c90f921..ffb6561e 100644
--- a/client/styles/layout/_ide.scss
+++ b/client/styles/layout/_ide.scss
@@ -6,14 +6,18 @@
}
.editor-holder {
- width: 50%;
+ flex-grow: 1;
height: 100%;
}
.preview-frame {
- width: 50%;
+ flex-grow: 1;
}
.toolbar {
width: 100%;
}
+
+.sidebar {
+ width: #{140 / $base-font-size}rem;
+}
diff --git a/client/styles/layout/_sketch-list.scss b/client/styles/layout/_sketch-list.scss
new file mode 100644
index 00000000..979c48d4
--- /dev/null
+++ b/client/styles/layout/_sketch-list.scss
@@ -0,0 +1,6 @@
+.sketch-list {
+ display: flex;
+ flex-wrap: wrap;
+ height: 100%;
+ flex-flow: column;
+}
\ No newline at end of file
diff --git a/client/styles/main.scss b/client/styles/main.scss
index 1e23ae9d..c16cff9d 100644
--- a/client/styles/main.scss
+++ b/client/styles/main.scss
@@ -13,5 +13,8 @@
@import 'components/preferences';
@import 'components/signup';
@import 'components/login';
+@import 'components/sketch-list';
+@import 'components/sidebar';
@import 'layout/ide';
+@import 'layout/sketch-list';
diff --git a/package.json b/package.json
index 168f71b7..dca229de 100644
--- a/package.json
+++ b/package.json
@@ -60,14 +60,17 @@
"babel-core": "^6.8.0",
"bcrypt-nodejs": "0.0.3",
"body-parser": "^1.15.1",
+ "bson-objectid": "^1.1.4",
"classnames": "^2.2.5",
"codemirror": "^5.14.2",
"connect-mongo": "^1.2.0",
"cookie-parser": "^1.4.1",
"dotenv": "^2.0.0",
+ "escape-string-regexp": "^1.0.5",
"eslint-loader": "^1.3.0",
"express": "^4.13.4",
"express-session": "^1.13.0",
+ "moment": "^2.14.1",
"mongoose": "^4.4.16",
"passport": "^0.3.2",
"passport-github": "^1.1.0",
@@ -80,6 +83,7 @@
"redux": "^3.5.2",
"redux-form": "^5.2.5",
"redux-thunk": "^2.1.0",
- "shortid": "^2.2.6"
+ "shortid": "^2.2.6",
+ "srcdoc-polyfill": "^0.2.0"
}
}
diff --git a/server/controllers/project.controller.js b/server/controllers/project.controller.js
index 656c884f..6c8f55c4 100644
--- a/server/controllers/project.controller.js
+++ b/server/controllers/project.controller.js
@@ -2,22 +2,14 @@ import Project from '../models/project';
export function createProject(req, res) {
const projectValues = {
- user: req.user ? req.user._id : undefined, // eslint-disable-line no-underscore-dangle
- file: {}
+ user: req.user ? req.user._id : undefined // eslint-disable-line no-underscore-dangle
};
Object.assign(projectValues, req.body);
Project.create(projectValues, (err, newProject) => {
if (err) { return res.json({ success: false }); }
- return res.json({
- id: newProject._id, // eslint-disable-line no-underscore-dangle
- name: newProject.name,
- file: {
- name: newProject.file.name,
- content: newProject.file.content
- }
- });
+ return res.json(newProject);
});
}
@@ -27,14 +19,7 @@ export function updateProject(req, res) {
$set: req.body
}, (err, updatedProject) => {
if (err) { return res.json({ success: false }); }
- return res.json({
- id: updatedProject._id, // eslint-disable-line no-underscore-dangle
- name: updatedProject.name,
- file: {
- name: updatedProject.file.name,
- content: updatedProject.file.content
- }
- });
+ return res.json(updatedProject);
});
}
@@ -44,13 +29,21 @@ export function getProject(req, res) {
return res.status(404).send({ message: 'Project with that id does not exist' });
}
- return res.json({
- id: project._id, // eslint-disable-line no-underscore-dangle
- name: project.name,
- file: {
- name: project.file.name,
- content: project.file.content
- }
- });
+ return res.json(project);
});
}
+
+export function getProjects(req, res) {
+ if (req.user) {
+ Project.find({user: req.user._id}) // eslint-disable-line no-underscore-dangle
+ .sort('-createdAt')
+ .select('name file _id createdAt updatedAt')
+ .exec((err, projects) => {
+ res.json(projects);
+ });
+ } else {
+ // could just move this to client side
+ return res.json([]);
+ }
+
+}
diff --git a/server/models/project.js b/server/models/project.js
index 4dcac580..5927a3b7 100644
--- a/server/models/project.js
+++ b/server/models/project.js
@@ -1,24 +1,73 @@
import mongoose from 'mongoose';
const Schema = mongoose.Schema;
+const ObjectIdSchema = Schema.ObjectId;
+const ObjectId = mongoose.Types.ObjectId;
import shortid from 'shortid';
-const defaultSketch = `setup() {
+const defaultSketch = `function setup() {
createCanvas(400, 400);
}
-draw() {
+function draw() {
background(220);
}`
+const defaultHTML =
+`
+
+
+
+
+
+
+
+
+
+`
+const defaultCSS =
+`html, body {
+ overflow: hidden;
+ margin: 0;
+ padding: 0;
+}
+`;
+
const fileSchema = new Schema({
name: { type: String, default: 'sketch.js' },
content: { type: String, default: defaultSketch }
-}, { timestamps: true });
+}, { timestamps: true, _id: true });
+
+fileSchema.virtual('id').get(function(){
+ return this._id.toHexString();
+});
+
+fileSchema.set('toJSON', {
+ virtuals: true
+});
const projectSchema = new Schema({
name: { type: String, default: "Hello p5.js, it's the server" },
user: { type: Schema.Types.ObjectId, ref: 'User' },
- file: { type: fileSchema },
- _id: { type: String, default: shortid.generate }
+ files: { type: [ fileSchema ], default: [{ name: 'sketch.js', content: defaultSketch, _id: new ObjectId() },
+ { name: 'index.html', content: defaultHTML, _id: new ObjectId() },
+ { name: 'style.css', content: defaultCSS, _id: new ObjectId() }]},
+ _id: { type: String, default: shortid.generate },
+ selectedFile: Schema.Types.ObjectId
}, { timestamps: true });
+projectSchema.virtual('id').get(function(){
+ return this._id;
+});
+
+projectSchema.set('toJSON', {
+ virtuals: true
+});
+
+projectSchema.pre('save', function createSelectedFile(next) {
+ const project = this;
+ if (!project.selectedFile) {
+ project.selectedFile = project.files[0]._id; // eslint-disable-line no-underscore-dangle
+ return next();
+ }
+});
+
export default mongoose.model('Project', projectSchema);
diff --git a/server/routes/project.routes.js b/server/routes/project.routes.js
index 2a31e632..ee8f4654 100644
--- a/server/routes/project.routes.js
+++ b/server/routes/project.routes.js
@@ -9,4 +9,6 @@ router.route('/projects/:project_id').put(ProjectController.updateProject);
router.route('/projects/:project_id').get(ProjectController.getProject);
+router.route('/projects').get(ProjectController.getProjects);
+
export default router;
diff --git a/server/routes/server.routes.js b/server/routes/server.routes.js
index ccff0582..90dda69d 100644
--- a/server/routes/server.routes.js
+++ b/server/routes/server.routes.js
@@ -21,4 +21,8 @@ router.route('/login').get((req, res) => {
res.sendFile(path.resolve(`${__dirname}/../../index.html`));
});
+router.route('/sketches').get((req, res) => {
+ res.sendFile(path.resolve(`${__dirname}/../../index.html`));
+});
+
export default router;