From 34d85824124893df23e1ba8f840fdd24363f9763 Mon Sep 17 00:00:00 2001 From: MathuraMG Date: Fri, 12 Aug 2016 16:37:38 -0400 Subject: [PATCH] add button tp play text output and sketch --- client/constants.js | 3 +++ client/modules/IDE/actions/ide.js | 12 ++++++++++++ client/modules/IDE/components/PreviewFrame.js | 3 ++- client/modules/IDE/components/Toolbar.js | 16 ++++++++++++++-- client/modules/IDE/pages/IDEView.js | 7 +++++++ client/modules/IDE/reducers/ide.js | 5 +++++ 6 files changed, 43 insertions(+), 3 deletions(-) diff --git a/client/constants.js b/client/constants.js index 4adce05f..aed9de7b 100644 --- a/client/constants.js +++ b/client/constants.js @@ -4,6 +4,9 @@ export const TOGGLE_SKETCH = 'TOGGLE_SKETCH'; export const START_SKETCH = 'START_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 CLOSE_PREFERENCES = 'CLOSE_PREFERENCES'; export const SET_FONT_SIZE = 'SET_FONT_SIZE'; diff --git a/client/modules/IDE/actions/ide.js b/client/modules/IDE/actions/ide.js index 1b8b18d8..4cb32913 100644 --- a/client/modules/IDE/actions/ide.js +++ b/client/modules/IDE/actions/ide.js @@ -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) { return { type: ActionTypes.SET_SELECTED_FILE, diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js index add011b1..4d589ab4 100644 --- a/client/modules/IDE/components/PreviewFrame.js +++ b/client/modules/IDE/components/PreviewFrame.js @@ -128,7 +128,7 @@ class PreviewFrame extends React.Component { htmlFile = htmlFile.replace(fileRegex, ``); }); - if (this.props.textOutput) { + if (this.props.textOutput||this.props.isTextOutputPlaying) { const htmlHead = htmlFile.match(/(?:)([\s\S]*?)(?:<\/head>)/gmi); const headRegex = new RegExp('head', 'i'); let htmlHeadContents = htmlHead[0].split(headRegex)[1]; @@ -181,6 +181,7 @@ class PreviewFrame extends React.Component { PreviewFrame.propTypes = { isPlaying: PropTypes.bool.isRequired, + isTextOutputPlaying: PropTypes.bool.isRequired, textOutput: PropTypes.bool.isRequired, head: PropTypes.object.isRequired, content: PropTypes.string.isRequired, diff --git a/client/modules/IDE/components/Toolbar.js b/client/modules/IDE/components/Toolbar.js index 9af73a23..f18f52ab 100644 --- a/client/modules/IDE/components/Toolbar.js +++ b/client/modules/IDE/components/Toolbar.js @@ -26,8 +26,18 @@ function Toolbar(props) { - - +
@@ -64,6 +74,8 @@ Toolbar.propTypes = { preferencesIsVisible: PropTypes.bool.isRequired, startSketch: PropTypes.func.isRequired, stopSketch: PropTypes.func.isRequired, + startTextOutput: PropTypes.func.isRequired, + stopTextOutput: PropTypes.func.isRequired, setProjectName: PropTypes.func.isRequired, projectName: PropTypes.string.isRequired, openPreferences: PropTypes.func.isRequired, diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js index d6d0d426..a87ecb8c 100644 --- a/client/modules/IDE/pages/IDEView.js +++ b/client/modules/IDE/pages/IDEView.js @@ -104,10 +104,13 @@ class IDEView extends React.Component { isPlaying={this.props.ide.isPlaying} startSketch={this.props.startSketch} stopSketch={this.props.stopSketch} + startTextOutput={this.props.startTextOutput} + stopTextOutput={this.props.stopTextOutput} projectName={this.props.project.name} setProjectName={this.props.setProjectName} openPreferences={this.props.openPreferences} preferencesIsVisible={this.props.ide.preferencesIsVisible} + setTextOutput={this.props.setTextOutput} owner={this.props.project.owner} /> } isPlaying={this.props.ide.isPlaying} + isTextOutputPlaying={this.props.ide.isTextOutputPlaying} textOutput={this.props.preferences.textOutput} dispatchConsoleEvent={this.props.dispatchConsoleEvent} /> @@ -237,6 +241,7 @@ IDEView.propTypes = { saveProject: PropTypes.func.isRequired, ide: PropTypes.shape({ isPlaying: PropTypes.bool.isRequired, + isTextOutputPlaying: PropTypes.bool.isRequired, consoleEvent: PropTypes.object, modalIsVisible: PropTypes.bool.isRequired, sidebarIsExpanded: PropTypes.bool.isRequired, @@ -245,6 +250,8 @@ IDEView.propTypes = { }).isRequired, startSketch: PropTypes.func.isRequired, stopSketch: PropTypes.func.isRequired, + startTextOutput: PropTypes.func.isRequired, + stopTextOutput: PropTypes.func.isRequired, project: PropTypes.shape({ id: PropTypes.string, name: PropTypes.string.isRequired, diff --git a/client/modules/IDE/reducers/ide.js b/client/modules/IDE/reducers/ide.js index 21dc2828..f6687f9a 100644 --- a/client/modules/IDE/reducers/ide.js +++ b/client/modules/IDE/reducers/ide.js @@ -2,6 +2,7 @@ import * as ActionTypes from '../../../constants'; const initialState = { isPlaying: false, + isTextOutputPlaying: false, selectedFile: '1', consoleEvent: { method: undefined, @@ -21,6 +22,10 @@ const ide = (state = initialState, action) => { return Object.assign({}, state, { isPlaying: true }); case ActionTypes.STOP_SKETCH: 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_PROJECT: case ActionTypes.NEW_PROJECT: