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

add preferences to include text output

Browse source
This commit is contained in:
MathuraMG 2016-08-12 15:50:33 -04:00
parent be010b8ac0
commit bcd2a39f9d
7 changed files with 69 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
client/constants.js
View file

@ -58,6 +58,7 @@ export const HIDE_EDIT_FILE_NAME = 'HIDE_EDIT_FILE_NAME';
export const SET_AUTOSAVE = 'SET_AUTOSAVE';
export const SET_LINT_WARNING = 'SET_LINT_WARNING';
export const SET_PREFERENCES = 'SET_PREFERENCES';
export const SET_TEXT_OUTPUT = 'SET_TEXT_OUTPUT';
// eventually, handle errors more specifically and better
export const ERROR = 'ERROR';

18
client/modules/IDE/actions/preferences.js
View file

@ -118,3 +118,21 @@ export function setLintWarning(value) {
}
};
}
export function setTextOutput(value) {
return (dispatch, getState) => {
dispatch({
type: ActionTypes.SET_TEXT_OUTPUT,
value
});
const state = getState();
if (state.user.authenticated) {
const formParams = {
preferences: {
textOutput: value
}
};
updatePreferences(formParams, dispatch);
}
};
}

25
client/modules/IDE/components/Preferences.js
View file

@ -62,6 +62,14 @@ class Preferences extends React.Component {
preference__option: true,
'preference__option--selected': !this.props.lintWarning
});
let textOutputOnClass = classNames({
preference__option: true,
'preference__option--selected': this.props.textOutput
});
let textOutputOffClass = classNames({
preference__option: true,
'preference__option--selected': !this.props.textOutput
});
return (
<section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
<div className="preferences__heading">
@ -169,6 +177,21 @@ class Preferences extends React.Component {
>Off</button>
</div>
</div>
<div className="preference">
<h4 className="preference__title">Hidden Text Output</h4>
<div className="preference__options">
<button
className={textOutputOnClass}
onClick={() => this.props.setTextOutput(true)}
aria-label="text output on"
>On</button>
<button
className={textOutputOffClass}
onClick={() => this.props.setTextOutput(false)}
aria-label="text output off"
>Off</button>
</div>
</div>
</section>
);
}
@ -186,6 +209,8 @@ Preferences.propTypes = {
setFontSize: PropTypes.func.isRequired,
autosave: PropTypes.bool.isRequired,
setAutosave: PropTypes.func.isRequired,
textOutput: PropTypes.bool.isRequired,
setTextOutput: PropTypes.func.isRequired,
lintWarning: PropTypes.bool.isRequired,
setLintWarning: PropTypes.func.isRequired
};

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

