From ff48285a86aa0a9c82a68a2e503c1aa1fb62fa63 Mon Sep 17 00:00:00 2001 From: Neil Fraser Date: Thu, 13 Oct 2016 20:18:44 -0700 Subject: [PATCH 01/13] Block factory cleanup. Fix one-based list option. --- core/options.js | 6 +- demos/blockfactory/factory.css | 5 - demos/blockfactory/index.html | 42 ++-- demos/blockfactory/workspacefactory/style.css | 224 ------------------ .../workspacefactory/wfactory_controller.js | 4 +- .../workspacefactory/wfactory_init.js | 28 +-- .../workspacefactory/wfactory_view.js | 8 +- 7 files changed, 46 insertions(+), 271 deletions(-) delete mode 100644 demos/blockfactory/workspacefactory/style.css diff --git a/core/options.js b/core/options.js index f5d2b7d94..f9ab04005 100644 --- a/core/options.js +++ b/core/options.js @@ -104,7 +104,11 @@ Blockly.Options = function(options) { // 'path' is a deprecated option which has been replaced by 'media'. pathToMedia = options['path'] + 'media/'; } - var oneBasedIndex = !options['oneBasedIndex']; + if (options['oneBasedIndex'] === undefined) { + var oneBasedIndex = true; + } else { + var oneBasedIndex = !!options['oneBasedIndex']; + } this.RTL = rtl; this.oneBasedIndex = oneBasedIndex; diff --git a/demos/blockfactory/factory.css b/demos/blockfactory/factory.css index be2ebc40a..69c6c833e 100644 --- a/demos/blockfactory/factory.css +++ b/demos/blockfactory/factory.css @@ -386,11 +386,6 @@ td.taboff:hover { font-size: large; } -td { - padding: 0; - vertical-align: top; -} - .inputfile { height: 0; opacity: 0; diff --git a/demos/blockfactory/index.html b/demos/blockfactory/index.html index 0ac9176da..881cbc333 100644 --- a/demos/blockfactory/index.html +++ b/demos/blockfactory/index.html @@ -62,13 +62,13 @@

Block Selector

-
+
- All Stored in Block Library - All Used in Workspace Factory + All Stored in Block Library + All Used in Workspace Factory
-
@@ -158,10 +158,10 @@
- Starter Code - Toolbox - Workspace Blocks - All + Starter Code + Toolbox + Workspace Blocks + All
@@ -175,7 +175,7 @@

Edit

Drag blocks into the workspace to configure the toolbox in your custom workspace.

- +
Toolbox Workspace
@@ -183,18 +183,18 @@
- - + + -
@@ -166,7 +167,6 @@ -

@@ -176,8 +176,10 @@

Drag blocks into the workspace to configure the toolbox in your custom workspace.

- - + + + +
ToolboxWorkspace
ToolboxWorkspace
@@ -189,13 +191,13 @@

 

- -
- New Category - Standard Category - Separator - Standard Toolbox -
+ +
+ New Category + Standard Category + Separator + Standard Toolbox +
@@ -204,12 +206,12 @@
- -
- Name - Color -
+ +
+ Name + Color +
@@ -259,7 +261,6 @@ -
- - + + diff --git a/demos/blockfactory/workspacefactory/wfactory_init.js b/demos/blockfactory/workspacefactory/wfactory_init.js index 465265cf2..46e5e6f81 100644 --- a/demos/blockfactory/workspacefactory/wfactory_init.js +++ b/demos/blockfactory/workspacefactory/wfactory_init.js @@ -288,7 +288,7 @@ WorkspaceFactoryInit.assignWorkspaceFactoryClickHandlers_ = // Help button on workspace tab. document.getElementById('button_optionsHelp').addEventListener ('click', function() { - open('https://developers.google.com/blockly/guides/get-started/web'); + open('https://developers.google.com/blockly/guides/get-started/web#configuration'); }); // Reset to Default button on workspace tab. From a2e7481d047d41e0044deda960bee09494c49e11 Mon Sep 17 00:00:00 2001 From: Neil Fraser Date: Fri, 14 Oct 2016 08:29:48 -0700 Subject: [PATCH 12/13] Stop block exporter options from jumping around. --- demos/blockfactory/app_controller.js | 34 ++++++++++--------- .../blockfactory/block_exporter_controller.js | 8 ++--- demos/blockfactory/block_exporter_tools.js | 8 ++--- .../blockfactory/block_library_controller.js | 3 +- demos/blockfactory/block_library_view.js | 8 ++--- demos/blockfactory/block_option.js | 6 ++-- demos/blockfactory/factory.css | 4 +++ demos/blockfactory/factory_utils.js | 20 +++++------ demos/blockfactory/index.html | 2 +- 9 files changed, 49 insertions(+), 44 deletions(-) diff --git a/demos/blockfactory/app_controller.js b/demos/blockfactory/app_controller.js index a3f357d12..5598ce62a 100644 --- a/demos/blockfactory/app_controller.js +++ b/demos/blockfactory/app_controller.js @@ -145,7 +145,7 @@ AppController.prototype.exportBlockLibraryToFile = function() { /** * Converts an object mapping block type to XML to text file for output. - * @param {!Object} blockXmlMap - Object mapping block type to XML. + * @param {!Object} blockXmlMap Object mapping block type to XML. * @return {string} XML text containing the block XMLs. * @private */ @@ -407,14 +407,6 @@ AppController.prototype.assignExporterChangeListeners = function() { var blockDefCheck = document.getElementById('blockDefCheck'); var genStubCheck = document.getElementById('genStubCheck'); - var blockDefs = document.getElementById('blockDefs'); - var blockDefSettings = document.getElementById('blockDefSettings'); - var blockDefElements = [blockDefs, blockDefSettings]; - - var genStubs = document.getElementById('genStubs'); - var genStubSettings = document.getElementById('genStubSettings'); - var genStubElements = [genStubs, genStubSettings]; - // Select the block definitions and generator stubs on default. blockDefCheck.checked = true; genStubCheck.checked = true; @@ -422,7 +414,7 @@ AppController.prototype.assignExporterChangeListeners = function() { // Checking the block definitions checkbox displays preview of code to export. document.getElementById('blockDefCheck').addEventListener('change', function(e) { - self.ifCheckedDisplay(blockDefCheck, blockDefElements); + self.ifCheckedDisplay(blockDefCheck, ['blockDefs', 'blockDefSettings']); }); // Preview updates when user selects different block definition format. @@ -434,7 +426,7 @@ AppController.prototype.assignExporterChangeListeners = function() { // Checking the generator stub checkbox displays preview of code to export. document.getElementById('genStubCheck').addEventListener('change', function(e) { - self.ifCheckedDisplay(genStubCheck, genStubElements); + self.ifCheckedDisplay(genStubCheck, ['genStubs', 'genStubSettings']); }); // Preview updates when user selects different generator stub language. @@ -446,13 +438,23 @@ AppController.prototype.assignExporterChangeListeners = function() { /** * If given checkbox is checked, display given elements. Otherwise, hide. - * @param {!Element} checkbox - Input element of type checkbox. - * @param {!Array.} elementArray - Array of elements to show when + * @param {!Element} checkbox Input element of type checkbox. + * @param {!Array.} idArray Array of element IDs to show when * block is checked. */ -AppController.prototype.ifCheckedDisplay = function(checkbox, elementArray) { - for (var i = 0, element; element = elementArray[i]; i++) { - element.style.display = checkbox.checked ? 'block' : 'none'; +AppController.prototype.ifCheckedDisplay = function(checkbox, idArray) { + for (var i = 0, id; id = idArray[i]; i++) { + var element = document.getElementById(id); + if (checkbox.checked) { + element.classList.remove('disabled'); + } else { + element.classList.add('disabled'); + } + var fields = element.querySelectorAll('input, textarea, select'); + for (var j = 0, field; field = fields[j]; j++) { + field.disabled = !checkbox.checked; + } + //element.style.display = checkbox.checked ? 'block' : 'none'; } }; diff --git a/demos/blockfactory/block_exporter_controller.js b/demos/blockfactory/block_exporter_controller.js index 55da2d4fc..b237f48a7 100644 --- a/demos/blockfactory/block_exporter_controller.js +++ b/demos/blockfactory/block_exporter_controller.js @@ -40,7 +40,7 @@ goog.require('goog.dom.xml'); /** * BlockExporter Controller Class - * @param {!BlockLibrary.Storage} blockLibStorage - Block Library Storage. + * @param {!BlockLibrary.Storage} blockLibStorage Block Library Storage. * @constructor */ BlockExporterController = function(blockLibStorage) { @@ -61,7 +61,7 @@ BlockExporterController = function(blockLibStorage) { /** * Set the block library storage object from which exporter exports. - * @param {!BlockLibraryStorage} blockLibStorage - Block Library Storage object + * @param {!BlockLibraryStorage} blockLibStorage Block Library Storage object * that stores the blocks. */ BlockExporterController.prototype.setBlockLibraryStorage = @@ -71,7 +71,7 @@ BlockExporterController.prototype.setBlockLibraryStorage = /** * Get the block library storage object from which exporter exports. - * @return {!BlockLibraryStorage} blockLibStorage - Block Library Storage object + * @return {!BlockLibraryStorage} blockLibStorage Block Library Storage object * that stores the blocks. */ BlockExporterController.prototype.getBlockLibraryStorage = @@ -263,7 +263,7 @@ BlockExporterController.prototype.selectUsedBlocks = function() { /** * Set the array that holds the block types used in workspace factory. - * @param {!Array.} usedBlockTypes - Block types used in + * @param {!Array.} usedBlockTypes Block types used in */ BlockExporterController.prototype.setUsedBlockTypes = function(usedBlockTypes) { diff --git a/demos/blockfactory/block_exporter_tools.js b/demos/blockfactory/block_exporter_tools.js index 596ad8764..4d6d9bec6 100644 --- a/demos/blockfactory/block_exporter_tools.js +++ b/demos/blockfactory/block_exporter_tools.js @@ -236,13 +236,13 @@ BlockExporterTools.prototype.generateCategoryFromBlockLib = * Generate selector dom from block library storage. For each block in the * library, it has a block option, which consists of a checkbox, a label, * and a fixed size preview workspace. - * @param {!BlockLibraryStorage} blockLibStorage - Block Library Storage object. - * @param {string} blockSelectorID - ID of the div element that will contain + * @param {!BlockLibraryStorage} blockLibStorage Block Library Storage object. + * @param {string} blockSelectorId ID of the div element that will contain * the block options. * @return {!Object} Map of block type to Block Option object. */ BlockExporterTools.prototype.createBlockSelectorFromLib = - function(blockLibStorage, blockSelectorID) { + function(blockLibStorage, blockSelectorId) { // Object mapping each stored block type to XML. var allBlockTypes = blockLibStorage.getBlockTypes(); var blockXmlMap = blockLibStorage.getBlockXmlMap(allBlockTypes); @@ -251,7 +251,7 @@ BlockExporterTools.prototype.createBlockSelectorFromLib = // them in the exporter workspace. this.addBlockDefinitions(blockXmlMap); - var blockSelector = document.getElementById(blockSelectorID); + var blockSelector = document.getElementById(blockSelectorId); // Clear the block selector. var child; while ((child = blockSelector.firstChild)) { diff --git a/demos/blockfactory/block_library_controller.js b/demos/blockfactory/block_library_controller.js index a7475cb09..fc5398c8c 100644 --- a/demos/blockfactory/block_library_controller.js +++ b/demos/blockfactory/block_library_controller.js @@ -203,8 +203,7 @@ BlockLibraryController.prototype.getBlockXml = function(blockType) { /** * Set the block library storage object from which exporter exports. - * @param {!BlockLibraryStorage} blockLibStorage - Block Library Storage - * object. + * @param {!BlockLibraryStorage} blockLibStorage Block Library Storage object. */ BlockLibraryController.prototype.setBlockLibraryStorage = function(blockLibStorage) { diff --git a/demos/blockfactory/block_library_view.js b/demos/blockfactory/block_library_view.js index 4facbc871..16181f290 100644 --- a/demos/blockfactory/block_library_view.js +++ b/demos/blockfactory/block_library_view.js @@ -52,9 +52,9 @@ var BlockLibraryView = function() { }; /** - * Creates a node of a given element type and appends to the node with given id. - * @param {string} blockType - Type of block. - * @param {boolean} selected - Whether or not the option should be selected on + * Creates a node of a given element type and appends to the node with given ID. + * @param {string} blockType Type of block. + * @param {boolean} selected Whether or not the option should be selected on * the dropdown. */ BlockLibraryView.prototype.addOption = function(blockType, selected) { @@ -77,7 +77,7 @@ BlockLibraryView.prototype.addOption = function(blockType, selected) { /** * Sets a given block type to selected and all other blocks to deselected. * If null, deselects all blocks. - * @param {string} blockTypeToSelect - Type of block to select or null. + * @param {string} blockTypeToSelect Type of block to select or null. */ BlockLibraryView.prototype.setSelectedBlockType = function(blockTypeToSelect) { // Select given block type and deselect all others. Will deselect all blocks diff --git a/demos/blockfactory/block_option.js b/demos/blockfactory/block_option.js index 9e03b601a..8bc1a2fd4 100644 --- a/demos/blockfactory/block_option.js +++ b/demos/blockfactory/block_option.js @@ -35,10 +35,10 @@ goog.require('goog.dom'); * BlockOption Class * A block option includes checkbox, label, and div element that shows a preview * of the block. - * @param {!Element} blockSelector - Scrollable div that will contain the + * @param {!Element} blockSelector Scrollable div that will contain the * block options for the selector. - * @param {string} blockType - Type of block for which to create an option. - * @param {!Element} previewBlockXml - Xml element containing the preview block. + * @param {string} blockType Type of block for which to create an option. + * @param {!Element} previewBlockXml XML element containing the preview block. * @constructor */ var BlockOption = function(blockSelector, blockType, previewBlockXml) { diff --git a/demos/blockfactory/factory.css b/demos/blockfactory/factory.css index 140ffff1c..ce8ebe319 100644 --- a/demos/blockfactory/factory.css +++ b/demos/blockfactory/factory.css @@ -102,6 +102,10 @@ pre, padding: 5px; } +.disabled { + color: #888; +} + button:disabled, .buttonStyle:disabled { opacity: 0.6; } diff --git a/demos/blockfactory/factory_utils.js b/demos/blockfactory/factory_utils.js index 483d69951..c5dc38982 100644 --- a/demos/blockfactory/factory_utils.js +++ b/demos/blockfactory/factory_utils.js @@ -36,11 +36,11 @@ goog.provide('FactoryUtils'); /** * Get block definition code for the current block. - * @param {string} blockType - Type of block. - * @param {!Blockly.Block} rootBlock - RootBlock from main workspace in which + * @param {string} blockType Type of block. + * @param {!Blockly.Block} rootBlock RootBlock from main workspace in which * user uses Block Factory Blocks to create a custom block. - * @param {string} format - 'JSON' or 'JavaScript'. - * @param {!Blockly.Workspace} workspace - Where the root block lives. + * @param {string} format 'JSON' or 'JavaScript'. + * @param {!Blockly.Workspace} workspace Where the root block lives. * @return {string} Block definition. */ FactoryUtils.getBlockDefinition = function(blockType, rootBlock, format, workspace) { @@ -259,7 +259,7 @@ FactoryUtils.formatJson_ = function(blockType, rootBlock) { * Update the language code as JavaScript. * @param {string} blockType Name of block. * @param {!Blockly.Block} rootBlock Factory_base block. - * @param {!Blockly.Workspace} workspace - Where the root block lives. + * @param {!Blockly.Workspace} workspace Where the root block lives. * @return {string} Generated language code. * @private */ @@ -345,7 +345,7 @@ FactoryUtils.formatJavaScript_ = function(blockType, rootBlock, workspace) { * Create JS code required to create a top, bottom, or value connection. * @param {string} functionName JavaScript function name. * @param {string} typeName Name of type input. - * @param {!Blockly.Workspace} workspace - Where the root block lives. + * @param {!Blockly.Workspace} workspace Where the root block lives. * @return {string} Line of JavaScript code to create connection. * @private */ @@ -639,9 +639,9 @@ FactoryUtils.escapeString = function(string) { /** * Return the uneditable container block that everything else attaches to in - * given workspace - * @param {!Blockly.Workspace} workspace - where the root block lives - * @return {Blockly.Block} root block + * given workspace. + * @param {!Blockly.Workspace} workspace Where the root block lives. + * @return {Blockly.Block} Root block. */ FactoryUtils.getRootBlock = function(workspace) { var blocks = workspace.getTopBlocks(false); @@ -943,7 +943,7 @@ FactoryUtils.isProcedureBlock = function(block) { * Returns whether or not a modified block's changes has been saved to the * Block Library. * TODO(quachtina96): move into the Block Factory Controller once made. - * @param {!BlockLibraryController} blockLibraryController - Block Library + * @param {!BlockLibraryController} blockLibraryController Block Library * Controller storing custom blocks. * @return {boolean} True if all changes made to the block have been saved to * the given Block Library. diff --git a/demos/blockfactory/index.html b/demos/blockfactory/index.html index 27fdef157..66a8fd7c1 100644 --- a/demos/blockfactory/index.html +++ b/demos/blockfactory/index.html @@ -118,7 +118,7 @@

-

Export Preview

+

Export Preview

Block Definitions:



From 728284ab6120ce5d80d0a34a2a0bba550d23f5c7 Mon Sep 17 00:00:00 2001
From: Neil Fraser 
Date: Fri, 14 Oct 2016 08:57:39 -0700
Subject: [PATCH 13/13] Disable options in readonly mode. (Block Factory)

---
 demos/blockfactory/app_controller.js          | 21 ++++-----
 demos/blockfactory/factory.css                |  7 +--
 demos/blockfactory/index.html                 | 44 ++++++++++++-------
 .../workspacefactory/wfactory_init.js         |  7 +--
 4 files changed, 47 insertions(+), 32 deletions(-)

diff --git a/demos/blockfactory/app_controller.js b/demos/blockfactory/app_controller.js
index 5598ce62a..b556b4f8d 100644
--- a/demos/blockfactory/app_controller.js
+++ b/demos/blockfactory/app_controller.js
@@ -414,7 +414,8 @@ AppController.prototype.assignExporterChangeListeners = function() {
   // Checking the block definitions checkbox displays preview of code to export.
   document.getElementById('blockDefCheck').addEventListener('change',
       function(e) {
-        self.ifCheckedDisplay(blockDefCheck, ['blockDefs', 'blockDefSettings']);
+        self.ifCheckedEnable(blockDefCheck.checked,
+            ['blockDefs', 'blockDefSettings']);
       });
 
   // Preview updates when user selects different block definition format.
@@ -426,7 +427,8 @@ AppController.prototype.assignExporterChangeListeners = function() {
   // Checking the generator stub checkbox displays preview of code to export.
   document.getElementById('genStubCheck').addEventListener('change',
       function(e) {
-        self.ifCheckedDisplay(genStubCheck, ['genStubs', 'genStubSettings']);
+        self.ifCheckedEnable(genStubCheck.checked,
+            ['genStubs', 'genStubSettings']);
       });
 
   // Preview updates when user selects different generator stub language.
@@ -437,24 +439,23 @@ AppController.prototype.assignExporterChangeListeners = function() {
 };
 
 /**
- * If given checkbox is checked, display given elements. Otherwise, hide.
- * @param {!Element} checkbox Input element of type checkbox.
- * @param {!Array.} idArray Array of element IDs to show when
- *    block is checked.
+ * If given checkbox is checked, enable the given elements.  Otherwise, disable.
+ * @param {boolean} enabled True if enabled, false otherwise.
+ * @param {!Array.} idArray Array of element IDs to enable when
+ *    checkbox is checked.
  */
-AppController.prototype.ifCheckedDisplay = function(checkbox, idArray) {
+AppController.prototype.ifCheckedEnable = function(enabled, idArray) {
   for (var i = 0, id; id = idArray[i]; i++) {
     var element = document.getElementById(id);
-    if (checkbox.checked) {
+    if (enabled) {
       element.classList.remove('disabled');
     } else {
       element.classList.add('disabled');
     }
     var fields = element.querySelectorAll('input, textarea, select');
     for (var j = 0, field; field = fields[j]; j++) {
-      field.disabled = !checkbox.checked;
+      field.disabled = !enabled;
     }
-    //element.style.display = checkbox.checked ? 'block' : 'none';
   }
 };
 
diff --git a/demos/blockfactory/factory.css b/demos/blockfactory/factory.css
index ce8ebe319..fa99314bb 100644
--- a/demos/blockfactory/factory.css
+++ b/demos/blockfactory/factory.css
@@ -466,12 +466,13 @@ td.taboff:hover {
 
 #preload_div {
   display: table;
-  height: 70%;
-  margin-right: 5%;
+  height: 75%;
+  margin-left: 2%;
+  margin-right: 2%;
   max-height: 500px;
   overflow: hidden;
   overflow-y: scroll;
-  width: 35%;
+  width: 30%;
 }
 
 #shadowBlockDropdown {
diff --git a/demos/blockfactory/index.html b/demos/blockfactory/index.html
index 66a8fd7c1..b76151b74 100644
--- a/demos/blockfactory/index.html
+++ b/demos/blockfactory/index.html
@@ -226,10 +226,16 @@
         

         

           

-          

-          

+          

+            

+          

+          

+            

+          

           

-          

+          

+            

+          

           

           
-          

-