From 0d248583c8e542cf979a1e4e14117a4b94113bb1 Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Wed, 21 Jul 2021 13:26:52 -0700 Subject: [PATCH 1/5] Migrate core/field_dropdown.js to ES6 const/let --- core/field_dropdown.js | 102 ++++++++++++++++++++--------------------- 1 file changed, 51 insertions(+), 51 deletions(-) diff --git a/core/field_dropdown.js b/core/field_dropdown.js index 5dad752d8..c1554928d 100644 --- a/core/field_dropdown.js +++ b/core/field_dropdown.js @@ -299,14 +299,14 @@ Blockly.FieldDropdown.prototype.showEditor_ = function(opt_e) { } // Element gets created in render. this.menu_.render(Blockly.DropDownDiv.getContentDiv()); - var menuElement = /** @type {!Element} */ (this.menu_.getElement()); + const menuElement = /** @type {!Element} */ (this.menu_.getElement()); Blockly.utils.dom.addClass(menuElement, 'blocklyDropdownMenu'); if (this.getConstants().FIELD_DROPDOWN_COLOURED_DIV) { - var primaryColour = (this.sourceBlock_.isShadow()) ? + const primaryColour = (this.sourceBlock_.isShadow()) ? this.sourceBlock_.getParent().getColour() : this.sourceBlock_.getColour(); - var borderColour = (this.sourceBlock_.isShadow()) ? + const borderColour = (this.sourceBlock_.isShadow()) ? this.sourceBlock_.getParent().style.colourTertiary : this.sourceBlock_.style.colourTertiary; Blockly.DropDownDiv.setColour(primaryColour, borderColour); @@ -332,23 +332,23 @@ Blockly.FieldDropdown.prototype.showEditor_ = function(opt_e) { * @private */ Blockly.FieldDropdown.prototype.dropdownCreate_ = function() { - var menu = new Blockly.Menu(); + const menu = new Blockly.Menu(); menu.setRole(Blockly.utils.aria.Role.LISTBOX); this.menu_ = menu; - var options = this.getOptions(false); + const options = this.getOptions(false); this.selectedMenuItem_ = null; - for (var i = 0; i < options.length; i++) { - var content = options[i][0]; // Human-readable text or image. - var value = options[i][1]; // Language-neutral value. + for (let i = 0; i < options.length; i++) { + let content = options[i][0]; // Human-readable text or image. + const value = options[i][1]; // Language-neutral value. if (typeof content == 'object') { // An image, not text. - var image = new Image(content['width'], content['height']); + const image = new Image(content['width'], content['height']); image.src = content['src']; image.alt = content['alt'] || ''; content = image; } - var menuItem = new Blockly.MenuItem(content, value); + const menuItem = new Blockly.MenuItem(content, value); menuItem.setRole(Blockly.utils.aria.Role.OPTION); menuItem.setRightToLeft(this.sourceBlock_.RTL); menuItem.setCheckable(true); @@ -400,15 +400,15 @@ Blockly.FieldDropdown.prototype.onItemSelected_ = function(menu, menuItem) { * @private */ Blockly.FieldDropdown.prototype.trimOptions_ = function() { - var options = this.menuGenerator_; + const options = this.menuGenerator_; if (!Array.isArray(options)) { return; } - var hasImages = false; + let hasImages = false; // Localize label text and image alt text. - for (var i = 0; i < options.length; i++) { - var label = options[i][0]; + for (let i = 0; i < options.length; i++) { + const label = options[i][0]; if (typeof label == 'string') { options[i][0] = Blockly.utils.replaceMessageReferences(label); } else { @@ -421,13 +421,13 @@ Blockly.FieldDropdown.prototype.trimOptions_ = function() { if (hasImages || options.length < 2) { return; // Do nothing if too few items or at least one label is an image. } - var strings = []; - for (var i = 0; i < options.length; i++) { + const strings = []; + for (let i = 0; i < options.length; i++) { strings.push(options[i][0]); } - var shortest = Blockly.utils.string.shortestStringLength(strings); - var prefixLength = Blockly.utils.string.commonWordPrefix(strings, shortest); - var suffixLength = Blockly.utils.string.commonWordSuffix(strings, shortest); + const shortest = Blockly.utils.string.shortestStringLength(strings); + const prefixLength = Blockly.utils.string.commonWordPrefix(strings, shortest); + const suffixLength = Blockly.utils.string.commonWordSuffix(strings, shortest); if (!prefixLength && !suffixLength) { return; } @@ -457,11 +457,11 @@ Blockly.FieldDropdown.prototype.trimOptions_ = function() { */ Blockly.FieldDropdown.applyTrim_ = function(options, prefixLength, suffixLength) { - var newOptions = []; + const newOptions = []; // Remove the prefix and suffix from the options. - for (var i = 0; i < options.length; i++) { - var text = options[i][0]; - var value = options[i][1]; + for (let i = 0; i < options.length; i++) { + let text = options[i][0]; + const value = options[i][1]; text = text.substring(prefixLength, text.length - suffixLength); newOptions[i] = [text, value]; } @@ -502,9 +502,9 @@ Blockly.FieldDropdown.prototype.getOptions = function(opt_useCache) { * @protected */ Blockly.FieldDropdown.prototype.doClassValidation_ = function(opt_newValue) { - var isValueValid = false; - var options = this.getOptions(true); - for (var i = 0, option; (option = options[i]); i++) { + let isValueValid = false; + const options = this.getOptions(true); + for (let i = 0, option; (option = options[i]); i++) { // Options are tuples of human-readable text and language-neutral values. if (option[1] == opt_newValue) { isValueValid = true; @@ -530,8 +530,8 @@ Blockly.FieldDropdown.prototype.doClassValidation_ = function(opt_newValue) { */ Blockly.FieldDropdown.prototype.doValueUpdate_ = function(newValue) { Blockly.FieldDropdown.superClass_.doValueUpdate_.call(this, newValue); - var options = this.getOptions(true); - for (var i = 0, option; (option = options[i]); i++) { + const options = this.getOptions(true); + for (let i = 0, option; (option = options[i]); i++) { if (option[1] == this.value_) { this.selectedOption_ = option; } @@ -573,7 +573,7 @@ Blockly.FieldDropdown.prototype.render_ = function() { this.imageElement_.style.display = 'none'; // Show correct element. - var option = this.selectedOption_ && this.selectedOption_[0]; + const option = this.selectedOption_ && this.selectedOption_[0]; if (option && typeof option == 'object') { this.renderSelectedImage_( /** @type {!Blockly.FieldDropdown.ImageProperties} */ (option)); @@ -597,16 +597,16 @@ Blockly.FieldDropdown.prototype.renderSelectedImage_ = function(imageJson) { this.imageElement_.setAttribute('height', imageJson.height); this.imageElement_.setAttribute('width', imageJson.width); - var imageHeight = Number(imageJson.height); - var imageWidth = Number(imageJson.width); + const imageHeight = Number(imageJson.height); + const imageWidth = Number(imageJson.width); // Height and width include the border rect. - var hasBorder = !!this.borderRect_; - var height = Math.max( + const hasBorder = !!this.borderRect_; + const height = Math.max( hasBorder ? this.getConstants().FIELD_DROPDOWN_BORDER_RECT_HEIGHT : 0, imageHeight + Blockly.FieldDropdown.IMAGE_Y_PADDING); - var xPadding = hasBorder ? this.getConstants().FIELD_BORDER_RECT_X_PADDING : 0; - var arrowWidth = 0; + const xPadding = hasBorder ? this.getConstants().FIELD_BORDER_RECT_X_PADDING : 0; + let arrowWidth = 0; if (this.svgArrow_) { arrowWidth = this.positionSVGArrow_(imageWidth + xPadding, height / 2 - this.getConstants().FIELD_DROPDOWN_SVG_ARROW_SIZE / 2); @@ -620,9 +620,9 @@ Blockly.FieldDropdown.prototype.renderSelectedImage_ = function(imageJson) { this.size_.width = imageWidth + arrowWidth + xPadding * 2; this.size_.height = height; - var arrowX = 0; + let arrowX = 0; if (this.sourceBlock_.RTL) { - var imageX = xPadding + arrowWidth; + const imageX = xPadding + arrowWidth; this.imageElement_.setAttribute('x', imageX); } else { arrowX = imageWidth + arrowWidth; @@ -646,16 +646,16 @@ Blockly.FieldDropdown.prototype.renderSelectedText_ = function() { this.textElement_.setAttribute('text-anchor', 'start'); // Height and width include the border rect. - var hasBorder = !!this.borderRect_; - var height = Math.max( + const hasBorder = !!this.borderRect_; + const height = Math.max( hasBorder ? this.getConstants().FIELD_DROPDOWN_BORDER_RECT_HEIGHT : 0, this.getConstants().FIELD_TEXT_HEIGHT); - var textWidth = Blockly.utils.dom.getFastTextWidth(this.textElement_, + const textWidth = Blockly.utils.dom.getFastTextWidth(this.textElement_, this.getConstants().FIELD_TEXT_FONTSIZE, this.getConstants().FIELD_TEXT_FONTWEIGHT, this.getConstants().FIELD_TEXT_FONTFAMILY); - var xPadding = hasBorder ? this.getConstants().FIELD_BORDER_RECT_X_PADDING : 0; - var arrowWidth = 0; + const xPadding = hasBorder ? this.getConstants().FIELD_BORDER_RECT_X_PADDING : 0; + let arrowWidth = 0; if (this.svgArrow_) { arrowWidth = this.positionSVGArrow_(textWidth + xPadding, height / 2 - this.getConstants().FIELD_DROPDOWN_SVG_ARROW_SIZE / 2); @@ -677,11 +677,11 @@ Blockly.FieldDropdown.prototype.positionSVGArrow_ = function(x, y) { if (!this.svgArrow_) { return 0; } - var hasBorder = !!this.borderRect_; - var xPadding = hasBorder ? this.getConstants().FIELD_BORDER_RECT_X_PADDING : 0; - var textPadding = this.getConstants().FIELD_DROPDOWN_SVG_ARROW_PADDING; - var svgArrowSize = this.getConstants().FIELD_DROPDOWN_SVG_ARROW_SIZE; - var arrowX = this.sourceBlock_.RTL ? xPadding : x + textPadding; + const hasBorder = !!this.borderRect_; + const xPadding = hasBorder ? this.getConstants().FIELD_BORDER_RECT_X_PADDING : 0; + const textPadding = this.getConstants().FIELD_DROPDOWN_SVG_ARROW_PADDING; + const svgArrowSize = this.getConstants().FIELD_DROPDOWN_SVG_ARROW_SIZE; + const arrowX = this.sourceBlock_.RTL ? xPadding : x + textPadding; this.svgArrow_.setAttribute('transform', 'translate(' + arrowX + ',' + y + ')'); return svgArrowSize + textPadding; @@ -699,7 +699,7 @@ Blockly.FieldDropdown.prototype.getText_ = function() { if (!this.selectedOption_) { return null; } - var option = this.selectedOption_[0]; + const option = this.selectedOption_[0]; if (typeof option == 'object') { return option['alt']; } @@ -719,9 +719,9 @@ Blockly.FieldDropdown.validateOptions_ = function(options) { if (!options.length) { throw TypeError('FieldDropdown options must not be an empty array.'); } - var foundError = false; - for (var i = 0; i < options.length; ++i) { - var tuple = options[i]; + let foundError = false; + for (let i = 0; i < options.length; ++i) { + const tuple = options[i]; if (!Array.isArray(tuple)) { foundError = true; console.error( From 5f213b48a691992489b6de9df8560637aad2a712 Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Wed, 21 Jul 2021 13:30:06 -0700 Subject: [PATCH 2/5] Migrate core/field_dropdown.js to goog.module --- core/field_dropdown.js | 101 +++++++++++++++++++++-------------------- tests/deps.js | 2 +- 2 files changed, 53 insertions(+), 50 deletions(-) diff --git a/core/field_dropdown.js b/core/field_dropdown.js index c1554928d..be6c38e98 100644 --- a/core/field_dropdown.js +++ b/core/field_dropdown.js @@ -12,7 +12,8 @@ */ 'use strict'; -goog.provide('Blockly.FieldDropdown'); +goog.module('Blockly.FieldDropdown'); +goog.module.declareLegacyNamespace(); goog.require('Blockly.DropDownDiv'); goog.require('Blockly.Field'); @@ -44,16 +45,16 @@ goog.require('Blockly.utils.userAgent'); * @constructor * @throws {TypeError} If `menuGenerator` options are incorrectly structured. */ -Blockly.FieldDropdown = function(menuGenerator, opt_validator, opt_config) { +const FieldDropdown = function(menuGenerator, opt_validator, opt_config) { if (typeof menuGenerator != 'function') { - Blockly.FieldDropdown.validateOptions_(menuGenerator); + FieldDropdown.validateOptions_(menuGenerator); } /** * An array of options for a dropdown list, * or a function which generates these options. * @type {(!Array| - * !function(this:Blockly.FieldDropdown): !Array)} + * !function(this:FieldDropdown): !Array)} * @protected */ this.menuGenerator_ = menuGenerator; @@ -90,7 +91,7 @@ Blockly.FieldDropdown = function(menuGenerator, opt_validator, opt_config) { this.selectedOption_ = this.getOptions(false)[0]; // Call parent's constructor. - Blockly.FieldDropdown.superClass_.constructor.call( + FieldDropdown.superClass_.constructor.call( this, this.selectedOption_[1], opt_validator, opt_config); /** @@ -128,7 +129,7 @@ Blockly.FieldDropdown = function(menuGenerator, opt_validator, opt_config) { */ this.svgArrow_ = null; }; -Blockly.utils.object.inherits(Blockly.FieldDropdown, Blockly.Field); +Blockly.utils.object.inherits(FieldDropdown, Blockly.Field); /** * Dropdown image properties. @@ -139,16 +140,16 @@ Blockly.utils.object.inherits(Blockly.FieldDropdown, Blockly.Field); * height:number * }} */ -Blockly.FieldDropdown.ImageProperties; +FieldDropdown.ImageProperties; /** * Construct a FieldDropdown from a JSON arg object. * @param {!Object} options A JSON object with options (options). - * @return {!Blockly.FieldDropdown} The new field instance. + * @return {!FieldDropdown} The new field instance. * @package * @nocollapse */ -Blockly.FieldDropdown.fromJson = function(options) { +FieldDropdown.fromJson = function(options) { // `this` might be a subclass of FieldDropdown if that class doesn't override // the static fromJson method. return new this(options['options'], undefined, options); @@ -161,7 +162,7 @@ Blockly.FieldDropdown.fromJson = function(options) { * field's state. * @package */ -Blockly.FieldDropdown.prototype.fromXml = function(fieldElement) { +FieldDropdown.prototype.fromXml = function(fieldElement) { if (this.isOptionListDynamic()) { this.getOptions(false); } @@ -173,17 +174,17 @@ Blockly.FieldDropdown.prototype.fromXml = function(fieldElement) { * are not. Editable fields should also be serializable. * @type {boolean} */ -Blockly.FieldDropdown.prototype.SERIALIZABLE = true; +FieldDropdown.prototype.SERIALIZABLE = true; /** * Horizontal distance that a checkmark overhangs the dropdown. */ -Blockly.FieldDropdown.CHECKMARK_OVERHANG = 25; +FieldDropdown.CHECKMARK_OVERHANG = 25; /** * Maximum height of the dropdown menu, as a percentage of the viewport height. */ -Blockly.FieldDropdown.MAX_MENU_HEIGHT_VH = 0.45; +FieldDropdown.MAX_MENU_HEIGHT_VH = 0.45; /** * The y offset from the top of the field to the top of the image, if an image @@ -192,7 +193,7 @@ Blockly.FieldDropdown.MAX_MENU_HEIGHT_VH = 0.45; * @const * @private */ -Blockly.FieldDropdown.IMAGE_Y_OFFSET = 5; +FieldDropdown.IMAGE_Y_OFFSET = 5; /** * The total vertical padding above and below an image. @@ -200,25 +201,25 @@ Blockly.FieldDropdown.IMAGE_Y_OFFSET = 5; * @const * @private */ -Blockly.FieldDropdown.IMAGE_Y_PADDING = - Blockly.FieldDropdown.IMAGE_Y_OFFSET * 2; +FieldDropdown.IMAGE_Y_PADDING = + FieldDropdown.IMAGE_Y_OFFSET * 2; /** * Android can't (in 2014) display "▾", so use "▼" instead. */ -Blockly.FieldDropdown.ARROW_CHAR = +FieldDropdown.ARROW_CHAR = Blockly.utils.userAgent.ANDROID ? '\u25BC' : '\u25BE'; /** * Mouse cursor style when over the hotspot that initiates the editor. */ -Blockly.FieldDropdown.prototype.CURSOR = 'default'; +FieldDropdown.prototype.CURSOR = 'default'; /** * Create the block UI for this dropdown. * @package */ -Blockly.FieldDropdown.prototype.initView = function() { +FieldDropdown.prototype.initView = function() { if (this.shouldAddBorderRect_()) { this.createBorderRect_(); } else { @@ -245,7 +246,7 @@ Blockly.FieldDropdown.prototype.initView = function() { * @return {boolean} True if the dropdown field should add a border rect. * @protected */ -Blockly.FieldDropdown.prototype.shouldAddBorderRect_ = function() { +FieldDropdown.prototype.shouldAddBorderRect_ = function() { return !this.getConstants().FIELD_DROPDOWN_NO_BORDER_RECT_SHADOW || (this.getConstants().FIELD_DROPDOWN_NO_BORDER_RECT_SHADOW && !this.sourceBlock_.isShadow()); @@ -255,13 +256,13 @@ Blockly.FieldDropdown.prototype.shouldAddBorderRect_ = function() { * Create a tspan based arrow. * @protected */ -Blockly.FieldDropdown.prototype.createTextArrow_ = function() { +FieldDropdown.prototype.createTextArrow_ = function() { this.arrow_ = Blockly.utils.dom.createSvgElement( Blockly.utils.Svg.TSPAN, {}, this.textElement_); this.arrow_.appendChild(document.createTextNode( this.sourceBlock_.RTL ? - Blockly.FieldDropdown.ARROW_CHAR + ' ' : - ' ' + Blockly.FieldDropdown.ARROW_CHAR)); + FieldDropdown.ARROW_CHAR + ' ' : + ' ' + FieldDropdown.ARROW_CHAR)); if (this.sourceBlock_.RTL) { this.textElement_.insertBefore(this.arrow_, this.textContent_); } else { @@ -273,7 +274,7 @@ Blockly.FieldDropdown.prototype.createTextArrow_ = function() { * Create an SVG based arrow. * @protected */ -Blockly.FieldDropdown.prototype.createSVGArrow_ = function() { +FieldDropdown.prototype.createSVGArrow_ = function() { this.svgArrow_ = Blockly.utils.dom.createSvgElement( Blockly.utils.Svg.IMAGE, { 'height': this.getConstants().FIELD_DROPDOWN_SVG_ARROW_SIZE + 'px', @@ -289,7 +290,7 @@ Blockly.FieldDropdown.prototype.createSVGArrow_ = function() { * or undefined if triggered programmatically. * @protected */ -Blockly.FieldDropdown.prototype.showEditor_ = function(opt_e) { +FieldDropdown.prototype.showEditor_ = function(opt_e) { this.dropdownCreate_(); if (opt_e && typeof opt_e.clientX === 'number') { this.menu_.openingCoords = @@ -331,7 +332,7 @@ Blockly.FieldDropdown.prototype.showEditor_ = function(opt_e) { * Create the dropdown editor. * @private */ -Blockly.FieldDropdown.prototype.dropdownCreate_ = function() { +FieldDropdown.prototype.dropdownCreate_ = function() { const menu = new Blockly.Menu(); menu.setRole(Blockly.utils.aria.Role.LISTBOX); this.menu_ = menu; @@ -365,7 +366,7 @@ Blockly.FieldDropdown.prototype.dropdownCreate_ = function() { * Disposes of events and DOM-references belonging to the dropdown editor. * @private */ -Blockly.FieldDropdown.prototype.dropdownDispose_ = function() { +FieldDropdown.prototype.dropdownDispose_ = function() { if (this.menu_) { this.menu_.dispose(); } @@ -379,7 +380,7 @@ Blockly.FieldDropdown.prototype.dropdownDispose_ = function() { * @param {!Blockly.MenuItem} menuItem The MenuItem selected within menu. * @private */ -Blockly.FieldDropdown.prototype.handleMenuActionEvent_ = function(menuItem) { +FieldDropdown.prototype.handleMenuActionEvent_ = function(menuItem) { Blockly.DropDownDiv.hideIfOwner(this, true); this.onItemSelected_(/** @type {!Blockly.Menu} */ (this.menu_), menuItem); }; @@ -390,7 +391,7 @@ Blockly.FieldDropdown.prototype.handleMenuActionEvent_ = function(menuItem) { * @param {!Blockly.MenuItem} menuItem The MenuItem selected within menu. * @protected */ -Blockly.FieldDropdown.prototype.onItemSelected_ = function(menu, menuItem) { +FieldDropdown.prototype.onItemSelected_ = function(menu, menuItem) { this.setValue(menuItem.getValue()); }; @@ -399,7 +400,7 @@ Blockly.FieldDropdown.prototype.onItemSelected_ = function(menu, menuItem) { * Create prefix and/or suffix labels. * @private */ -Blockly.FieldDropdown.prototype.trimOptions_ = function() { +FieldDropdown.prototype.trimOptions_ = function() { const options = this.menuGenerator_; if (!Array.isArray(options)) { return; @@ -442,7 +443,7 @@ Blockly.FieldDropdown.prototype.trimOptions_ = function() { this.suffixField = strings[0].substr(1 - suffixLength); } - this.menuGenerator_ = Blockly.FieldDropdown.applyTrim_(options, prefixLength, + this.menuGenerator_ = FieldDropdown.applyTrim_(options, prefixLength, suffixLength); }; @@ -455,7 +456,7 @@ Blockly.FieldDropdown.prototype.trimOptions_ = function() { * @param {number} suffixLength The length of the common suffix * @return {!Array} A new array with all of the option text trimmed. */ -Blockly.FieldDropdown.applyTrim_ = function(options, +FieldDropdown.applyTrim_ = function(options, prefixLength, suffixLength) { const newOptions = []; // Remove the prefix and suffix from the options. @@ -472,7 +473,7 @@ Blockly.FieldDropdown.applyTrim_ = function(options, * @return {boolean} True if the option list is generated by a function. * Otherwise false. */ -Blockly.FieldDropdown.prototype.isOptionListDynamic = function() { +FieldDropdown.prototype.isOptionListDynamic = function() { return typeof this.menuGenerator_ == 'function'; }; @@ -484,11 +485,11 @@ Blockly.FieldDropdown.prototype.isOptionListDynamic = function() { * (human-readable text or image, language-neutral name). * @throws {TypeError} If generated options are incorrectly structured. */ -Blockly.FieldDropdown.prototype.getOptions = function(opt_useCache) { +FieldDropdown.prototype.getOptions = function(opt_useCache) { if (this.isOptionListDynamic()) { if (!this.generatedOptions_ || !opt_useCache) { this.generatedOptions_ = this.menuGenerator_.call(this); - Blockly.FieldDropdown.validateOptions_(this.generatedOptions_); + FieldDropdown.validateOptions_(this.generatedOptions_); } return this.generatedOptions_; } @@ -501,7 +502,7 @@ Blockly.FieldDropdown.prototype.getOptions = function(opt_useCache) { * @return {?string} A valid language-neutral option, or null if invalid. * @protected */ -Blockly.FieldDropdown.prototype.doClassValidation_ = function(opt_newValue) { +FieldDropdown.prototype.doClassValidation_ = function(opt_newValue) { let isValueValid = false; const options = this.getOptions(true); for (let i = 0, option; (option = options[i]); i++) { @@ -528,8 +529,8 @@ Blockly.FieldDropdown.prototype.doClassValidation_ = function(opt_newValue) { * that this is one of the valid dropdown options. * @protected */ -Blockly.FieldDropdown.prototype.doValueUpdate_ = function(newValue) { - Blockly.FieldDropdown.superClass_.doValueUpdate_.call(this, newValue); +FieldDropdown.prototype.doValueUpdate_ = function(newValue) { + FieldDropdown.superClass_.doValueUpdate_.call(this, newValue); const options = this.getOptions(true); for (let i = 0, option; (option = options[i]); i++) { if (option[1] == this.value_) { @@ -542,7 +543,7 @@ Blockly.FieldDropdown.prototype.doValueUpdate_ = function(newValue) { * Updates the dropdown arrow to match the colour/style of the block. * @package */ -Blockly.FieldDropdown.prototype.applyColour = function() { +FieldDropdown.prototype.applyColour = function() { if (this.borderRect_) { this.borderRect_.setAttribute('stroke', this.sourceBlock_.style.colourTertiary); @@ -567,7 +568,7 @@ Blockly.FieldDropdown.prototype.applyColour = function() { * Draws the border with the correct width. * @protected */ -Blockly.FieldDropdown.prototype.render_ = function() { +FieldDropdown.prototype.render_ = function() { // Hide both elements. this.textContent_.nodeValue = ''; this.imageElement_.style.display = 'none'; @@ -576,7 +577,7 @@ Blockly.FieldDropdown.prototype.render_ = function() { const option = this.selectedOption_ && this.selectedOption_[0]; if (option && typeof option == 'object') { this.renderSelectedImage_( - /** @type {!Blockly.FieldDropdown.ImageProperties} */ (option)); + /** @type {!FieldDropdown.ImageProperties} */ (option)); } else { this.renderSelectedText_(); } @@ -586,11 +587,11 @@ Blockly.FieldDropdown.prototype.render_ = function() { /** * Renders the selected option, which must be an image. - * @param {!Blockly.FieldDropdown.ImageProperties} imageJson Selected + * @param {!FieldDropdown.ImageProperties} imageJson Selected * option that must be an image. * @private */ -Blockly.FieldDropdown.prototype.renderSelectedImage_ = function(imageJson) { +FieldDropdown.prototype.renderSelectedImage_ = function(imageJson) { this.imageElement_.style.display = ''; this.imageElement_.setAttributeNS( Blockly.utils.dom.XLINK_NS, 'xlink:href', imageJson.src); @@ -604,7 +605,7 @@ Blockly.FieldDropdown.prototype.renderSelectedImage_ = function(imageJson) { const hasBorder = !!this.borderRect_; const height = Math.max( hasBorder ? this.getConstants().FIELD_DROPDOWN_BORDER_RECT_HEIGHT : 0, - imageHeight + Blockly.FieldDropdown.IMAGE_Y_PADDING); + imageHeight + FieldDropdown.IMAGE_Y_PADDING); const xPadding = hasBorder ? this.getConstants().FIELD_BORDER_RECT_X_PADDING : 0; let arrowWidth = 0; if (this.svgArrow_) { @@ -638,7 +639,7 @@ Blockly.FieldDropdown.prototype.renderSelectedImage_ = function(imageJson) { * Renders the selected option, which must be text. * @private */ -Blockly.FieldDropdown.prototype.renderSelectedText_ = function() { +FieldDropdown.prototype.renderSelectedText_ = function() { // Retrieves the selected option to display through getText_. this.textContent_.nodeValue = this.getDisplayText_(); Blockly.utils.dom.addClass(/** @type {!Element} */ (this.textElement_), @@ -673,7 +674,7 @@ Blockly.FieldDropdown.prototype.renderSelectedText_ = function() { * @return {number} Amount of space the arrow is taking up, in px. * @private */ -Blockly.FieldDropdown.prototype.positionSVGArrow_ = function(x, y) { +FieldDropdown.prototype.positionSVGArrow_ = function(x, y) { if (!this.svgArrow_) { return 0; } @@ -695,7 +696,7 @@ Blockly.FieldDropdown.prototype.positionSVGArrow_ = function(x, y) { * @protected * @override */ -Blockly.FieldDropdown.prototype.getText_ = function() { +FieldDropdown.prototype.getText_ = function() { if (!this.selectedOption_) { return null; } @@ -712,7 +713,7 @@ Blockly.FieldDropdown.prototype.getText_ = function() { * @throws {TypeError} If proposed options are incorrectly structured. * @private */ -Blockly.FieldDropdown.validateOptions_ = function(options) { +FieldDropdown.validateOptions_ = function(options) { if (!Array.isArray(options)) { throw TypeError('FieldDropdown options must be an array.'); } @@ -747,4 +748,6 @@ Blockly.FieldDropdown.validateOptions_ = function(options) { } }; -Blockly.fieldRegistry.register('field_dropdown', Blockly.FieldDropdown); +Blockly.fieldRegistry.register('field_dropdown', FieldDropdown); + +exports = FieldDropdown; diff --git a/tests/deps.js b/tests/deps.js index 979c58c74..65e09fda9 100644 --- a/tests/deps.js +++ b/tests/deps.js @@ -52,7 +52,7 @@ goog.addDependency('../../core/field.js', ['Blockly.Field'], ['Blockly.DropDownD 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_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_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'], {'lang': 'es6', 'module': 'goog'}); 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']); goog.addDependency('../../core/field_label_serializable.js', ['Blockly.FieldLabelSerializable'], ['Blockly.FieldLabel', 'Blockly.fieldRegistry', 'Blockly.utils', 'Blockly.utils.object']); From 36bb605bbc9f362a2bbf435048c420bf763ef397 Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Wed, 21 Jul 2021 14:53:44 -0700 Subject: [PATCH 3/5] Migrate core/field_dropdown.js to named requires --- core/field_dropdown.js | 100 ++++++++++++++++++++--------------------- 1 file changed, 50 insertions(+), 50 deletions(-) diff --git a/core/field_dropdown.js b/core/field_dropdown.js index be6c38e98..5a5234c90 100644 --- a/core/field_dropdown.js +++ b/core/field_dropdown.js @@ -15,19 +15,19 @@ goog.module('Blockly.FieldDropdown'); goog.module.declareLegacyNamespace(); -goog.require('Blockly.DropDownDiv'); -goog.require('Blockly.Field'); -goog.require('Blockly.fieldRegistry'); -goog.require('Blockly.Menu'); -goog.require('Blockly.MenuItem'); -goog.require('Blockly.utils'); -goog.require('Blockly.utils.aria'); -goog.require('Blockly.utils.Coordinate'); -goog.require('Blockly.utils.dom'); -goog.require('Blockly.utils.object'); -goog.require('Blockly.utils.string'); -goog.require('Blockly.utils.Svg'); -goog.require('Blockly.utils.userAgent'); +const Coordinate = goog.require('Blockly.utils.Coordinate'); +const DropDownDiv = goog.require('Blockly.DropDownDiv'); +const Field = goog.require('Blockly.Field'); +const Menu = goog.require('Blockly.Menu'); +const MenuItem = goog.require('Blockly.MenuItem'); +const Svg = goog.require('Blockly.utils.Svg'); +const aria = goog.require('Blockly.utils.aria'); +const dom = goog.require('Blockly.utils.dom'); +const fieldRegistry = goog.require('Blockly.fieldRegistry'); +const userAgent = goog.require('Blockly.utils.userAgent'); +const {commonWordPrefix, commonWordSuffix, shortestStringLength} = goog.require('Blockly.utils.string'); +const {inherits} = goog.require('Blockly.utils.object'); +const {replaceMessageReferences} = goog.require('Blockly.utils'); /** @@ -41,7 +41,7 @@ goog.require('Blockly.utils.userAgent'); * @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/dropdown#creation} * for a list of properties this parameter supports. - * @extends {Blockly.Field} + * @extends {Field} * @constructor * @throws {TypeError} If `menuGenerator` options are incorrectly structured. */ @@ -96,14 +96,14 @@ const FieldDropdown = function(menuGenerator, opt_validator, opt_config) { /** * A reference to the currently selected menu item. - * @type {?Blockly.MenuItem} + * @type {?MenuItem} * @private */ this.selectedMenuItem_ = null; /** * The dropdown menu. - * @type {?Blockly.Menu} + * @type {?Menu} * @protected */ this.menu_ = null; @@ -129,7 +129,7 @@ const FieldDropdown = function(menuGenerator, opt_validator, opt_config) { */ this.svgArrow_ = null; }; -Blockly.utils.object.inherits(FieldDropdown, Blockly.Field); +inherits(FieldDropdown, Field); /** * Dropdown image properties. @@ -208,7 +208,7 @@ FieldDropdown.IMAGE_Y_PADDING = * Android can't (in 2014) display "▾", so use "▼" instead. */ FieldDropdown.ARROW_CHAR = - Blockly.utils.userAgent.ANDROID ? '\u25BC' : '\u25BE'; + userAgent.ANDROID ? '\u25BC' : '\u25BE'; /** * Mouse cursor style when over the hotspot that initiates the editor. @@ -227,8 +227,8 @@ FieldDropdown.prototype.initView = function() { } this.createTextElement_(); - this.imageElement_ = Blockly.utils.dom.createSvgElement( - Blockly.utils.Svg.IMAGE, {}, this.fieldGroup_); + this.imageElement_ = dom.createSvgElement( + Svg.IMAGE, {}, this.fieldGroup_); if (this.getConstants().FIELD_DROPDOWN_SVG_ARROW) { this.createSVGArrow_(); @@ -237,7 +237,7 @@ FieldDropdown.prototype.initView = function() { } if (this.borderRect_) { - Blockly.utils.dom.addClass(this.borderRect_, 'blocklyDropdownRect'); + dom.addClass(this.borderRect_, 'blocklyDropdownRect'); } }; @@ -257,8 +257,8 @@ FieldDropdown.prototype.shouldAddBorderRect_ = function() { * @protected */ FieldDropdown.prototype.createTextArrow_ = function() { - this.arrow_ = Blockly.utils.dom.createSvgElement( - Blockly.utils.Svg.TSPAN, {}, this.textElement_); + this.arrow_ = dom.createSvgElement( + Svg.TSPAN, {}, this.textElement_); this.arrow_.appendChild(document.createTextNode( this.sourceBlock_.RTL ? FieldDropdown.ARROW_CHAR + ' ' : @@ -275,12 +275,12 @@ FieldDropdown.prototype.createTextArrow_ = function() { * @protected */ FieldDropdown.prototype.createSVGArrow_ = function() { - this.svgArrow_ = Blockly.utils.dom.createSvgElement( - Blockly.utils.Svg.IMAGE, { + this.svgArrow_ = dom.createSvgElement( + Svg.IMAGE, { 'height': this.getConstants().FIELD_DROPDOWN_SVG_ARROW_SIZE + 'px', 'width': this.getConstants().FIELD_DROPDOWN_SVG_ARROW_SIZE + 'px' }, this.fieldGroup_); - this.svgArrow_.setAttributeNS(Blockly.utils.dom.XLINK_NS, 'xlink:href', + this.svgArrow_.setAttributeNS(dom.XLINK_NS, 'xlink:href', this.getConstants().FIELD_DROPDOWN_SVG_ARROW_DATAURI); }; @@ -294,14 +294,14 @@ FieldDropdown.prototype.showEditor_ = function(opt_e) { this.dropdownCreate_(); if (opt_e && typeof opt_e.clientX === 'number') { this.menu_.openingCoords = - new Blockly.utils.Coordinate(opt_e.clientX, opt_e.clientY); + new Coordinate(opt_e.clientX, opt_e.clientY); } else { this.menu_.openingCoords = null; } // Element gets created in render. - this.menu_.render(Blockly.DropDownDiv.getContentDiv()); + this.menu_.render(DropDownDiv.getContentDiv()); const menuElement = /** @type {!Element} */ (this.menu_.getElement()); - Blockly.utils.dom.addClass(menuElement, 'blocklyDropdownMenu'); + dom.addClass(menuElement, 'blocklyDropdownMenu'); if (this.getConstants().FIELD_DROPDOWN_COLOURED_DIV) { const primaryColour = (this.sourceBlock_.isShadow()) ? @@ -310,10 +310,10 @@ FieldDropdown.prototype.showEditor_ = function(opt_e) { const borderColour = (this.sourceBlock_.isShadow()) ? this.sourceBlock_.getParent().style.colourTertiary : this.sourceBlock_.style.colourTertiary; - Blockly.DropDownDiv.setColour(primaryColour, borderColour); + DropDownDiv.setColour(primaryColour, borderColour); } - Blockly.DropDownDiv.showPositionedByField( + DropDownDiv.showPositionedByField( this, this.dropdownDispose_.bind(this)); // Focusing needs to be handled after the menu is rendered and positioned. @@ -333,8 +333,8 @@ FieldDropdown.prototype.showEditor_ = function(opt_e) { * @private */ FieldDropdown.prototype.dropdownCreate_ = function() { - const menu = new Blockly.Menu(); - menu.setRole(Blockly.utils.aria.Role.LISTBOX); + const menu = new Menu(); + menu.setRole(aria.Role.LISTBOX); this.menu_ = menu; const options = this.getOptions(false); @@ -349,8 +349,8 @@ FieldDropdown.prototype.dropdownCreate_ = function() { image.alt = content['alt'] || ''; content = image; } - const menuItem = new Blockly.MenuItem(content, value); - menuItem.setRole(Blockly.utils.aria.Role.OPTION); + const menuItem = new MenuItem(content, value); + menuItem.setRole(aria.Role.OPTION); menuItem.setRightToLeft(this.sourceBlock_.RTL); menuItem.setCheckable(true); menu.addChild(menuItem); @@ -377,18 +377,18 @@ FieldDropdown.prototype.dropdownDispose_ = function() { /** * Handle an action in the dropdown menu. - * @param {!Blockly.MenuItem} menuItem The MenuItem selected within menu. + * @param {!MenuItem} menuItem The MenuItem selected within menu. * @private */ FieldDropdown.prototype.handleMenuActionEvent_ = function(menuItem) { - Blockly.DropDownDiv.hideIfOwner(this, true); - this.onItemSelected_(/** @type {!Blockly.Menu} */ (this.menu_), menuItem); + DropDownDiv.hideIfOwner(this, true); + this.onItemSelected_(/** @type {!Menu} */ (this.menu_), menuItem); }; /** * Handle the selection of an item in the dropdown menu. - * @param {!Blockly.Menu} menu The Menu component clicked. - * @param {!Blockly.MenuItem} menuItem The MenuItem selected within menu. + * @param {!Menu} menu The Menu component clicked. + * @param {!MenuItem} menuItem The MenuItem selected within menu. * @protected */ FieldDropdown.prototype.onItemSelected_ = function(menu, menuItem) { @@ -411,10 +411,10 @@ FieldDropdown.prototype.trimOptions_ = function() { for (let i = 0; i < options.length; i++) { const label = options[i][0]; if (typeof label == 'string') { - options[i][0] = Blockly.utils.replaceMessageReferences(label); + options[i][0] = replaceMessageReferences(label); } else { if (label.alt != null) { - options[i][0].alt = Blockly.utils.replaceMessageReferences(label.alt); + options[i][0].alt = replaceMessageReferences(label.alt); } hasImages = true; } @@ -426,9 +426,9 @@ FieldDropdown.prototype.trimOptions_ = function() { for (let i = 0; i < options.length; i++) { strings.push(options[i][0]); } - const shortest = Blockly.utils.string.shortestStringLength(strings); - const prefixLength = Blockly.utils.string.commonWordPrefix(strings, shortest); - const suffixLength = Blockly.utils.string.commonWordSuffix(strings, shortest); + const shortest = shortestStringLength(strings); + const prefixLength = commonWordPrefix(strings, shortest); + const suffixLength = commonWordSuffix(strings, shortest); if (!prefixLength && !suffixLength) { return; } @@ -594,7 +594,7 @@ FieldDropdown.prototype.render_ = function() { FieldDropdown.prototype.renderSelectedImage_ = function(imageJson) { this.imageElement_.style.display = ''; this.imageElement_.setAttributeNS( - Blockly.utils.dom.XLINK_NS, 'xlink:href', imageJson.src); + dom.XLINK_NS, 'xlink:href', imageJson.src); this.imageElement_.setAttribute('height', imageJson.height); this.imageElement_.setAttribute('width', imageJson.width); @@ -612,7 +612,7 @@ FieldDropdown.prototype.renderSelectedImage_ = function(imageJson) { arrowWidth = this.positionSVGArrow_(imageWidth + xPadding, height / 2 - this.getConstants().FIELD_DROPDOWN_SVG_ARROW_SIZE / 2); } else { - arrowWidth = Blockly.utils.dom.getFastTextWidth( + arrowWidth = dom.getFastTextWidth( /** @type {!SVGTSpanElement} */ (this.arrow_), this.getConstants().FIELD_TEXT_FONTSIZE, this.getConstants().FIELD_TEXT_FONTWEIGHT, @@ -642,7 +642,7 @@ FieldDropdown.prototype.renderSelectedImage_ = function(imageJson) { FieldDropdown.prototype.renderSelectedText_ = function() { // Retrieves the selected option to display through getText_. this.textContent_.nodeValue = this.getDisplayText_(); - Blockly.utils.dom.addClass(/** @type {!Element} */ (this.textElement_), + dom.addClass(/** @type {!Element} */ (this.textElement_), 'blocklyDropdownText'); this.textElement_.setAttribute('text-anchor', 'start'); @@ -651,7 +651,7 @@ FieldDropdown.prototype.renderSelectedText_ = function() { const height = Math.max( hasBorder ? this.getConstants().FIELD_DROPDOWN_BORDER_RECT_HEIGHT : 0, this.getConstants().FIELD_TEXT_HEIGHT); - const textWidth = Blockly.utils.dom.getFastTextWidth(this.textElement_, + const textWidth = dom.getFastTextWidth(this.textElement_, this.getConstants().FIELD_TEXT_FONTSIZE, this.getConstants().FIELD_TEXT_FONTWEIGHT, this.getConstants().FIELD_TEXT_FONTFAMILY); @@ -748,6 +748,6 @@ FieldDropdown.validateOptions_ = function(options) { } }; -Blockly.fieldRegistry.register('field_dropdown', FieldDropdown); +fieldRegistry.register('field_dropdown', FieldDropdown); exports = FieldDropdown; From 740e4651b178dfbcbe6ab07930896ee3ccf10834 Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Wed, 21 Jul 2021 14:56:32 -0700 Subject: [PATCH 4/5] clang-format core/field_dropdown.js --- core/field_dropdown.js | 118 +++++++++++++++++++++-------------------- 1 file changed, 60 insertions(+), 58 deletions(-) diff --git a/core/field_dropdown.js b/core/field_dropdown.js index 5a5234c90..79b6ea404 100644 --- a/core/field_dropdown.js +++ b/core/field_dropdown.js @@ -39,7 +39,8 @@ const {replaceMessageReferences} = goog.require('Blockly.utils'); * option & returns a validated language-neutral dropdown option, or null to * abort the change. * @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/dropdown#creation} + * See the [field creation documentation]{@link + * https://developers.google.com/blockly/guides/create-custom-blocks/fields/built-in-fields/dropdown#creation} * for a list of properties this parameter supports. * @extends {Field} * @constructor @@ -134,12 +135,12 @@ inherits(FieldDropdown, Field); /** * Dropdown image properties. * @typedef {{ - * src:string, - * alt:string, - * width:number, - * height:number - * }} - */ + * src:string, + * alt:string, + * width:number, + * height:number + * }} + */ FieldDropdown.ImageProperties; /** @@ -201,14 +202,12 @@ FieldDropdown.IMAGE_Y_OFFSET = 5; * @const * @private */ -FieldDropdown.IMAGE_Y_PADDING = - FieldDropdown.IMAGE_Y_OFFSET * 2; +FieldDropdown.IMAGE_Y_PADDING = FieldDropdown.IMAGE_Y_OFFSET * 2; /** * Android can't (in 2014) display "▾", so use "▼" instead. */ -FieldDropdown.ARROW_CHAR = - userAgent.ANDROID ? '\u25BC' : '\u25BE'; +FieldDropdown.ARROW_CHAR = userAgent.ANDROID ? '\u25BC' : '\u25BE'; /** * Mouse cursor style when over the hotspot that initiates the editor. @@ -227,8 +226,7 @@ FieldDropdown.prototype.initView = function() { } this.createTextElement_(); - this.imageElement_ = dom.createSvgElement( - Svg.IMAGE, {}, this.fieldGroup_); + this.imageElement_ = dom.createSvgElement(Svg.IMAGE, {}, this.fieldGroup_); if (this.getConstants().FIELD_DROPDOWN_SVG_ARROW) { this.createSVGArrow_(); @@ -249,7 +247,7 @@ FieldDropdown.prototype.initView = function() { FieldDropdown.prototype.shouldAddBorderRect_ = function() { return !this.getConstants().FIELD_DROPDOWN_NO_BORDER_RECT_SHADOW || (this.getConstants().FIELD_DROPDOWN_NO_BORDER_RECT_SHADOW && - !this.sourceBlock_.isShadow()); + !this.sourceBlock_.isShadow()); }; /** @@ -257,12 +255,10 @@ FieldDropdown.prototype.shouldAddBorderRect_ = function() { * @protected */ FieldDropdown.prototype.createTextArrow_ = function() { - this.arrow_ = dom.createSvgElement( - Svg.TSPAN, {}, this.textElement_); + this.arrow_ = dom.createSvgElement(Svg.TSPAN, {}, this.textElement_); this.arrow_.appendChild(document.createTextNode( - this.sourceBlock_.RTL ? - FieldDropdown.ARROW_CHAR + ' ' : - ' ' + FieldDropdown.ARROW_CHAR)); + this.sourceBlock_.RTL ? FieldDropdown.ARROW_CHAR + ' ' : + ' ' + FieldDropdown.ARROW_CHAR)); if (this.sourceBlock_.RTL) { this.textElement_.insertBefore(this.arrow_, this.textContent_); } else { @@ -279,8 +275,10 @@ FieldDropdown.prototype.createSVGArrow_ = function() { Svg.IMAGE, { 'height': this.getConstants().FIELD_DROPDOWN_SVG_ARROW_SIZE + 'px', 'width': this.getConstants().FIELD_DROPDOWN_SVG_ARROW_SIZE + 'px' - }, this.fieldGroup_); - this.svgArrow_.setAttributeNS(dom.XLINK_NS, 'xlink:href', + }, + this.fieldGroup_); + this.svgArrow_.setAttributeNS( + dom.XLINK_NS, 'xlink:href', this.getConstants().FIELD_DROPDOWN_SVG_ARROW_DATAURI); }; @@ -293,8 +291,7 @@ FieldDropdown.prototype.createSVGArrow_ = function() { FieldDropdown.prototype.showEditor_ = function(opt_e) { this.dropdownCreate_(); if (opt_e && typeof opt_e.clientX === 'number') { - this.menu_.openingCoords = - new Coordinate(opt_e.clientX, opt_e.clientY); + this.menu_.openingCoords = new Coordinate(opt_e.clientX, opt_e.clientY); } else { this.menu_.openingCoords = null; } @@ -313,8 +310,7 @@ FieldDropdown.prototype.showEditor_ = function(opt_e) { DropDownDiv.setColour(primaryColour, borderColour); } - DropDownDiv.showPositionedByField( - this, this.dropdownDispose_.bind(this)); + DropDownDiv.showPositionedByField(this, this.dropdownDispose_.bind(this)); // Focusing needs to be handled after the menu is rendered and positioned. // Otherwise it will cause a page scroll to get the misplaced menu in @@ -341,7 +337,7 @@ FieldDropdown.prototype.dropdownCreate_ = function() { this.selectedMenuItem_ = null; for (let i = 0; i < options.length; i++) { let content = options[i][0]; // Human-readable text or image. - const value = options[i][1]; // Language-neutral value. + const value = options[i][1]; // Language-neutral value. if (typeof content == 'object') { // An image, not text. const image = new Image(content['width'], content['height']); @@ -443,8 +439,8 @@ FieldDropdown.prototype.trimOptions_ = function() { this.suffixField = strings[0].substr(1 - suffixLength); } - this.menuGenerator_ = FieldDropdown.applyTrim_(options, prefixLength, - suffixLength); + this.menuGenerator_ = + FieldDropdown.applyTrim_(options, prefixLength, suffixLength); }; /** @@ -456,8 +452,7 @@ FieldDropdown.prototype.trimOptions_ = function() { * @param {number} suffixLength The length of the common suffix * @return {!Array} A new array with all of the option text trimmed. */ -FieldDropdown.applyTrim_ = function(options, - prefixLength, suffixLength) { +FieldDropdown.applyTrim_ = function(options, prefixLength, suffixLength) { const newOptions = []; // Remove the prefix and suffix from the options. for (let i = 0; i < options.length; i++) { @@ -514,9 +509,10 @@ FieldDropdown.prototype.doClassValidation_ = function(opt_newValue) { } if (!isValueValid) { if (this.sourceBlock_) { - console.warn('Cannot set the dropdown\'s value to an unavailable option.' + - ' Block type: ' + this.sourceBlock_.type + ', Field name: ' + this.name + - ', Value: ' + opt_newValue); + console.warn( + 'Cannot set the dropdown\'s value to an unavailable option.' + + ' Block type: ' + this.sourceBlock_.type + + ', Field name: ' + this.name + ', Value: ' + opt_newValue); } return null; } @@ -545,11 +541,11 @@ FieldDropdown.prototype.doValueUpdate_ = function(newValue) { */ FieldDropdown.prototype.applyColour = function() { if (this.borderRect_) { - this.borderRect_.setAttribute('stroke', - this.sourceBlock_.style.colourTertiary); + this.borderRect_.setAttribute( + 'stroke', this.sourceBlock_.style.colourTertiary); if (this.menu_) { - this.borderRect_.setAttribute('fill', - this.sourceBlock_.style.colourTertiary); + this.borderRect_.setAttribute( + 'fill', this.sourceBlock_.style.colourTertiary); } else { this.borderRect_.setAttribute('fill', 'transparent'); } @@ -593,8 +589,7 @@ FieldDropdown.prototype.render_ = function() { */ FieldDropdown.prototype.renderSelectedImage_ = function(imageJson) { this.imageElement_.style.display = ''; - this.imageElement_.setAttributeNS( - dom.XLINK_NS, 'xlink:href', imageJson.src); + this.imageElement_.setAttributeNS(dom.XLINK_NS, 'xlink:href', imageJson.src); this.imageElement_.setAttribute('height', imageJson.height); this.imageElement_.setAttribute('width', imageJson.width); @@ -606,11 +601,13 @@ FieldDropdown.prototype.renderSelectedImage_ = function(imageJson) { const height = Math.max( hasBorder ? this.getConstants().FIELD_DROPDOWN_BORDER_RECT_HEIGHT : 0, imageHeight + FieldDropdown.IMAGE_Y_PADDING); - const xPadding = hasBorder ? this.getConstants().FIELD_BORDER_RECT_X_PADDING : 0; + const xPadding = + hasBorder ? this.getConstants().FIELD_BORDER_RECT_X_PADDING : 0; let arrowWidth = 0; if (this.svgArrow_) { - arrowWidth = this.positionSVGArrow_(imageWidth + xPadding, height / 2 - - this.getConstants().FIELD_DROPDOWN_SVG_ARROW_SIZE / 2); + arrowWidth = this.positionSVGArrow_( + imageWidth + xPadding, + height / 2 - this.getConstants().FIELD_DROPDOWN_SVG_ARROW_SIZE / 2); } else { arrowWidth = dom.getFastTextWidth( /** @type {!SVGTSpanElement} */ (this.arrow_), @@ -642,8 +639,8 @@ FieldDropdown.prototype.renderSelectedImage_ = function(imageJson) { FieldDropdown.prototype.renderSelectedText_ = function() { // Retrieves the selected option to display through getText_. this.textContent_.nodeValue = this.getDisplayText_(); - dom.addClass(/** @type {!Element} */ (this.textElement_), - 'blocklyDropdownText'); + dom.addClass( + /** @type {!Element} */ (this.textElement_), 'blocklyDropdownText'); this.textElement_.setAttribute('text-anchor', 'start'); // Height and width include the border rect. @@ -651,15 +648,17 @@ FieldDropdown.prototype.renderSelectedText_ = function() { const height = Math.max( hasBorder ? this.getConstants().FIELD_DROPDOWN_BORDER_RECT_HEIGHT : 0, this.getConstants().FIELD_TEXT_HEIGHT); - const textWidth = dom.getFastTextWidth(this.textElement_, - this.getConstants().FIELD_TEXT_FONTSIZE, + const textWidth = dom.getFastTextWidth( + this.textElement_, this.getConstants().FIELD_TEXT_FONTSIZE, this.getConstants().FIELD_TEXT_FONTWEIGHT, this.getConstants().FIELD_TEXT_FONTFAMILY); - const xPadding = hasBorder ? this.getConstants().FIELD_BORDER_RECT_X_PADDING : 0; + const xPadding = + hasBorder ? this.getConstants().FIELD_BORDER_RECT_X_PADDING : 0; let arrowWidth = 0; if (this.svgArrow_) { - arrowWidth = this.positionSVGArrow_(textWidth + xPadding, height / 2 - - this.getConstants().FIELD_DROPDOWN_SVG_ARROW_SIZE / 2); + arrowWidth = this.positionSVGArrow_( + textWidth + xPadding, + height / 2 - this.getConstants().FIELD_DROPDOWN_SVG_ARROW_SIZE / 2); } this.size_.width = textWidth + arrowWidth + xPadding * 2; this.size_.height = height; @@ -679,12 +678,13 @@ FieldDropdown.prototype.positionSVGArrow_ = function(x, y) { return 0; } const hasBorder = !!this.borderRect_; - const xPadding = hasBorder ? this.getConstants().FIELD_BORDER_RECT_X_PADDING : 0; + const xPadding = + hasBorder ? this.getConstants().FIELD_BORDER_RECT_X_PADDING : 0; const textPadding = this.getConstants().FIELD_DROPDOWN_SVG_ARROW_PADDING; const svgArrowSize = this.getConstants().FIELD_DROPDOWN_SVG_ARROW_SIZE; const arrowX = this.sourceBlock_.RTL ? xPadding : x + textPadding; - this.svgArrow_.setAttribute('transform', - 'translate(' + arrowX + ',' + y + ')'); + this.svgArrow_.setAttribute( + 'transform', 'translate(' + arrowX + ',' + y + ')'); return svgArrowSize + textPadding; }; @@ -727,19 +727,21 @@ FieldDropdown.validateOptions_ = function(options) { foundError = true; console.error( 'Invalid option[' + i + ']: Each FieldDropdown option must be an ' + - 'array. Found: ', tuple); + 'array. Found: ', + tuple); } else if (typeof tuple[1] != 'string') { foundError = true; console.error( 'Invalid option[' + i + ']: Each FieldDropdown option id must be ' + - 'a string. Found ' + tuple[1] + ' in: ', tuple); - } else if (tuple[0] && - (typeof tuple[0] != 'string') && - (typeof tuple[0].src != 'string')) { + 'a string. Found ' + tuple[1] + ' in: ', + tuple); + } else if ( + tuple[0] && (typeof tuple[0] != 'string') && + (typeof tuple[0].src != 'string')) { foundError = true; console.error( 'Invalid option[' + i + ']: Each FieldDropdown option must have a ' + - 'string label or image description. Found' + tuple[0] + ' in: ', + 'string label or image description. Found' + tuple[0] + ' in: ', tuple); } } From 5e3940195f8c718d812a4c5b7d0b64a8f7fd6a7c Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Wed, 21 Jul 2021 15:02:35 -0700 Subject: [PATCH 5/5] Migrate private static fields/functions in core/field_dropdown.js to module-internal --- core/field_dropdown.js | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/core/field_dropdown.js b/core/field_dropdown.js index 79b6ea404..ddb5a4e18 100644 --- a/core/field_dropdown.js +++ b/core/field_dropdown.js @@ -48,7 +48,7 @@ const {replaceMessageReferences} = goog.require('Blockly.utils'); */ const FieldDropdown = function(menuGenerator, opt_validator, opt_config) { if (typeof menuGenerator != 'function') { - FieldDropdown.validateOptions_(menuGenerator); + validateOptions(menuGenerator); } /** @@ -192,17 +192,15 @@ FieldDropdown.MAX_MENU_HEIGHT_VH = 0.45; * is selected. * @type {number} * @const - * @private */ -FieldDropdown.IMAGE_Y_OFFSET = 5; +const IMAGE_Y_OFFSET = 5; /** * The total vertical padding above and below an image. * @type {number} * @const - * @private */ -FieldDropdown.IMAGE_Y_PADDING = FieldDropdown.IMAGE_Y_OFFSET * 2; +const IMAGE_Y_PADDING = IMAGE_Y_OFFSET * 2; /** * Android can't (in 2014) display "▾", so use "▼" instead. @@ -484,7 +482,7 @@ FieldDropdown.prototype.getOptions = function(opt_useCache) { if (this.isOptionListDynamic()) { if (!this.generatedOptions_ || !opt_useCache) { this.generatedOptions_ = this.menuGenerator_.call(this); - FieldDropdown.validateOptions_(this.generatedOptions_); + validateOptions(this.generatedOptions_); } return this.generatedOptions_; } @@ -600,7 +598,7 @@ FieldDropdown.prototype.renderSelectedImage_ = function(imageJson) { const hasBorder = !!this.borderRect_; const height = Math.max( hasBorder ? this.getConstants().FIELD_DROPDOWN_BORDER_RECT_HEIGHT : 0, - imageHeight + FieldDropdown.IMAGE_Y_PADDING); + imageHeight + IMAGE_Y_PADDING); const xPadding = hasBorder ? this.getConstants().FIELD_BORDER_RECT_X_PADDING : 0; let arrowWidth = 0; @@ -711,9 +709,8 @@ FieldDropdown.prototype.getText_ = function() { * Validates the data structure to be processed as an options list. * @param {?} options The proposed dropdown options. * @throws {TypeError} If proposed options are incorrectly structured. - * @private */ -FieldDropdown.validateOptions_ = function(options) { +const validateOptions = function(options) { if (!Array.isArray(options)) { throw TypeError('FieldDropdown options must be an array.'); }