Skip to main content

Interface: ICollapsibleToolboxItem

Defined in: packages/blockly/core/interfaces/i_collapsible_toolbox_item.ts:18

Interface for an item in the toolbox that can be collapsed.

Extends

Methods index

MethodDescription
getChildToolboxItemsGets any children toolbox items. (ex. Gets the subcategories)
isExpandedWhether the toolbox item is expanded to show its child subcategories.
toggleExpandedToggles whether or not the toolbox item is expanded.
getFocusableElementReturns the DOM element that can be explicitly requested to receive focus.
getFocusableTreeReturns the closest parent tree of this node (in cases where a tree has distinct trees underneath it), which represents the tree to which this node belongs.
onNodeFocusCalled when this node receives active focus.
onNodeBlurCalled when this node loses active focus. It may still have passive focus.
canBeFocusedIndicates whether this node allows focus. If this returns false then none of the other IFocusableNode methods will be called.
performActionOptional method invoked when this node has focus and the user acts on it by pressing Enter or Space. Behavior should generally be similar to the node being clicked on.
getNameGets the name of the toolbox item. Used for emitting events.
getContentsGets the contents of the toolbox item. These are items that are meant to be displayed in the flyout.
setSelectedSets the current toolbox item as selected.
getClickTargetGets 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.
onClickHandles when the toolbox item is clicked.
initInitializes the toolbox item. This includes creating the DOM and updating the state of any items based on the info object.
getDivGets the div for the toolbox item.
getIdGets a unique identifier for this toolbox item.
getParentGets the parent if the toolbox item is nested.
isSelectableWhether the toolbox item is selectable.
isCollapsibleWhether the toolbox item is collapsible.
disposeDispose of this toolbox item. No-op by default.
setVisible_Sets whether the category is visible or not. For a category to be visible its parent category must also be expanded.
getParentToolbox-

Methods

getChildToolboxItems()

getChildToolboxItems(): IToolboxItem[];

Defined in: packages/blockly/core/interfaces/i_collapsible_toolbox_item.ts:24

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

Returns

IToolboxItem[]

The child toolbox items.


isExpanded()

isExpanded(): boolean;

Defined in: packages/blockly/core/interfaces/i_collapsible_toolbox_item.ts:32

Whether the toolbox item is expanded to show its child subcategories.

Returns

boolean

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


toggleExpanded()

toggleExpanded(): void;

Defined in: packages/blockly/core/interfaces/i_collapsible_toolbox_item.ts:35

Toggles whether or not the toolbox item is expanded.

Returns

void


getFocusableElement()

getFocusableElement(): HTMLElement | SVGElement;

Defined in: packages/blockly/core/interfaces/i_focusable_node.ts:44

Returns the DOM element that can be explicitly requested to receive focus.

IMPORTANT: Please note that this element is expected to have a visual presence on the page as it will both be explicitly focused and have its style changed depending on its current focus state (i.e. blurred, actively focused, and passively focused). The element will have one of two styles attached (where no style indicates blurred/not focused):

  • blocklyActiveFocus
  • blocklyPassiveFocus

The returned element must also have a valid ID specified, and this ID should be unique across the entire page. Failing to have a properly unique ID could result in trying to focus one node (such as via a mouse click) leading to another node with the same ID actually becoming focused by FocusManager.

The returned element must be visible if the node is ever focused via FocusManager.focusNode() or FocusManager.focusTree(). It's allowed for an element to be hidden until onNodeFocus() is called, or become hidden with a call to onNodeBlur().

It's expected the actual returned element will not change for the lifetime of the node (that is, its properties can change but a new element should never be returned). Also, the returned element will have its tabindex overwritten throughout the lifecycle of this node and FocusManager.

If a node requires the ability to be focused directly without first being focused via FocusManager then it must set its own tab index.

Returns

HTMLElement | SVGElement

The HTMLElement or SVGElement which can both receive focus and be visually represented as actively or passively focused for this node.

Inherited from

ISelectableToolboxItem.getFocusableElement


getFocusableTree()

getFocusableTree(): IFocusableTree;

Defined in: packages/blockly/core/interfaces/i_focusable_node.ts:53

Returns the closest parent tree of this node (in cases where a tree has distinct trees underneath it), which represents the tree to which this node belongs.

Returns

IFocusableTree

The node's IFocusableTree.

Inherited from

ISelectableToolboxItem.getFocusableTree


onNodeFocus()

onNodeFocus(): void;

Defined in: packages/blockly/core/interfaces/i_focusable_node.ts:66

Called when this node receives active focus.

Note that it's fine for implementations to change visibility modifiers, but they should avoid the following:

  • Creating or removing DOM elements (including via the renderer or drawer).
  • Affecting focus via DOM focus() calls or the FocusManager.

Implementations may consider scrolling themselves into view here; that is not handled by the focus manager.

Returns

void

Inherited from

ISelectableToolboxItem.onNodeFocus


onNodeBlur()

onNodeBlur(): void;

Defined in: packages/blockly/core/interfaces/i_focusable_node.ts:73

Called when this node loses active focus. It may still have passive focus.

This has the same implementation restrictions as onNodeFocus().

Returns

void

Inherited from

ISelectableToolboxItem.onNodeBlur


canBeFocused()

canBeFocused(): boolean;

Defined in: packages/blockly/core/interfaces/i_focusable_node.ts:101

Indicates whether this node allows focus. If this returns false then none of the other IFocusableNode methods will be called.

Note that special care must be taken if implementations of this function dynamically change their return value value over the lifetime of the node as certain environment conditions could affect the focusability of this node's DOM element (such as whether the element has a positive or zero tabindex). Also, changing from a true to a false value while the node holds focus will not immediately change the current focus of the node nor FocusManager's internal state, and thus may result in some of the node's functions being called later on when defocused (since it was previously considered focusable at the time of being focused).

Implementations should generally always return true here unless there are circumstances under which this node should be skipped for focus considerations. Examples may include being disabled, read-only, a purely visual decoration, or a node with no visual representation that must implement this interface (e.g. due to a parent interface extending it). Keep in mind accessibility best practices when determining whether a node should be focusable since even disabled and read-only elements are still often relevant to providing organizational context to users (particularly when using a screen reader).

Returns

boolean

Whether this node can be focused by FocusManager.

Inherited from

ISelectableToolboxItem.canBeFocused


performAction()?

optional performAction(e?): void;

Defined in: packages/blockly/core/interfaces/i_focusable_node.ts:110

Optional method invoked when this node has focus and the user acts on it by pressing Enter or Space. Behavior should generally be similar to the node being clicked on.

Parameters

ParameterTypeDescription
e?EventThe event that triggered this action, if any.

Returns

void

Inherited from

ISelectableToolboxItem.performAction


getName()

getName(): string;

Defined in: packages/blockly/core/interfaces/i_selectable_toolbox_item.ts:21

Gets the name of the toolbox item. Used for emitting events.

Returns

string

The name of the toolbox item.

Inherited from

ISelectableToolboxItem.getName


getContents()

getContents():
| string
| FlyoutItemInfoArray;

Defined in: packages/blockly/core/interfaces/i_selectable_toolbox_item.ts:29

Gets the contents of the toolbox item. 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.

Inherited from

ISelectableToolboxItem.getContents


setSelected()

setSelected(_isSelected): void;

Defined in: packages/blockly/core/interfaces/i_selectable_toolbox_item.ts:36

Sets the current toolbox item as selected.

Parameters

ParameterTypeDescription
_isSelectedbooleanTrue if this category is selected, false otherwise.

Returns

void

Inherited from

ISelectableToolboxItem.setSelected


getClickTarget()

getClickTarget(): Element;

Defined in: packages/blockly/core/interfaces/i_selectable_toolbox_item.ts:46

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.

Inherited from

ISelectableToolboxItem.getClickTarget


onClick()

onClick(_e): void;

Defined in: packages/blockly/core/interfaces/i_selectable_toolbox_item.ts:53

Handles when the toolbox item is clicked.

Parameters

ParameterTypeDescription
_eEventClick event to handle.

Returns

void

Inherited from

ISelectableToolboxItem.onClick


init()

init(): void;

Defined in: packages/blockly/core/interfaces/i_toolbox_item.ts:21

Initializes the toolbox item. This includes creating the DOM and updating the state of any items based on the info object.

Returns

void

Inherited from

ISelectableToolboxItem.init


getDiv()

getDiv(): Element | null;

Defined in: packages/blockly/core/interfaces/i_toolbox_item.ts:28

Gets the div for the toolbox item.

Returns

Element | null

The div for the toolbox item.

Inherited from

ISelectableToolboxItem.getDiv


getId()

getId(): string;

Defined in: packages/blockly/core/interfaces/i_toolbox_item.ts:35

Gets a unique identifier for this toolbox item.

Returns

string

The ID for the toolbox item.

Inherited from

ISelectableToolboxItem.getId


getParent()

getParent(): IToolboxItem | null;

Defined in: packages/blockly/core/interfaces/i_toolbox_item.ts:43

Gets the parent if the toolbox item is nested.

Returns

IToolboxItem | null

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

Inherited from

ISelectableToolboxItem.getParent


isSelectable()

isSelectable(): boolean;

Defined in: packages/blockly/core/interfaces/i_toolbox_item.ts:58

Whether the toolbox item is selectable.

Returns

boolean

True if the toolbox item can be selected.

Inherited from

ISelectableToolboxItem.isSelectable


isCollapsible()

isCollapsible(): boolean;

Defined in: packages/blockly/core/interfaces/i_toolbox_item.ts:65

Whether the toolbox item is collapsible.

Returns

boolean

True if the toolbox item is collapsible.

Inherited from

ISelectableToolboxItem.isCollapsible


dispose()

dispose(): void;

Defined in: packages/blockly/core/interfaces/i_toolbox_item.ts:68

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

Returns

void

Inherited from

ISelectableToolboxItem.dispose


setVisible_()

setVisible_(isVisible): void;

Defined in: packages/blockly/core/interfaces/i_toolbox_item.ts:83

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

Parameters

ParameterTypeDescription
isVisiblebooleanTrue if category should be visible.

Returns

void

Inherited from

ISelectableToolboxItem.setVisible_


getParentToolbox()

getParentToolbox(): IToolbox;

Defined in: packages/blockly/core/interfaces/i_toolbox_item.ts:85

Returns

IToolbox

Inherited from

ISelectableToolboxItem.getParentToolbox