mirror of
https://github.com/google/blockly.git
synced 2026-01-10 02:17:09 +01:00
Migrate core/toolbox/category.js to goog.module
This commit is contained in:
kozbial
Monica Kozbial
@@ -10,8 +10,11 @@
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
goog.provide('Blockly.ToolboxCategory');
|
||||
goog.module('Blockly.ToolboxCategory');
|
||||
goog.module.declareLegacyNamespace();
|
||||
|
||||
goog.require('Blockly');
|
||||
goog.require('Blockly.Css');
|
||||
goog.require('Blockly.ISelectableToolboxItem');
|
||||
goog.require('Blockly.registry');
|
||||
goog.require('Blockly.ToolboxItem');
|
||||
@@ -36,8 +39,8 @@ goog.requireType('Blockly.IToolbox');
|
||||
* @extends {Blockly.ToolboxItem}
|
||||
* @implements {Blockly.ISelectableToolboxItem}
|
||||
*/
|
||||
Blockly.ToolboxCategory = function(categoryDef, toolbox, opt_parent) {
|
||||
Blockly.ToolboxCategory.superClass_.constructor.call(
|
||||
const ToolboxCategory = function(categoryDef, toolbox, opt_parent) {
|
||||
ToolboxCategory.superClass_.constructor.call(
|
||||
this, categoryDef, toolbox, opt_parent);
|
||||
|
||||
/**
|
||||
@@ -91,7 +94,7 @@ Blockly.ToolboxCategory = function(categoryDef, toolbox, opt_parent) {
|
||||
|
||||
/**
|
||||
* All the css class names that are used to create a category.
|
||||
* @type {!Blockly.ToolboxCategory.CssConfig}
|
||||
* @type {!ToolboxCategory.CssConfig}
|
||||
* @protected
|
||||
*/
|
||||
this.cssConfig_ = this.makeDefaultCssConfig_();
|
||||
@@ -123,7 +126,7 @@ Blockly.ToolboxCategory = function(categoryDef, toolbox, opt_parent) {
|
||||
this.parseContents_(categoryDef);
|
||||
};
|
||||
|
||||
Blockly.utils.object.inherits(Blockly.ToolboxCategory, Blockly.ToolboxItem);
|
||||
Blockly.utils.object.inherits(ToolboxCategory, Blockly.ToolboxItem);
|
||||
|
||||
/**
|
||||
* All the CSS class names that are used to create a category.
|
||||
@@ -138,40 +141,40 @@ Blockly.utils.object.inherits(Blockly.ToolboxCategory, Blockly.ToolboxItem);
|
||||
* closedicon:(string|undefined)
|
||||
* }}
|
||||
*/
|
||||
Blockly.ToolboxCategory.CssConfig;
|
||||
ToolboxCategory.CssConfig;
|
||||
|
||||
/**
|
||||
* Name used for registering a toolbox category.
|
||||
* @const {string}
|
||||
*/
|
||||
Blockly.ToolboxCategory.registrationName = 'category';
|
||||
ToolboxCategory.registrationName = 'category';
|
||||
|
||||
/**
|
||||
* The number of pixels to move the category over at each nested level.
|
||||
* @type {number}
|
||||
*/
|
||||
Blockly.ToolboxCategory.nestedPadding = 19;
|
||||
ToolboxCategory.nestedPadding = 19;
|
||||
|
||||
/**
|
||||
* The width in pixels of the strip of colour next to each category.
|
||||
* @type {number}
|
||||
*/
|
||||
Blockly.ToolboxCategory.borderWidth = 8;
|
||||
ToolboxCategory.borderWidth = 8;
|
||||
|
||||
/**
|
||||
* The default colour of the category. This is used as the background colour of
|
||||
* the category when it is selected.
|
||||
* @type {string}
|
||||
*/
|
||||
Blockly.ToolboxCategory.defaultBackgroundColour = '#57e';
|
||||
ToolboxCategory.defaultBackgroundColour = '#57e';
|
||||
|
||||
/**
|
||||
* Creates an object holding the default classes for a category.
|
||||
* @return {!Blockly.ToolboxCategory.CssConfig} The configuration object holding
|
||||
* @return {!ToolboxCategory.CssConfig} The configuration object holding
|
||||
* all the CSS classes for a category.
|
||||
* @protected
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.makeDefaultCssConfig_ = function() {
|
||||
ToolboxCategory.prototype.makeDefaultCssConfig_ = function() {
|
||||
return {
|
||||
'container': 'blocklyToolboxCategory',
|
||||
'row': 'blocklyTreeRow',
|
||||
@@ -192,7 +195,7 @@ Blockly.ToolboxCategory.prototype.makeDefaultCssConfig_ = function() {
|
||||
* to create a category.
|
||||
* @protected
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.parseContents_ = function(categoryDef) {
|
||||
ToolboxCategory.prototype.parseContents_ = function(categoryDef) {
|
||||
const contents = categoryDef['contents'];
|
||||
|
||||
if (categoryDef['custom']) {
|
||||
@@ -209,7 +212,7 @@ Blockly.ToolboxCategory.prototype.parseContents_ = function(categoryDef) {
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.init = function() {
|
||||
ToolboxCategory.prototype.init = function() {
|
||||
this.createDom_();
|
||||
if (this.toolboxItemDef_['hidden'] == 'true') {
|
||||
this.hide();
|
||||
@@ -221,7 +224,7 @@ Blockly.ToolboxCategory.prototype.init = function() {
|
||||
* @return {!Element} The parent element for the category.
|
||||
* @protected
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.createDom_ = function() {
|
||||
ToolboxCategory.prototype.createDom_ = function() {
|
||||
this.htmlDiv_ = this.createContainer_();
|
||||
Blockly.utils.aria.setRole(this.htmlDiv_, Blockly.utils.aria.Role.TREEITEM);
|
||||
Blockly.utils.aria.setState(/** @type {!Element} */ (this.htmlDiv_),
|
||||
@@ -256,7 +259,7 @@ Blockly.ToolboxCategory.prototype.createDom_ = function() {
|
||||
* @return {!Element} The div that holds the icon and the label.
|
||||
* @protected
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.createContainer_ = function() {
|
||||
ToolboxCategory.prototype.createContainer_ = function() {
|
||||
const container = document.createElement('div');
|
||||
Blockly.utils.dom.addClass(container, this.cssConfig_['container']);
|
||||
return container;
|
||||
@@ -268,10 +271,10 @@ Blockly.ToolboxCategory.prototype.createContainer_ = function() {
|
||||
* @return {!Element} The div that holds the contents container.
|
||||
* @protected
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.createRowContainer_ = function() {
|
||||
ToolboxCategory.prototype.createRowContainer_ = function() {
|
||||
const rowDiv = document.createElement('div');
|
||||
Blockly.utils.dom.addClass(rowDiv, this.cssConfig_['row']);
|
||||
let nestedPadding = Blockly.ToolboxCategory.nestedPadding * this.getLevel();
|
||||
let nestedPadding = ToolboxCategory.nestedPadding * this.getLevel();
|
||||
nestedPadding = nestedPadding.toString() + 'px';
|
||||
this.workspace_.RTL ? rowDiv.style.paddingRight = nestedPadding :
|
||||
rowDiv.style.paddingLeft = nestedPadding;
|
||||
@@ -284,7 +287,7 @@ Blockly.ToolboxCategory.prototype.createRowContainer_ = function() {
|
||||
* @return {!Element} The div that holds the icon and the label.
|
||||
* @protected
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.createRowContentsContainer_ = function() {
|
||||
ToolboxCategory.prototype.createRowContentsContainer_ = function() {
|
||||
const contentsContainer = document.createElement('div');
|
||||
Blockly.utils.dom.addClass(contentsContainer, this.cssConfig_['rowcontentcontainer']);
|
||||
return contentsContainer;
|
||||
@@ -295,7 +298,7 @@ Blockly.ToolboxCategory.prototype.createRowContentsContainer_ = function() {
|
||||
* @return {!Element} The span that holds the category icon.
|
||||
* @protected
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.createIconDom_ = function() {
|
||||
ToolboxCategory.prototype.createIconDom_ = function() {
|
||||
const toolboxIcon = document.createElement('span');
|
||||
if (!this.parentToolbox_.isHorizontal()) {
|
||||
Blockly.utils.dom.addClass(toolboxIcon, this.cssConfig_['icon']);
|
||||
@@ -312,7 +315,7 @@ Blockly.ToolboxCategory.prototype.createIconDom_ = function() {
|
||||
* @return {!Element} The span that holds the category label.
|
||||
* @protected
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.createLabelDom_ = function(name) {
|
||||
ToolboxCategory.prototype.createLabelDom_ = function(name) {
|
||||
const toolboxLabel = document.createElement('span');
|
||||
toolboxLabel.setAttribute('id', this.getId() + '.label');
|
||||
toolboxLabel.textContent = name;
|
||||
@@ -324,7 +327,7 @@ Blockly.ToolboxCategory.prototype.createLabelDom_ = function(name) {
|
||||
* Updates the colour for this category.
|
||||
* @public
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.refreshTheme = function() {
|
||||
ToolboxCategory.prototype.refreshTheme = function() {
|
||||
this.colour_ = this.getColour_(/** @type {Blockly.utils.toolbox.CategoryInfo} **/
|
||||
(this.toolboxItemDef_));
|
||||
this.addColourBorder_(this.colour_);
|
||||
@@ -335,9 +338,9 @@ Blockly.ToolboxCategory.prototype.refreshTheme = function() {
|
||||
* @param {string} colour The category colour.
|
||||
* @protected
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.addColourBorder_ = function(colour) {
|
||||
ToolboxCategory.prototype.addColourBorder_ = function(colour) {
|
||||
if (colour) {
|
||||
const border = Blockly.ToolboxCategory.borderWidth + 'px solid ' +
|
||||
const border = ToolboxCategory.borderWidth + 'px solid ' +
|
||||
(colour || '#ddd');
|
||||
if (this.workspace_.RTL) {
|
||||
this.rowDiv_.style.borderRight = border;
|
||||
@@ -354,7 +357,7 @@ Blockly.ToolboxCategory.prototype.addColourBorder_ = function(colour) {
|
||||
* @return {string} The hex colour for the category.
|
||||
* @protected
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.getColour_ = function(categoryDef) {
|
||||
ToolboxCategory.prototype.getColour_ = function(categoryDef) {
|
||||
const styleName = categoryDef['categorystyle']
|
||||
|| categoryDef['categoryStyle'];
|
||||
const colour = categoryDef['colour'];
|
||||
@@ -377,7 +380,7 @@ Blockly.ToolboxCategory.prototype.getColour_ = function(categoryDef) {
|
||||
* @return {string} The hex colour for the category.
|
||||
* @private
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.getColourfromStyle_ = function(styleName) {
|
||||
ToolboxCategory.prototype.getColourfromStyle_ = function(styleName) {
|
||||
const theme = this.workspace_.getTheme();
|
||||
if (styleName && theme) {
|
||||
const style = theme.categoryStyles[styleName];
|
||||
@@ -398,7 +401,7 @@ Blockly.ToolboxCategory.prototype.getColourfromStyle_ = function(styleName) {
|
||||
* @return {!Element} The HTML element that receives clicks.
|
||||
* @public
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.getClickTarget = function() {
|
||||
ToolboxCategory.prototype.getClickTarget = function() {
|
||||
return /** @type {!Element} */(this.rowDiv_);
|
||||
};
|
||||
|
||||
@@ -409,7 +412,7 @@ Blockly.ToolboxCategory.prototype.getClickTarget = function() {
|
||||
* @return {string} The hex colour for the category.
|
||||
* @private
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.parseColour_ = function(colourValue) {
|
||||
ToolboxCategory.prototype.parseColour_ = function(colourValue) {
|
||||
// Decode the colour for any potential message references
|
||||
// (eg. `%{BKY_MATH_HUE}`).
|
||||
const colour = Blockly.utils.replaceMessageReferences(colourValue);
|
||||
@@ -438,7 +441,7 @@ Blockly.ToolboxCategory.prototype.parseColour_ = function(colourValue) {
|
||||
* @param {?Element} iconDiv The div that holds the icon.
|
||||
* @protected
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.openIcon_ = function(iconDiv) {
|
||||
ToolboxCategory.prototype.openIcon_ = function(iconDiv) {
|
||||
if (!iconDiv) {
|
||||
return;
|
||||
}
|
||||
@@ -451,7 +454,7 @@ Blockly.ToolboxCategory.prototype.openIcon_ = function(iconDiv) {
|
||||
* @param {?Element} iconDiv The div that holds the icon.
|
||||
* @protected
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.closeIcon_ = function(iconDiv) {
|
||||
ToolboxCategory.prototype.closeIcon_ = function(iconDiv) {
|
||||
if (!iconDiv) {
|
||||
return;
|
||||
}
|
||||
@@ -465,7 +468,7 @@ Blockly.ToolboxCategory.prototype.closeIcon_ = function(iconDiv) {
|
||||
* @param {boolean} isVisible True if category should be visible.
|
||||
* @protected
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.setVisible_ = function(isVisible) {
|
||||
ToolboxCategory.prototype.setVisible_ = function(isVisible) {
|
||||
this.htmlDiv_.style.display = isVisible ? 'block' : 'none';
|
||||
this.isHidden_ = !isVisible;
|
||||
|
||||
@@ -477,7 +480,7 @@ Blockly.ToolboxCategory.prototype.setVisible_ = function(isVisible) {
|
||||
/**
|
||||
* Hide the category.
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.hide = function() {
|
||||
ToolboxCategory.prototype.hide = function() {
|
||||
this.setVisible_(false);
|
||||
};
|
||||
|
||||
@@ -485,7 +488,7 @@ Blockly.ToolboxCategory.prototype.hide = function() {
|
||||
* Show the category. Category will only appear if its parent category is also
|
||||
* expanded.
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.show = function() {
|
||||
ToolboxCategory.prototype.show = function() {
|
||||
this.setVisible_(true);
|
||||
};
|
||||
|
||||
@@ -495,7 +498,7 @@ Blockly.ToolboxCategory.prototype.show = function() {
|
||||
* @return {boolean} True if the category is visible, false otherwise.
|
||||
* @public
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.isVisible = function() {
|
||||
ToolboxCategory.prototype.isVisible = function() {
|
||||
return !this.isHidden_ && this.allAncestorsExpanded_();
|
||||
};
|
||||
|
||||
@@ -504,7 +507,7 @@ Blockly.ToolboxCategory.prototype.isVisible = function() {
|
||||
* @return {boolean} True only if every ancestor is expanded
|
||||
* @protected
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.allAncestorsExpanded_ = function() {
|
||||
ToolboxCategory.prototype.allAncestorsExpanded_ = function() {
|
||||
let category = this;
|
||||
while (category.getParent()) {
|
||||
category = category.getParent();
|
||||
@@ -518,7 +521,7 @@ Blockly.ToolboxCategory.prototype.allAncestorsExpanded_ = function() {
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.isSelectable = function() {
|
||||
ToolboxCategory.prototype.isSelectable = function() {
|
||||
return this.isVisible() && !this.isDisabled_;
|
||||
};
|
||||
|
||||
@@ -527,7 +530,7 @@ Blockly.ToolboxCategory.prototype.isSelectable = function() {
|
||||
* @param {!Event} _e Click event to handle.
|
||||
* @public
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.onClick = function(_e) {
|
||||
ToolboxCategory.prototype.onClick = function(_e) {
|
||||
// No-op
|
||||
};
|
||||
|
||||
@@ -537,10 +540,10 @@ Blockly.ToolboxCategory.prototype.onClick = function(_e) {
|
||||
* otherwise.
|
||||
* @public
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.setSelected = function(isSelected) {
|
||||
ToolboxCategory.prototype.setSelected = function(isSelected) {
|
||||
if (isSelected) {
|
||||
const defaultColour = this.parseColour_(
|
||||
Blockly.ToolboxCategory.defaultBackgroundColour);
|
||||
ToolboxCategory.defaultBackgroundColour);
|
||||
this.rowDiv_.style.backgroundColor = this.colour_ || defaultColour;
|
||||
Blockly.utils.dom.addClass(this.rowDiv_, this.cssConfig_['selected']);
|
||||
} else {
|
||||
@@ -555,7 +558,7 @@ Blockly.ToolboxCategory.prototype.setSelected = function(isSelected) {
|
||||
* Sets whether the category is disabled.
|
||||
* @param {boolean} isDisabled True to disable the category, false otherwise.
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.setDisabled = function(isDisabled) {
|
||||
ToolboxCategory.prototype.setDisabled = function(isDisabled) {
|
||||
this.isDisabled_ = isDisabled;
|
||||
this.getDiv().setAttribute('disabled', isDisabled);
|
||||
isDisabled ? this.getDiv().setAttribute('disabled', 'true') :
|
||||
@@ -567,21 +570,21 @@ Blockly.ToolboxCategory.prototype.setDisabled = function(isDisabled) {
|
||||
* @return {string} The name of the toolbox item.
|
||||
* @public
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.getName = function() {
|
||||
ToolboxCategory.prototype.getName = function() {
|
||||
return this.name_;
|
||||
};
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.getParent = function() {
|
||||
ToolboxCategory.prototype.getParent = function() {
|
||||
return this.parent_;
|
||||
};
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.getDiv = function() {
|
||||
ToolboxCategory.prototype.getDiv = function() {
|
||||
return this.htmlDiv_;
|
||||
};
|
||||
|
||||
@@ -592,7 +595,7 @@ Blockly.ToolboxCategory.prototype.getDiv = function() {
|
||||
* of items to be displayed in the flyout.
|
||||
* @public
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.getContents = function() {
|
||||
ToolboxCategory.prototype.getContents = function() {
|
||||
return this.flyoutItems_;
|
||||
};
|
||||
|
||||
@@ -605,7 +608,7 @@ Blockly.ToolboxCategory.prototype.getContents = function() {
|
||||
* dynamic category.
|
||||
* @public
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.updateFlyoutContents = function(contents) {
|
||||
ToolboxCategory.prototype.updateFlyoutContents = function(contents) {
|
||||
this.flyoutItems_ = [];
|
||||
|
||||
if (typeof contents == 'string') {
|
||||
@@ -623,7 +626,7 @@ Blockly.ToolboxCategory.prototype.updateFlyoutContents = function(contents) {
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
Blockly.ToolboxCategory.prototype.dispose = function() {
|
||||
ToolboxCategory.prototype.dispose = function() {
|
||||
Blockly.utils.dom.removeNode(this.htmlDiv_);
|
||||
};
|
||||
|
||||
@@ -707,4 +710,6 @@ Blockly.Css.register([
|
||||
]);
|
||||
|
||||
Blockly.registry.register(Blockly.registry.Type.TOOLBOX_ITEM,
|
||||
Blockly.ToolboxCategory.registrationName, Blockly.ToolboxCategory);
|
||||
ToolboxCategory.registrationName, ToolboxCategory);
|
||||
|
||||
exports = ToolboxCategory;
|
||||
|
||||
@@ -169,7 +169,7 @@ goog.addDependency('../../core/theme.js', ['Blockly.Theme'], ['Blockly.registry'
|
||||
goog.addDependency('../../core/theme/classic.js', ['Blockly.Themes.Classic'], ['Blockly.Theme']);
|
||||
goog.addDependency('../../core/theme/zelos.js', ['Blockly.Themes.Zelos'], ['Blockly.Theme']);
|
||||
goog.addDependency('../../core/theme_manager.js', ['Blockly.ThemeManager'], ['Blockly.utils.dom'], {'lang': 'es6', 'module': 'goog'});
|
||||
goog.addDependency('../../core/toolbox/category.js', ['Blockly.ToolboxCategory'], ['Blockly.ISelectableToolboxItem', 'Blockly.ToolboxItem', 'Blockly.registry', 'Blockly.utils', 'Blockly.utils.aria', 'Blockly.utils.dom', 'Blockly.utils.object', 'Blockly.utils.toolbox'], {'lang': 'es5'});
|
||||
goog.addDependency('../../core/toolbox/category.js', ['Blockly.ToolboxCategory'], ['Blockly', 'Blockly.Css', 'Blockly.ISelectableToolboxItem', 'Blockly.ToolboxItem', 'Blockly.registry', 'Blockly.utils', 'Blockly.utils.aria', 'Blockly.utils.dom', 'Blockly.utils.object', 'Blockly.utils.toolbox'], {'lang': 'es6', 'module': 'goog'});
|
||||
goog.addDependency('../../core/toolbox/collapsible_category.js', ['Blockly.CollapsibleToolboxCategory'], ['Blockly.ICollapsibleToolboxItem', 'Blockly.ToolboxCategory', 'Blockly.ToolboxSeparator', 'Blockly.registry', 'Blockly.utils.aria', 'Blockly.utils.dom', 'Blockly.utils.object', 'Blockly.utils.toolbox'], {'lang': 'es6', 'module': 'goog'});
|
||||
goog.addDependency('../../core/toolbox/separator.js', ['Blockly.ToolboxSeparator'], ['Blockly.Css', 'Blockly.ToolboxItem', 'Blockly.registry', 'Blockly.utils.dom', 'Blockly.utils.object'], {'lang': 'es6', 'module': 'goog'});
|
||||
goog.addDependency('../../core/toolbox/toolbox.js', ['Blockly.Toolbox'], ['Blockly.BlockSvg', 'Blockly.CollapsibleToolboxCategory', 'Blockly.ComponentManager', 'Blockly.Css', 'Blockly.DeleteArea', 'Blockly.Events', 'Blockly.Events.ToolboxItemSelect', 'Blockly.IAutoHideable', 'Blockly.IKeyboardAccessible', 'Blockly.IStyleable', 'Blockly.IToolbox', 'Blockly.Options', 'Blockly.Touch', 'Blockly.browserEvents', 'Blockly.constants', 'Blockly.registry', 'Blockly.utils', 'Blockly.utils.Rect', 'Blockly.utils.aria', 'Blockly.utils.dom', 'Blockly.utils.toolbox'], {'lang': 'es5'});
|
||||
|
||||
Reference in New Issue
Block a user