Blockly Factory: Foundation for Integrating Workspace Factory (#533)

* working tabs using closure

expanded export settings menu

added old blockfactory and moved new files into blocklyfactory

expanded export to lay groundwork for workspace factory integration

fixed BlockFactory escapeString bug

* added TODO for refactoring onTab

demos/blocklyfactory/app_controller.js

@@ -47,6 +47,16 @@ AppController = function() {
   // Initialize Block Exporter
   this.exporter =
       new BlockExporterController(this.blockLibraryController.storage);
+
+  // Map of tab type to the div element for the tab.
+  this.tabMap = {
+    'BLOCK_FACTORY' : goog.dom.getElement('blockFactory_tab'),
+    'WORKSPACE_FACTORY': goog.dom.getElement('workspaceFactory_tab'),
+    'EXPORTER' : goog.dom.getElement('blocklibraryExporter_tab')
+  };
+
+  // Selected tab.
+  this.selectedTab = 'BLOCK_FACTORY';
 };
 
 /**
@@ -197,71 +207,92 @@ AppController.prototype.onSelectedBlockChanged = function(blockLibraryDropdown)
 };
 
 /**
- * Add tab handlers to allow switching between the Block Factory
- * tab and the Block Exporter tab.
+ * Add click handlers to each tab to allow switching between the Block Factory,
+ * Workspace Factory, and Block Exporter tab.
  *
- * @param {string} blockFactoryTabID - ID of element containing Block Factory
- *    tab
- * @param {string} blockExporterTabID - ID of element containing Block
- *    Exporter tab
+ * @param {!Object} tabMap - Map of tab name to div element that is the tab.
  */
-AppController.prototype.addTabHandlers =
-    function(blockFactoryTabID, blockExporterTabID) {
-  // Assign this instance of Block Factory Expansion to self in order to
-  // keep the reference to this object upon tab click.
+AppController.prototype.addTabHandlers = function(tabMap) {
   var self = this;
-  // Get div elements representing tabs
-  var blockFactoryTab = goog.dom.getElement(blockFactoryTabID);
-  var blockExporterTab = goog.dom.getElement(blockExporterTabID);
-  // Add event listeners.
-  blockFactoryTab.addEventListener('click',
-      function() {
-        self.onFactoryTab(blockFactoryTab, blockExporterTab);
-      });
-  blockExporterTab.addEventListener('click',
-      function() {
-        self.onExporterTab(blockFactoryTab, blockExporterTab);
-      });
+  for (var tabName in tabMap) {
+    var tab = tabMap[tabName];
+    // Use an additional closure to correctly assign the tab callback.
+    tab.addEventListener('click', self.makeTabClickHandler_(tabName));
+  }
 };
 
 /**
- * Tied to 'Block Factory' Tab. Shows Block Factory and Block Library.
+ * Set the selected tab.
+ * @private
  *
- * @param {string} blockFactoryTab - div element that is the Block Factory tab
- * @param {string} blockExporterTab - div element that is the Block Exporter tab
+ * @param {string} tabName 'BLOCK_FACTORY', 'WORKSPACE_FACTORY', or 'EXPORTER'
  */
-AppController.prototype.onFactoryTab =
-    function(blockFactoryTab, blockExporterTab) {
-  // Turn factory tab on and exporter tab off.
-  goog.dom.classlist.addRemove(blockFactoryTab, 'taboff', 'tabon');
-  goog.dom.classlist.addRemove(blockExporterTab, 'tabon', 'taboff');
-
-  // Hide container of exporter.
-  BlockFactory.hide('blockLibraryExporter');
-
-  // Resize to render workspaces' toolboxes correctly.
-  window.dispatchEvent(new Event('resize'));
+AppController.prototype.setSelected_ = function(tabName) {
+  this.selectedTab = tabName;
 };
 
 /**
- * Tied to 'Block Exporter' Tab. Shows Block Exporter.
+ * Creates the tab click handler specific to the tab specified.
+ * @private
  *
- * @param {string} blockFactoryTab - div element that is the Block Factory tab
- * @param {string} blockExporterTab - div element that is the Block Exporter tab
+ * @param {string} tabName 'BLOCK_FACTORY', 'WORKSPACE_FACTORY', or 'EXPORTER'
+ * @return {Function} The tab click handler.
  */
-AppController.prototype.onExporterTab =
-    function(blockFactoryTab, blockExporterTab) {
-  // Turn exporter tab on and factory tab off.
-  goog.dom.classlist.addRemove(blockFactoryTab, 'tabon', 'taboff');
-  goog.dom.classlist.addRemove(blockExporterTab, 'taboff', 'tabon');
+AppController.prototype.makeTabClickHandler_ = function(tabName) {
+  var self = this;
+  return function() {
+    self.setSelected_(tabName);
+    self.onTab();
+  };
+};
 
-  // Update toolbox to reflect current block library.
-  this.exporter.updateToolbox();
+/**
+ * Called on each tab click. Hides and shows specific content based on which tab
+ * (Block Factory, Workspace Factory, or Exporter) is selected.
+ *
+ * TODO(quachtina96): Refactor the code to avoid repetition of addRemove.
+ */
+AppController.prototype.onTab = function() {
+  // Get tab div elements.
+  var blockFactoryTab = this.tabMap['BLOCK_FACTORY'];
+  var exporterTab = this.tabMap['EXPORTER'];
+  var workspaceFactoryTab = this.tabMap['WORKSPACE_FACTORY'];
 
-  // Show container of exporter.
-  BlockFactory.show('blockLibraryExporter');
+  if (this.selectedTab == 'EXPORTER') {
+    // Turn exporter tab on and other tabs off.
+    goog.dom.classlist.addRemove(exporterTab, 'taboff', 'tabon');
+    goog.dom.classlist.addRemove(blockFactoryTab, 'tabon', 'taboff');
+    goog.dom.classlist.addRemove(workspaceFactoryTab, 'tabon', 'taboff');
 
-  // Resize to render workspaces' toolboxes correctly.
+    // Update toolbox to reflect current block library.
+    this.exporter.updateToolbox();
+
+    // Show container of exporter.
+    BlockFactory.show('blockLibraryExporter');
+    BlockFactory.hide('workspaceFactoryContent');
+
+  } else if (this.selectedTab ==  'BLOCK_FACTORY') {
+    // Turn factory tab on and other tabs off.
+    goog.dom.classlist.addRemove(blockFactoryTab, 'taboff', 'tabon');
+    goog.dom.classlist.addRemove(exporterTab, 'tabon', 'taboff');
+    goog.dom.classlist.addRemove(workspaceFactoryTab, 'tabon', 'taboff');
+
+    // Hide container of exporter.
+    BlockFactory.hide('blockLibraryExporter');
+    BlockFactory.hide('workspaceFactoryContent');
+
+  } else if (this.selectedTab == 'WORKSPACE_FACTORY') {
+    console.log('workspaceFactoryTab');
+    goog.dom.classlist.addRemove(workspaceFactoryTab, 'taboff', 'tabon');
+    goog.dom.classlist.addRemove(blockFactoryTab, 'tabon', 'taboff');
+    goog.dom.classlist.addRemove(exporterTab, 'tabon', 'taboff');
+    // Hide container of exporter.
+    BlockFactory.hide('blockLibraryExporter');
+    // Show workspace factory container.
+    BlockFactory.show('workspaceFactoryContent');
+  }
+
+  // Resize to render workspaces' toolboxes correctly for all tabs.
   window.dispatchEvent(new Event('resize'));
 };
 
@@ -273,13 +304,13 @@ AppController.prototype.assignExporterClickHandlers = function() {
   // Export blocks when the user submits the export settings.
   document.getElementById('exporterSubmitButton').addEventListener('click',
       function() {
-        self.exporter.exportBlocks();
+        self.exporter.export();
       });
   document.getElementById('clearSelectedButton').addEventListener('click',
       function() {
         self.exporter.clearSelectedBlocks();
       });
-  document.getElementById('addAllButton').addEventListener('click',
+  document.getElementById('addAllFromLibButton').addEventListener('click',
       function() {
         self.exporter.addAllBlocksToWorkspace();
       });
@@ -435,7 +466,7 @@ AppController.prototype.init = function() {
        media: '../../media/'});
 
   // Add tab handlers for switching between Block Factory and Block Exporter.
-  this.addTabHandlers("blockfactory_tab", "blocklibraryExporter_tab");
+  this.addTabHandlers(this.tabMap);
 
   this.exporter.addChangeListenersToSelectorWorkspace();
 

demos/blocklyfactory/block_exporter_controller.js

@@ -90,20 +90,47 @@ BlockExporterController.prototype.getSelectedBlockTypes_ = function() {
 
 /**
  * Get selected blocks from selector workspace, pulls info from the Export
- * Settings form in Block Exporter, and downloads block code accordingly.
+ * Settings form in Block Exporter, and downloads code accordingly.
+ *
+ * TODO(quachtina96): allow export as zip.
  */
-BlockExporterController.prototype.exportBlocks = function() {
+BlockExporterController.prototype.export = function() {
+  // Get selected blocks' information.
   var blockTypes = this.getSelectedBlockTypes_();
   var blockXmlMap = this.blockLibStorage.getBlockXmlMap(blockTypes);
 
-  // Pull inputs from the Export Settings form.
+  // Pull workspace-related settings from the Export Settings form.
+  var wantToolbox = document.getElementById('toolboxCheck').checked;
+  var wantPreloadedWorkspace =
+      document.getElementById('preloadedWorkspaceCheck').checked;
+  var wantWorkspaceOptions =
+      document.getElementById('workspaceOptsCheck').checked;
+
+  // Pull block definition(s) settings from the Export Settings form.
+  var wantBlockDef = document.getElementById('blockDefCheck').checked;
   var definitionFormat = document.getElementById('exportFormat').value;
-  var language = document.getElementById('exportLanguage').value;
   var blockDef_filename = document.getElementById('blockDef_filename').value;
+
+  // Pull block generator stub(s) settings from the Export Settings form.
+  var wantGenStub = document.getElementById('genStubCheck').checked;
+  var language = document.getElementById('exportLanguage').value;
   var generatorStub_filename = document.getElementById(
       'generatorStub_filename').value;
-  var wantBlockDef = document.getElementById('blockDefCheck').checked;
-  var wantGenStub = document.getElementById('genStubCheck').checked;
+
+  if (wantToolbox) {
+    // TODO(quachtina96): create and download file once wfactory has been
+    // integrated.
+  }
+
+  if (wantPreloadedWorkspace) {
+    // TODO(quachtina96): create and download file once wfactory has been
+    // integrated.
+  }
+
+  if (wantWorkspaceOptions) {
+    // TODO(quachtina96): create and download file once wfactory has been
+    // integrated.
+  }
 
   if (wantBlockDef) {
     // User wants to export selected blocks' definitions.
@@ -134,6 +161,7 @@ BlockExporterController.prototype.exportBlocks = function() {
           genStubs, generatorStub_filename, language);
     }
   }
+
 };
 
 /**

demos/blocklyfactory/block_exporter_tools.js

@@ -179,6 +179,7 @@ BlockExporterTools.prototype.addBlockDefinitions = function(blockXmlMap) {
  * Pulls information about all blocks in the block library to generate xml
  * for the selector workpace's toolbox.
  *
+ * @param {!BlockLibraryStorage} blockLibStorage - Block Library Storage object.
  * @return {!Element} Xml representation of the toolbox.
  */
 BlockExporterTools.prototype.generateToolboxFromLibrary

demos/blocklyfactory/factory.css

@@ -161,6 +161,16 @@ button, .buttonStyle {
   width: 50%;
 }
 
+/* Workspace Factory */
+
+#workspaceFactoryContent {
+  clear: both;
+  display: none;
+  height: 100%;
+}
+
+/* Exporter */
+
 #blockLibraryExporter {
   clear: both;
   display: none;
@@ -170,12 +180,13 @@ button, .buttonStyle {
 #exportSelector {
   float: left;
   height: 75%;
-  width: 60%;
+  width: 30%;
 }
 
 #exportSettings {
-  margin: auto;
+  float: left;
   padding: 16px;
+  width: 30%;
   overflow: hidden;
 }
 
@@ -183,6 +194,13 @@ button, .buttonStyle {
  display: none;
 }
 
+#exporterPreview {
+  float: right;
+  padding: 16px;
+  overflow: hidden;
+  background-color: blue;
+}
+
 /* Tabs */
 
 .tab {

demos/blocklyfactory/index.html

@@ -40,27 +40,41 @@
     <a href="../index.html">Demos</a> &gt; Blockly Factory</h1>
 
   <div id="tabContainer">
-    <div id="blockfactory_tab" class="tab tabon"> Block Factory</div>
+    <div id="blockFactory_tab" class="tab tabon"> Block Factory</div>
     <div class="tabGap"></div>
-    <div id="blocklibraryExporter_tab" class="tab taboff"> Block Library Exporter</div>
+    <div id="workspaceFactory_tab" class="tab taboff"> Workspace Factory</div>
+    <div class="tabGap"></div>
+    <div id="blocklibraryExporter_tab" class="tab taboff"> Exporter</div>
   </div>
 
   <div id="blockLibraryExporter">
-    <div id="exporterButtons">
-      <button id="clearSelectedButton"> Clear Blocks </button>
-      <button id="addAllButton"> Add All Stored Blocks </button>
-    </div>
+    <h3> Block Selector </h3>
     <div id="helperTextDiv">
       <p id="helperText"> Drag blocks into your workspace to select them for download.</p>
     </div>
+    <div id="exporterButtons">
+      <button id="clearSelectedButton"> Clear Blocks </button>
+      <button id="addAllFromLibButton"> Add All Stored Blocks </button>
+      <button id="addAllUsedButton"> Add All Used Blocks </button>
+    </div>
     <!-- Inject exportSelectorWorkspace into this div -->
     <div id="exportSelector"></div>
     <!-- Users may customize export settings through this form -->
     <div id="exportSettings">
-      <h3> Block Export Settings </h3>
+      <h3> Export Settings </h3>
       <br>
       <form id="exportSettingsForm">
-        Download Block Definition:
+        Toolbox Xml:
+        <input type="checkbox" id="toolboxCheck">
+        <br>
+        Pre-loaded Workspace:
+        <input type="checkbox" id="preloadedWorkspaceCheck">
+        <br>
+        Workspace Option(s):
+        <input type="checkbox" id="workspaceOptsCheck">
+        <br>
+        <br>
+        Block Definition(s):
         <input type="checkbox" id="blockDefCheck"><br>
               Language code:
                 <select id="exportFormat">
@@ -68,9 +82,10 @@
                   <option value="JavaScript">JavaScript</option>
                 </select><br>
           Block Definition(s) File Name:<br>
-          <input type="text" id="blockDef_filename"><br>
+          <input type="text" id="blockDef_filename">
           <br>
-        Download Generator Stubs:
+          <br>
+        Generator Stub(s):
         <input type="checkbox" id="genStubCheck"><br>
                 <select id="exportLanguage">
                   <option value="JavaScript">JavaScript</option>
@@ -87,6 +102,9 @@
     </div>
   </div>
 
+  <div id="workspaceFactoryContent">
+  </div>
+
   <table id="blockFactoryContent">
     <tr>
       <td width="50%" height="5%">