CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-30 20:20:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Stop block exporter options from jumping around.

Browse Source
This commit is contained in:
Neil Fraser
2016-10-14 08:29:48 -07:00
parent ea1d0d7d3a
commit a2e7481d04
9 changed files with 49 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
demos/blockfactory/app_controller.js
View File

@@ -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.<!Element>} elementArray - Array of elements to show when
* @param {!Element} checkbox Input element of type checkbox.
* @param {!Array.<string>} 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';
}
};

8
demos/blockfactory/block_exporter_controller.js
View File

@@ -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.<string>} usedBlockTypes - Block types used in
* @param {!Array.<string>} usedBlockTypes Block types used in
*/
BlockExporterController.prototype.setUsedBlockTypes =
function(usedBlockTypes) {

8
demos/blockfactory/block_exporter_tools.js
View File

@@ -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)) {

3
demos/blockfactory/block_library_controller.js
View File

@@ -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) {

8
demos/blockfactory/block_library_view.js
View File

@@ -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

6
demos/blockfactory/block_option.js
View File

@@ -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) {

4
demos/blockfactory/factory.css
View File

@@ -102,6 +102,10 @@ pre,
padding: 5px;
}
.disabled {
color: #888;
}
button:disabled, .buttonStyle:disabled {
opacity: 0.6;
}

20
demos/blockfactory/factory_utils.js
View File

@@ -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.

2
demos/blockfactory/index.html
View File

@@ -118,7 +118,7 @@
</div>
<div id="exportPreview">
<br>
<h3>Export Preview </h3>
<h3>Export Preview</h3>
<div id="blockDefs" class="exportPreviewTextArea">
<p id="blockDefs_label">Block Definitions:</p>
<pre id="blockDefs_textArea"></pre>