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_AUTOSAVE = 'SET_AUTOSAVE';
export const SET_LINT_WARNING = 'SET_LINT_WARNING'; export const SET_LINT_WARNING = 'SET_LINT_WARNING';
export const SET_PREFERENCES = 'SET_PREFERENCES'; export const SET_PREFERENCES = 'SET_PREFERENCES';
export const SET_TEXT_OUTPUT = 'SET_TEXT_OUTPUT';
// eventually, handle errors more specifically and better // eventually, handle errors more specifically and better
export const ERROR = 'ERROR'; 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: true,
'preference__option--selected': !this.props.lintWarning '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 ( return (
<section className={preferencesContainerClass} tabIndex="0" title="preference-menu"> <section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
<div className="preferences__heading"> <div className="preferences__heading">
@ -169,6 +177,21 @@ class Preferences extends React.Component {
>Off</button> >Off</button>
</div> </div>
</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> </section>
); );
} }
@ -186,6 +209,8 @@ Preferences.propTypes = {
setFontSize: PropTypes.func.isRequired, setFontSize: PropTypes.func.isRequired,
autosave: PropTypes.bool.isRequired, autosave: PropTypes.bool.isRequired,
setAutosave: PropTypes.func.isRequired, setAutosave: PropTypes.func.isRequired,
textOutput: PropTypes.bool.isRequired,
setTextOutput: PropTypes.func.isRequired,
lintWarning: PropTypes.bool.isRequired, lintWarning: PropTypes.bool.isRequired,
setLintWarning: PropTypes.func.isRequired setLintWarning: PropTypes.func.isRequired
}; };

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

@ -128,6 +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) {
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];
@ -137,13 +138,8 @@ class PreviewFrame extends React.Component {
htmlHeadContents += '<script src="/intercept-p5.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>'; 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>`); 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; htmlFile += hijackConsoleScript;
return htmlFile; return htmlFile;
@ -185,6 +181,7 @@ class PreviewFrame extends React.Component {
PreviewFrame.propTypes = { PreviewFrame.propTypes = {
isPlaying: PropTypes.bool.isRequired, isPlaying: PropTypes.bool.isRequired,
textOutput: PropTypes.bool.isRequired,
head: PropTypes.object.isRequired, head: PropTypes.object.isRequired,
content: PropTypes.string.isRequired, content: PropTypes.string.isRequired,
htmlFile: PropTypes.shape({ 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} setAutosave={this.props.setAutosave}
lintWarning={this.props.preferences.lintWarning} lintWarning={this.props.preferences.lintWarning}
setLintWarning={this.props.setLintWarning} setLintWarning={this.props.setLintWarning}
textOutput={this.props.preferences.textOutput}
setTextOutput={this.props.setTextOutput}
/> />
<div className="editor-preview-container"> <div className="editor-preview-container">
<SplitPane <SplitPane
@ -198,6 +200,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}
textOutput={this.props.preferences.textOutput}
dispatchConsoleEvent={this.props.dispatchConsoleEvent} dispatchConsoleEvent={this.props.dispatchConsoleEvent}
/> />
</div> </div>
@ -264,7 +267,8 @@ IDEView.propTypes = {
indentationAmount: PropTypes.number.isRequired, indentationAmount: PropTypes.number.isRequired,
isTabIndent: PropTypes.bool.isRequired, isTabIndent: PropTypes.bool.isRequired,
autosave: PropTypes.bool.isRequired, autosave: PropTypes.bool.isRequired,
lintWarning: PropTypes.bool.isRequired lintWarning: PropTypes.bool.isRequired,
textOutput: PropTypes.bool.isRequired
}).isRequired, }).isRequired,
closePreferences: PropTypes.func.isRequired, closePreferences: PropTypes.func.isRequired,
setFontSize: PropTypes.func.isRequired, setFontSize: PropTypes.func.isRequired,
@ -273,6 +277,7 @@ IDEView.propTypes = {
indentWithSpace: PropTypes.func.isRequired, indentWithSpace: PropTypes.func.isRequired,
setAutosave: PropTypes.func.isRequired, setAutosave: PropTypes.func.isRequired,
setLintWarning: PropTypes.func.isRequired, setLintWarning: PropTypes.func.isRequired,
setTextOutput: PropTypes.func.isRequired,
files: PropTypes.array.isRequired, files: PropTypes.array.isRequired,
updateFileContent: PropTypes.func.isRequired, updateFileContent: PropTypes.func.isRequired,
selectedFile: PropTypes.shape({ selectedFile: PropTypes.shape({

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

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

4
server/models/user.js
View file

@ -13,7 +13,9 @@ const userSchema = new Schema({
fontSize: { type: Number, default: 18 }, fontSize: { type: Number, default: 18 },
indentationAmount: { type: Number, default: 2 }, indentationAmount: { type: Number, default: 2 },
isTabIndent: { type: Boolean, default: false }, 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 }); }, { timestamps: true });