@ -128,22 +128,18 @@ class PreviewFrame extends React.Component {
htmlFile = htmlFile.replace(fileRegex, `<style>\n${cssFile.content}\n</style>`);
});
const htmlHead = htmlFile.match(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi);
const headRegex = new RegExp('head', 'i');
let htmlHeadContents = htmlHead[0].split(headRegex)[1];
htmlHeadContents = htmlHeadContents.slice(1, htmlHeadContents.length - 2);
htmlHeadContents += '<script src="/data.js"></script>\n';
htmlHeadContents += '<script src="/interceptor-functions.js"></script>\n';
htmlHeadContents += '<script src="/intercept-p5.js"></script>\n';
htmlHeadContents += '<script type="text/javascript" src="http://chir.ag/projects/ntc/ntc.js"></script>';
htmlFile = htmlFile.replace(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi, `<head>\n${htmlHeadContents}\n</head>`);
if (this.props.textOutput) {
const htmlHead = htmlFile.match(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi);
const headRegex = new RegExp('head', 'i');
let htmlHeadContents = htmlHead[0].split(headRegex)[1];
htmlHeadContents = htmlHeadContents.slice(1, htmlHeadContents.length - 2);
htmlHeadContents += '<script src="/data.js"></script>\n';
htmlHeadContents += '<script src="/interceptor-functions.js"></script>\n';
htmlHeadContents += '<script src="/intercept-p5.js"></script>\n';
htmlHeadContents += '<script type="text/javascript" src="http://chir.ag/projects/ntc/ntc.js"></script>';
htmlFile = htmlFile.replace(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi, `<head>\n${htmlHeadContents}\n</head>`);
}
// const htmlHead = htmlFile.match(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi);
// const headRegex = new RegExp('head', 'i');
// let htmlHeadContents = htmlHead[0].split(headRegex)[1];
// htmlHeadContents = htmlHeadContents.slice(1, htmlHeadContents.length - 2);
// htmlHeadContents += '<link rel="stylesheet" type="text/css" href="/preview-styles.css" />\n';
// htmlFile = htmlFile.replace(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi, `<head>\n${htmlHeadContents}\n</head>`);
htmlFile += hijackConsoleScript;
return htmlFile;
@ -185,6 +181,7 @@ class PreviewFrame extends React.Component {
PreviewFrame.propTypes = {
isPlaying: PropTypes.bool.isRequired,
textOutput: PropTypes.bool.isRequired,
head: PropTypes.object.isRequired,
content: PropTypes.string.isRequired,
htmlFile: PropTypes.shape({

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

@ -124,6 +124,8 @@ class IDEView extends React.Component {
setAutosave={this.props.setAutosave}
lintWarning={this.props.preferences.lintWarning}
setLintWarning={this.props.setLintWarning}
textOutput={this.props.preferences.textOutput}
setTextOutput={this.props.setTextOutput}
/>
<div className="editor-preview-container">
<SplitPane
@ -198,6 +200,7 @@ class IDEView extends React.Component {
<link type="text/css" rel="stylesheet" href="/preview-styles.css" />
}
isPlaying={this.props.ide.isPlaying}
textOutput={this.props.preferences.textOutput}
dispatchConsoleEvent={this.props.dispatchConsoleEvent}
/>
</div>
@ -264,7 +267,8 @@ IDEView.propTypes = {
indentationAmount: PropTypes.number.isRequired,
isTabIndent: PropTypes.bool.isRequired,
autosave: PropTypes.bool.isRequired,
lintWarning: PropTypes.bool.isRequired
lintWarning: PropTypes.bool.isRequired,
textOutput: PropTypes.bool.isRequired
}).isRequired,
closePreferences: PropTypes.func.isRequired,
setFontSize: PropTypes.func.isRequired,
@ -273,6 +277,7 @@ IDEView.propTypes = {
indentWithSpace: PropTypes.func.isRequired,
setAutosave: PropTypes.func.isRequired,
setLintWarning: PropTypes.func.isRequired,
setTextOutput: PropTypes.func.isRequired,
files: PropTypes.array.isRequired,
updateFileContent: PropTypes.func.isRequired,
selectedFile: PropTypes.shape({

5
client/modules/IDE/reducers/preferences.js
View file

@ -5,7 +5,8 @@ const initialState = {
indentationAmount: 2,
isTabIndent: true,
autosave: true,
lintWarning: false
lintWarning: false,
textOutput: false
};
const preferences = (state = initialState, action) => {
@ -26,6 +27,8 @@ const preferences = (state = initialState, action) => {
return Object.assign({}, state, { autosave: action.value });
case ActionTypes.SET_LINT_WARNING:
return Object.assign({}, state, { lintWarning: action.value });
case ActionTypes.SET_TEXT_OUTPUT:
return Object.assign({}, state, { textOutput: action.value });
case ActionTypes.SET_PREFERENCES:
return action.preferences;
default:

4
server/models/user.js
View file

@ -13,7 +13,9 @@ const userSchema = new Schema({
fontSize: { type: Number, default: 18 },
indentationAmount: { type: Number, default: 2 },
isTabIndent: { type: Boolean, default: false },
autosave: { type: Boolean, default: true }
autosave: { type: Boolean, default: true },
lintWarning: { type: Boolean, default: false },
textOutput: { type: Boolean, default: false }
}
}, { timestamps: true });