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

merge master

This commit is contained in:
MathuraMG 2016-08-10 15:51:56 -04:00
parent 1a45e4cb91 afc86740b3
commit 5cf1249cc7
20 changed files with 729 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
client/constants.js
View File

@ -6,12 +6,13 @@ export const STOP_SKETCH = 'STOP_SKETCH';
export const OPEN_PREFERENCES = 'OPEN_PREFERENCES';
export const CLOSE_PREFERENCES = 'CLOSE_PREFERENCES';
export const INCREASE_FONTSIZE = 'INCREASE_FONTSIZE';
export const DECREASE_FONTSIZE = 'DECREASE_FONTSIZE';
export const UPDATE_FONTSIZE = 'UPDATE_FONTSIZE';
export const SET_FONT_SIZE = 'SET_FONT_SIZE';
export const INCREASE_INDENTATION = 'INCREASE_INDENTATION';
export const DECREASE_INDENTATION = 'DECREASE_INDENTATION';
export const UPDATE_INDENTATION = 'UPDATE_INDENTATION';
export const SET_INDENTATION = 'SET_INDENTATION';
export const INDENT_WITH_SPACE = 'INDENT_WITH_SPACE';
export const INDENT_WITH_TAB = 'INDENT_WITH_TAB';
@ -42,7 +43,19 @@ export const CONSOLE_EVENT = 'CONSOLE_EVENT';
export const EXPAND_CONSOLE = 'EXPAND_CONSOLE';
export const COLLAPSE_CONSOLE = 'COLLAPSE_CONSOLE';
export const TOGGLE_BEEP = 'TOGGLE_BEEP';
export const SHOW_FILE_OPTIONS = 'SHOW_FILE_OPTIONS';
export const HIDE_FILE_OPTIONS = 'HIDE_FILE_OPTIONS';
export const UPDATE_FILE_NAME = 'UPDATE_FILE_NAME';
export const DELETE_FILE = 'DELETE_FILE';
export const SHOW_EDIT_FILE_NAME = 'SHOW_EDIT_FILE_NAME';
export const HIDE_EDIT_FILE_NAME = 'HIDE_EDIT_FILE_NAME';
export const SET_AUTOSAVE = 'SET_AUTOSAVE';
export const SET_PREFERENCES = 'SET_PREFERENCES';
// eventually, handle errors more specifically and better
export const ERROR = 'ERROR';

43
client/modules/IDE/actions/files.js
View File

@ -112,3 +112,46 @@ export function createFile(formProps) {
}
};
}
export function showFileOptions(fileId) {
return {
type: ActionTypes.SHOW_FILE_OPTIONS,
id: fileId
};
}
export function hideFileOptions(fileId) {
return {
type: ActionTypes.HIDE_FILE_OPTIONS,
id: fileId
};
}
export function showEditFileName(id) {
return {
type: ActionTypes.SHOW_EDIT_FILE_NAME,
id
};
}
export function hideEditFileName(id) {
return {
type: ActionTypes.HIDE_EDIT_FILE_NAME,
id
};
}
export function updateFileName(id, name) {
return {
type: ActionTypes.UPDATE_FILE_NAME,
id,
name
};
}
export function deleteFile(id) {
return {
type: ActionTypes.DELETE_FILE,
id
};
}

125
client/modules/IDE/actions/preferences.js
View File

