Class: ToolboxCategory

Defined in: packages/blockly/core/toolbox/category.ts:38

Class for a category in a toolbox.

Extends

• ToolboxItem

Extended by

• CollapsibleToolboxCategory

Implements

• ISelectableToolboxItem

Properties index

Property	Description
registrationName	Name used for registering a toolbox category.
nestedPadding	The number of pixels to move the category over at each nested level.
borderWidth	The width in pixels of the strip of colour next to each category.
defaultBackgroundColour	The default colour of the category. This is used as the background colour of the category when it is selected.
toolboxItemDef_	-
name_	The name that will be displayed on the category.
colour_	The colour of the category.
htmlDiv_	The HTML container for the category.
rowDiv_	The HTML element for the category row.
rowContents_	The HTML element that holds children elements of the category row.
iconDom_	The HTML element for the toolbox icon.
labelDom_	The HTML element for the toolbox label.
cssConfig_	-
isHidden_	True if the category is meant to be hidden, false otherwise.
isDisabled_	True if this category is disabled, false otherwise.
flyoutItems_	The flyout items for this category.
id_	-
parent_	-
level_	-
workspace_	-
parentToolbox_	The toolbox this category belongs to.

Methods index

Method	Description
init	Initializes the toolbox item. This includes creating the DOM and updating the state of any items based on the info object. Init should be called immediately after the construction of the toolbox item, to ensure that the category contents are properly parsed.
makeDefaultCssConfig_	Creates an object holding the default classes for a category.
parseContents_	Parses the contents array depending on if the category is a dynamic category, or if its contents are meant to be shown in the flyout.
parseCategoryDef_	Parses the non-contents parts of the category def.
createDom_	Creates the DOM for the category.
createContainer_	Creates the container that holds the row and any subcategories.
createRowContainer_	Creates the parent of the contents container. All clicks will happen on this div.
createRowContentsContainer_	Creates the container for the label and icon. This is necessary so we can set all subcategory pointer events to none.
createIconDom_	Creates the span that holds the category icon.
createLabelDom_	Creates the span that holds the category label. This should have an ID for accessibility purposes.
refreshTheme	Updates the colour for this category.
addColourBorder_	Add the strip of colour to the toolbox category.
getColour_	Gets either the colour or the style for a category.
getClickTarget	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.
openIcon_	Adds appropriate classes to display an open icon.
closeIcon_	Adds appropriate classes to display a closed icon.
setVisible_	Sets whether the category is visible or not. For a category to be visible its parent category must also be expanded.
hide	Hide the category.
show	Show the category. Category will only appear if its parent category is also expanded.
isVisible	Whether the category is visible. A category is only visible if all of its ancestors are expanded and isHidden_ is false.
allAncestorsExpanded_	Whether all ancestors of a category (parent and parent's parent, etc.) are expanded.
isSelectable	Whether the toolbox item is selectable.
onClick	Handles when the toolbox item is clicked.
setSelected	Sets the current category as selected.
setDisabled	Sets whether the category is disabled.
getName	Gets the name of the category. Used for emitting events.
getParent	Gets the parent if the toolbox item is nested.
getDiv	Gets the div for the toolbox item.
onNodeFocus	Handles this toolbox category gaining focus by informing its parent toolbox that it has been selected.
getContents	Gets the contents of the category. These are items that are meant to be displayed in the flyout.
updateFlyoutContents	Updates the contents to be displayed in the flyout. If the flyout is open when the contents are updated, refreshSelection on the toolbox must also be called.
dispose	Dispose of this toolbox item. No-op by default.
getId	Gets a unique identifier for this toolbox item.
isCollapsible	Whether the toolbox item is collapsible.
getFocusableElement	See IFocusableNode.getFocusableElement.
getFocusableTree	See IFocusableNode.getFocusableTree.
onNodeBlur	See IFocusableNode.onNodeBlur.
canBeFocused	See IFocusableNode.canBeFocused.
getParentToolbox	Returns the toolbox this toolbox item belongs to.

Constructors

Constructor

new ToolboxCategory(
   categoryDef, 
   parentToolbox, 
   opt_parent?
): ToolboxCategory;

Defined in: packages/blockly/core/toolbox/category.ts:98

Parameters

Parameter	Type	Description
categoryDef	CategoryInfo	The information needed to create a category in the toolbox.
parentToolbox	IToolbox	The parent toolbox for the category.
opt_parent?	ICollapsibleToolboxItem	The parent category or null if the category does not have a parent.

Returns

ToolboxCategory

Overrides

ToolboxItem.constructor

Properties

registrationName

static registrationName: string = 'category';

Defined in: packages/blockly/core/toolbox/category.ts:43

Name used for registering a toolbox category.

---

nestedPadding

static nestedPadding: number = 19;

Defined in: packages/blockly/core/toolbox/category.ts:46

The number of pixels to move the category over at each nested level.

---

borderWidth

static borderWidth: number = 8;

Defined in: packages/blockly/core/toolbox/category.ts:49

The width in pixels of the strip of colour next to each category.

---

defaultBackgroundColour

static defaultBackgroundColour: string = '#57e';

Defined in: packages/blockly/core/toolbox/category.ts:55

The default colour of the category. This is used as the background colour of the category when it is selected.

---

toolboxItemDef_

toolboxItemDef_: CategoryInfo;

Defined in: packages/blockly/core/toolbox/category.ts:58

Overrides

ToolboxSeparator.toolboxItemDef_

---

name_

protected name_: string = '';

Defined in: packages/blockly/core/toolbox/category.ts:61

The name that will be displayed on the category.

---

colour_

protected colour_: string = '';

Defined in: packages/blockly/core/toolbox/category.ts:64

The colour of the category.

---

htmlDiv_

protected htmlDiv_: HTMLDivElement | null = null;

Defined in: packages/blockly/core/toolbox/category.ts:67

The HTML container for the category.

---

rowDiv_

protected rowDiv_: HTMLDivElement | null = null;

Defined in: packages/blockly/core/toolbox/category.ts:70

The HTML element for the category row.

---

rowContents_

protected rowContents_: HTMLDivElement | null = null;

Defined in: packages/blockly/core/toolbox/category.ts:73

The HTML element that holds children elements of the category row.

---

iconDom_

protected iconDom_: Element | null = null;

Defined in: packages/blockly/core/toolbox/category.ts:76

The HTML element for the toolbox icon.

---

labelDom_

protected labelDom_: Element | null = null;

Defined in: packages/blockly/core/toolbox/category.ts:79

The HTML element for the toolbox label.

---

cssConfig_

protected cssConfig_: CssConfig;

Defined in: packages/blockly/core/toolbox/category.ts:80

---

isHidden_

protected isHidden_: boolean = false;

Defined in: packages/blockly/core/toolbox/category.ts:83

True if the category is meant to be hidden, false otherwise.

---

isDisabled_

protected isDisabled_: boolean = false;

Defined in: packages/blockly/core/toolbox/category.ts:86

True if this category is disabled, false otherwise.

---

flyoutItems_

protected flyoutItems_: 
  | string
  | FlyoutItemInfoArray = [];

Defined in: packages/blockly/core/toolbox/category.ts:89

The flyout items for this category.

---

id_

protected id_: string;

Defined in: packages/blockly/core/toolbox/toolbox_item.ts:26

Inherited from

ToolboxItem.id_

---

parent_

protected parent_: 
  | ICollapsibleToolboxItem
  | null;

Defined in: packages/blockly/core/toolbox/toolbox_item.ts:27

Inherited from

ToolboxItem.parent_

---

level_

protected level_: number;

Defined in: packages/blockly/core/toolbox/toolbox_item.ts:28

Inherited from

ToolboxItem.level_

---

workspace_

protected workspace_: WorkspaceSvg;

Defined in: packages/blockly/core/toolbox/toolbox_item.ts:30

Inherited from

ToolboxItem.workspace_

---

parentToolbox_

protected readonly parentToolbox_: IToolbox;

Defined in: packages/blockly/core/toolbox/toolbox_item.ts:32

The toolbox this category belongs to.

Inherited from

ToolboxItem.parentToolbox_

Methods

init()

init(): void;

Defined in: packages/blockly/core/toolbox/category.ts:116

Initializes the toolbox item. This includes creating the DOM and updating the state of any items based on the info object. Init should be called immediately after the construction of the toolbox item, to ensure that the category contents are properly parsed.

Returns

void

Implementation of

ISelectableToolboxItem.init

Overrides

ToolboxItem.init

---

makeDefaultCssConfig_()

protected makeDefaultCssConfig_(): CssConfig;

Defined in: packages/blockly/core/toolbox/category.ts:131

Creates an object holding the default classes for a category.

Returns

CssConfig

The configuration object holding all the CSS classes for a category.

---

parseContents_()

protected parseContents_(categoryDef): void;

Defined in: packages/blockly/core/toolbox/category.ts:151

Parses the contents array depending on if the category is a dynamic category, or if its contents are meant to be shown in the flyout.

Parameters

Parameter	Type	Description
categoryDef	CategoryInfo	The information needed to create a category.

Returns

void

---

parseCategoryDef_()

protected parseCategoryDef_(categoryDef): void;

Defined in: packages/blockly/core/toolbox/category.ts:173

Parses the non-contents parts of the category def.

Parameters

Parameter	Type	Description
categoryDef	CategoryInfo	The information needed to create a category.

Returns

void

---

createDom_()

protected createDom_(): HTMLDivElement;

Defined in: packages/blockly/core/toolbox/category.ts:190

Creates the DOM for the category.

Returns

HTMLDivElement

The parent element for the category.

---

createContainer_()

protected createContainer_(): HTMLDivElement;

Defined in: packages/blockly/core/toolbox/category.ts:226

Creates the container that holds the row and any subcategories.

Returns

HTMLDivElement

The div that holds the icon and the label.

---

createRowContainer_()

protected createRowContainer_(): HTMLDivElement;

Defined in: packages/blockly/core/toolbox/category.ts:245

Creates the parent of the contents container. All clicks will happen on this div.

Returns

HTMLDivElement

The div that holds the contents container.

---

createRowContentsContainer_()

protected createRowContentsContainer_(): HTMLDivElement;

Defined in: packages/blockly/core/toolbox/category.ts:268

Creates the container for the label and icon. This is necessary so we can set all subcategory pointer events to none.

Returns

HTMLDivElement

The div that holds the icon and the label.

---

createIconDom_()

protected createIconDom_(): Element;

Defined in: packages/blockly/core/toolbox/category.ts:282

Creates the span that holds the category icon.

Returns

Element

The span that holds the category icon.

---

createLabelDom_()

protected createLabelDom_(name): Element;

Defined in: packages/blockly/core/toolbox/category.ts:302

Creates the span that holds the category label. This should have an ID for accessibility purposes.

Parameters

Parameter	Type	Description
name	string	The name of the category.

Returns

Element

The span that holds the category label.

---

refreshTheme()

refreshTheme(): void;

Defined in: packages/blockly/core/toolbox/category.ts:314

Updates the colour for this category.

Returns

void

---

addColourBorder_()

protected addColourBorder_(colour): void;

Defined in: packages/blockly/core/toolbox/category.ts:324

Add the strip of colour to the toolbox category.

Parameters

Parameter	Type	Description
colour	string	The category colour.

Returns

void

---

getColour_()

protected getColour_(categoryDef): string;

Defined in: packages/blockly/core/toolbox/category.ts:342

Gets either the colour or the style for a category.

Parameters

Parameter	Type	Description
categoryDef	CategoryInfo	The object holding information on the category.

Returns

string

The hex colour for the category.

---

getClickTarget()

getClickTarget(): Element;

Defined in: packages/blockly/core/toolbox/category.ts:400

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.

Returns

Element

The HTML element that receives clicks.

Implementation of

ISelectableToolboxItem.getClickTarget

Overrides

ToolboxItem.getClickTarget

---

openIcon_()

protected openIcon_(iconDiv): void;

Defined in: packages/blockly/core/toolbox/category.ts:444

Adds appropriate classes to display an open icon.

Parameters

Parameter	Type	Description
iconDiv	Element | null	The div that holds the icon.

Returns

void

---

closeIcon_()

protected closeIcon_(iconDiv): void;

Defined in: packages/blockly/core/toolbox/category.ts:463

Adds appropriate classes to display a closed icon.

Parameters

Parameter	Type	Description
iconDiv	Element | null	The div that holds the icon.

Returns

void

---

setVisible_()

setVisible_(isVisible): void;

Defined in: packages/blockly/core/toolbox/category.ts:483

Sets whether the category is visible or not. For a category to be visible its parent category must also be expanded.

Parameters

Parameter	Type	Description
isVisible	boolean	True if category should be visible.

Returns

void

Implementation of

ISelectableToolboxItem.setVisible_

Overrides

ToolboxItem.setVisible_

---

hide()

hide(): void;

Defined in: packages/blockly/core/toolbox/category.ts:493

Hide the category.

Returns

void

---

show()

show(): void;

Defined in: packages/blockly/core/toolbox/category.ts:501

Show the category. Category will only appear if its parent category is also expanded.

Returns

void

---

isVisible()

isVisible(): boolean;

Defined in: packages/blockly/core/toolbox/category.ts:512

Whether the category is visible. A category is only visible if all of its ancestors are expanded and isHidden_ is false.

Returns

boolean

True if the category is visible, false otherwise.

---

allAncestorsExpanded_()

protected allAncestorsExpanded_(): boolean;

Defined in: packages/blockly/core/toolbox/category.ts:522

Whether all ancestors of a category (parent and parent's parent, etc.) are expanded.

Returns

boolean

True only if every ancestor is expanded

---

isSelectable()

isSelectable(): boolean;

Defined in: packages/blockly/core/toolbox/category.ts:534

Whether the toolbox item is selectable.

Returns

boolean

True if the toolbox item can be selected.

Implementation of

ISelectableToolboxItem.isSelectable

Overrides

ToolboxItem.isSelectable

---

onClick()

onClick(_e): void;

Defined in: packages/blockly/core/toolbox/category.ts:543

Handles when the toolbox item is clicked.

Parameters

Parameter	Type	Description
_e	Event	Click event to handle.

Returns

void

Implementation of

ISelectableToolboxItem.onClick

---

setSelected()

setSelected(isSelected): void;

Defined in: packages/blockly/core/toolbox/category.ts:551

Sets the current category as selected.

Parameters

Parameter	Type	Description
isSelected	boolean	True if this category is selected, false otherwise.

Returns

void

Implementation of

ISelectableToolboxItem.setSelected

---

setDisabled()

setDisabled(isDisabled): void;

Defined in: packages/blockly/core/toolbox/category.ts:578

Sets whether the category is disabled.

Parameters

Parameter	Type	Description
isDisabled	boolean	True to disable the category, false otherwise.

Returns

void

---

getName()

getName(): string;

Defined in: packages/blockly/core/toolbox/category.ts:593

Gets the name of the category. Used for emitting events.

Returns

string

The name of the toolbox item.

Implementation of

ISelectableToolboxItem.getName

---

getParent()

getParent(): 
  | ICollapsibleToolboxItem
  | null;

Defined in: packages/blockly/core/toolbox/category.ts:597

Gets the parent if the toolbox item is nested.

Returns

| ICollapsibleToolboxItem | null

The parent toolbox item, or null if this toolbox item is not nested.

Implementation of

ISelectableToolboxItem.getParent

Overrides

ToolboxItem.getParent

---

getDiv()

getDiv(): HTMLDivElement | null;

Defined in: packages/blockly/core/toolbox/category.ts:601

Gets the div for the toolbox item.

Returns

HTMLDivElement | null

The div for the toolbox item.

Implementation of

ISelectableToolboxItem.getDiv

Overrides

ToolboxItem.getDiv

---

onNodeFocus()

onNodeFocus(): void;

Defined in: packages/blockly/core/toolbox/category.ts:609

Handles this toolbox category gaining focus by informing its parent toolbox that it has been selected.

Returns

void

Implementation of

ISelectableToolboxItem.onNodeFocus

Overrides

ToolboxItem.onNodeFocus

---

getContents()

getContents(): 
  | string
  | FlyoutItemInfoArray;

Defined in: packages/blockly/core/toolbox/category.ts:622

Gets the contents of the category. These are items that are meant to be displayed in the flyout.

Returns

| string | FlyoutItemInfoArray

The definition of items to be displayed in the flyout.

Implementation of

ISelectableToolboxItem.getContents

---

updateFlyoutContents()

updateFlyoutContents(contents): void;

Defined in: packages/blockly/core/toolbox/category.ts:634

Updates the contents to be displayed in the flyout. If the flyout is open when the contents are updated, refreshSelection on the toolbox must also be called.

Parameters

Parameter	Type	Description
contents	| string | FlyoutDefinition	The contents to be displayed in the flyout. A string can be supplied to create a dynamic category.

Returns

void

---

dispose()

dispose(): void;

Defined in: packages/blockly/core/toolbox/category.ts:665

Dispose of this toolbox item. No-op by default.

Returns

void

Implementation of

ISelectableToolboxItem.dispose

Overrides

ToolboxItem.dispose

---

getId()

getId(): string;

Defined in: packages/blockly/core/toolbox/toolbox_item.ts:100

Gets a unique identifier for this toolbox item.

Returns

string

The ID for the toolbox item.

Implementation of

ISelectableToolboxItem.getId

Inherited from

ToolboxItem.getId

---

isCollapsible()

isCollapsible(): boolean;

Defined in: packages/blockly/core/toolbox/toolbox_item.ts:138

Whether the toolbox item is collapsible.

Returns

boolean

True if the toolbox item is collapsible.

Implementation of

ISelectableToolboxItem.isCollapsible

Inherited from

ToolboxItem.isCollapsible

---

getFocusableElement()

getFocusableElement(): HTMLElement | SVGElement;

Defined in: packages/blockly/core/toolbox/toolbox_item.ts:154

See IFocusableNode.getFocusableElement.

Returns

HTMLElement | SVGElement

Implementation of

ISelectableToolboxItem.getFocusableElement

Inherited from

ToolboxItem.getFocusableElement

---

getFocusableTree()

getFocusableTree(): IFocusableTree;

Defined in: packages/blockly/core/toolbox/toolbox_item.ts:166

See IFocusableNode.getFocusableTree.

Returns

IFocusableTree

Implementation of

ISelectableToolboxItem.getFocusableTree

Inherited from

ToolboxItem.getFocusableTree

---

onNodeBlur()

onNodeBlur(): void;

Defined in: packages/blockly/core/toolbox/toolbox_item.ts:181

See IFocusableNode.onNodeBlur.

Returns

void

Implementation of

ISelectableToolboxItem.onNodeBlur

Inherited from

ToolboxItem.onNodeBlur

---

canBeFocused()

canBeFocused(): boolean;

Defined in: packages/blockly/core/toolbox/toolbox_item.ts:184

See IFocusableNode.canBeFocused.

Returns

boolean

Implementation of

ISelectableToolboxItem.canBeFocused

Inherited from

ToolboxItem.canBeFocused

---

getParentToolbox()

getParentToolbox(): IToolbox;

Defined in: packages/blockly/core/toolbox/toolbox_item.ts:191

Returns the toolbox this toolbox item belongs to.

Returns

IToolbox

Implementation of

ISelectableToolboxItem.getParentToolbox

Inherited from

ToolboxItem.getParentToolbox