From 5f305041a9de4108a00535060cb1df3b54a8aa34 Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Wed, 21 Jul 2021 12:57:19 -0700 Subject: [PATCH 1/4] Migrate core/field_colour.js to ES6 const/let --- core/field_colour.js | 58 ++++++++++++++++++++++---------------------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/core/field_colour.js b/core/field_colour.js index 17d593f0e..632bf6965 100644 --- a/core/field_colour.js +++ b/core/field_colour.js @@ -233,7 +233,7 @@ Blockly.FieldColour.prototype.doValueUpdate_ = function(newValue) { * @return {string} Text representing the value of this field. */ Blockly.FieldColour.prototype.getText = function() { - var colour = /** @type {string} */ (this.value_); + let colour = /** @type {string} */ (this.value_); // Try to use #rgb format if possible, rather than #rrggbb. if (/^#(.)\1(.)\2(.)\3$/.test(colour)) { colour = '#' + colour[1] + colour[3] + colour[5]; @@ -339,8 +339,8 @@ Blockly.FieldColour.prototype.showEditor_ = function() { * @private */ Blockly.FieldColour.prototype.onClick_ = function(e) { - var cell = /** @type {!Element} */ (e.target); - var colour = cell && cell.label; + const cell = /** @type {!Element} */ (e.target); + const colour = cell && cell.label; if (colour !== null) { this.setValue(colour); Blockly.DropDownDiv.hideIfOwner(this); @@ -354,7 +354,7 @@ Blockly.FieldColour.prototype.onClick_ = function(e) { * @private */ Blockly.FieldColour.prototype.onKeyDown_ = function(e) { - var handled = false; + let handled = false; if (e.keyCode === Blockly.utils.KeyCodes.UP) { this.moveHighlightBy_(0, -1); handled = true; @@ -369,9 +369,9 @@ Blockly.FieldColour.prototype.onKeyDown_ = function(e) { handled = true; } else if (e.keyCode === Blockly.utils.KeyCodes.ENTER) { // Select the highlighted colour. - var highlighted = this.getHighlighted_(); + const highlighted = this.getHighlighted_(); if (highlighted) { - var colour = highlighted && highlighted.label; + const colour = highlighted && highlighted.label; if (colour !== null) { this.setValue(colour); } @@ -391,12 +391,12 @@ Blockly.FieldColour.prototype.onKeyDown_ = function(e) { * @private */ Blockly.FieldColour.prototype.moveHighlightBy_ = function(dx, dy) { - var colours = this.colours_ || Blockly.FieldColour.COLOURS; - var columns = this.columns_ || Blockly.FieldColour.COLUMNS; + const colours = this.colours_ || Blockly.FieldColour.COLOURS; + const columns = this.columns_ || Blockly.FieldColour.COLUMNS; // Get the current x and y coordinates - var x = this.highlightedIndex_ % columns; - var y = Math.floor(this.highlightedIndex_ / columns); + let x = this.highlightedIndex_ % columns; + let y = Math.floor(this.highlightedIndex_ / columns); // Add the offset x += dx; @@ -434,8 +434,8 @@ Blockly.FieldColour.prototype.moveHighlightBy_ = function(dx, dy) { } // Move the highlight to the new coordinates. - var cell = /** @type {!Element} */ (this.picker_.childNodes[y].childNodes[x]); - var index = (y * columns) + x; + const cell = /** @type {!Element} */ (this.picker_.childNodes[y].childNodes[x]); + const index = (y * columns) + x; this.setHighlightedCell_(cell, index); }; @@ -445,8 +445,8 @@ Blockly.FieldColour.prototype.moveHighlightBy_ = function(dx, dy) { * @private */ Blockly.FieldColour.prototype.onMouseMove_ = function(e) { - var cell = /** @type {!Element} */ (e.target); - var index = cell && Number(cell.getAttribute('data-index')); + const cell = /** @type {!Element} */ (e.target); + const index = cell && Number(cell.getAttribute('data-index')); if (index !== null && index !== this.highlightedIndex_) { this.setHighlightedCell_(cell, index); } @@ -467,7 +467,7 @@ Blockly.FieldColour.prototype.onMouseEnter_ = function() { */ Blockly.FieldColour.prototype.onMouseLeave_ = function() { this.picker_.blur(); - var highlighted = this.getHighlighted_(); + const highlighted = this.getHighlighted_(); if (highlighted) { Blockly.utils.dom.removeClass(highlighted, 'blocklyColourHighlighted'); } @@ -479,14 +479,14 @@ Blockly.FieldColour.prototype.onMouseLeave_ = function() { * @private */ Blockly.FieldColour.prototype.getHighlighted_ = function() { - var columns = this.columns_ || Blockly.FieldColour.COLUMNS; - var x = this.highlightedIndex_ % columns; - var y = Math.floor(this.highlightedIndex_ / columns); - var row = this.picker_.childNodes[y]; + const columns = this.columns_ || Blockly.FieldColour.COLUMNS; + const x = this.highlightedIndex_ % columns; + const y = Math.floor(this.highlightedIndex_ / columns); + const row = this.picker_.childNodes[y]; if (!row) { return null; } - var col = /** @type {HTMLElement} */ (row.childNodes[x]); + const col = /** @type {HTMLElement} */ (row.childNodes[x]); return col; }; @@ -498,7 +498,7 @@ Blockly.FieldColour.prototype.getHighlighted_ = function() { */ Blockly.FieldColour.prototype.setHighlightedCell_ = function(cell, index) { // Unhighlight the current item. - var highlighted = this.getHighlighted_(); + const highlighted = this.getHighlighted_(); if (highlighted) { Blockly.utils.dom.removeClass(highlighted, 'blocklyColourHighlighted'); } @@ -517,12 +517,12 @@ Blockly.FieldColour.prototype.setHighlightedCell_ = function(cell, index) { * @private */ Blockly.FieldColour.prototype.dropdownCreate_ = function() { - var columns = this.columns_ || Blockly.FieldColour.COLUMNS; - var colours = this.colours_ || Blockly.FieldColour.COLOURS; - var titles = this.titles_ || Blockly.FieldColour.TITLES; - var selectedColour = this.getValue(); + const columns = this.columns_ || Blockly.FieldColour.COLUMNS; + const colours = this.colours_ || Blockly.FieldColour.COLOURS; + const titles = this.titles_ || Blockly.FieldColour.TITLES; + const selectedColour = this.getValue(); // Create the palette. - var table = document.createElement('table'); + const table = document.createElement('table'); table.className = 'blocklyColourTable'; table.tabIndex = 0; table.dir = 'ltr'; @@ -532,14 +532,14 @@ Blockly.FieldColour.prototype.dropdownCreate_ = function() { Math.floor(colours.length / columns)); Blockly.utils.aria.setState(table, Blockly.utils.aria.State.COLCOUNT, columns); - var row; - for (var i = 0; i < colours.length; i++) { + let row; + for (let i = 0; i < colours.length; i++) { if (i % columns == 0) { row = document.createElement('tr'); Blockly.utils.aria.setRole(row, Blockly.utils.aria.Role.ROW); table.appendChild(row); } - var cell = document.createElement('td'); + const cell = document.createElement('td'); row.appendChild(cell); cell.label = colours[i]; // This becomes the value, if clicked. cell.title = titles[i] || colours[i]; From 03e1725f3244bfbedc9934b2ca339f73cbfcb646 Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Wed, 21 Jul 2021 13:00:05 -0700 Subject: [PATCH 2/4] Migrate core/field_colour.js to goog.module --- core/field_colour.js | 99 +++++++++++++++++++++++--------------------- tests/deps.js | 2 +- 2 files changed, 52 insertions(+), 49 deletions(-) diff --git a/core/field_colour.js b/core/field_colour.js index 632bf6965..9d342150c 100644 --- a/core/field_colour.js +++ b/core/field_colour.js @@ -10,7 +10,8 @@ */ 'use strict'; -goog.provide('Blockly.FieldColour'); +goog.module('Blockly.FieldColour'); +goog.module.declareLegacyNamespace(); goog.require('Blockly.browserEvents'); goog.require('Blockly.Css'); @@ -41,8 +42,8 @@ goog.require('Blockly.utils.Size'); * @extends {Blockly.Field} * @constructor */ -Blockly.FieldColour = function(opt_value, opt_validator, opt_config) { - Blockly.FieldColour.superClass_.constructor.call( +const FieldColour = function(opt_value, opt_validator, opt_config) { + FieldColour.superClass_.constructor.call( this, opt_value, opt_validator, opt_config); /** @@ -94,16 +95,16 @@ Blockly.FieldColour = function(opt_value, opt_validator, opt_config) { */ this.onKeyDownWrapper_ = null; }; -Blockly.utils.object.inherits(Blockly.FieldColour, Blockly.Field); +Blockly.utils.object.inherits(FieldColour, Blockly.Field); /** * Construct a FieldColour from a JSON arg object. * @param {!Object} options A JSON object with options (colour). - * @return {!Blockly.FieldColour} The new field instance. + * @return {!FieldColour} The new field instance. * @package * @nocollapse */ -Blockly.FieldColour.fromJson = function(options) { +FieldColour.fromJson = function(options) { // `this` might be a subclass of FieldColour if that class doesn't override // the static fromJson method. return new this(options['colour'], undefined, options); @@ -114,12 +115,12 @@ Blockly.FieldColour.fromJson = function(options) { * are not. Editable fields should also be serializable. * @type {boolean} */ -Blockly.FieldColour.prototype.SERIALIZABLE = true; +FieldColour.prototype.SERIALIZABLE = true; /** * Mouse cursor style when over the hotspot that initiates the editor. */ -Blockly.FieldColour.prototype.CURSOR = 'default'; +FieldColour.prototype.CURSOR = 'default'; /** * Used to tell if the field needs to be rendered the next time the block is @@ -128,21 +129,21 @@ Blockly.FieldColour.prototype.CURSOR = 'default'; * @type {boolean} * @protected */ -Blockly.FieldColour.prototype.isDirty_ = false; +FieldColour.prototype.isDirty_ = false; /** * Array of colours used by this field. If null, use the global list. * @type {Array} * @private */ -Blockly.FieldColour.prototype.colours_ = null; +FieldColour.prototype.colours_ = null; /** * Array of colour tooltips used by this field. If null, use the global list. * @type {Array} * @private */ -Blockly.FieldColour.prototype.titles_ = null; +FieldColour.prototype.titles_ = null; /** * Number of colour columns used by this field. If 0, use the global setting. @@ -150,7 +151,7 @@ Blockly.FieldColour.prototype.titles_ = null; * @type {number} * @private */ -Blockly.FieldColour.prototype.columns_ = 0; +FieldColour.prototype.columns_ = 0; /** * Configure the field based on the given map of options. @@ -158,8 +159,8 @@ Blockly.FieldColour.prototype.columns_ = 0; * @protected * @override */ -Blockly.FieldColour.prototype.configure_ = function(config) { - Blockly.FieldColour.superClass_.configure_.call(this, config); +FieldColour.prototype.configure_ = function(config) { + FieldColour.superClass_.configure_.call(this, config); if (config['colourOptions']) { this.colours_ = config['colourOptions']; this.titles_ = config['colourTitles']; @@ -173,7 +174,7 @@ Blockly.FieldColour.prototype.configure_ = function(config) { * Create the block UI for this colour field. * @package */ -Blockly.FieldColour.prototype.initView = function() { +FieldColour.prototype.initView = function() { this.size_ = new Blockly.utils.Size( this.getConstants().FIELD_COLOUR_DEFAULT_WIDTH, this.getConstants().FIELD_COLOUR_DEFAULT_HEIGHT); @@ -188,7 +189,7 @@ Blockly.FieldColour.prototype.initView = function() { /** * @override */ -Blockly.FieldColour.prototype.applyColour = function() { +FieldColour.prototype.applyColour = function() { if (!this.getConstants().FIELD_COLOUR_FULL_BLOCK) { if (this.borderRect_) { this.borderRect_.style.fill = /** @type {string} */ (this.getValue()); @@ -205,7 +206,7 @@ Blockly.FieldColour.prototype.applyColour = function() { * @return {?string} A valid colour, or null if invalid. * @protected */ -Blockly.FieldColour.prototype.doClassValidation_ = function(opt_newValue) { +FieldColour.prototype.doClassValidation_ = function(opt_newValue) { if (typeof opt_newValue != 'string') { return null; } @@ -218,7 +219,7 @@ Blockly.FieldColour.prototype.doClassValidation_ = function(opt_newValue) { * that this is a colour in '#rrggbb' format. * @protected */ -Blockly.FieldColour.prototype.doValueUpdate_ = function(newValue) { +FieldColour.prototype.doValueUpdate_ = function(newValue) { this.value_ = newValue; if (this.borderRect_) { this.borderRect_.style.fill = /** @type {string} */ (newValue); @@ -232,7 +233,7 @@ Blockly.FieldColour.prototype.doValueUpdate_ = function(newValue) { * Get the text for this field. Used when the block is collapsed. * @return {string} Text representing the value of this field. */ -Blockly.FieldColour.prototype.getText = function() { +FieldColour.prototype.getText = function() { let colour = /** @type {string} */ (this.value_); // Try to use #rgb format if possible, rather than #rrggbb. if (/^#(.)\1(.)\2(.)\3$/.test(colour)) { @@ -247,7 +248,7 @@ Blockly.FieldColour.prototype.getText = function() { * All colour pickers use this unless overridden with setColours. * @type {!Array} */ -Blockly.FieldColour.COLOURS = [ +FieldColour.COLOURS = [ // grays '#ffffff', '#cccccc', '#c0c0c0', '#999999', '#666666', '#333333', '#000000', // reds @@ -275,7 +276,7 @@ Blockly.FieldColour.COLOURS = [ * @type {*} * @protected */ -Blockly.FieldColour.prototype.DEFAULT_VALUE = Blockly.FieldColour.COLOURS[0]; +FieldColour.prototype.DEFAULT_VALUE = FieldColour.COLOURS[0]; /** * An array of tooltip strings for the palette. If not the same length as @@ -283,23 +284,23 @@ Blockly.FieldColour.prototype.DEFAULT_VALUE = Blockly.FieldColour.COLOURS[0]; * All colour pickers use this unless overridden with setColours. * @type {!Array} */ -Blockly.FieldColour.TITLES = []; +FieldColour.TITLES = []; /** * Number of columns in the palette. * All colour pickers use this unless overridden with setColumns. */ -Blockly.FieldColour.COLUMNS = 7; +FieldColour.COLUMNS = 7; /** * Set a custom colour grid for this field. * @param {Array} colours Array of colours for this block, - * or null to use default (Blockly.FieldColour.COLOURS). + * or null to use default (FieldColour.COLOURS). * @param {Array=} opt_titles Optional array of colour tooltips, - * or null to use default (Blockly.FieldColour.TITLES). - * @return {!Blockly.FieldColour} Returns itself (for method chaining). + * or null to use default (FieldColour.TITLES). + * @return {!FieldColour} Returns itself (for method chaining). */ -Blockly.FieldColour.prototype.setColours = function(colours, opt_titles) { +FieldColour.prototype.setColours = function(colours, opt_titles) { this.colours_ = colours; if (opt_titles) { this.titles_ = opt_titles; @@ -310,10 +311,10 @@ Blockly.FieldColour.prototype.setColours = function(colours, opt_titles) { /** * Set a custom grid size for this field. * @param {number} columns Number of columns for this block, - * or 0 to use default (Blockly.FieldColour.COLUMNS). - * @return {!Blockly.FieldColour} Returns itself (for method chaining). + * or 0 to use default (FieldColour.COLUMNS). + * @return {!FieldColour} Returns itself (for method chaining). */ -Blockly.FieldColour.prototype.setColumns = function(columns) { +FieldColour.prototype.setColumns = function(columns) { this.columns_ = columns; return this; }; @@ -322,7 +323,7 @@ Blockly.FieldColour.prototype.setColumns = function(columns) { * Create and show the colour field's editor. * @protected */ -Blockly.FieldColour.prototype.showEditor_ = function() { +FieldColour.prototype.showEditor_ = function() { this.dropdownCreate_(); Blockly.DropDownDiv.getContentDiv().appendChild(this.picker_); @@ -338,7 +339,7 @@ Blockly.FieldColour.prototype.showEditor_ = function() { * @param {!MouseEvent} e Mouse event. * @private */ -Blockly.FieldColour.prototype.onClick_ = function(e) { +FieldColour.prototype.onClick_ = function(e) { const cell = /** @type {!Element} */ (e.target); const colour = cell && cell.label; if (colour !== null) { @@ -353,7 +354,7 @@ Blockly.FieldColour.prototype.onClick_ = function(e) { * @param {!KeyboardEvent} e Keyboard event. * @private */ -Blockly.FieldColour.prototype.onKeyDown_ = function(e) { +FieldColour.prototype.onKeyDown_ = function(e) { let handled = false; if (e.keyCode === Blockly.utils.KeyCodes.UP) { this.moveHighlightBy_(0, -1); @@ -390,9 +391,9 @@ Blockly.FieldColour.prototype.onKeyDown_ = function(e) { * @param {number} dy Change of y * @private */ -Blockly.FieldColour.prototype.moveHighlightBy_ = function(dx, dy) { - const colours = this.colours_ || Blockly.FieldColour.COLOURS; - const columns = this.columns_ || Blockly.FieldColour.COLUMNS; +FieldColour.prototype.moveHighlightBy_ = function(dx, dy) { + const colours = this.colours_ || FieldColour.COLOURS; + const columns = this.columns_ || FieldColour.COLUMNS; // Get the current x and y coordinates let x = this.highlightedIndex_ % columns; @@ -444,7 +445,7 @@ Blockly.FieldColour.prototype.moveHighlightBy_ = function(dx, dy) { * @param {!MouseEvent} e Mouse event. * @private */ -Blockly.FieldColour.prototype.onMouseMove_ = function(e) { +FieldColour.prototype.onMouseMove_ = function(e) { const cell = /** @type {!Element} */ (e.target); const index = cell && Number(cell.getAttribute('data-index')); if (index !== null && index !== this.highlightedIndex_) { @@ -456,7 +457,7 @@ Blockly.FieldColour.prototype.onMouseMove_ = function(e) { * Handle a mouse enter event. Focus the picker. * @private */ -Blockly.FieldColour.prototype.onMouseEnter_ = function() { +FieldColour.prototype.onMouseEnter_ = function() { this.picker_.focus({preventScroll:true}); }; @@ -465,7 +466,7 @@ Blockly.FieldColour.prototype.onMouseEnter_ = function() { * the currently highlighted colour. * @private */ -Blockly.FieldColour.prototype.onMouseLeave_ = function() { +FieldColour.prototype.onMouseLeave_ = function() { this.picker_.blur(); const highlighted = this.getHighlighted_(); if (highlighted) { @@ -478,8 +479,8 @@ Blockly.FieldColour.prototype.onMouseLeave_ = function() { * @return {?HTMLElement} Highlighted item (null if none). * @private */ -Blockly.FieldColour.prototype.getHighlighted_ = function() { - const columns = this.columns_ || Blockly.FieldColour.COLUMNS; +FieldColour.prototype.getHighlighted_ = function() { + const columns = this.columns_ || FieldColour.COLUMNS; const x = this.highlightedIndex_ % columns; const y = Math.floor(this.highlightedIndex_ / columns); const row = this.picker_.childNodes[y]; @@ -496,7 +497,7 @@ Blockly.FieldColour.prototype.getHighlighted_ = function() { * @param {number} index the index of the new cell * @private */ -Blockly.FieldColour.prototype.setHighlightedCell_ = function(cell, index) { +FieldColour.prototype.setHighlightedCell_ = function(cell, index) { // Unhighlight the current item. const highlighted = this.getHighlighted_(); if (highlighted) { @@ -516,10 +517,10 @@ Blockly.FieldColour.prototype.setHighlightedCell_ = function(cell, index) { * Create a colour picker dropdown editor. * @private */ -Blockly.FieldColour.prototype.dropdownCreate_ = function() { - const columns = this.columns_ || Blockly.FieldColour.COLUMNS; - const colours = this.colours_ || Blockly.FieldColour.COLOURS; - const titles = this.titles_ || Blockly.FieldColour.TITLES; +FieldColour.prototype.dropdownCreate_ = function() { + const columns = this.columns_ || FieldColour.COLUMNS; + const colours = this.colours_ || FieldColour.COLOURS; + const titles = this.titles_ || FieldColour.TITLES; const selectedColour = this.getValue(); // Create the palette. const table = document.createElement('table'); @@ -576,7 +577,7 @@ Blockly.FieldColour.prototype.dropdownCreate_ = function() { * Disposes of events and DOM-references belonging to the colour editor. * @private */ -Blockly.FieldColour.prototype.dropdownDispose_ = function() { +FieldColour.prototype.dropdownDispose_ = function() { if (this.onClickWrapper_) { Blockly.browserEvents.unbind(this.onClickWrapper_); this.onClickWrapper_ = null; @@ -637,4 +638,6 @@ Blockly.Css.register([ /* eslint-enable indent */ ]); -Blockly.fieldRegistry.register('field_colour', Blockly.FieldColour); +Blockly.fieldRegistry.register('field_colour', FieldColour); + +exports = FieldColour; diff --git a/tests/deps.js b/tests/deps.js index 979c58c74..0e33cec9b 100644 --- a/tests/deps.js +++ b/tests/deps.js @@ -51,7 +51,7 @@ goog.addDependency('../../core/extensions.js', ['Blockly.Extensions'], ['Blockly goog.addDependency('../../core/field.js', ['Blockly.Field'], ['Blockly.DropDownDiv', 'Blockly.Events', 'Blockly.Events.BlockChange', 'Blockly.Gesture', 'Blockly.IASTNodeLocationSvg', 'Blockly.IASTNodeLocationWithBlock', 'Blockly.IKeyboardAccessible', 'Blockly.IRegistrable', 'Blockly.MarkerManager', 'Blockly.Tooltip', 'Blockly.WidgetDiv', 'Blockly.browserEvents', 'Blockly.utils', 'Blockly.utils.Rect', 'Blockly.utils.Size', 'Blockly.utils.Svg', 'Blockly.utils.dom', 'Blockly.utils.style', 'Blockly.utils.userAgent'], {'lang': 'es5'}); goog.addDependency('../../core/field_angle.js', ['Blockly.FieldAngle'], ['Blockly.Css', 'Blockly.DropDownDiv', 'Blockly.FieldTextInput', 'Blockly.WidgetDiv', 'Blockly.browserEvents', 'Blockly.fieldRegistry', 'Blockly.utils.KeyCodes', 'Blockly.utils.Svg', 'Blockly.utils.dom', 'Blockly.utils.math', 'Blockly.utils.object', 'Blockly.utils.userAgent']); goog.addDependency('../../core/field_checkbox.js', ['Blockly.FieldCheckbox'], ['Blockly.Events.BlockChange', 'Blockly.Field', 'Blockly.fieldRegistry', 'Blockly.utils.dom', 'Blockly.utils.object']); -goog.addDependency('../../core/field_colour.js', ['Blockly.FieldColour'], ['Blockly.Css', 'Blockly.DropDownDiv', 'Blockly.Events.BlockChange', 'Blockly.Field', 'Blockly.browserEvents', 'Blockly.fieldRegistry', 'Blockly.utils.IdGenerator', 'Blockly.utils.KeyCodes', 'Blockly.utils.Size', 'Blockly.utils.aria', 'Blockly.utils.colour', 'Blockly.utils.dom', 'Blockly.utils.object']); +goog.addDependency('../../core/field_colour.js', ['Blockly.FieldColour'], ['Blockly.Css', 'Blockly.DropDownDiv', 'Blockly.Events.BlockChange', 'Blockly.Field', 'Blockly.browserEvents', 'Blockly.fieldRegistry', 'Blockly.utils.IdGenerator', 'Blockly.utils.KeyCodes', 'Blockly.utils.Size', 'Blockly.utils.aria', 'Blockly.utils.colour', 'Blockly.utils.dom', 'Blockly.utils.object'], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/field_dropdown.js', ['Blockly.FieldDropdown'], ['Blockly.DropDownDiv', 'Blockly.Field', 'Blockly.Menu', 'Blockly.MenuItem', 'Blockly.fieldRegistry', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.Svg', 'Blockly.utils.aria', 'Blockly.utils.dom', 'Blockly.utils.object', 'Blockly.utils.string', 'Blockly.utils.userAgent']); goog.addDependency('../../core/field_image.js', ['Blockly.FieldImage'], ['Blockly.Field', 'Blockly.fieldRegistry', 'Blockly.utils', 'Blockly.utils.Size', 'Blockly.utils.Svg', 'Blockly.utils.dom', 'Blockly.utils.object']); goog.addDependency('../../core/field_label.js', ['Blockly.FieldLabel'], ['Blockly.Field', 'Blockly.fieldRegistry', 'Blockly.utils', 'Blockly.utils.dom', 'Blockly.utils.object']); From ba30031d366e2b7f9af77f1be01c433487d76842 Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Wed, 21 Jul 2021 13:13:31 -0700 Subject: [PATCH 3/4] Migrate core/field_colour.js to named requires --- core/field_colour.js | 119 ++++++++++++++++++++++--------------------- 1 file changed, 60 insertions(+), 59 deletions(-) diff --git a/core/field_colour.js b/core/field_colour.js index 9d342150c..879c340bc 100644 --- a/core/field_colour.js +++ b/core/field_colour.js @@ -13,20 +13,21 @@ goog.module('Blockly.FieldColour'); goog.module.declareLegacyNamespace(); -goog.require('Blockly.browserEvents'); -goog.require('Blockly.Css'); -goog.require('Blockly.DropDownDiv'); +const Css = goog.require('Blockly.Css'); +const DropDownDiv = goog.require('Blockly.DropDownDiv'); +const Field = goog.require('Blockly.Field'); +const IdGenerator = goog.require('Blockly.utils.IdGenerator'); +const KeyCodes = goog.require('Blockly.utils.KeyCodes'); +const Size = goog.require('Blockly.utils.Size'); +const aria = goog.require('Blockly.utils.aria'); +const colour = goog.require('Blockly.utils.colour'); +const fieldRegistry = goog.require('Blockly.fieldRegistry'); +const {addClass, removeClass} = goog.require('Blockly.utils.dom'); +/* eslint-disable-next-line no-unused-vars */ +const {conditionalBind, unbind, Data} = goog.require('Blockly.browserEvents'); +const {inherits} = goog.require('Blockly.utils.object'); /** @suppress {extraRequire} */ goog.require('Blockly.Events.BlockChange'); -goog.require('Blockly.Field'); -goog.require('Blockly.fieldRegistry'); -goog.require('Blockly.utils.aria'); -goog.require('Blockly.utils.colour'); -goog.require('Blockly.utils.dom'); -goog.require('Blockly.utils.IdGenerator'); -goog.require('Blockly.utils.KeyCodes'); -goog.require('Blockly.utils.object'); -goog.require('Blockly.utils.Size'); /** @@ -35,11 +36,11 @@ goog.require('Blockly.utils.Size'); * '#rrggbb' format. Defaults to the first value in the default colour array. * @param {Function=} opt_validator A function that is called to validate * changes to the field's value. Takes in a colour string & returns a - * validated colour string ('#rrggbb' format), or null to abort the change. + * validated colour string ('#rrggbb' format), or null to abort the change.Blockly. * @param {Object=} opt_config A map of options used to configure the field. * See the [field creation documentation]{@link https://developers.google.com/blockly/guides/create-custom-blocks/fields/built-in-fields/colour} * for a list of properties this parameter supports. - * @extends {Blockly.Field} + * @extends {Field} * @constructor */ const FieldColour = function(opt_value, opt_validator, opt_config) { @@ -62,40 +63,40 @@ const FieldColour = function(opt_value, opt_validator, opt_config) { /** * Mouse click event data. - * @type {?Blockly.browserEvents.Data} + * @type {?Data} * @private */ this.onClickWrapper_ = null; /** * Mouse move event data. - * @type {?Blockly.browserEvents.Data} + * @type {?Data} * @private */ this.onMouseMoveWrapper_ = null; /** * Mouse enter event data. - * @type {?Blockly.browserEvents.Data} + * @type {?Data} * @private */ this.onMouseEnterWrapper_ = null; /** * Mouse leave event data. - * @type {?Blockly.browserEvents.Data} + * @type {?Data} * @private */ this.onMouseLeaveWrapper_ = null; /** * Key down event data. - * @type {?Blockly.browserEvents.Data} + * @type {?Data} * @private */ this.onKeyDownWrapper_ = null; }; -Blockly.utils.object.inherits(FieldColour, Blockly.Field); +inherits(FieldColour, Field); /** * Construct a FieldColour from a JSON arg object. @@ -175,7 +176,7 @@ FieldColour.prototype.configure_ = function(config) { * @package */ FieldColour.prototype.initView = function() { - this.size_ = new Blockly.utils.Size( + this.size_ = new Size( this.getConstants().FIELD_COLOUR_DEFAULT_WIDTH, this.getConstants().FIELD_COLOUR_DEFAULT_HEIGHT); if (!this.getConstants().FIELD_COLOUR_FULL_BLOCK) { @@ -210,7 +211,7 @@ FieldColour.prototype.doClassValidation_ = function(opt_newValue) { if (typeof opt_newValue != 'string') { return null; } - return Blockly.utils.colour.parse(opt_newValue); + return colour.parse(opt_newValue); }; /** @@ -325,9 +326,9 @@ FieldColour.prototype.setColumns = function(columns) { */ FieldColour.prototype.showEditor_ = function() { this.dropdownCreate_(); - Blockly.DropDownDiv.getContentDiv().appendChild(this.picker_); + DropDownDiv.getContentDiv().appendChild(this.picker_); - Blockly.DropDownDiv.showPositionedByField( + DropDownDiv.showPositionedByField( this, this.dropdownDispose_.bind(this)); // Focus so we can start receiving keyboard events. @@ -344,7 +345,7 @@ FieldColour.prototype.onClick_ = function(e) { const colour = cell && cell.label; if (colour !== null) { this.setValue(colour); - Blockly.DropDownDiv.hideIfOwner(this); + DropDownDiv.hideIfOwner(this); } }; @@ -356,19 +357,19 @@ FieldColour.prototype.onClick_ = function(e) { */ FieldColour.prototype.onKeyDown_ = function(e) { let handled = false; - if (e.keyCode === Blockly.utils.KeyCodes.UP) { + if (e.keyCode === KeyCodes.UP) { this.moveHighlightBy_(0, -1); handled = true; - } else if (e.keyCode === Blockly.utils.KeyCodes.DOWN) { + } else if (e.keyCode === KeyCodes.DOWN) { this.moveHighlightBy_(0, 1); handled = true; - } else if (e.keyCode === Blockly.utils.KeyCodes.LEFT) { + } else if (e.keyCode === KeyCodes.LEFT) { this.moveHighlightBy_(-1, 0); handled = true; - } else if (e.keyCode === Blockly.utils.KeyCodes.RIGHT) { + } else if (e.keyCode === KeyCodes.RIGHT) { this.moveHighlightBy_(1, 0); handled = true; - } else if (e.keyCode === Blockly.utils.KeyCodes.ENTER) { + } else if (e.keyCode === KeyCodes.ENTER) { // Select the highlighted colour. const highlighted = this.getHighlighted_(); if (highlighted) { @@ -377,7 +378,7 @@ FieldColour.prototype.onKeyDown_ = function(e) { this.setValue(colour); } } - Blockly.DropDownDiv.hideWithoutAnimation(); + DropDownDiv.hideWithoutAnimation(); handled = true; } if (handled) { @@ -470,7 +471,7 @@ FieldColour.prototype.onMouseLeave_ = function() { this.picker_.blur(); const highlighted = this.getHighlighted_(); if (highlighted) { - Blockly.utils.dom.removeClass(highlighted, 'blocklyColourHighlighted'); + removeClass(highlighted, 'blocklyColourHighlighted'); } }; @@ -501,16 +502,16 @@ FieldColour.prototype.setHighlightedCell_ = function(cell, index) { // Unhighlight the current item. const highlighted = this.getHighlighted_(); if (highlighted) { - Blockly.utils.dom.removeClass(highlighted, 'blocklyColourHighlighted'); + removeClass(highlighted, 'blocklyColourHighlighted'); } // Highlight new item. - Blockly.utils.dom.addClass(cell, 'blocklyColourHighlighted'); + addClass(cell, 'blocklyColourHighlighted'); // Set new highlighted index. this.highlightedIndex_ = index; // Update accessibility roles. - Blockly.utils.aria.setState(/** @type {!Element} */ (this.picker_), - Blockly.utils.aria.State.ACTIVEDESCENDANT, cell.getAttribute('id')); + aria.setState(/** @type {!Element} */ (this.picker_), + aria.State.ACTIVEDESCENDANT, cell.getAttribute('id')); }; /** @@ -527,30 +528,30 @@ FieldColour.prototype.dropdownCreate_ = function() { table.className = 'blocklyColourTable'; table.tabIndex = 0; table.dir = 'ltr'; - Blockly.utils.aria.setRole(table, Blockly.utils.aria.Role.GRID); - Blockly.utils.aria.setState(table, Blockly.utils.aria.State.EXPANDED, true); - Blockly.utils.aria.setState(table, Blockly.utils.aria.State.ROWCOUNT, + aria.setRole(table, aria.Role.GRID); + aria.setState(table, aria.State.EXPANDED, true); + aria.setState(table, aria.State.ROWCOUNT, Math.floor(colours.length / columns)); - Blockly.utils.aria.setState(table, Blockly.utils.aria.State.COLCOUNT, + aria.setState(table, aria.State.COLCOUNT, columns); let row; for (let i = 0; i < colours.length; i++) { if (i % columns == 0) { row = document.createElement('tr'); - Blockly.utils.aria.setRole(row, Blockly.utils.aria.Role.ROW); + aria.setRole(row, aria.Role.ROW); table.appendChild(row); } const cell = document.createElement('td'); row.appendChild(cell); cell.label = colours[i]; // This becomes the value, if clicked. cell.title = titles[i] || colours[i]; - cell.id = Blockly.utils.IdGenerator.getNextUniqueId(); + cell.id = IdGenerator.getNextUniqueId(); cell.setAttribute('data-index', i); - Blockly.utils.aria.setRole(cell, Blockly.utils.aria.Role.GRIDCELL); - Blockly.utils.aria.setState(cell, - Blockly.utils.aria.State.LABEL, colours[i]); - Blockly.utils.aria.setState(cell, - Blockly.utils.aria.State.SELECTED, colours[i] == selectedColour); + aria.setRole(cell, aria.Role.GRIDCELL); + aria.setState(cell, + aria.State.LABEL, colours[i]); + aria.setState(cell, + aria.State.SELECTED, colours[i] == selectedColour); cell.style.backgroundColor = colours[i]; if (colours[i] == selectedColour) { cell.className = 'blocklyColourSelected'; @@ -559,15 +560,15 @@ FieldColour.prototype.dropdownCreate_ = function() { } // Configure event handler on the table to listen for any event in a cell. - this.onClickWrapper_ = Blockly.browserEvents.conditionalBind( + this.onClickWrapper_ = conditionalBind( table, 'click', this, this.onClick_, true); - this.onMouseMoveWrapper_ = Blockly.browserEvents.conditionalBind( + this.onMouseMoveWrapper_ = conditionalBind( table, 'mousemove', this, this.onMouseMove_, true); - this.onMouseEnterWrapper_ = Blockly.browserEvents.conditionalBind( + this.onMouseEnterWrapper_ = conditionalBind( table, 'mouseenter', this, this.onMouseEnter_, true); - this.onMouseLeaveWrapper_ = Blockly.browserEvents.conditionalBind( + this.onMouseLeaveWrapper_ = conditionalBind( table, 'mouseleave', this, this.onMouseLeave_, true); - this.onKeyDownWrapper_ = Blockly.browserEvents.conditionalBind( + this.onKeyDownWrapper_ = conditionalBind( table, 'keydown', this, this.onKeyDown_); this.picker_ = table; @@ -579,23 +580,23 @@ FieldColour.prototype.dropdownCreate_ = function() { */ FieldColour.prototype.dropdownDispose_ = function() { if (this.onClickWrapper_) { - Blockly.browserEvents.unbind(this.onClickWrapper_); + unbind(this.onClickWrapper_); this.onClickWrapper_ = null; } if (this.onMouseMoveWrapper_) { - Blockly.browserEvents.unbind(this.onMouseMoveWrapper_); + unbind(this.onMouseMoveWrapper_); this.onMouseMoveWrapper_ = null; } if (this.onMouseEnterWrapper_) { - Blockly.browserEvents.unbind(this.onMouseEnterWrapper_); + unbind(this.onMouseEnterWrapper_); this.onMouseEnterWrapper_ = null; } if (this.onMouseLeaveWrapper_) { - Blockly.browserEvents.unbind(this.onMouseLeaveWrapper_); + unbind(this.onMouseLeaveWrapper_); this.onMouseLeaveWrapper_ = null; } if (this.onKeyDownWrapper_) { - Blockly.browserEvents.unbind(this.onKeyDownWrapper_); + unbind(this.onKeyDownWrapper_); this.onKeyDownWrapper_ = null; } this.picker_ = null; @@ -605,7 +606,7 @@ FieldColour.prototype.dropdownDispose_ = function() { /** * CSS for colour picker. See css.js for use. */ -Blockly.Css.register([ +Css.register([ /* eslint-disable indent */ '.blocklyColourTable {', 'border-collapse: collapse;', @@ -638,6 +639,6 @@ Blockly.Css.register([ /* eslint-enable indent */ ]); -Blockly.fieldRegistry.register('field_colour', FieldColour); +fieldRegistry.register('field_colour', FieldColour); exports = FieldColour; From 595f3c0802ce404b8d8987c747278acc1c1c339d Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Wed, 21 Jul 2021 13:17:10 -0700 Subject: [PATCH 4/4] clang-format core/field_colour.js --- core/field_colour.js | 57 ++++++++++++++++++++++---------------------- 1 file changed, 28 insertions(+), 29 deletions(-) diff --git a/core/field_colour.js b/core/field_colour.js index 879c340bc..a3dc0bf72 100644 --- a/core/field_colour.js +++ b/core/field_colour.js @@ -36,9 +36,11 @@ goog.require('Blockly.Events.BlockChange'); * '#rrggbb' format. Defaults to the first value in the default colour array. * @param {Function=} opt_validator A function that is called to validate * changes to the field's value. Takes in a colour string & returns a - * validated colour string ('#rrggbb' format), or null to abort the change.Blockly. + * validated colour string ('#rrggbb' format), or null to abort the + * change.Blockly. * @param {Object=} opt_config A map of options used to configure the field. - * See the [field creation documentation]{@link https://developers.google.com/blockly/guides/create-custom-blocks/fields/built-in-fields/colour} + * See the [field creation documentation]{@link + * https://developers.google.com/blockly/guides/create-custom-blocks/fields/built-in-fields/colour} * for a list of properties this parameter supports. * @extends {Field} * @constructor @@ -328,11 +330,10 @@ FieldColour.prototype.showEditor_ = function() { this.dropdownCreate_(); DropDownDiv.getContentDiv().appendChild(this.picker_); - DropDownDiv.showPositionedByField( - this, this.dropdownDispose_.bind(this)); + DropDownDiv.showPositionedByField(this, this.dropdownDispose_.bind(this)); // Focus so we can start receiving keyboard events. - this.picker_.focus({preventScroll:true}); + this.picker_.focus({preventScroll: true}); }; /** @@ -416,8 +417,7 @@ FieldColour.prototype.moveHighlightBy_ = function(dx, dy) { } else if (dx > 0) { // Move right one grid cell, even in RTL. // Loop to the start of the next row, if there's room. - if (x > columns - 1 && - y < Math.floor(colours.length / columns) - 1) { + if (x > columns - 1 && y < Math.floor(colours.length / columns) - 1) { x = 0; y++; } else if (x > columns - 1) { @@ -436,7 +436,8 @@ FieldColour.prototype.moveHighlightBy_ = function(dx, dy) { } // Move the highlight to the new coordinates. - const cell = /** @type {!Element} */ (this.picker_.childNodes[y].childNodes[x]); + const cell = + /** @type {!Element} */ (this.picker_.childNodes[y].childNodes[x]); const index = (y * columns) + x; this.setHighlightedCell_(cell, index); }; @@ -459,7 +460,7 @@ FieldColour.prototype.onMouseMove_ = function(e) { * @private */ FieldColour.prototype.onMouseEnter_ = function() { - this.picker_.focus({preventScroll:true}); + this.picker_.focus({preventScroll: true}); }; /** @@ -510,8 +511,9 @@ FieldColour.prototype.setHighlightedCell_ = function(cell, index) { this.highlightedIndex_ = index; // Update accessibility roles. - aria.setState(/** @type {!Element} */ (this.picker_), - aria.State.ACTIVEDESCENDANT, cell.getAttribute('id')); + aria.setState( + /** @type {!Element} */ (this.picker_), aria.State.ACTIVEDESCENDANT, + cell.getAttribute('id')); }; /** @@ -530,10 +532,9 @@ FieldColour.prototype.dropdownCreate_ = function() { table.dir = 'ltr'; aria.setRole(table, aria.Role.GRID); aria.setState(table, aria.State.EXPANDED, true); - aria.setState(table, aria.State.ROWCOUNT, - Math.floor(colours.length / columns)); - aria.setState(table, aria.State.COLCOUNT, - columns); + aria.setState( + table, aria.State.ROWCOUNT, Math.floor(colours.length / columns)); + aria.setState(table, aria.State.COLCOUNT, columns); let row; for (let i = 0; i < colours.length; i++) { if (i % columns == 0) { @@ -548,10 +549,8 @@ FieldColour.prototype.dropdownCreate_ = function() { cell.id = IdGenerator.getNextUniqueId(); cell.setAttribute('data-index', i); aria.setRole(cell, aria.Role.GRIDCELL); - aria.setState(cell, - aria.State.LABEL, colours[i]); - aria.setState(cell, - aria.State.SELECTED, colours[i] == selectedColour); + aria.setState(cell, aria.State.LABEL, colours[i]); + aria.setState(cell, aria.State.SELECTED, colours[i] == selectedColour); cell.style.backgroundColor = colours[i]; if (colours[i] == selectedColour) { cell.className = 'blocklyColourSelected'; @@ -560,16 +559,16 @@ FieldColour.prototype.dropdownCreate_ = function() { } // Configure event handler on the table to listen for any event in a cell. - this.onClickWrapper_ = conditionalBind( - table, 'click', this, this.onClick_, true); - this.onMouseMoveWrapper_ = conditionalBind( - table, 'mousemove', this, this.onMouseMove_, true); - this.onMouseEnterWrapper_ = conditionalBind( - table, 'mouseenter', this, this.onMouseEnter_, true); - this.onMouseLeaveWrapper_ = conditionalBind( - table, 'mouseleave', this, this.onMouseLeave_, true); - this.onKeyDownWrapper_ = conditionalBind( - table, 'keydown', this, this.onKeyDown_); + this.onClickWrapper_ = + conditionalBind(table, 'click', this, this.onClick_, true); + this.onMouseMoveWrapper_ = + conditionalBind(table, 'mousemove', this, this.onMouseMove_, true); + this.onMouseEnterWrapper_ = + conditionalBind(table, 'mouseenter', this, this.onMouseEnter_, true); + this.onMouseLeaveWrapper_ = + conditionalBind(table, 'mouseleave', this, this.onMouseLeave_, true); + this.onKeyDownWrapper_ = + conditionalBind(table, 'keydown', this, this.onKeyDown_); this.picker_ = table; };