@ -1,53 +1,102 @@
import * as ActionTypes from '../../../constants';
import axios from 'axios';
export function increaseFont() {
return {
type: ActionTypes.INCREASE_FONTSIZE
const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
function updatePreferences(formParams, dispatch) {
axios.put(`${ROOT_URL}/preferences`, formParams, { withCredentials: true })
.then(() => {
})
.catch((response) => dispatch({
type: ActionTypes.ERROR,
error: response.data
}));
}
export function setFontSize(value) {
return (dispatch, getState) => { // eslint-disable-line
dispatch({
type: ActionTypes.SET_FONT_SIZE,
value
});
const state = getState();
if (state.user.authenticated) {
const formParams = {
preferences: {
fontSize: value
}
};
updatePreferences(formParams, dispatch);
}
};
}
export function decreaseFont() {
return {
type: ActionTypes.DECREASE_FONTSIZE
};
}
export function updateFont(event) {
const value = event.target.value;
return {
type: ActionTypes.UPDATE_FONTSIZE,
value
};
}
export function increaseIndentation() {
return {
type: ActionTypes.INCREASE_INDENTATION
};
}
export function decreaseIndentation() {
return {
type: ActionTypes.DECREASE_INDENTATION
};
}
export function updateIndentation(event) {
const value = event.target.value;
return {
type: ActionTypes.UPDATE_INDENTATION,
value
export function setIndentation(value) {
return (dispatch, getState) => {
dispatch({
type: ActionTypes.SET_INDENTATION,
value
});
const state = getState();
if (state.user.authenticated) {
const formParams = {
preferences: {
indentationAmount: value
}
};
updatePreferences(formParams, dispatch);
}
};
}
export function indentWithTab() {
return {
type: ActionTypes.INDENT_WITH_TAB
return (dispatch, getState) => {
dispatch({
type: ActionTypes.INDENT_WITH_TAB
});
const state = getState();
if (state.user.authenticated) {
const formParams = {
preferences: {
isTabIndent: true
}
};
updatePreferences(formParams, dispatch);
}
};
}
export function indentWithSpace() {
return {
type: ActionTypes.INDENT_WITH_SPACE
return (dispatch, getState) => {
dispatch({
type: ActionTypes.INDENT_WITH_SPACE
});
const state = getState();
if (state.user.authenticated) {
const formParams = {
preferences: {
isTabIndent: false
}
};
updatePreferences(formParams, dispatch);
}
};
}
export function setAutosave(value) {
return (dispatch, getState) => {
dispatch({
type: ActionTypes.SET_AUTOSAVE,
value
});
const state = getState();
if (state.user.authenticated) {
const formParams = {
preferences: {
autosave: value
}
};
updatePreferences(formParams, dispatch);
}
};
}

243
client/modules/IDE/components/Preferences.js
View File

@ -1,130 +1,161 @@
import React, { PropTypes } from 'react';
import InlineSVG from 'react-inlinesvg';
import classNames from 'classnames';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as PreferencesActions from '../actions/preferences';
// import { bindActionCreators } from 'redux';
// import { connect } from 'react-redux';
// import * as PreferencesActions from '../actions/preferences';
const exitUrl = require('../../../images/exit.svg');
const plusUrl = require('../../../images/plus.svg');
const minusUrl = require('../../../images/minus.svg');
function Preferences(props) {
const preferencesContainerClass = classNames({
preferences: true,
'preferences--selected': props.isVisible
});
let preferencesTabOptionClass = classNames({
preference__option: true,
'preference__option--selected': props.isTabIndent
});
let preferencesSpaceOptionClass = classNames({
preference__option: true,
'preference__option--selected': !props.isTabIndent
});
return (
<section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
<div className="preferences__heading">
<h2 className="preferences__title">Preferences</h2>
<button
className="preferences__exit-button"
onClick={props.closePreferences}
title="exit"
aria-label="exit preferences"
>
<InlineSVG src={exitUrl} alt="Exit Preferences" />
</button>
</div>
class Preferences extends React.Component {
constructor(props) {
super(props);
this.handleUpdateAutosave = this.handleUpdateAutosave.bind(this);
}
<div className="preference">
<h4 className="preference__title">Text Size</h4>
<button
className="preference__plus-button"
onClick={props.decreaseFont}
aria-label="decrease font size"
>
<InlineSVG src={minusUrl} alt="Decrease Font Size" />
<h6 className="preference__label">Decrease</h6>
</button>
<input
className="preference__value"
aria-live="status"
aria-live="polite"
role="status"
value={props.fontSize}
onChange={props.updateFont}
>
</input>
<button
className="preference__minus-button"
onClick={props.increaseFont}
aria-label="increase font size"
>
<InlineSVG src={plusUrl} alt="Increase Font Size" />
<h6 className="preference__label">Increase</h6>
</button>
</div>
handleUpdateFont(event) {
this.props.setFontSize(parseInt(event.target.value, 10));
}
<div className="preference">
<h4 className="preference__title">Indentation Amount</h4>
<button
className="preference__plus-button"
onClick={props.decreaseIndentation}
aria-label="decrease indentation amount"
>
<InlineSVG src={minusUrl} alt="DecreaseIndentation Amount" />
<h6 className="preference__label">Decrease</h6>
</button>
<input
className="preference__value"
aria-live="status"
aria-live="polite"
role="status"
value={props.indentationAmount}
onChange={props.updateIndentation}
>
</input>
<button
className="preference__minus-button"
onClick={props.increaseIndentation}
aria-label="increase indentation amount"
>
<InlineSVG src={plusUrl} alt="IncreaseIndentation Amount" />
<h6 className="preference__label">Increase</h6>
</button>
<div className="preference__vertical-list">
<button className={preferencesSpaceOptionClass} onClick={props.indentWithSpace} aria-label="indentation with space">Spaces</button>
<button className={preferencesTabOptionClass} onClick={props.indentWithTab} aria-label="indentation with tab">Tabs</button>
handleUpdateIndentation(event) {
this.props.setIndentation(parseInt(event.target.value, 10));
}
handleUpdateAutosave(event) {
const value = event.target.value === 'true';
this.props.setAutosave(value);
}
render() {
const preferencesContainerClass = classNames({
preferences: true,
'preferences--selected': this.props.isVisible
});
let preferencesTabOptionClass = classNames({
preference__option: true,
'preference__option--selected': this.props.isTabIndent
});
let preferencesSpaceOptionClass = classNames({
preference__option: true,
'preference__option--selected': !this.props.isTabIndent
});
let autosaveOnClass = classNames({
preference__option: true,
'preference__option--selected': this.props.autosave
});
let autosaveOffClass = classNames({
preference__option: true,
'preference__option--selected': !this.props.autosave
});
return (
<section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
<div className="preferences__heading">
<h2 className="preferences__title">Preferences</h2>
<button
className="preferences__exit-button"
onClick={this.props.closePreferences}
title="exit"
aria-label="exit preferences"
>
<InlineSVG src={exitUrl} alt="Exit Preferences" />
</button>
</div>
</div>
</section>
);
}
function mapStateToProps(state) {
return {
...state.preferences
};
}
<div className="preference">
<h4 className="preference__title">Text Size</h4>
<button
className="preference__minus-button"
onClick={() => this.props.setFontSize(this.props.fontSize - 2)}
aria-label="decrease font size"
>
<InlineSVG src={minusUrl} alt="Decrease Font Size" />
<h6 className="preference__label">Decrease</h6>
</button>
<input
className="preference__value"
aria-live="status"
aria-live="polite"
role="status"
value={this.props.fontSize}
onChange={this.handleUpdateFont}
>
</input>
<button
className="preference__plus-button"
onClick={() => this.props.setFontSize(this.props.fontSize + 2)}
aria-label="increase font size"
>
<InlineSVG src={plusUrl} alt="Increase Font Size" />
<h6 className="preference__label">Increase</h6>
</button>
</div>
function mapDispatchToProps(dispatch) {
return bindActionCreators(PreferencesActions, dispatch);
<div className="preference">
<h4 className="preference__title">Indentation Amount</h4>
<button
className="preference__minus-button"
onClick={() => this.props.setIndentation(this.props.indentationAmount - 2)}
aria-label="decrease indentation amount"
>
<InlineSVG src={minusUrl} alt="DecreaseIndentation Amount" />
<h6 className="preference__label">Decrease</h6>
</button>
<input
className="preference__value"
aria-live="status"
aria-live="polite"
role="status"
value={this.props.indentationAmount}
onChange={this.handleUpdateIndentation}
>
</input>
<button
className="preference__plus-button"
onClick={() => this.props.setIndentation(this.props.indentationAmount + 2)}
aria-label="increase indentation amount"
>
<InlineSVG src={plusUrl} alt="IncreaseIndentation Amount" />
<h6 className="preference__label">Increase</h6>
</button>
<div className="preference__vertical-list">
<button className={preferencesSpaceOptionClass} onClick={this.props.indentWithSpace} aria-label="indentation with space">Spaces</button>
<button className={preferencesTabOptionClass} onClick={this.props.indentWithTab} aria-label="indentation with tab">Tabs</button>
</div>
</div>
<div className="preference">
<h4 className="preference__title">Autosave</h4>
<div className="preference__options">
<button
className={autosaveOnClass}
onClick={() => this.props.setAutosave(true)}
aria-label="autosave on"
>On</button>
<button
className={autosaveOffClass}
onClick={() => this.props.setAutosave(false)}
aria-label="autosave off"
>Off</button>
</div>
</div>
</section>
);
}
}
Preferences.propTypes = {
isVisible: PropTypes.bool.isRequired,
closePreferences: PropTypes.func.isRequired,
decreaseFont: PropTypes.func.isRequired,
updateFont: PropTypes.func.isRequired,
fontSize: PropTypes.number.isRequired,
increaseFont: PropTypes.func.isRequired,
indentationAmount: PropTypes.number.isRequired,
decreaseIndentation: PropTypes.func.isRequired,
increaseIndentation: PropTypes.func.isRequired,
updateIndentation: PropTypes.func.isRequired,
setIndentation: PropTypes.func.isRequired,
indentWithSpace: PropTypes.func.isRequired,
indentWithTab: PropTypes.func.isRequired,
isTabIndent: PropTypes.bool.isRequired
isTabIndent: PropTypes.bool.isRequired,
setFontSize: PropTypes.func.isRequired,
autosave: PropTypes.bool.isRequired,
setAutosave: PropTypes.func.isRequired
};
export default connect(mapStateToProps, mapDispatchToProps)(Preferences);
export default Preferences;

130
client/modules/IDE/components/Sidebar.js
View File

@ -1,71 +1,89 @@
import React, { PropTypes } from 'react';
import classNames from 'classnames';
import InlineSVG from 'react-inlinesvg';
import SidebarItem from './SidebarItem';
const rightArrowUrl = require('../../../images/right-arrow.svg');
const leftArrowUrl = require('../../../images/left-arrow.svg');
function Sidebar(props) {
const sidebarClass = classNames({
sidebar: true,
'sidebar--contracted': !props.isExpanded
});
class Sidebar extends React.Component {
constructor(props) {
super(props);
this.resetSelectedFile = this.resetSelectedFile.bind(this);
}
return (
<nav className={sidebarClass} title="file-navigation" role="navigation">
<div className="sidebar__header">
<h3 className="sidebar__title">Sketch Files</h3>
<div className="sidebar__icons">
<button
aria-label="add file"
className="sidebar__add"
onClick={props.newFile}
>
+
</button>
<button
aria-label="collapse file navigation"
className="sidebar__contract"
onClick={props.collapseSidebar}
>
<InlineSVG src={leftArrowUrl} />
</button>
<button
aria-label="expand file navigation"
className="sidebar__expand"
onClick={props.expandSidebar}
>
<InlineSVG src={rightArrowUrl} />
</button>
</div>
</div>
<ul className="sidebar__file-list">
{props.files.map(file => {
let itemClass = classNames({
'sidebar__file-item': true,
'sidebar__file-item--selected': file.id === props.selectedFile.id
});
return (
<li
className={itemClass}
key={file.id}
resetSelectedFile() {
this.props.setSelectedFile(this.props.files[0].id);
}
render() {
const sidebarClass = classNames({
sidebar: true,
'sidebar--contracted': !this.props.isExpanded
});
return (
<nav className={sidebarClass} title="file-navigation" role="navigation">
<div className="sidebar__header">
<h3 className="sidebar__title">Sketch Files</h3>
<div className="sidebar__icons">
<button
aria-label="add file"
className="sidebar__add"
onClick={this.props.newFile}
>
<a
onClick={() => props.setSelectedFile(file.id)}
>{file.name}</a>
</li>
);
})}
</ul>
</nav>
);
+
</button>
<button
aria-label="collapse file navigation"
className="sidebar__contract"
onClick={this.props.collapseSidebar}
>
<InlineSVG src={leftArrowUrl} />
</button>
<button
aria-label="expand file navigation"
className="sidebar__expand"
onClick={this.props.expandSidebar}
>
<InlineSVG src={rightArrowUrl} />
</button>
</div>
</div>
<ul className="sidebar__file-list">
{this.props.files.map((file, fileIndex) =>
<SidebarItem
key={file.id}
file={file}
setSelectedFile={this.props.setSelectedFile}
fileIndex={fileIndex}
showFileOptions={this.props.showFileOptions}
hideFileOptions={this.props.hideFileOptions}
deleteFile={this.props.deleteFile}
resetSelectedFile={this.resetSelectedFile}
showEditFileName={this.props.showEditFileName}
hideEditFileName={this.props.hideEditFileName}
updateFileName={this.props.updateFileName}
/>
)}
</ul>
</nav>
);
}
}
Sidebar.propTypes = {
files: PropTypes.array.isRequired,
selectedFile: PropTypes.shape({
id: PropTypes.string.isRequired
}),
setSelectedFile: PropTypes.func.isRequired
setSelectedFile: PropTypes.func.isRequired,
isExpanded: PropTypes.bool.isRequired,
newFile: PropTypes.func.isRequired,
collapseSidebar: PropTypes.func.isRequired,
expandSidebar: PropTypes.func.isRequired,
showFileOptions: PropTypes.func.isRequired,
hideFileOptions: PropTypes.func.isRequired,
deleteFile: PropTypes.func.isRequired,
showEditFileName: PropTypes.func.isRequired,
hideEditFileName: PropTypes.func.isRequired,
updateFileName: PropTypes.func.isRequired
};
export default Sidebar;

118
client/modules/IDE/components/SidebarItem.js Normal file
View File

@ -0,0 +1,118 @@
import React, { PropTypes } from 'react';
import InlineSVG from 'react-inlinesvg';
import classNames from 'classnames';
const downArrowUrl = require('../../../images/down-arrow.svg');
class SidebarItem extends React.Component {
constructor(props) {
super(props);
this.handleKeyPress = this.handleKeyPress.bind(this);
this.handleFileNameChange = this.handleFileNameChange.bind(this);
this.validateFileName = this.validateFileName.bind(this);
}
handleFileNameChange(event) {
this.props.updateFileName(this.props.file.id, event.target.value);
}
handleKeyPress(event) {
console.log(event.key);
if (event.key === 'Enter') {
this.props.hideEditFileName(this.props.file.id);
}
}
validateFileName() {
if (!this.props.file.name.match(/.*\.(js|css|html|json)$/)) {
this.props.updateFileName(this.props.file.id, this.originalFileName);
}
}
render() {
let itemClass = classNames({
'sidebar__file-item': true,
'sidebar__file-item--selected': this.props.file.isSelected,
'sidebar__file-item--open': this.props.file.isOptionsOpen,
'sidebar__file-item--editing': this.props.file.isEditingName
});
return (
<li
className={itemClass}
onBlur={() => this.props.hideFileOptions(this.props.file.id)}
tabIndex={this.props.fileIndex}
>
<a
className="sidebar__file-item-name"
onClick={() => this.props.setSelectedFile(this.props.file.id)}
>{this.props.file.name}</a>
<input
type="text"
className="sidebar__file-item-input"
value={this.props.file.name}
onChange={this.handleFileNameChange}
ref="fileNameInput"
onBlur={() => {
this.validateFileName();
this.props.hideEditFileName(this.props.file.id);
}}
onKeyPress={this.handleKeyPress}
/>
<a
className="sidebar__file-item-show-options"
onClick={() => this.props.showFileOptions(this.props.file.id)}
>
<InlineSVG src={downArrowUrl} />
</a>
<div ref="fileOptions" className="sidebar__file-item-options">
<ul>
<li>
<a
onClick={() => {
this.originalFileName = this.props.file.name;
this.props.showEditFileName(this.props.file.id);
setTimeout(() => this.refs.fileNameInput.focus(), 0);
}}
>
Rename
</a>
</li>
<li>
<a
onClick={() => {
if (window.confirm(`Are you sure you want to delete ${this.props.file.name}?`)) {
this.props.deleteFile(this.props.file.id);
this.props.resetSelectedFile();
}
}}
>
Delete
</a>
</li>
</ul>
</div>
</li>
);
}
}
SidebarItem.propTypes = {
file: PropTypes.shape({
id: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
isSelected: PropTypes.bool,
isOptionsOpen: PropTypes.bool,
isEditingName: PropTypes.bool
}).isRequired,
setSelectedFile: PropTypes.func.isRequired,
fileIndex: PropTypes.number.isRequired,
showFileOptions: PropTypes.func.isRequired,
hideFileOptions: PropTypes.func.isRequired,
deleteFile: PropTypes.func.isRequired,
resetSelectedFile: PropTypes.func.isRequired,
showEditFileName: PropTypes.func.isRequired,
hideEditFileName: PropTypes.func.isRequired,
updateFileName: PropTypes.func.isRequired
};
export default SidebarItem;

74
client/modules/IDE/pages/IDEView.js
View File

@ -13,16 +13,46 @@ import * as FileActions from '../actions/files';
import * as IDEActions from '../actions/ide';
import * as ProjectActions from '../actions/project';
import * as EditorHiddenActions from '../actions/editorHidden';
import { getFile, getHTMLFile, getJSFiles, getCSSFiles } from '../reducers/files';
import * as PreferencesActions from '../actions/preferences';
import { getFile, getHTMLFile, getJSFiles, getCSSFiles, setSelectedFile } from '../reducers/files';
class IDEView extends React.Component {
componentDidMount() {
if (this.props.params.project_id) {
const id = this.props.params.project_id;
this.props.getProject(id);
// if autosave is on and the user is the owner of the project
if (this.props.preferences.autosave
&& this.props.project.owner
&& this.props.project.owner.id === this.props.user.id) {
this.autosaveInterval = setInterval(this.props.saveProject, 30000);
}
}
}
componentDidUpdate(prevProps) {
// if user is the owner of the project
if (this.props.project.owner && this.props.project.owner.id === this.props.user.id) {
// if the user turns on autosave
// or the user saves the project for the first time
if (!this.autosaveInterval &&
((this.props.preferences.autosave && !prevProps.preferences.autosave) ||
(this.props.project.id && !prevProps.project.id))) {
this.autosaveInterval = setInterval(this.props.saveProject, 30000);
// if user turns off autosave preference
} else if (this.autosaveInterval && !this.props.preferences.autosave && prevProps.preferences.autosave) {
clearInterval(this.autosaveInterval);
this.autosaveInterval = null;
}
}
}
componentWillUnmount() {
clearInterval(this.autosaveInterval);
this.autosaveInterval = null;
}
render() {
return (
<div className="ide">
@ -47,16 +77,30 @@ class IDEView extends React.Component {
<Preferences
isVisible={this.props.ide.preferencesIsVisible}
closePreferences={this.props.closePreferences}
fontSize={this.props.preferences.fontSize}
indentationAmount={this.props.preferences.indentationAmount}
setIndentation={this.props.setIndentation}
indentWithSpace={this.props.indentWithSpace}
indentWithTab={this.props.indentWithTab}
isTabIndent={this.props.preferences.isTabIndent}
setFontSize={this.props.setFontSize}
autosave={this.props.preferences.autosave}
setAutosave={this.props.setAutosave}
/>
<div className="editor-preview-container">
<Sidebar
files={this.props.files}
selectedFile={this.props.selectedFile}
setSelectedFile={this.props.setSelectedFile}
newFile={this.props.newFile}
isExpanded={this.props.ide.sidebarIsExpanded}
expandSidebar={this.props.expandSidebar}
collapseSidebar={this.props.collapseSidebar}
showFileOptions={this.props.showFileOptions}
hideFileOptions={this.props.hideFileOptions}
deleteFile={this.props.deleteFile}
showEditFileName={this.props.showEditFileName}
hideEditFileName={this.props.hideEditFileName}
updateFileName={this.props.updateFileName}
/>
<div className="editor-console-container">
<div className="editor-linenumber" aria-live="assertive" id="editor-linenumber"></div>
@ -115,7 +159,8 @@ IDEView.propTypes = {
}),
getProject: PropTypes.func.isRequired,
user: PropTypes.shape({
authenticated: PropTypes.bool.isRequired
authenticated: PropTypes.bool.isRequired,
id: PropTypes.string
}).isRequired,
createProject: PropTypes.func.isRequired,
saveProject: PropTypes.func.isRequired,
@ -130,9 +175,11 @@ IDEView.propTypes = {
startSketch: PropTypes.func.isRequired,
stopSketch: PropTypes.func.isRequired,
project: PropTypes.shape({
id: PropTypes.string,
name: PropTypes.string.isRequired,
owner: PropTypes.shape({
username: PropTypes.string
username: PropTypes.string,
id: PropTypes.string
})
}).isRequired,
setProjectName: PropTypes.func.isRequired,
@ -144,9 +191,15 @@ IDEView.propTypes = {
preferences: PropTypes.shape({
fontSize: PropTypes.number.isRequired,
indentationAmount: PropTypes.number.isRequired,
isTabIndent: PropTypes.bool.isRequired
isTabIndent: PropTypes.bool.isRequired,
autosave: PropTypes.bool.isRequired
}).isRequired,
closePreferences: PropTypes.func.isRequired,
setFontSize: PropTypes.func.isRequired,
setIndentation: PropTypes.func.isRequired,
indentWithTab: PropTypes.func.isRequired,
indentWithSpace: PropTypes.func.isRequired,
setAutosave: PropTypes.func.isRequired,
files: PropTypes.array.isRequired,
updateFileContent: PropTypes.func.isRequired,
selectedFile: PropTypes.shape({
@ -166,11 +219,17 @@ IDEView.propTypes = {
cloneProject: PropTypes.func.isRequired,
expandConsole: PropTypes.func.isRequired,
collapseConsole: PropTypes.func.isRequired,
showFileOptions: PropTypes.func.isRequired,
hideFileOptions: PropTypes.func.isRequired,
deleteFile: PropTypes.func.isRequired,
showEditFileName: PropTypes.func.isRequired,
hideEditFileName: PropTypes.func.isRequired,
updateFileName: PropTypes.func.isRequired
};
function mapStateToProps(state) {
return {
files: state.files,
files: setSelectedFile(state.files, state.ide.selectedFile),
selectedFile: getFile(state.files, state.ide.selectedFile),
htmlFile: getHTMLFile(state.files),
jsFiles: getJSFiles(state.files),
@ -188,7 +247,8 @@ function mapDispatchToProps(dispatch) {
EditorHiddenActions,
FileActions,
ProjectActions,
IDEActions),
IDEActions,
PreferencesActions),
dispatch);
}

50
client/modules/IDE/reducers/files.js
View File

@ -73,11 +73,61 @@ const files = (state = initialState, action) => {
return [...action.files];
case ActionTypes.CREATE_FILE:
return [...state, { name: action.name, id: action.id, content: '', url: action.url }];
case ActionTypes.SHOW_FILE_OPTIONS:
return state.map(file => {
if (file.id !== action.id) {
return file;
}
return Object.assign({}, file, { isOptionsOpen: true });
});
case ActionTypes.HIDE_FILE_OPTIONS:
return state.map(file => {
if (file.id !== action.id) {
return file;
}
return Object.assign({}, file, { isOptionsOpen: false });
});
case ActionTypes.UPDATE_FILE_NAME:
return state.map(file => {
if (file.id !== action.id) {
return file;
}
return Object.assign({}, file, { name: action.name });
});
case ActionTypes.DELETE_FILE:
return state.filter(file => file.id !== action.id);
case ActionTypes.SHOW_EDIT_FILE_NAME:
return state.map(file => {
if (file.id !== action.id) {
return file;
}
return Object.assign({}, file, { isEditingName: true });
});
case ActionTypes.HIDE_EDIT_FILE_NAME:
return state.map(file => {
if (file.id !== action.id) {
return file;
}
return Object.assign({}, file, { isEditingName: false });
});
default:
return state;
}
};
export const setSelectedFile = (state, id) =>
state.map(file => {
if (file.id === id) {
return Object.assign({}, file, { isSelected: true });
}
return 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$/));

35
client/modules/IDE/reducers/preferences.js
View File

@ -3,35 +3,16 @@ import * as ActionTypes from '../../../constants';
const initialState = {
fontSize: 18,
indentationAmount: 2,
isTabIndent: true
isTabIndent: true,
autosave: true
};
const preferences = (state = initialState, action) => {
switch (action.type) {
case ActionTypes.INCREASE_FONTSIZE:
return Object.assign({}, state, {
fontSize: state.fontSize + 2
});
case ActionTypes.DECREASE_FONTSIZE:
return Object.assign({}, state, {
fontSize: state.fontSize - 2
});
case ActionTypes.UPDATE_FONTSIZE:
return Object.assign({}, state, {
fontSize: parseInt(action.value, 10)
});
case ActionTypes.INCREASE_INDENTATION:
return Object.assign({}, state, {
indentationAmount: state.indentationAmount + 2
});
case ActionTypes.DECREASE_INDENTATION:
return Object.assign({}, state, {
indentationAmount: state.indentationAmount - 2
});
case ActionTypes.UPDATE_INDENTATION:
return Object.assign({}, state, {
indentationAmount: parseInt(action.value, 10)
});
case ActionTypes.SET_FONT_SIZE:
return Object.assign({}, state, { fontSize: action.value });
case ActionTypes.SET_INDENTATION:
return Object.assign({}, state, { indentationAmount: action.value });
case ActionTypes.INDENT_WITH_TAB:
return Object.assign({}, state, {
isTabIndent: true
@ -40,6 +21,10 @@ const preferences = (state = initialState, action) => {
return Object.assign({}, state, {
isTabIndent: false
});
case ActionTypes.SET_AUTOSAVE:
return Object.assign({}, state, { autosave: action.value });
case ActionTypes.SET_PREFERENCES:
return action.preferences;
default:
return state;
}

16
client/modules/Sketch/pages/SketchListView.js
View File

@ -19,16 +19,20 @@ class SketchListView extends React.Component {
user={this.props.user}
createProject={this.props.createProject}
saveProject={this.props.saveProject}
exportProjectAsZip={this.props.exportProjectAsZip}
cloneProject={this.props.cloneProject}
/>
<table className="sketches-table" summary="table containing all saved projects">
<thead>
<th scope="col">Name</th>
<th scope="col">Created</th>
<th scope="col">Last Updated</th>
<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">
<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>
@ -46,7 +50,9 @@ SketchListView.propTypes = {
createProject: PropTypes.func.isRequired,
saveProject: PropTypes.func.isRequired,
getProjects: PropTypes.func.isRequired,
sketches: PropTypes.array.isRequired
sketches: PropTypes.array.isRequired,
exportProjectAsZip: PropTypes.func.isRequired,
cloneProject: PropTypes.func.isRequired
};
function mapStateToProps(state) {

8
client/modules/User/actions.js
View File

@ -46,7 +46,13 @@ export function getUser() {
type: ActionTypes.AUTH_USER,
user: response.data
});
dispatch({
type: ActionTypes.SET_PREFERENCES,
preferences: response.data.preferences
});
})
.catch(response => dispatch(authError(response.data.error)));
.catch(response => {
dispatch(authError(response.data.error));
});
};
}

2
client/styles/abstracts/_placeholders.scss
View File

@ -95,7 +95,7 @@
%preference-option {
background-color: $light-button-background-color;
color: $light-inactive-text-color;
font-size: #{14 / $base-font-size}rem;
font-size: #{12 / $base-font-size}rem;
cursor: pointer;
text-align: left;
margin-bottom: #{5 / $base-font-size}rem;

12
client/styles/components/_preferences.scss
View File

@ -61,6 +61,7 @@
margin: 0;
line-height: #{20 / $base-font-size}rem;
color: $light-inactive-text-color;
font-size: #{9 / $base-font-size}rem;
&:hover {
color: $light-inactive-text-color;
}
@ -69,13 +70,22 @@
.preference__vertical-list {
display: flex;
flex-direction: column;
width: #{90 / $base-font-size}rem;
padding-left: #{28 / $base-font-size}rem;
}
.preference__option {
@extend %preference-option;
list-style-type: none;
padding-left: #{28 / $base-font-size}rem;
padding: 0;
&--selected {
@extend %preference-option--selected;
}
}
.preference__options {
display: flex;
justify-content: space-between;
width: #{70 / $base-font-size}rem;
}

43
client/styles/components/_sidebar.scss
View File

@ -38,11 +38,54 @@
padding: #{8 / $base-font-size}rem #{20 / $base-font-size}rem;
color: $light-inactive-text-color;
cursor: pointer;
display: flex;
justify-content: space-between;
position: relative;
&--selected {
background-color: $ide-border-color;
}
}
.sidebar__file-item-name {
.sidebar__file-item--editing & {
display: none;
}
}
.sidebar__file-item-show-options {
@extend %icon;
display: none;
.sidebar__file-item--selected & {
display: inline-block;
}
}
.sidebar__file-item-options {
@extend %modal;
position: absolute;
top: 95%;
left: 77%;
display: none;
z-index: 100;
padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem;
background-color: $light-modal-background-color;
z-index: 100;
.sidebar__file-item--open & {
display: block;
}
}
.sidebar__file-item-input {
display: none;
padding: 0;
border: 0;
background-color: transparent;
max-width: 90%;
.sidebar__file-item--editing & {
display: inline-block;
}
}
.sidebar__contract {
@extend %icon;
height: #{14 / $base-font-size}rem;

5
client/styles/layout/_ide.scss
View File

@ -16,10 +16,15 @@
max-width: 45%;
height: 100%;
position: relative;
// temporary fix for safari
min-height: 75vh;
}
.editor-holder {
height: 100%;
width: 100%;
position: absolute;
}
.preview-frame {

2
server/controllers/project.controller.js
View File

@ -46,7 +46,7 @@ export function getProjects(req, res) {
if (req.user) {
Project.find({user: req.user._id}) // eslint-disable-line no-underscore-dangle
.sort('-createdAt')
.select('name files _id createdAt updatedAt')
.select('name files id createdAt updatedAt')
.exec((err, projects) => {
res.json(projects);
});

8
server/controllers/session.controller.js
View File

@ -11,7 +11,9 @@ export function createSession(req, res, next) {
if (innerErr) { return next(innerErr); }
return res.json({
email: req.user.email,
username: req.user.username
username: req.user.username,
preferences: req.user.preferences,
id: req.user._id
});
});
})(req, res, next);
@ -21,7 +23,9 @@ export function getSession(req, res) {
if (req.user) {
return res.json({
email: req.user.email,
username: req.user.username
username: req.user.username,
preferences: req.user.preferences,
id: req.user._id
});
}
return res.status(404).send({ message: 'Session does not exist' });

26
server/controllers/user.controller.js
View File

@ -22,9 +22,33 @@ export function createUser(req, res, next) {
}
res.json({
email: req.user.email,
username: req.user.username
username: req.user.username,
preferences: req.user.preferences,
id: req.user._id
});
});
});
});
}
export function updatePreferences(req, res) {
User.findById(req.user.id, (err, user) => {
if (err) {
return res.status(500).json({error: err});
}
if (!user){
return res.status(404).json({error: 'Document not found'});
}
const preferences = Object.assign({}, user.preferences, req.body.preferences);
user.preferences = preferences;
user.save((err) => {
if (err) {
return res.status(500).json({error: err});
}
return res.json(user.preferences);
});
})
}

16
server/models/user.js
View File

@ -9,7 +9,12 @@ const userSchema = new Schema({
github: { type: String },
email: { type: String, unique: true },
tokens: Array,
admin: { type: Boolean, default: false }
preferences: {
fontSize: { type: Number, default: 18 },
indentationAmount: { type: Number, default: 2 },
isTabIndent: { type: Boolean, default: false },
autosave: { type: Boolean, default: true }
}
}, { timestamps: true });
/**
@ -28,6 +33,15 @@ userSchema.pre('save', function checkPassword(next) { // eslint-disable-line con
});
});
userSchema.virtual('id').get(function(){
return this._id.toHexString();
});
userSchema.set('toJSON', {
virtuals: true
});
/**
* Helper method for validating user's password.
*/

2
server/routes/user.routes.js
View File

@ -4,4 +4,6 @@ const router = new Router();
router.route('/signup').post(UserController.createUser);
router.route('/preferences').put(UserController.updatePreferences);
export default router;