mirror of
https://github.com/google/blockly.git
synced 2026-01-07 00:50:27 +01:00
refactor: convert toolbox items to ES6 classes (#5947)
* refact: convert toolbox items to ES6 classes * fix: and SENTINEL so that contents can be parsed properly * fix: fix types and whatnot related to new SENTINEL * clean: format * refactor: reorganize overridable calls into the init function, and remove sentinel * clean: format * fix: inline docs and organization
This commit is contained in:
Beka Westberg
GitHub
File diff suppressed because it is too large
Load Diff
@@ -17,7 +17,6 @@ goog.module('Blockly.CollapsibleToolboxCategory');
|
||||
|
||||
const aria = goog.require('Blockly.utils.aria');
|
||||
const dom = goog.require('Blockly.utils.dom');
|
||||
const object = goog.require('Blockly.utils.object');
|
||||
const registry = goog.require('Blockly.registry');
|
||||
const toolbox = goog.require('Blockly.utils.toolbox');
|
||||
/* eslint-disable-next-line no-unused-vars */
|
||||
@@ -32,43 +31,252 @@ const {ToolboxSeparator} = goog.require('Blockly.ToolboxSeparator');
|
||||
|
||||
/**
|
||||
* Class for a category in a toolbox that can be collapsed.
|
||||
* @param {!toolbox.CategoryInfo} categoryDef The information needed
|
||||
* to create a category in the toolbox.
|
||||
* @param {!IToolbox} toolbox The parent toolbox for the category.
|
||||
* @param {ICollapsibleToolboxItem=} opt_parent The parent category or null if
|
||||
* the category does not have a parent.
|
||||
* @constructor
|
||||
* @extends {ToolboxCategory}
|
||||
* @implements {ICollapsibleToolboxItem}
|
||||
* @alias Blockly.CollapsibleToolboxCategory
|
||||
*/
|
||||
const CollapsibleToolboxCategory = function(categoryDef, toolbox, opt_parent) {
|
||||
class CollapsibleToolboxCategory extends ToolboxCategory {
|
||||
/**
|
||||
* Container for any child categories.
|
||||
* @type {?Element}
|
||||
* @protected
|
||||
* @param {!toolbox.CategoryInfo} categoryDef The information needed
|
||||
* to create a category in the toolbox.
|
||||
* @param {!IToolbox} toolbox The parent toolbox for the category.
|
||||
* @param {ICollapsibleToolboxItem=} opt_parent The parent category or null if
|
||||
* the category does not have a parent.
|
||||
* @alias Blockly.CollapsibleToolboxCategory
|
||||
*/
|
||||
this.subcategoriesDiv_ = null;
|
||||
constructor(categoryDef, toolbox, opt_parent) {
|
||||
super(categoryDef, toolbox, opt_parent);
|
||||
|
||||
/**
|
||||
* Container for any child categories.
|
||||
* @type {?Element}
|
||||
* @protected
|
||||
*/
|
||||
this.subcategoriesDiv_ = null;
|
||||
|
||||
/**
|
||||
* Whether or not the category should display its subcategories.
|
||||
* @type {boolean}
|
||||
* @protected
|
||||
*/
|
||||
this.expanded_ = false;
|
||||
|
||||
/**
|
||||
* The child toolbox items for this category.
|
||||
* @type {!Array<!IToolboxItem>}
|
||||
* @protected
|
||||
*/
|
||||
this.toolboxItems_ = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether or not the category should display its subcategories.
|
||||
* @type {boolean}
|
||||
* @protected
|
||||
* @override
|
||||
*/
|
||||
this.expanded_ = false;
|
||||
makeDefaultCssConfig_() {
|
||||
const cssConfig = super.makeDefaultCssConfig_();
|
||||
cssConfig['contents'] = 'blocklyToolboxContents';
|
||||
return cssConfig;
|
||||
}
|
||||
|
||||
/**
|
||||
* The child toolbox items for this category.
|
||||
* @type {!Array<!IToolboxItem>}
|
||||
* @override
|
||||
*/
|
||||
parseContents_(categoryDef) {
|
||||
const contents = categoryDef['contents'];
|
||||
let prevIsFlyoutItem = true;
|
||||
|
||||
if (categoryDef['custom']) {
|
||||
this.flyoutItems_ = categoryDef['custom'];
|
||||
} else if (contents) {
|
||||
for (let i = 0; i < contents.length; i++) {
|
||||
const itemDef = contents[i];
|
||||
// Separators can exist as either a flyout item or a toolbox item so
|
||||
// decide where it goes based on the type of the previous item.
|
||||
if (!registry.hasItem(registry.Type.TOOLBOX_ITEM, itemDef['kind']) ||
|
||||
(itemDef['kind'].toLowerCase() ===
|
||||
ToolboxSeparator.registrationName &&
|
||||
prevIsFlyoutItem)) {
|
||||
const flyoutItem = /** @type {toolbox.FlyoutItemInfo} */ (itemDef);
|
||||
this.flyoutItems_.push(flyoutItem);
|
||||
prevIsFlyoutItem = true;
|
||||
} else {
|
||||
this.createToolboxItem_(itemDef);
|
||||
prevIsFlyoutItem = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a toolbox item and adds it to the list of toolbox items.
|
||||
* @param {!toolbox.ToolboxItemInfo} itemDef The information needed
|
||||
* to create a toolbox item.
|
||||
* @private
|
||||
*/
|
||||
createToolboxItem_(itemDef) {
|
||||
let registryName = itemDef['kind'];
|
||||
const categoryDef = /** @type {!toolbox.CategoryInfo} */ (itemDef);
|
||||
|
||||
// Categories that are collapsible are created using a class registered
|
||||
// under a different name.
|
||||
if (registryName.toUpperCase() == 'CATEGORY' &&
|
||||
toolbox.isCategoryCollapsible(categoryDef)) {
|
||||
registryName = CollapsibleToolboxCategory.registrationName;
|
||||
}
|
||||
const ToolboxItemClass =
|
||||
registry.getClass(registry.Type.TOOLBOX_ITEM, registryName);
|
||||
const toolboxItem =
|
||||
new ToolboxItemClass(itemDef, this.parentToolbox_, this);
|
||||
this.toolboxItems_.push(toolboxItem);
|
||||
}
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
init() {
|
||||
super.init();
|
||||
|
||||
this.setExpanded(
|
||||
this.toolboxItemDef_['expanded'] === 'true' ||
|
||||
this.toolboxItemDef_['expanded']);
|
||||
}
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
createDom_() {
|
||||
super.createDom_();
|
||||
|
||||
const subCategories = this.getChildToolboxItems();
|
||||
this.subcategoriesDiv_ = this.createSubCategoriesDom_(subCategories);
|
||||
aria.setRole(this.subcategoriesDiv_, aria.Role.GROUP);
|
||||
this.htmlDiv_.appendChild(this.subcategoriesDiv_);
|
||||
|
||||
return this.htmlDiv_;
|
||||
}
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
createIconDom_() {
|
||||
const toolboxIcon = document.createElement('span');
|
||||
if (!this.parentToolbox_.isHorizontal()) {
|
||||
dom.addClass(toolboxIcon, this.cssConfig_['icon']);
|
||||
toolboxIcon.style.visibility = 'visible';
|
||||
}
|
||||
|
||||
toolboxIcon.style.display = 'inline-block';
|
||||
return toolboxIcon;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create the DOM for all subcategories.
|
||||
* @param {!Array<!IToolboxItem>} subcategories The subcategories.
|
||||
* @return {!Element} The div holding all the subcategories.
|
||||
* @protected
|
||||
*/
|
||||
this.toolboxItems_ = [];
|
||||
createSubCategoriesDom_(subcategories) {
|
||||
const contentsContainer = document.createElement('div');
|
||||
dom.addClass(contentsContainer, this.cssConfig_['contents']);
|
||||
|
||||
CollapsibleToolboxCategory.superClass_.constructor.call(
|
||||
this, categoryDef, toolbox, opt_parent);
|
||||
};
|
||||
for (let i = 0; i < subcategories.length; i++) {
|
||||
const newCategory = subcategories[i];
|
||||
newCategory.init();
|
||||
const newCategoryDiv = newCategory.getDiv();
|
||||
contentsContainer.appendChild(newCategoryDiv);
|
||||
if (newCategory.getClickTarget) {
|
||||
newCategory.getClickTarget().setAttribute('id', newCategory.getId());
|
||||
}
|
||||
}
|
||||
return contentsContainer;
|
||||
}
|
||||
|
||||
object.inherits(CollapsibleToolboxCategory, ToolboxCategory);
|
||||
/**
|
||||
* Opens or closes the current category.
|
||||
* @param {boolean} isExpanded True to expand the category, false to close.
|
||||
* @public
|
||||
*/
|
||||
setExpanded(isExpanded) {
|
||||
if (this.expanded_ === isExpanded) {
|
||||
return;
|
||||
}
|
||||
this.expanded_ = isExpanded;
|
||||
if (isExpanded) {
|
||||
this.subcategoriesDiv_.style.display = 'block';
|
||||
this.openIcon_(this.iconDom_);
|
||||
} else {
|
||||
this.subcategoriesDiv_.style.display = 'none';
|
||||
this.closeIcon_(this.iconDom_);
|
||||
}
|
||||
aria.setState(
|
||||
/** @type {!Element} */ (this.htmlDiv_), aria.State.EXPANDED,
|
||||
isExpanded);
|
||||
|
||||
this.parentToolbox_.handleToolboxItemResize();
|
||||
}
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
setVisible_(isVisible) {
|
||||
this.htmlDiv_.style.display = isVisible ? 'block' : 'none';
|
||||
const childToolboxItems = this.getChildToolboxItems();
|
||||
for (let i = 0; i < childToolboxItems.length; i++) {
|
||||
const child = childToolboxItems[i];
|
||||
child.setVisible_(isVisible);
|
||||
}
|
||||
this.isHidden_ = !isVisible;
|
||||
|
||||
if (this.parentToolbox_.getSelectedItem() === this) {
|
||||
this.parentToolbox_.clearSelection();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether the category is expanded to show its child subcategories.
|
||||
* @return {boolean} True if the toolbox item shows its children, false if it
|
||||
* is collapsed.
|
||||
* @public
|
||||
*/
|
||||
isExpanded() {
|
||||
return this.expanded_;
|
||||
}
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
isCollapsible() {
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
onClick(_e) {
|
||||
this.toggleExpanded();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggles whether or not the category is expanded.
|
||||
* @public
|
||||
*/
|
||||
toggleExpanded() {
|
||||
this.setExpanded(!this.expanded_);
|
||||
}
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
getDiv() {
|
||||
return this.htmlDiv_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets any children toolbox items. (ex. Gets the subcategories)
|
||||
* @return {!Array<!IToolboxItem>} The child toolbox items.
|
||||
*/
|
||||
getChildToolboxItems() {
|
||||
return this.toolboxItems_;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* All the CSS class names that are used to create a collapsible
|
||||
@@ -89,221 +297,11 @@ CollapsibleToolboxCategory.CssConfig;
|
||||
|
||||
/**
|
||||
* Name used for registering a collapsible toolbox category.
|
||||
* @const {string}
|
||||
* @type {string}
|
||||
* @override
|
||||
*/
|
||||
CollapsibleToolboxCategory.registrationName = 'collapsibleCategory';
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
CollapsibleToolboxCategory.prototype.makeDefaultCssConfig_ = function() {
|
||||
const cssConfig =
|
||||
CollapsibleToolboxCategory.superClass_.makeDefaultCssConfig_.call(this);
|
||||
cssConfig['contents'] = 'blocklyToolboxContents';
|
||||
return cssConfig;
|
||||
};
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
CollapsibleToolboxCategory.prototype.parseContents_ = function(categoryDef) {
|
||||
const contents = categoryDef['contents'];
|
||||
let prevIsFlyoutItem = true;
|
||||
|
||||
if (categoryDef['custom']) {
|
||||
this.flyoutItems_ = categoryDef['custom'];
|
||||
} else if (contents) {
|
||||
for (let i = 0; i < contents.length; i++) {
|
||||
const itemDef = contents[i];
|
||||
// Separators can exist as either a flyout item or a toolbox item so
|
||||
// decide where it goes based on the type of the previous item.
|
||||
if (!registry.hasItem(registry.Type.TOOLBOX_ITEM, itemDef['kind']) ||
|
||||
(itemDef['kind'].toLowerCase() ===
|
||||
ToolboxSeparator.registrationName &&
|
||||
prevIsFlyoutItem)) {
|
||||
const flyoutItem = /** @type {toolbox.FlyoutItemInfo} */ (itemDef);
|
||||
this.flyoutItems_.push(flyoutItem);
|
||||
prevIsFlyoutItem = true;
|
||||
} else {
|
||||
this.createToolboxItem_(itemDef);
|
||||
prevIsFlyoutItem = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates a toolbox item and adds it to the list of toolbox items.
|
||||
* @param {!toolbox.ToolboxItemInfo} itemDef The information needed
|
||||
* to create a toolbox item.
|
||||
* @private
|
||||
*/
|
||||
CollapsibleToolboxCategory.prototype.createToolboxItem_ = function(itemDef) {
|
||||
let registryName = itemDef['kind'];
|
||||
const categoryDef = /** @type {!toolbox.CategoryInfo} */ (itemDef);
|
||||
|
||||
// Categories that are collapsible are created using a class registered under
|
||||
// a different name.
|
||||
if (registryName.toUpperCase() == 'CATEGORY' &&
|
||||
toolbox.isCategoryCollapsible(categoryDef)) {
|
||||
registryName = CollapsibleToolboxCategory.registrationName;
|
||||
}
|
||||
const ToolboxItemClass =
|
||||
registry.getClass(registry.Type.TOOLBOX_ITEM, registryName);
|
||||
const toolboxItem = new ToolboxItemClass(itemDef, this.parentToolbox_, this);
|
||||
this.toolboxItems_.push(toolboxItem);
|
||||
};
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
CollapsibleToolboxCategory.prototype.init = function() {
|
||||
CollapsibleToolboxCategory.superClass_.init.call(this);
|
||||
|
||||
this.setExpanded(
|
||||
this.toolboxItemDef_['expanded'] === 'true' ||
|
||||
this.toolboxItemDef_['expanded']);
|
||||
};
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
CollapsibleToolboxCategory.prototype.createDom_ = function() {
|
||||
CollapsibleToolboxCategory.superClass_.createDom_.call(this);
|
||||
|
||||
const subCategories = this.getChildToolboxItems();
|
||||
this.subcategoriesDiv_ = this.createSubCategoriesDom_(subCategories);
|
||||
aria.setRole(this.subcategoriesDiv_, aria.Role.GROUP);
|
||||
this.htmlDiv_.appendChild(this.subcategoriesDiv_);
|
||||
|
||||
return this.htmlDiv_;
|
||||
};
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
CollapsibleToolboxCategory.prototype.createIconDom_ = function() {
|
||||
const toolboxIcon = document.createElement('span');
|
||||
if (!this.parentToolbox_.isHorizontal()) {
|
||||
dom.addClass(toolboxIcon, this.cssConfig_['icon']);
|
||||
toolboxIcon.style.visibility = 'visible';
|
||||
}
|
||||
|
||||
toolboxIcon.style.display = 'inline-block';
|
||||
return toolboxIcon;
|
||||
};
|
||||
|
||||
/**
|
||||
* Create the DOM for all subcategories.
|
||||
* @param {!Array<!IToolboxItem>} subcategories The subcategories.
|
||||
* @return {!Element} The div holding all the subcategories.
|
||||
* @protected
|
||||
*/
|
||||
CollapsibleToolboxCategory.prototype.createSubCategoriesDom_ = function(
|
||||
subcategories) {
|
||||
const contentsContainer = document.createElement('div');
|
||||
dom.addClass(contentsContainer, this.cssConfig_['contents']);
|
||||
|
||||
for (let i = 0; i < subcategories.length; i++) {
|
||||
const newCategory = subcategories[i];
|
||||
newCategory.init();
|
||||
const newCategoryDiv = newCategory.getDiv();
|
||||
contentsContainer.appendChild(newCategoryDiv);
|
||||
if (newCategory.getClickTarget) {
|
||||
newCategory.getClickTarget().setAttribute('id', newCategory.getId());
|
||||
}
|
||||
}
|
||||
return contentsContainer;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Opens or closes the current category.
|
||||
* @param {boolean} isExpanded True to expand the category, false to close.
|
||||
* @public
|
||||
*/
|
||||
CollapsibleToolboxCategory.prototype.setExpanded = function(isExpanded) {
|
||||
if (this.expanded_ === isExpanded) {
|
||||
return;
|
||||
}
|
||||
this.expanded_ = isExpanded;
|
||||
if (isExpanded) {
|
||||
this.subcategoriesDiv_.style.display = 'block';
|
||||
this.openIcon_(this.iconDom_);
|
||||
} else {
|
||||
this.subcategoriesDiv_.style.display = 'none';
|
||||
this.closeIcon_(this.iconDom_);
|
||||
}
|
||||
aria.setState(
|
||||
/** @type {!Element} */ (this.htmlDiv_), aria.State.EXPANDED, isExpanded);
|
||||
|
||||
this.parentToolbox_.handleToolboxItemResize();
|
||||
};
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
CollapsibleToolboxCategory.prototype.setVisible_ = function(isVisible) {
|
||||
this.htmlDiv_.style.display = isVisible ? 'block' : 'none';
|
||||
const childToolboxItems = this.getChildToolboxItems();
|
||||
for (let i = 0; i < childToolboxItems.length; i++) {
|
||||
const child = childToolboxItems[i];
|
||||
child.setVisible_(isVisible);
|
||||
}
|
||||
this.isHidden_ = !isVisible;
|
||||
|
||||
if (this.parentToolbox_.getSelectedItem() === this) {
|
||||
this.parentToolbox_.clearSelection();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Whether the category is expanded to show its child subcategories.
|
||||
* @return {boolean} True if the toolbox item shows its children, false if it
|
||||
* is collapsed.
|
||||
* @public
|
||||
*/
|
||||
CollapsibleToolboxCategory.prototype.isExpanded = function() {
|
||||
return this.expanded_;
|
||||
};
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
CollapsibleToolboxCategory.prototype.isCollapsible = function() {
|
||||
return true;
|
||||
};
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
CollapsibleToolboxCategory.prototype.onClick = function(_e) {
|
||||
this.toggleExpanded();
|
||||
};
|
||||
|
||||
/**
|
||||
* Toggles whether or not the category is expanded.
|
||||
* @public
|
||||
*/
|
||||
CollapsibleToolboxCategory.prototype.toggleExpanded = function() {
|
||||
this.setExpanded(!this.expanded_);
|
||||
};
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
CollapsibleToolboxCategory.prototype.getDiv = function() {
|
||||
return this.htmlDiv_;
|
||||
};
|
||||
|
||||
/**
|
||||
* Gets any children toolbox items. (ex. Gets the subcategories)
|
||||
* @return {!Array<!IToolboxItem>} The child toolbox items.
|
||||
*/
|
||||
CollapsibleToolboxCategory.prototype.getChildToolboxItems = function() {
|
||||
return this.toolboxItems_;
|
||||
};
|
||||
|
||||
|
||||
registry.register(
|
||||
registry.Type.TOOLBOX_ITEM, CollapsibleToolboxCategory.registrationName,
|
||||
|
||||
@@ -475,15 +475,15 @@ class Toolbox extends DeleteArea {
|
||||
registry.Type.TOOLBOX_ITEM, registryName.toLowerCase());
|
||||
if (ToolboxItemClass) {
|
||||
const toolboxItem = new ToolboxItemClass(toolboxItemDef, this);
|
||||
this.addToolboxItem_(toolboxItem);
|
||||
toolboxItem.init();
|
||||
this.addToolboxItem_(toolboxItem);
|
||||
const toolboxItemDom = toolboxItem.getDiv();
|
||||
if (toolboxItemDom) {
|
||||
fragment.appendChild(toolboxItemDom);
|
||||
}
|
||||
// Adds the ID to the HTML element that can receive a click.
|
||||
// This is used in onClick_ to find the toolboxItem that was clicked.
|
||||
if (toolboxItem.getClickTarget) {
|
||||
if (toolboxItem.getClickTarget()) {
|
||||
toolboxItem.getClickTarget().setAttribute('id', toolboxItem.getId());
|
||||
}
|
||||
}
|
||||
|
||||
@@ -30,128 +30,144 @@ const {WorkspaceSvg} = goog.requireType('Blockly.WorkspaceSvg');
|
||||
|
||||
/**
|
||||
* Class for an item in the toolbox.
|
||||
* @param {!toolbox.ToolboxItemInfo} toolboxItemDef The JSON defining the
|
||||
* toolbox item.
|
||||
* @param {!IToolbox} toolbox The toolbox that holds the toolbox item.
|
||||
* @param {ICollapsibleToolboxItem=} opt_parent The parent toolbox item
|
||||
* or null if the category does not have a parent.
|
||||
* @constructor
|
||||
* @implements {IToolboxItem}
|
||||
* @alias Blockly.ToolboxItem
|
||||
*/
|
||||
const ToolboxItem = function(toolboxItemDef, toolbox, opt_parent) {
|
||||
class ToolboxItem {
|
||||
/**
|
||||
* The id for the category.
|
||||
* @type {string}
|
||||
* @protected
|
||||
* @param {!toolbox.ToolboxItemInfo} toolboxItemDef The JSON defining
|
||||
* the toolbox item.
|
||||
* @param {!IToolbox} toolbox The toolbox that holds the toolbox item.
|
||||
* @param {ICollapsibleToolboxItem=} opt_parent The parent toolbox item
|
||||
* or null if the category does not have a parent.
|
||||
* @alias Blockly.ToolboxItem
|
||||
*/
|
||||
this.id_ = toolboxItemDef['toolboxitemid'] || idGenerator.getNextUniqueId();
|
||||
constructor(toolboxItemDef, toolbox, opt_parent) {
|
||||
/**
|
||||
* The id for the category.
|
||||
* @type {string}
|
||||
* @protected
|
||||
*/
|
||||
this.id_ = toolboxItemDef['toolboxitemid'] || idGenerator.getNextUniqueId();
|
||||
|
||||
/**
|
||||
* The parent of the category.
|
||||
* @type {?ICollapsibleToolboxItem}
|
||||
* @protected
|
||||
*/
|
||||
this.parent_ = opt_parent || null;
|
||||
|
||||
/**
|
||||
* The level that the category is nested at.
|
||||
* @type {number}
|
||||
* @protected
|
||||
*/
|
||||
this.level_ = this.parent_ ? this.parent_.getLevel() + 1 : 0;
|
||||
|
||||
/**
|
||||
* The JSON definition of the toolbox item.
|
||||
* @type {?toolbox.ToolboxItemInfo}
|
||||
* @protected
|
||||
*/
|
||||
this.toolboxItemDef_ = toolboxItemDef;
|
||||
|
||||
/**
|
||||
* The toolbox this category belongs to.
|
||||
* @type {!IToolbox}
|
||||
* @protected
|
||||
*/
|
||||
this.parentToolbox_ = toolbox;
|
||||
|
||||
/**
|
||||
* The workspace of the parent toolbox.
|
||||
* @type {!WorkspaceSvg}
|
||||
* @protected
|
||||
*/
|
||||
this.workspace_ = this.parentToolbox_.getWorkspace();
|
||||
}
|
||||
|
||||
/**
|
||||
* The parent of the category.
|
||||
* @type {?ICollapsibleToolboxItem}
|
||||
* @protected
|
||||
* Initializes the toolbox item.
|
||||
* This includes creating the DOM and updating the state of any items based
|
||||
* on the info object.
|
||||
* @public
|
||||
*/
|
||||
this.parent_ = opt_parent || null;
|
||||
init() {
|
||||
// No-op by default.
|
||||
}
|
||||
|
||||
/**
|
||||
* The level that the category is nested at.
|
||||
* @type {number}
|
||||
* @protected
|
||||
* Gets the div for the toolbox item.
|
||||
* @return {?Element} The div for the toolbox item.
|
||||
* @public
|
||||
*/
|
||||
this.level_ = this.parent_ ? this.parent_.getLevel() + 1 : 0;
|
||||
getDiv() {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* The JSON definition of the toolbox item.
|
||||
* @type {!toolbox.ToolboxItemInfo}
|
||||
* @protected
|
||||
* Gets the HTML element that is clickable.
|
||||
* The parent toolbox element receives clicks. The parent toolbox will add an
|
||||
* ID to this element so it can pass the onClick event to the correct
|
||||
* toolboxItem.
|
||||
* @return {?Element} The HTML element that receives clicks, or null if this
|
||||
* item should not receive clicks.
|
||||
* @public
|
||||
*/
|
||||
this.toolboxItemDef_ = toolboxItemDef;
|
||||
getClickTarget() {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* The toolbox this category belongs to.
|
||||
* @type {!IToolbox}
|
||||
* @protected
|
||||
* Gets a unique identifier for this toolbox item.
|
||||
* @return {string} The ID for the toolbox item.
|
||||
* @public
|
||||
*/
|
||||
this.parentToolbox_ = toolbox;
|
||||
getId() {
|
||||
return this.id_;
|
||||
}
|
||||
|
||||
/**
|
||||
* The workspace of the parent toolbox.
|
||||
* @type {!WorkspaceSvg}
|
||||
* @protected
|
||||
* Gets the parent if the toolbox item is nested.
|
||||
* @return {?IToolboxItem} The parent toolbox item, or null if
|
||||
* this toolbox item is not nested.
|
||||
* @public
|
||||
*/
|
||||
this.workspace_ = this.parentToolbox_.getWorkspace();
|
||||
};
|
||||
getParent() {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes the toolbox item.
|
||||
* This includes creating the DOM and updating the state of any items based
|
||||
* on the info object.
|
||||
* @public
|
||||
*/
|
||||
ToolboxItem.prototype.init = function() {
|
||||
// No-op by default.
|
||||
};
|
||||
/**
|
||||
* Gets the nested level of the category.
|
||||
* @return {number} The nested level of the category.
|
||||
* @package
|
||||
*/
|
||||
getLevel() {
|
||||
return this.level_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the div for the toolbox item.
|
||||
* @return {?Element} The div for the toolbox item.
|
||||
* @public
|
||||
*/
|
||||
ToolboxItem.prototype.getDiv = function() {
|
||||
return null;
|
||||
};
|
||||
/**
|
||||
* Whether the toolbox item is selectable.
|
||||
* @return {boolean} True if the toolbox item can be selected.
|
||||
* @public
|
||||
*/
|
||||
isSelectable() {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets a unique identifier for this toolbox item.
|
||||
* @return {string} The ID for the toolbox item.
|
||||
* @public
|
||||
*/
|
||||
ToolboxItem.prototype.getId = function() {
|
||||
return this.id_;
|
||||
};
|
||||
/**
|
||||
* Whether the toolbox item is collapsible.
|
||||
* @return {boolean} True if the toolbox item is collapsible.
|
||||
* @public
|
||||
*/
|
||||
isCollapsible() {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the parent if the toolbox item is nested.
|
||||
* @return {?IToolboxItem} The parent toolbox item, or null if
|
||||
* this toolbox item is not nested.
|
||||
* @public
|
||||
*/
|
||||
ToolboxItem.prototype.getParent = function() {
|
||||
return null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Gets the nested level of the category.
|
||||
* @return {number} The nested level of the category.
|
||||
* @package
|
||||
*/
|
||||
ToolboxItem.prototype.getLevel = function() {
|
||||
return this.level_;
|
||||
};
|
||||
|
||||
/**
|
||||
* Whether the toolbox item is selectable.
|
||||
* @return {boolean} True if the toolbox item can be selected.
|
||||
* @public
|
||||
*/
|
||||
ToolboxItem.prototype.isSelectable = function() {
|
||||
return false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Whether the toolbox item is collapsible.
|
||||
* @return {boolean} True if the toolbox item is collapsible.
|
||||
* @public
|
||||
*/
|
||||
ToolboxItem.prototype.isCollapsible = function() {
|
||||
return false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Dispose of this toolbox item. No-op by default.
|
||||
* @public
|
||||
*/
|
||||
ToolboxItem.prototype.dispose = function() {};
|
||||
/**
|
||||
* Dispose of this toolbox item. No-op by default.
|
||||
* @public
|
||||
*/
|
||||
dispose() {}
|
||||
}
|
||||
|
||||
exports.ToolboxItem = ToolboxItem;
|
||||
|
||||
@@ -253,7 +253,6 @@
|
||||
"./core/extensions.js",
|
||||
"./core/block.js",
|
||||
"./core/utils/string.js",
|
||||
"./core/utils/object.js",
|
||||
"./core/dialog.js",
|
||||
"./core/events/events_var_base.js",
|
||||
"./core/events/events_var_create.js",
|
||||
|
||||
@@ -219,7 +219,7 @@ goog.addDependency('../../core/theme/themes.js', ['Blockly.Themes'], ['Blockly.T
|
||||
goog.addDependency('../../core/theme/zelos.js', ['Blockly.Themes.Zelos'], ['Blockly.Theme'], {'lang': 'es6', 'module': 'goog'});
|
||||
goog.addDependency('../../core/theme_manager.js', ['Blockly.ThemeManager'], ['Blockly.utils.array', 'Blockly.utils.dom'], {'lang': 'es6', 'module': 'goog'});
|
||||
goog.addDependency('../../core/toolbox/category.js', ['Blockly.ToolboxCategory'], ['Blockly.Css', 'Blockly.ISelectableToolboxItem', 'Blockly.ToolboxItem', 'Blockly.registry', 'Blockly.utils.aria', 'Blockly.utils.colour', 'Blockly.utils.dom', 'Blockly.utils.object', 'Blockly.utils.parsing', '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/collapsible_category.js', ['Blockly.CollapsibleToolboxCategory'], ['Blockly.ICollapsibleToolboxItem', 'Blockly.ToolboxCategory', 'Blockly.ToolboxSeparator', 'Blockly.registry', 'Blockly.utils.aria', 'Blockly.utils.dom', '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.ToolboxItemSelect', 'Blockly.Events.utils', 'Blockly.IAutoHideable', 'Blockly.IKeyboardAccessible', 'Blockly.IStyleable', 'Blockly.IToolbox', 'Blockly.Options', 'Blockly.Touch', 'Blockly.browserEvents', 'Blockly.common', 'Blockly.registry', 'Blockly.utils.KeyCodes', 'Blockly.utils.Rect', 'Blockly.utils.aria', 'Blockly.utils.dom', 'Blockly.utils.toolbox'], {'lang': 'es6', 'module': 'goog'});
|
||||
goog.addDependency('../../core/toolbox/toolbox_item.js', ['Blockly.ToolboxItem'], ['Blockly.IToolboxItem', 'Blockly.utils.idGenerator'], {'lang': 'es6', 'module': 'goog'});
|
||||
|
||||
Reference in New Issue
Block a user