add preferences to include text output

client/constants.js

@@ -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';

client/modules/IDE/actions/preferences.js

@@ -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);
+    }
+  };
+}

client/modules/IDE/components/Preferences.js

@@ -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
 };

client/modules/IDE/components/PreviewFrame.js

@@ -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);
+    if (this.props.textOutput) {
-    const headRegex = new RegExp('head', 'i');
+      const htmlHead = htmlFile.match(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi);
-    let htmlHeadContents = htmlHead[0].split(headRegex)[1];
+      const headRegex = new RegExp('head', 'i');
-    htmlHeadContents = htmlHeadContents.slice(1, htmlHeadContents.length - 2);
+      let htmlHeadContents = htmlHead[0].split(headRegex)[1];
-    htmlHeadContents += '<script src="/data.js"></script>\n';
+      htmlHeadContents = htmlHeadContents.slice(1, htmlHeadContents.length - 2);
-    htmlHeadContents += '<script src="/interceptor-functions.js"></script>\n';
+      htmlHeadContents += '<script src="/data.js"></script>\n';
-    htmlHeadContents += '<script src="/intercept-p5.js"></script>\n';
+      htmlHeadContents += '<script src="/interceptor-functions.js"></script>\n';
-    htmlHeadContents += '<script type="text/javascript" src="http://chir.ag/projects/ntc/ntc.js"></script>';
+      htmlHeadContents += '<script src="/intercept-p5.js"></script>\n';
-    htmlFile = htmlFile.replace(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi, `<head>\n${htmlHeadContents}\n</head>`);
+      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({

client/modules/IDE/pages/IDEView.js

@@ -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({

client/modules/IDE/reducers/preferences.js

@@ -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:

server/models/user.js

@@ -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 });