From 66eff965c99f4cd8c9757a0c2f58ba1f212bd2b8 Mon Sep 17 00:00:00 2001
From: Emma Dauterman <evd2014@gmail.com>
Date: Mon, 22 Aug 2016 17:48:31 -0700
Subject: [PATCH] Blockly Factory: Workspace Factory Import Buttons (#578)

* Split import into 2 buttons, made file endings consistent

* Nit spelling

* Nit removed logging message
---
 .../block_exporter_controller.js              | 12 ++++--
 demos/blocklyfactory/index.html               | 26 +++++++-----
 .../workspacefactory/wfactory_controller.js   |  2 +-
 .../workspacefactory/wfactory_init.js         | 41 ++++++++++++++-----
 4 files changed, 56 insertions(+), 25 deletions(-)

diff --git a/demos/blocklyfactory/block_exporter_controller.js b/demos/blocklyfactory/block_exporter_controller.js
index 5d0c83063..d6c6fd649 100644
--- a/demos/blocklyfactory/block_exporter_controller.js
+++ b/demos/blocklyfactory/block_exporter_controller.js
@@ -143,9 +143,9 @@ BlockExporterController.prototype.export = function() {
       // Get block definition code in the selected format for the blocks.
       var blockDefs = this.tools.getBlockDefs(blockXmlMap,
           definitionFormat);
-      // Download the file.
+      // Download the file, using .js file ending for JSON or Javascript.
       FactoryUtils.createAndDownloadFile(
-          blockDefs, blockDef_filename, definitionFormat);
+          blockDefs, blockDef_filename, 'javascript');
     }
   }
 
@@ -158,9 +158,15 @@ BlockExporterController.prototype.export = function() {
       // Get generator stub code in the selected language for the blocks.
       var genStubs = this.tools.getGeneratorCode(blockXmlMap,
           language);
+      // Get the correct file extension.
+      if (language == 'JavaScript') {
+        var fileType = 'javascript';
+      } else {
+        var fileType = 'plain';
+      }
       // Download the file.
       FactoryUtils.createAndDownloadFile(
-          genStubs, generatorStub_filename, language);
+          genStubs, generatorStub_filename, fileType);
     }
   }
 
diff --git a/demos/blocklyfactory/index.html b/demos/blocklyfactory/index.html
index 4beb7f029..b9f47a06d 100644
--- a/demos/blocklyfactory/index.html
+++ b/demos/blocklyfactory/index.html
@@ -124,16 +124,22 @@
   <div id="workspaceFactoryContent">
     <p>
         <div class="dropdown">
-        <button id="button_import">Import</button>
-          <div id="dropdownDiv_import" class="dropdown-content">
-            <input type="file" id="input_importToolbox" class="inputfile"></input>
-            <label for="input_importToolbox">Toolbox</label>
-            <input type="file" id="input_importPreload" class="inputfile"</input>
-            <label for="input_importPreload">Workspace Blocks</label>
-            <input type="file" id="input_importCategoryJson" class="inputfile"</input>
-            <label for="input_importCategoryJson">Blocks from JSON</label>
-            <input type="file" id="input_importCategoryJs" class="inputfile"</input>
-            <label for="input_importCategoryJs">Blocks from Javascript</label>
+        <button id="button_importBlocks">Import Custom Blocks</button>
+          <div id="dropdownDiv_importBlocks" class="dropdown-content">
+            <input type="file" id="input_importBlocksJson" accept=".js, .json, .txt" class="inputfile"</input>
+            <label for="input_importBlocksJson">From JSON</label>
+            <input type="file" id="input_importBlocksJs" accept=".js, .txt" class="inputfile"</input>
+            <label for="input_importBlocksJs">From Javascript</label>
+          </div>
+        </div>
+
+        <div class="dropdown">
+        <button id="button_load">Load to Edit</button>
+          <div id="dropdownDiv_load" class="dropdown-content">
+            <input type="file" id="input_loadToolbox" accept=".xml" class="inputfile"></input>
+            <label for="input_loadToolbox">Toolbox</label>
+            <input type="file" id="input_loadPreload" accept=".xml" class="inputfile"</input>
+            <label for="input_loadPreload">Workspace Blocks</label>
           </div>
         </div>
 
