chore: Remove blockly factory use of utils.dom.add/removeClass (#6534)

* Remove usages of utils.dom.add/removeClass from Blockly Factory
* Use template strings for error messages.

(Random stuff found while working on something larger.)
This commit is contained in:
Neil Fraser
2022-10-13 01:30:17 +02:00
committed by GitHub
parent ab9825cfaf
commit 9b81317d32
9 changed files with 325 additions and 326 deletions

View File

@@ -65,18 +65,25 @@ BlockFactory.updateBlocksFlagDelayed = false;
*/
BlockFactory.STARTER_BLOCK_XML_TEXT =
'<xml xmlns="https://developers.google.com/blockly/xml">' +
'<block type="factory_base" deletable="false" movable="false">' +
'<value name="TOOLTIP">' +
'<block type="text" deletable="false" movable="false">' +
'<field name="TEXT"></field></block></value>' +
'<value name="HELPURL">' +
'<block type="text" deletable="false" movable="false">' +
'<field name="TEXT"></field></block></value>' +
'<value name="COLOUR">' +
'<block type="colour_hue">' +
'<mutation colour="#5b67a5"></mutation>' +
'<field name="HUE">230</field>' +
'</block></value></block></xml>';
'<block type="factory_base" deletable="false" movable="false">' +
'<value name="TOOLTIP">' +
'<block type="text" deletable="false" movable="false">' +
'<field name="TEXT"></field>' +
'</block>' +
'</value>' +
'<value name="HELPURL">' +
'<block type="text" deletable="false" movable="false">' +
'<field name="TEXT"></field>' +
'</block>' +
'</value>' +
'<value name="COLOUR">' +
'<block type="colour_hue">' +
'<mutation colour="#5b67a5"></mutation>' +
'<field name="HUE">230</field>' +
'</block>' +
'</value>' +
'</block>' +
'</xml>';
/**
* Change the language code format.
@@ -328,4 +335,4 @@ BlockFactory.manualEdit = function() {
BlockFactory.updateBlocksFlag = true;
BlockFactory.updateBlocksFlagDelayed = true;
BlockFactory.updateLanguage();
}
};

View File

@@ -29,13 +29,13 @@ StandardCategories.categoryMap['logic'] =
StandardCategories.categoryMap['logic'].xml =
Blockly.Xml.textToDom(
'<xml xmlns="https://developers.google.com/blockly/xml">' +
'<block type="controls_if"></block>' +
'<block type="logic_compare"></block>' +
'<block type="logic_operation"></block>' +
'<block type="logic_negate"></block>' +
'<block type="logic_boolean"></block>' +
'<block type="logic_null"></block>' +
'<block type="logic_ternary"></block>' +
'<block type="controls_if"></block>' +
'<block type="logic_compare"></block>' +
'<block type="logic_operation"></block>' +
'<block type="logic_negate"></block>' +
'<block type="logic_boolean"></block>' +
'<block type="logic_null"></block>' +
'<block type="logic_ternary"></block>' +
'</xml>');
StandardCategories.categoryMap['logic'].hue = 210;
@@ -44,33 +44,33 @@ StandardCategories.categoryMap['loops'] =
StandardCategories.categoryMap['loops'].xml =
Blockly.Xml.textToDom(
'<xml xmlns="https://developers.google.com/blockly/xml">' +
'<block type="controls_repeat_ext">' +
'<value name="TIMES">' +
'<shadow type="math_number">' +
'<field name="NUM">10</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="controls_whileUntil"></block>' +
'<block type="controls_for">' +
'<value name="FROM">' +
'<shadow type="math_number">' +
'<field name="NUM">1</field>' +
'</shadow>' +
'</value>' +
'<value name="TO">' +
'<shadow type="math_number">' +
'<field name="NUM">10</field>' +
'</shadow>' +
'</value>' +
'<value name="BY">' +
'<shadow type="math_number">' +
'<field name="NUM">1</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="controls_forEach"></block>' +
'<block type="controls_flow_statements"></block>' +
'<block type="controls_repeat_ext">' +
'<value name="TIMES">' +
'<shadow type="math_number">' +
'<field name="NUM">10</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="controls_whileUntil"></block>' +
'<block type="controls_for">' +
'<value name="FROM">' +
'<shadow type="math_number">' +
'<field name="NUM">1</field>' +
'</shadow>' +
'</value>' +
'<value name="TO">' +
'<shadow type="math_number">' +
'<field name="NUM">10</field>' +
'</shadow>' +
'</value>' +
'<value name="BY">' +
'<shadow type="math_number">' +
'<field name="NUM">1</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="controls_forEach"></block>' +
'<block type="controls_flow_statements"></block>' +
'</xml>');
StandardCategories.categoryMap['loops'].hue = 120;
@@ -79,91 +79,91 @@ StandardCategories.categoryMap['math'] =
StandardCategories.categoryMap['math'].xml =
Blockly.Xml.textToDom(
'<xml xmlns="https://developers.google.com/blockly/xml">' +
'<block type="math_number"></block>' +
'<block type="math_arithmetic">' +
'<value name="A">' +
'<shadow type="math_number">' +
'<field name="NUM">1</field>' +
'</shadow>' +
'</value>' +
'<value name="B">' +
'<shadow type="math_number">' +
'<field name="NUM">1</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="math_single">' +
'<value name="NUM">' +
'<shadow type="math_number">' +
'<field name="NUM">9</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="math_trig">' +
'<value name="NUM">' +
'<shadow type="math_number">' +
'<field name="NUM">45</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="math_constant"></block>' +
'<block type="math_number_property">' +
'<value name="NUMBER_TO_CHECK">' +
'<shadow type="math_number">' +
'<field name="NUM">0</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="math_round">' +
'<value name="NUM">' +
'<shadow type="math_number">' +
'<field name="NUM">3.1</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="math_on_list"></block>' +
'<block type="math_modulo">' +
'<value name="DIVIDEND">' +
'<shadow type="math_number">' +
'<field name="NUM">64</field>' +
'</shadow>' +
'</value>' +
'<value name="DIVISOR">' +
'<shadow type="math_number">' +
'<field name="NUM">10</field>'+
'</shadow>' +
'</value>' +
'</block>' +
'<block type="math_constrain">' +
'<value name="VALUE">' +
'<shadow type="math_number">' +
'<field name="NUM">50</field>' +
'</shadow>' +
'</value>' +
'<value name="LOW">' +
'<shadow type="math_number">' +
'<field name="NUM">1</field>' +
'</shadow>' +
'</value>' +
'<value name="HIGH">' +
'<shadow type="math_number">' +
'<field name="NUM">100</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="math_random_int">' +
'<value name="FROM">' +
'<shadow type="math_number">' +
'<field name="NUM">1</field>' +
'</shadow>' +
'</value>' +
'<value name="TO">' +
'<shadow type="math_number">' +
'<field name="NUM">100</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="math_random_float"></block>' +
'<block type="math_number"></block>' +
'<block type="math_arithmetic">' +
'<value name="A">' +
'<shadow type="math_number">' +
'<field name="NUM">1</field>' +
'</shadow>' +
'</value>' +
'<value name="B">' +
'<shadow type="math_number">' +
'<field name="NUM">1</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="math_single">' +
'<value name="NUM">' +
'<shadow type="math_number">' +
'<field name="NUM">9</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="math_trig">' +
'<value name="NUM">' +
'<shadow type="math_number">' +
'<field name="NUM">45</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="math_constant"></block>' +
'<block type="math_number_property">' +
'<value name="NUMBER_TO_CHECK">' +
'<shadow type="math_number">' +
'<field name="NUM">0</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="math_round">' +
'<value name="NUM">' +
'<shadow type="math_number">' +
'<field name="NUM">3.1</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="math_on_list"></block>' +
'<block type="math_modulo">' +
'<value name="DIVIDEND">' +
'<shadow type="math_number">' +
'<field name="NUM">64</field>' +
'</shadow>' +
'</value>' +
'<value name="DIVISOR">' +
'<shadow type="math_number">' +
'<field name="NUM">10</field>'+
'</shadow>' +
'</value>' +
'</block>' +
'<block type="math_constrain">' +
'<value name="VALUE">' +
'<shadow type="math_number">' +
'<field name="NUM">50</field>' +
'</shadow>' +
'</value>' +
'<value name="LOW">' +
'<shadow type="math_number">' +
'<field name="NUM">1</field>' +
'</shadow>' +
'</value>' +
'<value name="HIGH">' +
'<shadow type="math_number">' +
'<field name="NUM">100</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="math_random_int">' +
'<value name="FROM">' +
'<shadow type="math_number">' +
'<field name="NUM">1</field>' +
'</shadow>' +
'</value>' +
'<value name="TO">' +
'<shadow type="math_number">' +
'<field name="NUM">100</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="math_random_float"></block>' +
'</xml>');
StandardCategories.categoryMap['math'].hue = 230;
@@ -172,81 +172,81 @@ StandardCategories.categoryMap['text'] =
StandardCategories.categoryMap['text'].xml =
Blockly.Xml.textToDom(
'<xml xmlns="https://developers.google.com/blockly/xml">' +
'<block type="text"></block>' +
'<block type="text_join"></block>' +
'<block type="text_append">' +
'<value name="TEXT">' +
'<shadow type="text"></shadow>' +
'</value>' +
'</block>' +
'<block type="text_length">' +
'<value name="VALUE">' +
'<shadow type="text">' +
'<field name="TEXT">abc</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="text_isEmpty">' +
'<value name="VALUE">' +
'<shadow type="text">' +
'<field name="TEXT"></field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="text_indexOf">' +
'<value name="VALUE">' +
'<block type="variables_get">' +
'<field name="VAR">text</field>' +
'</block>' +
'</value>' +
'<value name="FIND">' +
'<shadow type="text">' +
'<field name="TEXT">abc</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="text_charAt">' +
'<value name="VALUE">' +
'<block type="variables_get">' +
'<field name="VAR">text</field>' +
'</block>' +
'</value>' +
'</block>' +
'<block type="text_getSubstring">' +
'<value name="STRING">' +
'<block type="variables_get">' +
'<field name="VAR">text</field>' +
'</block>' +
'</value>' +
'</block>' +
'<block type="text_changeCase">' +
'<value name="TEXT">' +
'<shadow type="text">' +
'<field name="TEXT">abc</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="text_trim">' +
'<value name="TEXT">' +
'<shadow type="text">' +
'<field name="TEXT">abc</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="text_print">' +
'<value name="TEXT">' +
'<shadow type="text">' +
'<field name="TEXT">abc</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="text_prompt_ext">' +
'<value name="TEXT">' +
'<shadow type="text">' +
'<field name="TEXT">abc</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="text"></block>' +
'<block type="text_join"></block>' +
'<block type="text_append">' +
'<value name="TEXT">' +
'<shadow type="text"></shadow>' +
'</value>' +
'</block>' +
'<block type="text_length">' +
'<value name="VALUE">' +
'<shadow type="text">' +
'<field name="TEXT">abc</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="text_isEmpty">' +
'<value name="VALUE">' +
'<shadow type="text">' +
'<field name="TEXT"></field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="text_indexOf">' +
'<value name="VALUE">' +
'<block type="variables_get">' +
'<field name="VAR">text</field>' +
'</block>' +
'</value>' +
'<value name="FIND">' +
'<shadow type="text">' +
'<field name="TEXT">abc</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="text_charAt">' +
'<value name="VALUE">' +
'<block type="variables_get">' +
'<field name="VAR">text</field>' +
'</block>' +
'</value>' +
'</block>' +
'<block type="text_getSubstring">' +
'<value name="STRING">' +
'<block type="variables_get">' +
'<field name="VAR">text</field>' +
'</block>' +
'</value>' +
'</block>' +
'<block type="text_changeCase">' +
'<value name="TEXT">' +
'<shadow type="text">' +
'<field name="TEXT">abc</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="text_trim">' +
'<value name="TEXT">' +
'<shadow type="text">' +
'<field name="TEXT">abc</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="text_print">' +
'<value name="TEXT">' +
'<shadow type="text">' +
'<field name="TEXT">abc</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="text_prompt_ext">' +
'<value name="TEXT">' +
'<shadow type="text">' +
'<field name="TEXT">abc</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'</xml>');
StandardCategories.categoryMap['text'].hue = 160;
@@ -255,55 +255,55 @@ StandardCategories.categoryMap['lists'] =
StandardCategories.categoryMap['lists'].xml =
Blockly.Xml.textToDom(
'<xml xmlns="https://developers.google.com/blockly/xml">' +
'<block type="lists_create_with">' +
'<mutation items="0"></mutation>' +
'</block>' +
'<block type="lists_create_with"></block>' +
'<block type="lists_repeat">' +
'<value name="NUM">' +
'<shadow type="math_number">' +
'<field name="NUM">5</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="lists_length"></block>' +
'<block type="lists_isEmpty"></block>' +
'<block type="lists_indexOf">' +
'<value name="VALUE">' +
'<block type="variables_get">' +
'<field name="VAR">list</field>' +
'</block>' +
'</value>' +
'</block>' +
'<block type="lists_getIndex">' +
'<value name="VALUE">' +
'<block type="variables_get">' +
'<field name="VAR">list</field>' +
'</block>' +
'</value>' +
'</block>' +
'<block type="lists_setIndex">' +
'<value name="LIST">' +
'<block type="variables_get">' +
'<field name="VAR">list</field>' +
'</block>' +
'</value>' +
'</block>' +
'<block type="lists_getSublist">' +
'<value name="LIST">' +
'<block type="variables_get">' +
'<field name="VAR">list</field>' +
'</block>' +
'</value>' +
'</block>' +
'<block type="lists_split">' +
'<value name="DELIM">' +
'<shadow type="text">' +
'<field name="TEXT">,</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="lists_sort"></block>' +
'<block type="lists_create_with">' +
'<mutation items="0"></mutation>' +
'</block>' +
'<block type="lists_create_with"></block>' +
'<block type="lists_repeat">' +
'<value name="NUM">' +
'<shadow type="math_number">' +
'<field name="NUM">5</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="lists_length"></block>' +
'<block type="lists_isEmpty"></block>' +
'<block type="lists_indexOf">' +
'<value name="VALUE">' +
'<block type="variables_get">' +
'<field name="VAR">list</field>' +
'</block>' +
'</value>' +
'</block>' +
'<block type="lists_getIndex">' +
'<value name="VALUE">' +
'<block type="variables_get">' +
'<field name="VAR">list</field>' +
'</block>' +
'</value>' +
'</block>' +
'<block type="lists_setIndex">' +
'<value name="LIST">' +
'<block type="variables_get">' +
'<field name="VAR">list</field>' +
'</block>' +
'</value>' +
'</block>' +
'<block type="lists_getSublist">' +
'<value name="LIST">' +
'<block type="variables_get">' +
'<field name="VAR">list</field>' +
'</block>' +
'</value>' +
'</block>' +
'<block type="lists_split">' +
'<value name="DELIM">' +
'<shadow type="text">' +
'<field name="TEXT">,</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="lists_sort"></block>' +
'</xml>');
StandardCategories.categoryMap['lists'].hue = 260;
@@ -312,42 +312,42 @@ StandardCategories.categoryMap['colour'] =
StandardCategories.categoryMap['colour'].xml =
Blockly.Xml.textToDom(
'<xml xmlns="https://developers.google.com/blockly/xml">' +
'<block type="colour_picker"></block>' +
'<block type="colour_random"></block>' +
'<block type="colour_rgb">' +
'<value name="RED">' +
'<shadow type="math_number">' +
'<field name="NUM">100</field>' +
'<block type="colour_picker"></block>' +
'<block type="colour_random"></block>' +
'<block type="colour_rgb">' +
'<value name="RED">' +
'<shadow type="math_number">' +
'<field name="NUM">100</field>' +
'</shadow>' +
'</value>' +
'<value name="GREEN">' +
'<shadow type="math_number">' +
'<field name="NUM">50</field>' +
'</shadow>' +
'</value>' +
'<value name="BLUE">' +
'<shadow type="math_number">' +
'<field name="NUM">0</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="colour_blend">' +
'<value name="COLOUR1">' +
'<shadow type="colour_picker">' +
'<field name="COLOUR">#ff0000</field>' +
'</shadow>' +
'</value>' +
'<value name="COLOUR2">' +
'<shadow type="colour_picker">' +
'<field name="COLOUR">#3333ff</field>' +
'</shadow>' +
'</value>' +
'<value name="RATIO">' +
'<shadow type="math_number">' +
'<field name="NUM">0.5</field>' +
'</shadow>' +
'</value>' +
'<value name="GREEN">' +
'<shadow type="math_number">' +
'<field name="NUM">50</field>' +
'</shadow>' +
'</value>' +
'<value name="BLUE">' +
'<shadow type="math_number">' +
'<field name="NUM">0</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'<block type="colour_blend">' +
'<value name="COLOUR1">' +
'<shadow type="colour_picker">' +
'<field name="COLOUR">#ff0000</field>' +
'</shadow>' +
'</value>' +
'<value name="COLOUR2">' +
'<shadow type="colour_picker">' +
'<field name="COLOUR">#3333ff</field>' +
'</shadow>' +
'</value>' +
'<value name="RATIO">' +
'<shadow type="math_number">' +
'<field name="NUM">0.5</field>' +
'</shadow>' +
'</value>' +
'</block>' +
'</value>' +
'</block>' +
'</xml>');
StandardCategories.categoryMap['colour'].hue = 20;

View File

@@ -606,7 +606,7 @@ WorkspaceFactoryController.prototype.loadCategoryByName = function(name) {
// Update the copy in the view.
var tab = this.view.addCategoryRow(copy.name, copy.id);
this.addClickToSwitch(tab, copy.id);
// Color the category tab in the view.
// Colour the category tab in the view.
if (copy.colour) {
this.view.setBorderColour(copy.id, copy.colour);
}

View File

@@ -10,7 +10,6 @@
* Depends on WorkspaceFactoryController (for adding mouse listeners). Tabs for
* each category are stored in tab map, which associates a unique ID for a
* category with a particular tab.
*
*/
@@ -122,7 +121,7 @@ WorkspaceFactoryView.prototype.createCategoryIdName = function(name) {
WorkspaceFactoryView.prototype.setCategoryTabSelection =
function(id, selected) {
if (!this.tabMap[id]) {
return; // Exit if tab does not exist.
return; // Exit if tab does not exist.
}
this.tabMap[id].className = selected ? 'tabon' : 'taboff';
};
@@ -144,8 +143,8 @@ WorkspaceFactoryView.prototype.bindClick = function(el, func) {
/**
* Creates a file and downloads it. In some browsers downloads, and in other
* browsers, opens new tab with contents.
* @param {string} filename Name of file
* @param {!Blob} data Blob containing contents to download
* @param {string} filename Name of file.
* @param {!Blob} data Blob containing contents to download.
*/
WorkspaceFactoryView.prototype.createAndDownloadFile =
function(filename, data) {
@@ -164,8 +163,8 @@ WorkspaceFactoryView.prototype.createAndDownloadFile =
/**
* Given the ID of a certain category, updates the corresponding tab in
* the DOM to show a new name.
* @param {string} newName Name of string to be displayed on tab
* @param {string} id ID of category to be updated
* @param {string} newName Name of string to be displayed on tab.
* @param {string} id ID of category to be updated.
*/
WorkspaceFactoryView.prototype.updateCategoryName = function(newName, id) {
this.tabMap[id].textContent = newName;
@@ -311,7 +310,7 @@ WorkspaceFactoryView.prototype.markShadowBlocks = function(blocks) {
*/
WorkspaceFactoryView.prototype.markShadowBlock = function(block) {
// Add Blockly CSS for user-generated shadow blocks.
Blockly.utils.dom.addClass(block.svgGroup_, 'shadowBlock');
block.getSvgRoot().classList.add('shadowBlock');
// If not a valid shadow block, add a warning message.
if (!block.getSurroundParent()) {
block.setWarningText('Shadow blocks must be nested inside' +
@@ -329,7 +328,7 @@ WorkspaceFactoryView.prototype.markShadowBlock = function(block) {
*/
WorkspaceFactoryView.prototype.unmarkShadowBlock = function(block) {
// Remove Blockly CSS for user-generated shadow blocks.
Blockly.utils.dom.removeClass(block.svgGroup_, 'shadowBlock');
block.getSvgRoot().classList.remove('shadowBlock');
};
/**
@@ -387,8 +386,7 @@ WorkspaceFactoryView.prototype.setBaseOptions = function() {
// Check infinite blocks and hide suboption.
document.getElementById('option_infiniteBlocks_checkbox').checked = true;
document.getElementById('maxBlockNumber_option').style.display =
'none';
document.getElementById('maxBlockNumber_option').style.display = 'none';
// Uncheck grid and zoom options and hide suboptions.
document.getElementById('option_grid_checkbox').checked = false;