add button tp play text output and sketch

This commit is contained in:
MathuraMG 2016-08-12 16:37:38 -04:00
parent bcd2a39f9d
commit 34d8582412
6 changed files with 43 additions and 3 deletions

View file

@ -4,6 +4,9 @@ export const TOGGLE_SKETCH = 'TOGGLE_SKETCH';
export const START_SKETCH = 'START_SKETCH'; export const START_SKETCH = 'START_SKETCH';
export const STOP_SKETCH = 'STOP_SKETCH'; export const STOP_SKETCH = 'STOP_SKETCH';
export const START_TEXT_OUTPUT = 'START_TEXT_OUTPUT';
export const STOP_TEXT_OUTPUT = 'STOP_TEXT_OUTPUT';
export const OPEN_PREFERENCES = 'OPEN_PREFERENCES'; export const OPEN_PREFERENCES = 'OPEN_PREFERENCES';
export const CLOSE_PREFERENCES = 'CLOSE_PREFERENCES'; export const CLOSE_PREFERENCES = 'CLOSE_PREFERENCES';
export const SET_FONT_SIZE = 'SET_FONT_SIZE'; export const SET_FONT_SIZE = 'SET_FONT_SIZE';

View file

@ -18,6 +18,18 @@ export function stopSketch() {
}; };
} }
export function startTextOutput() {
return {
type: ActionTypes.START_TEXT_OUTPUT
};
}
export function stopTextOutput() {
return {
type: ActionTypes.STOP_TEXT_OUTPUT
};
}
export function setSelectedFile(fileId) { export function setSelectedFile(fileId) {
return { return {
type: ActionTypes.SET_SELECTED_FILE, type: ActionTypes.SET_SELECTED_FILE,

View file

@ -128,7 +128,7 @@ class PreviewFrame extends React.Component {
htmlFile = htmlFile.replace(fileRegex, `<style>\n${cssFile.content}\n</style>`); htmlFile = htmlFile.replace(fileRegex, `<style>\n${cssFile.content}\n</style>`);
}); });
if (this.props.textOutput) { if (this.props.textOutput||this.props.isTextOutputPlaying) {
const htmlHead = htmlFile.match(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi); const htmlHead = htmlFile.match(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi);
const headRegex = new RegExp('head', 'i'); const headRegex = new RegExp('head', 'i');
let htmlHeadContents = htmlHead[0].split(headRegex)[1]; let htmlHeadContents = htmlHead[0].split(headRegex)[1];
@ -181,6 +181,7 @@ class PreviewFrame extends React.Component {
PreviewFrame.propTypes = { PreviewFrame.propTypes = {
isPlaying: PropTypes.bool.isRequired, isPlaying: PropTypes.bool.isRequired,
isTextOutputPlaying: PropTypes.bool.isRequired,
textOutput: PropTypes.bool.isRequired, textOutput: PropTypes.bool.isRequired,
head: PropTypes.object.isRequired, head: PropTypes.object.isRequired,
content: PropTypes.string.isRequired, content: PropTypes.string.isRequired,

View file

@ -26,8 +26,18 @@ function Toolbar(props) {
<button className={playButtonClass} onClick={props.startSketch} aria-label="play sketch"> <button className={playButtonClass} onClick={props.startSketch} aria-label="play sketch">
<InlineSVG src={playUrl} alt="Play Sketch" /> <InlineSVG src={playUrl} alt="Play Sketch" />
</button> </button>
<button
<button className={stopButtonClass} onClick={props.stopSketch} aria-label="stop sketch"> className={playButtonClass}
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" /> <InlineSVG src={stopUrl} alt="Stop Sketch" />
</button> </button>
<div className="toolbar__project-name-container"> <div className="toolbar__project-name-container">
@ -64,6 +74,8 @@ Toolbar.propTypes = {
preferencesIsVisible: PropTypes.bool.isRequired, preferencesIsVisible: PropTypes.bool.isRequired,
startSketch: PropTypes.func.isRequired, startSketch: PropTypes.func.isRequired,
stopSketch: PropTypes.func.isRequired, stopSketch: PropTypes.func.isRequired,
startTextOutput: PropTypes.func.isRequired,
stopTextOutput: PropTypes.func.isRequired,
setProjectName: PropTypes.func.isRequired, setProjectName: PropTypes.func.isRequired,
projectName: PropTypes.string.isRequired, projectName: PropTypes.string.isRequired,
openPreferences: PropTypes.func.isRequired, openPreferences: PropTypes.func.isRequired,

View file

@ -104,10 +104,13 @@ class IDEView extends React.Component {
isPlaying={this.props.ide.isPlaying} isPlaying={this.props.ide.isPlaying}
startSketch={this.props.startSketch} startSketch={this.props.startSketch}
stopSketch={this.props.stopSketch} stopSketch={this.props.stopSketch}
startTextOutput={this.props.startTextOutput}
stopTextOutput={this.props.stopTextOutput}
projectName={this.props.project.name} projectName={this.props.project.name}
setProjectName={this.props.setProjectName} setProjectName={this.props.setProjectName}
openPreferences={this.props.openPreferences} openPreferences={this.props.openPreferences}
preferencesIsVisible={this.props.ide.preferencesIsVisible} preferencesIsVisible={this.props.ide.preferencesIsVisible}
setTextOutput={this.props.setTextOutput}
owner={this.props.project.owner} owner={this.props.project.owner}
/> />
<Preferences <Preferences
@ -200,6 +203,7 @@ class IDEView extends React.Component {
<link type="text/css" rel="stylesheet" href="/preview-styles.css" /> <link type="text/css" rel="stylesheet" href="/preview-styles.css" />
} }
isPlaying={this.props.ide.isPlaying} isPlaying={this.props.ide.isPlaying}
isTextOutputPlaying={this.props.ide.isTextOutputPlaying}
textOutput={this.props.preferences.textOutput} textOutput={this.props.preferences.textOutput}
dispatchConsoleEvent={this.props.dispatchConsoleEvent} dispatchConsoleEvent={this.props.dispatchConsoleEvent}
/> />
@ -237,6 +241,7 @@ IDEView.propTypes = {
saveProject: PropTypes.func.isRequired, saveProject: PropTypes.func.isRequired,
ide: PropTypes.shape({ ide: PropTypes.shape({
isPlaying: PropTypes.bool.isRequired, isPlaying: PropTypes.bool.isRequired,
isTextOutputPlaying: PropTypes.bool.isRequired,
consoleEvent: PropTypes.object, consoleEvent: PropTypes.object,
modalIsVisible: PropTypes.bool.isRequired, modalIsVisible: PropTypes.bool.isRequired,
sidebarIsExpanded: PropTypes.bool.isRequired, sidebarIsExpanded: PropTypes.bool.isRequired,
@ -245,6 +250,8 @@ IDEView.propTypes = {
}).isRequired, }).isRequired,
startSketch: PropTypes.func.isRequired, startSketch: PropTypes.func.isRequired,
stopSketch: PropTypes.func.isRequired, stopSketch: PropTypes.func.isRequired,
startTextOutput: PropTypes.func.isRequired,
stopTextOutput: PropTypes.func.isRequired,
project: PropTypes.shape({ project: PropTypes.shape({
id: PropTypes.string, id: PropTypes.string,
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,

View file

@ -2,6 +2,7 @@ import * as ActionTypes from '../../../constants';
const initialState = { const initialState = {
isPlaying: false, isPlaying: false,
isTextOutputPlaying: false,
selectedFile: '1', selectedFile: '1',
consoleEvent: { consoleEvent: {
method: undefined, method: undefined,
@ -21,6 +22,10 @@ const ide = (state = initialState, action) => {
return Object.assign({}, state, { isPlaying: true }); return Object.assign({}, state, { isPlaying: true });
case ActionTypes.STOP_SKETCH: case ActionTypes.STOP_SKETCH:
return Object.assign({}, state, { isPlaying: false }); return Object.assign({}, state, { isPlaying: false });
case ActionTypes.START_TEXT_OUTPUT:
return Object.assign({}, state, { isTextOutputPlaying: true });
case ActionTypes.STOP_TEXT_OUTPUT:
return Object.assign({}, state, { isTextOutputPlaying: false });
case ActionTypes.SET_SELECTED_FILE: case ActionTypes.SET_SELECTED_FILE:
case ActionTypes.SET_PROJECT: case ActionTypes.SET_PROJECT:
case ActionTypes.NEW_PROJECT: case ActionTypes.NEW_PROJECT: