Class: CollapsibleToolboxCategory

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

Class for a category in a toolbox that can be collapsed.

Extends

• ToolboxCategory

Implements

• ICollapsibleToolboxItem

Properties index

Property	Description
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.
registrationName	Name used for registering a collapsible toolbox category.
subcategoriesDiv_	Container for any child categories.
expanded_	Whether or not the category should display its subcategories.
toolboxItems_	The child toolbox items for this category.
id_	-
parent_	-
level_	-
workspace_	-
parentToolbox_	The toolbox this category belongs to.

Methods index

Method	Description
parseCategoryDef_	Parses the non-contents parts of the category def.
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.
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.
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.
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.
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.
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.
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.
createDom_	Creates the DOM for the category.
createIconDom_	Creates the span that holds the category icon.
createSubCategoriesDom_	Create the DOM for all subcategories.
setExpanded	Opens or closes the current category and the associated flyout.
setVisible_	Sets whether the category is visible or not. For a category to be visible its parent category must also be expanded.
isExpanded	Whether the category is expanded to show its child subcategories.
isCollapsible	Whether the toolbox item is collapsible.
onClick	Handles when the toolbox item is clicked.
toggleExpanded	Toggles whether or not the category is expanded.
getDiv	Gets the div for the toolbox item.
getChildToolboxItems	Gets any children toolbox items. (ex. Gets the subcategories)
getId	Gets a unique identifier for this toolbox item.
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 CollapsibleToolboxCategory(
   categoryDef, 
   toolbox, 
   opt_parent?
): CollapsibleToolboxCategory;

Defined in: packages/blockly/core/toolbox/collapsible_category.ts:50

Parameters

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

Returns

CollapsibleToolboxCategory

Overrides

ToolboxCategory.constructor

Properties

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.

Inherited from

ToolboxCategory.nestedPadding

---

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.

Inherited from

ToolboxCategory.borderWidth

---

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.

Inherited from

ToolboxCategory.defaultBackgroundColour

---

toolboxItemDef_

toolboxItemDef_: CategoryInfo;

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

Inherited from

ToolboxCategory.toolboxItemDef_

---

name_

protected name_: string = '';

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

The name that will be displayed on the category.

Inherited from

ToolboxCategory.name_

---

colour_

protected colour_: string = '';

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

The colour of the category.

Inherited from

ToolboxCategory.colour_

---

htmlDiv_

protected htmlDiv_: HTMLDivElement | null = null;

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

The HTML container for the category.

Inherited from

ToolboxCategory.htmlDiv_

---

rowDiv_

protected rowDiv_: HTMLDivElement | null = null;

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

The HTML element for the category row.

Inherited from

ToolboxCategory.rowDiv_

---

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.

Inherited from

ToolboxCategory.rowContents_

---

iconDom_

protected iconDom_: Element | null = null;

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

The HTML element for the toolbox icon.

Inherited from

ToolboxCategory.iconDom_

---

labelDom_

protected labelDom_: Element | null = null;

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

The HTML element for the toolbox label.

Inherited from

ToolboxCategory.labelDom_

---

cssConfig_

protected cssConfig_: CssConfig;

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

Inherited from

ToolboxCategory.cssConfig_

---

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.

Inherited from

ToolboxCategory.isHidden_

---

isDisabled_

protected isDisabled_: boolean = false;

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

True if this category is disabled, false otherwise.

Inherited from

ToolboxCategory.isDisabled_

---

flyoutItems_

protected flyoutItems_: 
  | string
  | FlyoutItemInfoArray = [];

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

The flyout items for this category.

Inherited from

ToolboxCategory.flyoutItems_

---

registrationName

static registrationName: string = 'collapsibleCategory';

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

Name used for registering a collapsible toolbox category.

Overrides

ToolboxCategory.registrationName

---

subcategoriesDiv_

protected subcategoriesDiv_: HTMLDivElement | null = null;

Defined in: packages/blockly/core/toolbox/collapsible_category.ts:35

Container for any child categories.

---

expanded_

protected expanded_: boolean = false;

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

Whether or not the category should display its subcategories.

---

toolboxItems_

protected toolboxItems_: IToolboxItem[] = [];

Defined in: packages/blockly/core/toolbox/collapsible_category.ts:41

The child toolbox items for this category.

---

id_

protected id_: string;

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

Inherited from

ToolboxCategory.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

ToolboxCategory.level_

---

workspace_

protected workspace_: WorkspaceSvg;

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

Inherited from

ToolboxCategory.workspace_

---

parentToolbox_

protected readonly parentToolbox_: IToolbox;

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

The toolbox this category belongs to.

Inherited from

ToolboxCategory.parentToolbox_

Methods

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

Inherited from

ToolboxCategory.parseCategoryDef_

---

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.

Inherited from

ToolboxCategory.createContainer_

---

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.

Inherited from

ToolboxCategory.createRowContainer_

---

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.

Inherited from

ToolboxCategory.createRowContentsContainer_

---

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.

Inherited from

ToolboxCategory.createLabelDom_

---

refreshTheme()

refreshTheme(): void;

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

Updates the colour for this category.

Returns

void

Inherited from

ToolboxCategory.refreshTheme

---

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

Inherited from

ToolboxCategory.addColourBorder_

---

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.

Inherited from

ToolboxCategory.getColour_

---

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

ICollapsibleToolboxItem.getClickTarget

Inherited from

ToolboxCategory.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

Inherited from

ToolboxCategory.openIcon_

---

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

Inherited from

ToolboxCategory.closeIcon_

---

hide()

hide(): void;

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

Hide the category.

Returns

void

Inherited from

ToolboxCategory.hide

---

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

Inherited from

ToolboxCategory.show

---

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.

Inherited from

ToolboxCategory.isVisible

---

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

Inherited from

ToolboxCategory.allAncestorsExpanded_

---

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

ICollapsibleToolboxItem.isSelectable

Inherited from

ToolboxCategory.isSelectable

---

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

ICollapsibleToolboxItem.setSelected

Inherited from

ToolboxCategory.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

Inherited from

ToolboxCategory.setDisabled

---

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

ICollapsibleToolboxItem.getName

Inherited from

ToolboxCategory.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

ICollapsibleToolboxItem.getParent

Inherited from

ToolboxCategory.getParent

---

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

ICollapsibleToolboxItem.onNodeFocus

Inherited from

ToolboxCategory.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

ICollapsibleToolboxItem.getContents

Inherited from

ToolboxCategory.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

Inherited from

ToolboxCategory.updateFlyoutContents

---

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

ICollapsibleToolboxItem.dispose

Inherited from

ToolboxCategory.dispose

---

makeDefaultCssConfig_()

makeDefaultCssConfig_(): CssConfig;

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

Creates an object holding the default classes for a category.

Returns

CssConfig

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

Overrides

ToolboxCategory.makeDefaultCssConfig_

---

parseContents_()

parseContents_(categoryDef): void;

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

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

Overrides

ToolboxCategory.parseContents_

---

init()

init(): void;

Defined in: packages/blockly/core/toolbox/collapsible_category.ts:121

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

ICollapsibleToolboxItem.init

Overrides

ToolboxCategory.init

---

createDom_()

createDom_(): HTMLDivElement;

Defined in: packages/blockly/core/toolbox/collapsible_category.ts:130

Creates the DOM for the category.

Returns

HTMLDivElement

The parent element for the category.

Overrides

ToolboxCategory.createDom_

---

createIconDom_()

createIconDom_(): HTMLSpanElement;

Defined in: packages/blockly/core/toolbox/collapsible_category.ts:143

Creates the span that holds the category icon.

Returns

HTMLSpanElement

The span that holds the category icon.

Overrides

ToolboxCategory.createIconDom_

---

createSubCategoriesDom_()

protected createSubCategoriesDom_(subcategories): HTMLDivElement;

Defined in: packages/blockly/core/toolbox/collapsible_category.ts:163

Create the DOM for all subcategories.

Parameters

Parameter	Type	Description
subcategories	IToolboxItem[]	The subcategories.

Returns

HTMLDivElement

The div holding all the subcategories.

---

setExpanded()

setExpanded(isExpanded): void;

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

Opens or closes the current category and the associated flyout.

Parameters

Parameter	Type	Description
isExpanded	boolean	True to expand the category, false to close.

Returns

void

---

setVisible_()

setVisible_(isVisible): void;

Defined in: packages/blockly/core/toolbox/collapsible_category.ts:211

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

ICollapsibleToolboxItem.setVisible_

Overrides

ToolboxCategory.setVisible_

---

isExpanded()

isExpanded(): boolean;

Defined in: packages/blockly/core/toolbox/collapsible_category.ts:231

Whether the category is expanded to show its child subcategories.

Returns

boolean

True if the toolbox item shows its children, false if it is collapsed.

Implementation of

ICollapsibleToolboxItem.isExpanded

---

isCollapsible()

isCollapsible(): boolean;

Defined in: packages/blockly/core/toolbox/collapsible_category.ts:235

Whether the toolbox item is collapsible.

Returns

boolean

True if the toolbox item is collapsible.

Implementation of

ICollapsibleToolboxItem.isCollapsible

Overrides

ToolboxCategory.isCollapsible

---

onClick()

onClick(_e): void;

Defined in: packages/blockly/core/toolbox/collapsible_category.ts:239

Handles when the toolbox item is clicked.

Parameters

Parameter	Type	Description
_e	Event	Click event to handle.

Returns

void

Implementation of

ICollapsibleToolboxItem.onClick

Overrides

ToolboxCategory.onClick

---

toggleExpanded()

toggleExpanded(): void;

Defined in: packages/blockly/core/toolbox/collapsible_category.ts:262

Toggles whether or not the category is expanded.

Returns

void

Implementation of

ICollapsibleToolboxItem.toggleExpanded

---

getDiv()

getDiv(): HTMLDivElement | null;

Defined in: packages/blockly/core/toolbox/collapsible_category.ts:266

Gets the div for the toolbox item.

Returns

HTMLDivElement | null

The div for the toolbox item.

Implementation of

ICollapsibleToolboxItem.getDiv

Overrides

ToolboxCategory.getDiv

---

getChildToolboxItems()

getChildToolboxItems(): IToolboxItem[];

Defined in: packages/blockly/core/toolbox/collapsible_category.ts:275

Gets any children toolbox items. (ex. Gets the subcategories)

Returns

IToolboxItem[]

The child toolbox items.

Implementation of

ICollapsibleToolboxItem.getChildToolboxItems

---

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

ICollapsibleToolboxItem.getId

Inherited from

ToolboxCategory.getId

---

getFocusableElement()

getFocusableElement(): HTMLElement | SVGElement;

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

See IFocusableNode.getFocusableElement.

Returns

HTMLElement | SVGElement

Implementation of

ICollapsibleToolboxItem.getFocusableElement

Inherited from

ToolboxCategory.getFocusableElement

---

getFocusableTree()

getFocusableTree(): IFocusableTree;

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

See IFocusableNode.getFocusableTree.

Returns

IFocusableTree

Implementation of

ICollapsibleToolboxItem.getFocusableTree

Inherited from

ToolboxCategory.getFocusableTree

---

onNodeBlur()

onNodeBlur(): void;

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

See IFocusableNode.onNodeBlur.

Returns

void

Implementation of

ICollapsibleToolboxItem.onNodeBlur

Inherited from

ToolboxCategory.onNodeBlur

---

canBeFocused()

canBeFocused(): boolean;

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

See IFocusableNode.canBeFocused.

Returns

boolean

Implementation of

ICollapsibleToolboxItem.canBeFocused

Inherited from

ToolboxCategory.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

ICollapsibleToolboxItem.getParentToolbox

Inherited from

ToolboxCategory.getParentToolbox