From a2e7481d047d41e0044deda960bee09494c49e11 Mon Sep 17 00:00:00 2001 From: Neil Fraser Date: Fri, 14 Oct 2016 08:29:48 -0700 Subject: [PATCH] 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: