r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

start to add multiple file functionality

Browse source
This commit is contained in:
catarak 2016-07-06 15:09:05 -04:00
parent 6563d9d90b
commit e6d94a0db8
11 changed files with 103 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/constants.js
View file

@ -1,4 +1,4 @@
export const CHANGE_SELECTED_FILE = 'CHANGE_SELECTED_FILE';
export const UPDATE_FILE = 'UPDATE_FILE';
export const TOGGLE_SKETCH = 'TOGGLE_SKETCH';
export const START_SKETCH = 'START_SKETCH';

19
client/modules/IDE/components/Sidebar.js Normal file
View file

@ -0,0 +1,19 @@
import React, { PropTypes } from 'react';
function Sidebar(props) {
return (
<section className="sidebar">
<ul className="sidebar__file-list">
{props.files.map(file =>
<li className="sidebar__file-item">{file.name}</li>
)}
</ul>
</section>
);
}
Sidebar.propTypes = {
files: PropTypes.array.isRequired
};
export default Sidebar;

12
client/modules/IDE/pages/IDEView.js
View file

@ -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';
@ -44,13 +45,14 @@ class IDEView extends React.Component {
decreaseFont={this.props.decreaseFont}
fontSize={this.props.preferences.fontSize}
/>
<Sidebar files={this.props.files} />
<Editor
content={this.props.file.content}
content={this.props.files[0].content}
updateFile={this.props.updateFile}
fontSize={this.props.preferences.fontSize}
/>
<PreviewFrame
content={this.props.file.content}
content={this.props.files[0].content}
head={
<link type="text/css" rel="stylesheet" href="/preview-styles.css" />
}
@ -86,15 +88,13 @@ IDEView.propTypes = {
closePreferences: PropTypes.func.isRequired,
increaseFont: PropTypes.func.isRequired,
decreaseFont: PropTypes.func.isRequired,
file: PropTypes.shape({
content: PropTypes.string.isRequired
}).isRequired,
files: PropTypes.array.isRequired,
updateFile: PropTypes.func.isRequired
};
function mapStateToProps(state) {
return {
file: state.file,
files: state.files,
ide: state.ide,
preferences: state.preferences,
user: state.user,

68
client/modules/IDE/reducers/files.js
View file

@ -1,50 +1,56 @@
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 =
`
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
`;
const initialState = [
{
name: 'sketch.js',
content: defaultSketch
},
{
name: 'index.html',
content: defaultHTML
}];
const files = (state = initialState, action) => {
switch (action.type) {
case ActionTypes.CHANGE_SELECTED_FILE:
case ActionTypes.UPDATE_FILE:
return state.map(file => {
if (file.name !== action.name) {
return file;
}
return {
name: action.name,
name: file.name,
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;
// 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;

4
client/reducers.js
View file

@ -1,5 +1,5 @@
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';
@ -10,7 +10,7 @@ import { reducer as form } from 'redux-form';
const rootReducer = combineReducers({
form,
ide,
file,
files,
preferences,
user,
project,

2
client/styles/abstracts/_variables.scss
View file

@ -35,6 +35,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;

2
client/styles/components/_editor.scss
View file

@ -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 {

13
client/styles/components/_sidebar.scss Normal file
View file

@ -0,0 +1,13 @@
.sidebar__file-list {
padding: #{4 / $base-font-size}rem #{20 / $base-font-size}rem;
border-top: 1px solid $ide-border-color;
}
.sidebar__file-item {
padding: #{4 / $base-font-size}rem 0;
color: $light-inactive-text-color;
}
.sidebar__file-item--selected {
background-color: $ide-border-color;
}

8
client/styles/layout/_ide.scss
View file

@ -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;
}

1
client/styles/main.scss
View file

@ -14,6 +14,7 @@
@import 'components/signup';
@import 'components/login';
@import 'components/sketch-list';
@import 'components/sidebar';
@import 'layout/ide';
@import 'layout/sketch-list';

14
server/models/project.js
View file

@ -9,6 +9,18 @@ draw() {
background(220);
}`
const defaultHTML =
`
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
`
const fileSchema = new Schema({
name: { type: String, default: 'sketch.js' },
content: { type: String, default: defaultSketch }
@ -17,7 +29,7 @@ const fileSchema = new Schema({
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 },
files: {type: [ fileSchema ], default: [{ name: 'sketch.js', content: defaultSketch }, { name: 'index.html', content: defaultHTML }]},
_id: { type: String, default: shortid.generate }
}, { timestamps: true });