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

merge master

Browse source
This commit is contained in:
MathuraMG 2016-08-15 12:14:32 -04:00
commit 87de5a2188
18 changed files with 63 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
client/components/Nav.js
View file

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

1
client/constants.js
View file

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

4
client/modules/IDE/actions/editorAccessibility.js
View file

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

11
client/modules/IDE/actions/project.js
View file

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

10
client/modules/IDE/components/Editor.js
View file

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

4
client/modules/IDE/components/EditorAccessibility.js
View file

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

4
client/modules/IDE/components/PreviewFrame.js
View file

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

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

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

4
client/modules/IDE/reducers/editorAccessibility.js
View file

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

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

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

2
client/modules/IDE/reducers/ide.js
View file

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

2
client/modules/IDE/reducers/project.js
View file

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

4
client/modules/Sketch/pages/SketchListView.js
View file

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

BIN
client/sounds/audioAlert.mp3 Normal file
View file

Binary file not shown.

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

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

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

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

2
webpack.config.dev.js
View file

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

2
webpack.config.prod.js
View file

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