Merge pull request #5176 from alschmiedt/migrate_menu_item

Migrate core/menuitem.js to goog.module syntax
This commit is contained in:
alschmiedt
2021-08-03 13:49:25 -07:00
committed by GitHub
2 changed files with 44 additions and 41 deletions

View File

@@ -10,11 +10,12 @@
*/
'use strict';
goog.provide('Blockly.MenuItem');
goog.module('Blockly.MenuItem');
goog.module.declareLegacyNamespace();
goog.require('Blockly.utils.aria');
goog.require('Blockly.utils.dom');
goog.require('Blockly.utils.IdGenerator');
const aria = goog.require('Blockly.utils.aria');
const dom = goog.require('Blockly.utils.dom');
const idGenerator = goog.require('Blockly.utils.IdGenerator');
/**
@@ -25,7 +26,7 @@ goog.require('Blockly.utils.IdGenerator');
* @param {string=} opt_value Data/model associated with the menu item.
* @constructor
*/
Blockly.MenuItem = function(content, opt_value) {
const MenuItem = function(content, opt_value) {
/**
* Human-readable text of this menu item, or the HTML element to display.
* @type {string|!HTMLElement}
@@ -63,7 +64,7 @@ Blockly.MenuItem = function(content, opt_value) {
/**
* ARIA name for this menu.
* @type {?Blockly.utils.aria.Role}
* @type {?aria.Role}
* @private
*/
this.roleName_ = null;
@@ -102,9 +103,9 @@ Blockly.MenuItem = function(content, opt_value) {
* Creates the menuitem's DOM.
* @return {!Element} Completed DOM.
*/
Blockly.MenuItem.prototype.createDom = function() {
var element = document.createElement('div');
element.id = Blockly.utils.IdGenerator.getNextUniqueId();
MenuItem.prototype.createDom = function() {
const element = document.createElement('div');
element.id = idGenerator.getNextUniqueId();
this.element_ = element;
// Set class and style
@@ -112,20 +113,20 @@ Blockly.MenuItem.prototype.createDom = function() {
element.className = 'blocklyMenuItem goog-menuitem ' +
(this.enabled_ ? '' : 'blocklyMenuItemDisabled goog-menuitem-disabled ') +
(this.checked_ ? 'blocklyMenuItemSelected goog-option-selected ' : '') +
(this.highlight_ ?
'blocklyMenuItemHighlight goog-menuitem-highlight ' : '') +
(this.highlight_ ? 'blocklyMenuItemHighlight goog-menuitem-highlight ' :
'') +
(this.rightToLeft_ ? 'blocklyMenuItemRtl goog-menuitem-rtl ' : '');
var content = document.createElement('div');
const content = document.createElement('div');
content.className = 'blocklyMenuItemContent goog-menuitem-content';
// Add a checkbox for checkable menu items.
if (this.checkable_) {
var checkbox = document.createElement('div');
const checkbox = document.createElement('div');
checkbox.className = 'blocklyMenuItemCheckbox goog-menuitem-checkbox';
content.appendChild(checkbox);
}
var contentDom = /** @type {!HTMLElement} */ (this.content_);
let contentDom = /** @type {!HTMLElement} */ (this.content_);
if (typeof this.content_ == 'string') {
contentDom = document.createTextNode(this.content_);
}
@@ -134,12 +135,12 @@ Blockly.MenuItem.prototype.createDom = function() {
// Initialize ARIA role and state.
if (this.roleName_) {
Blockly.utils.aria.setRole(element, this.roleName_);
aria.setRole(element, this.roleName_);
}
Blockly.utils.aria.setState(element, Blockly.utils.aria.State.SELECTED,
aria.setState(
element, aria.State.SELECTED,
(this.checkable_ && this.checked_) || false);
Blockly.utils.aria.setState(element, Blockly.utils.aria.State.DISABLED,
!this.enabled_);
aria.setState(element, aria.State.DISABLED, !this.enabled_);
return element;
};
@@ -147,7 +148,7 @@ Blockly.MenuItem.prototype.createDom = function() {
/**
* Dispose of this menu item.
*/
Blockly.MenuItem.prototype.dispose = function() {
MenuItem.prototype.dispose = function() {
this.element_ = null;
};
@@ -156,7 +157,7 @@ Blockly.MenuItem.prototype.dispose = function() {
* @return {?Element} The DOM element.
* @package
*/
Blockly.MenuItem.prototype.getElement = function() {
MenuItem.prototype.getElement = function() {
return this.element_;
};
@@ -165,7 +166,7 @@ Blockly.MenuItem.prototype.getElement = function() {
* @return {string} Unique component ID.
* @package
*/
Blockly.MenuItem.prototype.getId = function() {
MenuItem.prototype.getId = function() {
return this.element_.id;
};
@@ -174,7 +175,7 @@ Blockly.MenuItem.prototype.getId = function() {
* @return {*} value Value associated with the menu item.
* @package
*/
Blockly.MenuItem.prototype.getValue = function() {
MenuItem.prototype.getValue = function() {
return this.value_;
};
@@ -183,16 +184,16 @@ Blockly.MenuItem.prototype.getValue = function() {
* @param {boolean} rtl True if RTL, false if LTR.
* @package
*/
Blockly.MenuItem.prototype.setRightToLeft = function(rtl) {
MenuItem.prototype.setRightToLeft = function(rtl) {
this.rightToLeft_ = rtl;
};
/**
* Set the menu item's accessibility role.
* @param {!Blockly.utils.aria.Role} roleName Role name.
* @param {!aria.Role} roleName Role name.
* @package
*/
Blockly.MenuItem.prototype.setRole = function(roleName) {
MenuItem.prototype.setRole = function(roleName) {
this.roleName_ = roleName;
};
@@ -202,7 +203,7 @@ Blockly.MenuItem.prototype.setRole = function(roleName) {
* @param {boolean} checkable Whether the menu item is checkable.
* @package
*/
Blockly.MenuItem.prototype.setCheckable = function(checkable) {
MenuItem.prototype.setCheckable = function(checkable) {
this.checkable_ = checkable;
};
@@ -211,7 +212,7 @@ Blockly.MenuItem.prototype.setCheckable = function(checkable) {
* @param {boolean} checked Whether to check or uncheck the component.
* @package
*/
Blockly.MenuItem.prototype.setChecked = function(checked) {
MenuItem.prototype.setChecked = function(checked) {
this.checked_ = checked;
};
@@ -220,21 +221,21 @@ Blockly.MenuItem.prototype.setChecked = function(checked) {
* @param {boolean} highlight Whether to highlight or unhighlight the component.
* @package
*/
Blockly.MenuItem.prototype.setHighlighted = function(highlight) {
MenuItem.prototype.setHighlighted = function(highlight) {
this.highlight_ = highlight;
var el = this.getElement();
const el = this.getElement();
if (el && this.isEnabled()) {
// goog-menuitem-highlight is deprecated, use blocklyMenuItemHighlight.
// May 2020.
var name = 'blocklyMenuItemHighlight';
var nameDep = 'goog-menuitem-highlight';
const name = 'blocklyMenuItemHighlight';
const nameDep = 'goog-menuitem-highlight';
if (highlight) {
Blockly.utils.dom.addClass(el, name);
Blockly.utils.dom.addClass(el, nameDep);
dom.addClass(el, name);
dom.addClass(el, nameDep);
} else {
Blockly.utils.dom.removeClass(el, name);
Blockly.utils.dom.removeClass(el, nameDep);
dom.removeClass(el, name);
dom.removeClass(el, nameDep);
}
}
};
@@ -244,7 +245,7 @@ Blockly.MenuItem.prototype.setHighlighted = function(highlight) {
* @return {boolean} Whether the menu item is enabled.
* @package
*/
Blockly.MenuItem.prototype.isEnabled = function() {
MenuItem.prototype.isEnabled = function() {
return this.enabled_;
};
@@ -253,7 +254,7 @@ Blockly.MenuItem.prototype.isEnabled = function() {
* @param {boolean} enabled Whether to enable or disable the menu item.
* @package
*/
Blockly.MenuItem.prototype.setEnabled = function(enabled) {
MenuItem.prototype.setEnabled = function(enabled) {
this.enabled_ = enabled;
};
@@ -262,7 +263,7 @@ Blockly.MenuItem.prototype.setEnabled = function(enabled) {
* by the user.
* @package
*/
Blockly.MenuItem.prototype.performAction = function() {
MenuItem.prototype.performAction = function() {
if (this.isEnabled() && this.actionHandler_) {
this.actionHandler_(this);
}
@@ -271,10 +272,12 @@ Blockly.MenuItem.prototype.performAction = function() {
/**
* Set the handler that's called when the menu item is activated by the user.
* `obj` will be used as the 'this' object in the function when called.
* @param {function(!Blockly.MenuItem)} fn The handler.
* @param {function(!MenuItem)} fn The handler.
* @param {!Object} obj Used as the 'this' object in fn when called.
* @package
*/
Blockly.MenuItem.prototype.onAction = function(fn, obj) {
MenuItem.prototype.onAction = function(fn, obj) {
this.actionHandler_ = fn.bind(obj);
};
exports = MenuItem;

View File

@@ -111,7 +111,7 @@ goog.addDependency('../../core/keyboard_nav/marker.js', ['Blockly.Marker'], [],
goog.addDependency('../../core/keyboard_nav/tab_navigate_cursor.js', ['Blockly.TabNavigateCursor'], ['Blockly.ASTNode', 'Blockly.BasicCursor', 'Blockly.utils.object'], {'lang': 'es6', 'module': 'goog'});
goog.addDependency('../../core/marker_manager.js', ['Blockly.MarkerManager'], [], {'lang': 'es6', 'module': 'goog'});
goog.addDependency('../../core/menu.js', ['Blockly.Menu'], ['Blockly.browserEvents', 'Blockly.utils.Coordinate', 'Blockly.utils.KeyCodes', 'Blockly.utils.aria', 'Blockly.utils.dom', 'Blockly.utils.style'], {'lang': 'es6', 'module': 'goog'});
goog.addDependency('../../core/menuitem.js', ['Blockly.MenuItem'], ['Blockly.utils.IdGenerator', 'Blockly.utils.aria', 'Blockly.utils.dom']);
goog.addDependency('../../core/menuitem.js', ['Blockly.MenuItem'], ['Blockly.utils.IdGenerator', 'Blockly.utils.aria', 'Blockly.utils.dom'], {'lang': 'es6', 'module': 'goog'});
goog.addDependency('../../core/metrics_manager.js', ['Blockly.FlyoutMetricsManager', 'Blockly.MetricsManager'], ['Blockly.IMetricsManager', 'Blockly.registry', 'Blockly.utils.Size', 'Blockly.utils.toolbox'], {'lang': 'es5'});
goog.addDependency('../../core/msg.js', ['Blockly.Msg'], ['Blockly.utils.global']);
goog.addDependency('../../core/mutator.js', ['Blockly.Mutator'], ['Blockly.Bubble', 'Blockly.Events', 'Blockly.Events.BlockChange', 'Blockly.Events.BubbleOpen', 'Blockly.Icon', 'Blockly.Options', 'Blockly.WorkspaceSvg', 'Blockly.Xml', 'Blockly.internalConstants', 'Blockly.utils.Svg', 'Blockly.utils.dom', 'Blockly.utils.object', 'Blockly.utils.toolbox', 'Blockly.utils.xml'], {'lang': 'es6', 'module': 'goog'});