Removing (most) Closure from BlockFactory

demos/blockfactory/analytics.js

@@ -22,7 +22,8 @@
  * @fileoverview Stubbed interface functions for analytics integration.
  */
 
-goog.provide('BlocklyDevTools.Analytics');
+var BlocklyDevTools = BlocklyDevTools || Object.create(null);
+BlocklyDevTools.Analytics = BlocklyDevTools.Analytics || Object.create(null);
 
 /**
  * Whether these stub methods should log analytics calls to the console.

demos/blockfactory/app_controller.js

@@ -25,17 +25,8 @@
  *
  * @author quachtina96 (Tina Quach)
  */
-goog.provide('AppController');
-
-goog.require('BlockFactory');
-goog.require('BlocklyDevTools.Analytics');
-goog.require('FactoryUtils');
-goog.require('BlockLibraryController');
-goog.require('BlockExporterController');
-goog.require('goog.dom.classlist');
-goog.require('goog.ui.PopupColorPicker');
-goog.require('goog.ui.ColorPicker');
 
+goog.require('goog.dom.xml'); // Used to detect Closure
 
 /**
  * Controller for the Blockly Factory
@@ -161,9 +152,7 @@ AppController.prototype.exportBlockLibraryToFile = function() {
  */
 AppController.prototype.formatBlockLibraryForExport_ = function(blockXmlMap) {
  // Create DOM for XML.
- var xmlDom = goog.dom.createDom('xml', {
- 'xmlns':"http://www.w3.org/1999/xhtml"
- });
+ var xmlDom = document.createElementNS('http://www.w3.org/1999/xhtml', 'xml');
 
  // Append each block node to XML DOM.
  for (var blockType in blockXmlMap) {
@@ -184,29 +173,25 @@ AppController.prototype.formatBlockLibraryForExport_ = function(blockXmlMap) {
  * @private
  */
 AppController.prototype.formatBlockLibraryForImport_ = function(xmlText) {
- var xmlDom = Blockly.Xml.textToDom(xmlText);
-
- // Get array of XMLs. Use an asterisk (*) instead of a tag name for the XPath
- // selector, to match all elements at that level and get all factory_base
- // blocks.
- var blockNodes = goog.dom.xml.selectNodes(xmlDom, '*');
+ var inputXml = Blockly.Xml.textToDom(xmlText);
+ // Convert the live HTMLCollection of child Elements into a static array,
+ // since the addition to editorWorkspaceXml below removes it from inputXml.
+ var inputChildren = Array.from(inputXml.children);
 
  // Create empty map. The line below creates a truly empy object. It doesn't
  // have built-in attributes/functions such as length or toString.
  var blockXmlTextMap = Object.create(null);
 
  // Populate map.
- for (var i = 0, blockNode; blockNode = blockNodes[i]; i++) {
-
+ for (var i = 0, blockNode; blockNode = inputChildren[i]; i++) {
  // Add outer XML tag to the block for proper injection in to the
  // main workspace.
  // Create DOM for XML.
- var xmlDom = goog.dom.createDom('xml', {
- 'xmlns':"http://www.w3.org/1999/xhtml"
- });
- xmlDom.appendChild(blockNode);
+ var editorWorkspaceXml =
+ document.createElementNS('http://www.w3.org/1999/xhtml', 'xml');
+ editorWorkspaceXml.appendChild(blockNode);
 
- xmlText = Blockly.Xml.domToText(xmlDom);
+ xmlText = Blockly.Xml.domToText(editorWorkspaceXml);
  // All block types should be lowercase.
  var blockType = this.getBlockTypeFromXml_(xmlText).toLowerCase();
  // Some names are invalid so fix them up.
@@ -376,9 +361,9 @@ AppController.prototype.onTab = function() {
 AppController.prototype.styleTabs_ = function() {
  for (var tabName in this.tabMap) {
  if (this.selectedTab == tabName) {
- goog.dom.classlist.addRemove(this.tabMap[tabName], 'taboff', 'tabon');
+ this.tabMap[tabName].classList.replace('taboff', 'tabon');
  } else {
- goog.dom.classlist.addRemove(this.tabMap[tabName], 'tabon', 'taboff');
+ this.tabMap[tabName].classList.replace('tabon', 'taboff');
  }
  }
 };

demos/blockfactory/block_definition_extractor.js

@@ -23,29 +23,23 @@
 'use strict';
 
 /**
- * Namespace for BlockDefinitionExtractor.
- */
-goog.provide('BlockDefinitionExtractor');
-
-
-/**
- * Class to contain all functions needed to extract block definition from
+ * Namespace to contain all functions needed to extract block definition from
  * the block preview data structure.
  * @namespace
  */
-BlockDefinitionExtractor = BlockDefinitionExtractor || Object.create(null);
+var BlockDefinitionExtractor = BlockDefinitionExtractor || Object.create(null);
 
 /**
  * Builds a BlockFactory workspace that reflects the block structure of the
- * exmaple block.
+ * example block.
  *
  * @param {!Blockly.Block} block The reference block from which the definition
  * will be extracted.
  * @return {!Element} Returns the root workspace DOM <xml> for the block editor
  * workspace.
  */
 BlockDefinitionExtractor.buildBlockFactoryWorkspace = function(block) {
- var workspaceXml = goog.dom.createDom('xml');
+ var workspaceXml = document.createElement('xml');
  workspaceXml.append(
  BlockDefinitionExtractor.factoryBase_(block, block.type));
 
@@ -64,7 +58,7 @@ BlockDefinitionExtractor.buildBlockFactoryWorkspace = function(block) {
  */
 BlockDefinitionExtractor.newDomElement_ = function(name, opt_attrs, opt_text) {
  // Avoid createDom(..)'s attributes argument for being too HTML specific.
- var elem = goog.dom.createDom(name);
+ var elem = document.createElement(name);
  if (opt_attrs) {
  for (var key in opt_attrs) {
  elem.setAttribute(key, opt_attrs[key]);
@@ -164,16 +158,17 @@ BlockDefinitionExtractor.factoryBase_ = function(block, name) {
  factoryBaseEl.append(helpUrlValue);
 
  // Convert colour_ to hue value 0-360 degrees
- // TODO(#1247): Solve off-by-one errors.
- // TODO: Deal with colors that don't map to standard hues. (Needs improved
- // block definitions.)
- var colour_hue = Math.floor(
- goog.color.hexToHsv(block.colour_)[0]); // Off by one... sometimes
- var colourBlock = BlockDefinitionExtractor.colourBlockFromHue_(colour_hue);
- var colourInputValue =
- BlockDefinitionExtractor.newDomElement_('value', {name: 'COLOUR'});
- colourInputValue.append(colourBlock);
- factoryBaseEl.append(colourInputValue);
+ var colour_hue = block.getHue(); // May be null if not set via hue.
+ if (colour_hue) {
+ var colourBlock = BlockDefinitionExtractor.colourBlockFromHue_(colour_hue);
+ var colourInputValue =
+ BlockDefinitionExtractor.newDomElement_('value', {name: 'COLOUR'});
+ colourInputValue.append(colourBlock);
+ factoryBaseEl.append(colourInputValue);
+ } else {
+ // Editor will not have a colour block and preview will render black.
+ // TODO: Support RGB colours in the block editor.
+ }
  return factoryBaseEl;
 };
 
@@ -480,7 +475,7 @@ BlockDefinitionExtractor.buildFieldDropdown_ = function(dropdown) {
  var menuGenerator = dropdown.menuGenerator_;
  if (typeof menuGenerator === 'function') {
  var options = menuGenerator();
- } else if (goog.isArray(menuGenerator)) {
+ } else if (Array.isArray(menuGenerator)) {
  var options = menuGenerator;
  } else {
  throw new Error('Unrecognized type of menuGenerator: ' + menuGenerator);

demos/blockfactory/block_exporter_controller.js

@@ -29,22 +29,12 @@
 
 'use strict';
 
-goog.provide('BlockExporterController');
-
-goog.require('BlocklyDevTools.Analytics');
-goog.require('FactoryUtils');
-goog.require('StandardCategories');
-goog.require('BlockExporterView');
-goog.require('BlockExporterTools');
-goog.require('goog.dom.xml');
-
-
 /**
  * BlockExporter Controller Class
  * @param {!BlockLibrary.Storage} blockLibStorage Block Library Storage.
  * @constructor
  */
-BlockExporterController = function(blockLibStorage) {
+function BlockExporterController(blockLibStorage) {
  // BlockLibrary.Storage object containing user's saved blocks.
  this.blockLibStorage = blockLibStorage;
  // Utils for generating code to export.
@@ -132,11 +122,11 @@ BlockExporterController.prototype.export = function() {
  BlocklyDevTools.Analytics.onWarning(msg);
  alert(msg);
  } else {
- 
+
  // Get generator stub code in the selected language for the blocks.
  var genStubs = this.tools.getGeneratorCode(blockXmlMap,
  language);
- 
+
  // Download the file.
  FactoryUtils.createAndDownloadFile(
  genStubs, generatorStub_filename + '.js', 'javascript');

demos/blockfactory/block_exporter_tools.js

@@ -28,25 +28,15 @@
  */
 'use strict';
 
-goog.provide('BlockExporterTools');
-
-goog.require('FactoryUtils');
-goog.require('BlockOption');
-goog.require('goog.dom');
-goog.require('goog.dom.xml');
-
-
 /**
  * Block Exporter Tools Class
  * @constructor
  */
-BlockExporterTools = function() {
+function BlockExporterTools() {
  // Create container for hidden workspace.
- this.container = goog.dom.createDom('div', {
- 'id': 'blockExporterTools_hiddenWorkspace'
- }, ''); // Empty quotes for empty div.
- // Hide hidden workspace.
- this.container.style.display = 'none';
+ this.container = document.createElement('div');
+ this.container.id = 'blockExporterTools_hiddenWorkspace';
+ this.container.style.display = 'none'; // Hide the hidden workspace.
  document.body.appendChild(this.container);
  /**
  * Hidden workspace for the Block Exporter that holds pieces that make
@@ -167,45 +157,6 @@ BlockExporterTools.prototype.addBlockDefinitions = function(blockXmlMap) {
  eval(blockDefs);
 };
 
-/**
- * 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
- = function(blockLibStorage) {
- // Create DOM for XML.
- var xmlDom = goog.dom.createDom('xml', {
- 'id' : 'blockExporterTools_toolbox',
- 'style' : 'display:none'
- });
-
- var allBlockTypes = blockLibStorage.getBlockTypes();
- // Object mapping block type to XML.
- var blockXmlMap = blockLibStorage.getBlockXmlMap(allBlockTypes);
-
- // Define the custom blocks in order to be able to create instances of
- // them in the exporter workspace.
- this.addBlockDefinitions(blockXmlMap);
-
- for (var blockType in blockXmlMap) {
- // Get block.
- var block = FactoryUtils.getDefinedBlock(blockType, this.hiddenWorkspace);
- var category = FactoryUtils.generateCategoryXml([block], blockType);
- xmlDom.appendChild(category);
- }
-
- // If there are no blocks in library and the map is empty, append dummy
- // category.
- if (Object.keys(blockXmlMap).length == 0) {
- var category = goog.dom.createDom('category');
- category.setAttribute('name','Next Saved Block');
- xmlDom.appendChild(category);
- }
- return xmlDom;
-};
-
 /**
  * Generate XML for the workspace factory's category from imported block
  * definitions.

demos/blockfactory/block_exporter_view.js

@@ -27,19 +27,12 @@
 
 'use strict';
 
-goog.provide('BlockExporterView');
-
-goog.require('BlockExporterTools');
-goog.require('BlockOption');
-goog.require('goog.dom');
-
-
 /**
  * BlockExporter View Class
  * @param {!Object} blockOptions Map of block types to BlockOption objects.
  * @constructor
  */
-BlockExporterView = function(blockOptions) {
+function BlockExporterView(blockOptions) {
  // Map of block types to BlockOption objects to select from.
  this.blockOptions = blockOptions;
 };

demos/blockfactory/block_library_controller.js

@@ -32,14 +32,6 @@
  */
 'use strict';
 
-goog.provide('BlockLibraryController');
-
-goog.require('BlocklyDevTools.Analytics');
-goog.require('BlockLibraryStorage');
-goog.require('BlockLibraryView');
-goog.require('BlockFactory');
-
-
 /**
  * Block Library Controller Class
  * @param {string} blockLibraryName Desired name of Block Library, also used
@@ -48,7 +40,7 @@ goog.require('BlockFactory');
  * object that allows user to import a block library.
  * @constructor
  */
-BlockLibraryController = function(blockLibraryName, opt_blockLibraryStorage) {
+function BlockLibraryController(blockLibraryName, opt_blockLibraryStorage) {
  this.name = blockLibraryName;
  // Create a new, empty Block Library Storage object, or load existing one.
  this.storage = opt_blockLibraryStorage || new BlockLibraryStorage(this.name);
@@ -144,7 +136,7 @@ BlockLibraryController.prototype.saveToBlockLibrary = function() {
  }
 
  // Create block XML.
- var xmlElement = goog.dom.createDom('xml');
+ var xmlElement = document.createElement('xml');
  var block = FactoryUtils.getRootBlock(BlockFactory.mainWorkspace);
  xmlElement.appendChild(Blockly.Xml.blockToDomWithXY(block));
 

demos/blockfactory/block_library_storage.js

@@ -27,17 +27,14 @@
 
 'use strict';
 
-goog.provide('BlockLibraryStorage');
-
-
 /**
  * Represents a block library's storage.
  * @param {string} blockLibraryName Desired name of Block Library, also used
  * to create the key for where it's stored in local storage.
  * @param {Object} opt_blocks Object mapping block type to XML.
  * @constructor
  */
-BlockLibraryStorage = function(blockLibraryName, opt_blocks) {
+function BlockLibraryStorage(blockLibraryName, opt_blocks) {
  // Add prefix to this.name to avoid collisions in local storage.
  this.name = 'BlockLibraryStorage.' + blockLibraryName;
  if (!opt_blocks) {
@@ -60,17 +57,15 @@ BlockLibraryStorage = function(blockLibraryName, opt_blocks) {
  * Reads the named block library from local storage and saves it in this.blocks.
  */
 BlockLibraryStorage.prototype.loadFromLocalStorage = function() {
- // goog.global is synonymous to window, and allows for flexibility
- // between browsers.
- var object = goog.global.localStorage[this.name];
+ var object = localStorage[this.name];
  this.blocks = object ? JSON.parse(object) : null;
 };
 
 /**
  * Writes the current block library (this.blocks) to local storage.
  */
 BlockLibraryStorage.prototype.saveToLocalStorage = function() {
- goog.global.localStorage[this.name] = JSON.stringify(this.blocks);
+ localStorage[this.name] = JSON.stringify(this.blocks);
 };
 
 /**