React Wrapper Step 3: Split page.html.ejs along column divide

apps/src/JsDebuggerUi.js

@@ -73,7 +73,7 @@ var JsDebuggerUi = module.exports = function (runApp) {
  * @param {!Object} options
  * @param {!boolean} options.showButtons - Whether to show the debug buttons
  * @param {!boolean} options.showConsole - Whether to show the debug console
- * @returns {string} of HTML markup to be embedded in page.html.ejs
+ * @returns {string} of HTML markup to be embedded in codeWorkspace.html.ejs
  */
 JsDebuggerUi.prototype.getMarkup = function (assetUrl, options) {
   return require('./JsDebuggerUi.html.ejs')({

apps/src/applab/applab.js

@@ -18,7 +18,8 @@ var apiBlockly = require('./apiBlockly');
 var dontMarshalApi = require('./dontMarshalApi');
 var blocks = require('./blocks');
 var AppView = require('../templates/AppView.jsx');
-var page = require('../templates/page.html.ejs');
+var codeWorkspaceEjs = require('../templates/codeWorkspace.html.ejs');
+var visualizationColumnEjs = require('../templates/visualizationColumn.html.ejs');
 var dom = require('../dom');
 var parseXmlElement = require('../xml').parseElement;
 var utils = require('../utils');
@@ -739,16 +740,11 @@ Applab.init = function(config) {
   AppStorage.populateTable(level.dataTables, false); // overwrite = false
   AppStorage.populateKeyValue(level.dataProperties, false); // overwrite = false
 
-  var renderCodeApp = function () {
-    return page({
+  var renderCodeWorkspace = function () {
+    return codeWorkspaceEjs({
       assetUrl: studioApp.assetUrl,
       data: {
         localeDirection: studioApp.localeDirection(),
-        visualization: require('./visualization.html.ejs')({
-          appWidth: Applab.appWidth,
-          appHeight: Applab.footerlessAppHeight
-        }),
-        controls: firstControlsRow,
         extraControlRows: extraControlRows,
         blockUsed: undefined,
         idealBlockNumber: undefined,
@@ -764,6 +760,25 @@ Applab.init = function(config) {
     });
   }.bind(this);
 
+  var renderVisualizationColumn = function () {
+    return visualizationColumnEjs({
+      assetUrl: studioApp.assetUrl,
+      data: {
+        visualization: require('./visualization.html.ejs')({
+          appWidth: Applab.appWidth,
+          appHeight: Applab.footerlessAppHeight
+        }),
+        controls: firstControlsRow,
+        extraControlRows: extraControlRows,
+        pinWorkspaceToBottom: true,
+        // TODO (brent) - seems a little gross that we've made this part of a
+        // template shared across all apps
+        // disable designMode if we're readonly
+        hasDesignMode: !config.readonlyWorkspace,
+      }
+    });
+  }.bind(this);
+
   var onMount = function () {
     studioApp.init(config);
 
@@ -853,8 +868,10 @@ Applab.init = function(config) {
 
   React.render(React.createElement(AppView, {
     assetUrl: studioApp.assetUrl,
-    requireLandscape: !(config.share || config.embed),
-    renderCodeApp: renderCodeApp,
+    isEmbedView: !!config.embed,
+    isShareView: !!config.share,
+    renderCodeWorkspace: renderCodeWorkspace,
+    renderVisualizationColumn: renderVisualizationColumn,
     onMount: onMount
   }), document.getElementById(config.containerId));
 };

apps/src/bounce/bounce.js

@@ -15,7 +15,8 @@ var tiles = require('./tiles');
 var codegen = require('../codegen');
 var api = require('./api');
 var AppView = require('../templates/AppView.jsx');
-var page = require('../templates/page.html.ejs');
+var codeWorkspaceEjs = require('../templates/codeWorkspace.html.ejs');
+var visualizationColumnEjs = require('../templates/visualizationColumn.html.ejs');
 var dom = require('../dom');
 var Hammer = require('../hammer');
 var utils = require('../utils');
@@ -773,13 +774,11 @@ Bounce.init = function(config) {
   config.enableShowCode = false;
   config.enableShowBlockCount = false;
 
-  var renderCodeApp = function () {
-    return page({
+  var renderCodeWorkspace = function () {
+    return codeWorkspaceEjs({
       assetUrl: studioApp.assetUrl,
       data: {
         localeDirection: studioApp.localeDirection(),
-        visualization: require('./visualization.html.ejs')(),
-        controls: require('./controls.html.ejs')({assetUrl: studioApp.assetUrl}),
         blockUsed: undefined,
         idealBlockNumber: undefined,
         editCode: level.editCode,
@@ -789,6 +788,16 @@ Bounce.init = function(config) {
     });
   };
 
+  var renderVisualizationColumn = function () {
+    return visualizationColumnEjs({
+      assetUrl: studioApp.assetUrl,
+      data: {
+        visualization: require('./visualization.html.ejs')(),
+        controls: require('./controls.html.ejs')({assetUrl: studioApp.assetUrl}),
+      }
+    });
+  };
+
   var onMount = function () {
     studioApp.init(config);
 
@@ -798,8 +807,10 @@ Bounce.init = function(config) {
 
   React.render(React.createElement(AppView, {
     assetUrl: studioApp.assetUrl,
-    requireLandscape: !(config.share || config.embed),
-    renderCodeApp: renderCodeApp,
+    isEmbedView: !!config.embed,
+    isShareView: !!config.share,
+    renderCodeWorkspace: renderCodeWorkspace,
+    renderVisualizationColumn: renderVisualizationColumn,
     onMount: onMount
   }), document.getElementById(config.containerId));
 };

apps/src/calc/calc.js

@@ -29,7 +29,8 @@ var calcMsg = require('./locale');
 var skins = require('../skins');
 var levels = require('./levels');
 var AppView = require('../templates/AppView.jsx');
-var page = require('../templates/page.html.ejs');
+var codeWorkspaceEjs = require('../templates/codeWorkspace.html.ejs');
+var visualizationColumnEjs = require('../templates/visualizationColumn.html.ejs');
 var dom = require('../dom');
 var blockUtils = require('../block_utils');
 var utils = require('../utils');
@@ -199,29 +200,39 @@ Calc.init = function(config) {
     }
   };
 
-  var renderCodeApp = function () {
-    return page({
+  var renderCodeWorkspace = function () {
+    return codeWorkspaceEjs({
       assetUrl: studioApp.assetUrl,
       data: {
         localeDirection: studioApp.localeDirection(),
-        visualization: require('./visualization.html.ejs')(),
-        controls: require('./controls.html.ejs')({
-          assetUrl: studioApp.assetUrl
-        }),
         blockUsed : undefined,
         idealBlockNumber : undefined,
         editCode: level.editCode,
         blockCounterClass : 'block-counter-default',
-        inputOutputTable: level.inputOutputTable,
         readonlyWorkspace: config.readonlyWorkspace
       }
     });
   };
 
+  var renderVisualizationColumn = function () {
+    return visualizationColumnEjs({
+      assetUrl: studioApp.assetUrl,
+      data: {
+        visualization: require('./visualization.html.ejs')(),
+        controls: require('./controls.html.ejs')({
+          assetUrl: studioApp.assetUrl
+        }),
+        inputOutputTable: level.inputOutputTable
+      }
+    });
+  };
+
   React.render(React.createElement(AppView, {
     assetUrl: studioApp.assetUrl,
-    requireLandscape: !(config.share || config.embed),
-    renderCodeApp: renderCodeApp,
+    isEmbedView: !!config.embed,
+    isShareView: !!config.share,
+    renderCodeWorkspace: renderCodeWorkspace,
+    renderVisualizationColumn: renderVisualizationColumn,
     onMount: studioApp.init.bind(studioApp, config)
   }), document.getElementById(config.containerId));
 };

apps/src/craft/craft.js

@@ -17,7 +17,8 @@ var houseLevels = require('./houseLevels');
 var levelbuilderOverrides = require('./levelbuilderOverrides');
 var MusicController = require('../MusicController');
 var AppView = require('../templates/AppView.jsx');
-var pageEJS = require('../templates/page.html.ejs');
+var codeWorkspaceEjs = require('../templates/codeWorkspace.html.ejs');
+var visualizationColumnEjs = require('../templates/visualizationColumn.html.ejs');
 
 var ResultType = studioApp.ResultType;
 var TestResults = studioApp.TestResults;
@@ -240,19 +241,27 @@ Craft.init = function (config) {
       break;
   }
 
-  var renderCodeApp = function () {
-    return pageEJS({
+  var renderCodeWorkspace = function () {
+    return codeWorkspaceEjs({
       assetUrl: studioApp.assetUrl,
       data: {
         localeDirection: studioApp.localeDirection(),
+        editCode: config.level.editCode,
+        blockCounterClass: 'block-counter-default',
+        readonlyWorkspace: config.readonlyWorkspace
+      }
+    });
+  };
+
+  var renderVisualizationColumn = function () {
+    return visualizationColumnEjs({
+      assetUrl: studioApp.assetUrl,
+      data: {
         visualization: require('./visualization.html.ejs')(),
         controls: require('./controls.html.ejs')({
           assetUrl: studioApp.assetUrl,
           shareable: config.level.shareable
-        }),
-        editCode: config.level.editCode,
-        blockCounterClass: 'block-counter-default',
-        readonlyWorkspace: config.readonlyWorkspace
+        })
       }
     });
   };
@@ -327,8 +336,10 @@ Craft.init = function (config) {
 
   React.render(React.createElement(AppView, {
     assetUrl: studioApp.assetUrl,
-    requireLandscape: !(config.share || config.embed),
-    renderCodeApp: renderCodeApp,
+    isEmbedView: !!config.embed,
+    isShareView: !!config.share,
+    renderCodeWorkspace: renderCodeWorkspace,
+    renderVisualizationColumn: renderVisualizationColumn,
     onMount: onMount
   }), document.getElementById(config.containerId));
 };

apps/src/eval/eval.js

@@ -30,7 +30,8 @@ var levels = require('./levels');
 var codegen = require('../codegen');
 var api = require('./api');
 var AppView = require('../templates/AppView.jsx');
-var page = require('../templates/page.html.ejs');
+var codeWorkspaceEjs = require('../templates/codeWorkspace.html.ejs');
+var visualizationColumnEjs = require('../templates/visualizationColumn.html.ejs');
 var dom = require('../dom');
 var blockUtils = require('../block_utils');
 var CustomEvalError = require('./evalError');
@@ -146,15 +147,11 @@ Eval.init = function(config) {
     }
   };
 
-  var renderCodeApp = function () {
-    return page({
+  var renderCodeWorkspace = function () {
+    return codeWorkspaceEjs({
       assetUrl: studioApp.assetUrl,
       data: {
         localeDirection: studioApp.localeDirection(),
-        visualization: require('./visualization.html.ejs')(),
-        controls: require('./controls.html.ejs')({
-          assetUrl: studioApp.assetUrl
-        }),
         blockUsed : undefined,
         idealBlockNumber : undefined,
         editCode: level.editCode,
@@ -164,10 +161,24 @@ Eval.init = function(config) {
     });
   };
 
+  var renderVisualizationColumn = function () {
+    return visualizationColumnEjs({
+      assetUrl: studioApp.assetUrl,
+      data: {
+        visualization: require('./visualization.html.ejs')(),
+        controls: require('./controls.html.ejs')({
+          assetUrl: studioApp.assetUrl
+        })
+      }
+    });
+  };
+
   React.render(React.createElement(AppView, {
     assetUrl: studioApp.assetUrl,
-    requireLandscape: !(config.share || config.embed),
-    renderCodeApp: renderCodeApp,
+    isEmbedView: !!config.embed,
+    isShareView: !!config.share,
+    renderCodeWorkspace: renderCodeWorkspace,
+    renderVisualizationColumn: renderVisualizationColumn,
     onMount: studioApp.init.bind(studioApp, config)
   }), document.getElementById(config.containerId));
 };

apps/src/flappy/flappy.js

@@ -14,7 +14,8 @@ var skins = require('../skins');
 var codegen = require('../codegen');
 var api = require('./api');
 var AppView = require('../templates/AppView.jsx');
-var page = require('../templates/page.html.ejs');
+var codeWorkspaceEjs = require('../templates/codeWorkspace.html.ejs');
+var visualizationColumnEjs = require('../templates/visualizationColumn.html.ejs');
 var dom = require('../dom');
 var constants = require('./constants');
 var utils = require('../utils');
@@ -575,13 +576,11 @@ Flappy.init = function(config) {
     config.blockArrangement.flappy_whenClick.y = row2;
   }
 
-  var renderCodeApp = function () {
-    return page({
+  var renderCodeWorkspace = function () {
+    return codeWorkspaceEjs({
       assetUrl: studioApp.assetUrl,
       data: {
         localeDirection: studioApp.localeDirection(),
-        visualization: require('./visualization.html.ejs')(),
-        controls: require('./controls.html.ejs')({assetUrl: studioApp.assetUrl, shareable: level.shareable}),
         blockUsed: undefined,
         idealBlockNumber: undefined,
         editCode: level.editCode,
@@ -591,6 +590,16 @@ Flappy.init = function(config) {
     });
   };
 
+  var renderVisualizationColumn = function () {
+    return visualizationColumnEjs({
+      assetUrl: studioApp.assetUrl,
+      data: {
+        visualization: require('./visualization.html.ejs')(),
+        controls: require('./controls.html.ejs')({assetUrl: studioApp.assetUrl, shareable: level.shareable})
+      }
+    });
+  };
+
   var onMount = function () {
     studioApp.init(config);
 
@@ -600,8 +609,10 @@ Flappy.init = function(config) {
 
   React.render(React.createElement(AppView, {
     assetUrl: studioApp.assetUrl,
-    requireLandscape: !(config.share || config.embed),
-    renderCodeApp: renderCodeApp,
+    isEmbedView: !!config.embed,
+    isShareView: !!config.share,
+    renderCodeWorkspace: renderCodeWorkspace,
+    renderVisualizationColumn: renderVisualizationColumn,
     onMount: onMount
   }), document.getElementById(config.containerId));
 };