diff --git a/demos/blocklyfactory/workspacefactory/wfactory_controller.js b/demos/blocklyfactory/workspacefactory/wfactory_controller.js
index 192b8d21c..2c42b865f 100644
--- a/demos/blocklyfactory/workspacefactory/wfactory_controller.js
+++ b/demos/blocklyfactory/workspacefactory/wfactory_controller.js
@@ -366,7 +366,7 @@ WorkspaceFactoryController.prototype.exportOptionsFile = function() {
   this.generateNewOptions();
   // TODO(evd2014): Use Regex to prettify JSON generated.
   var data = new Blob([JSON.stringify(this.model.options)],
-      {type: 'text/plain'});
+      {type: 'text/javascript'});
   this.view.createAndDownloadFile(fileName, data);
 };
 
diff --git a/demos/blocklyfactory/workspacefactory/wfactory_init.js b/demos/blocklyfactory/workspacefactory/wfactory_init.js
index 89249b2be..09cb479b6 100644
--- a/demos/blocklyfactory/workspacefactory/wfactory_init.js
+++ b/demos/blocklyfactory/workspacefactory/wfactory_init.js
@@ -232,7 +232,9 @@ WorkspaceFactoryInit.assignWorkspaceFactoryClickHandlers_ =
       ('click',
       function() {
         document.getElementById('dropdownDiv_export').classList.toggle("show");
-        document.getElementById('dropdownDiv_import').classList.remove("show");
+        document.getElementById('dropdownDiv_load').classList.remove("show");
+        document.getElementById('dropdownDiv_importBlocks').classList.
+            remove("show");
       })
 
   document.getElementById('button_print').addEventListener
@@ -296,47 +298,64 @@ WorkspaceFactoryInit.assignWorkspaceFactoryClickHandlers_ =
             remove("show");
       });
 
-document.getElementById('button_import').addEventListener
+document.getElementById('button_importBlocks').addEventListener
       ('click',
       function() {
-        document.getElementById('dropdownDiv_import').classList.toggle("show");
+        document.getElementById('dropdownDiv_importBlocks').classList.
+            toggle("show");
         document.getElementById('dropdownDiv_export').classList.remove("show");
+        document.getElementById('dropdownDiv_load').classList.remove("show");
       });
 
-  document.getElementById('input_importToolbox').addEventListener
+  document.getElementById('button_load').addEventListener
+      ('click',
+      function() {
+        document.getElementById('dropdownDiv_load').classList.toggle("show");
+        document.getElementById('dropdownDiv_export').classList.remove("show");
+        document.getElementById('dropdownDiv_importBlocks').classList.
+            remove("show");
+      });
+
+  document.getElementById('input_loadToolbox').addEventListener
       ('change',
       function() {
         controller.importFile(event.target.files[0],
             WorkspaceFactoryController.MODE_TOOLBOX);
-        document.getElementById('dropdownDiv_import').classList.remove("show");
+        document.getElementById('dropdownDiv_load').classList.remove("show");
       });
 
-  document.getElementById('input_importPreload').addEventListener
+  document.getElementById('input_loadPreload').addEventListener
       ('change',
       function() {
         controller.importFile(event.target.files[0],
             WorkspaceFactoryController.MODE_PRELOAD);
-        document.getElementById('dropdownDiv_import').classList.remove("show");
+        document.getElementById('dropdownDiv_load').classList.remove("show");
       });
 
-  document.getElementById('input_importCategoryJson').addEventListener
+  document.getElementById('input_importBlocksJson').addEventListener
       ('change',
       function() {
         controller.importBlocks(event.target.files[0],'JSON');
-        document.getElementById('dropdownDiv_import').classList.remove("show");
+        document.getElementById('dropdownDiv_importBlocks').classList.
+            remove("show");
       });
 
-  document.getElementById('input_importCategoryJs').addEventListener
+  document.getElementById('input_importBlocksJs').addEventListener
       ('change',
       function() {
         controller.importBlocks(event.target.files[0],'JavaScript');
-        document.getElementById('dropdownDiv_import').classList.remove("show");
+        document.getElementById('dropdownDiv_importBlocks').classList.
+            remove("show");
       });
 
   document.getElementById('button_clear').addEventListener
       ('click',
       function() {
         controller.clearToolbox();
+        document.getElementById('dropdownDiv_importBlocks').classList.
+            remove("show");
+        document.getElementById('dropdownDiv_export').classList.remove("show");
+        document.getElementById('dropdownDiv_load').classList.remove("show");
       });
 
   document.getElementById('dropdown_addShadow').addEventListener