ItemNode class

Class represents visual view for (DOM-узел) an item.

Constructor

constructor(item: Item, nodeOptions: ItemNodeOptions): ItemNode

Creates a object of class ItemNode.

Use the method item.createNode() or option nodeOptions in the item class constructor for creating item's DOM-nodes.

• item — item (Item class object) for DOM-node to be created.
• nodeOptions — item options defined by the structure ItemNodeOptions.

export type ItemNodeOptions = {
    itemOrder?: ItemNodeOrder,
    open?: boolean,
    dynamic?: boolean,
    title?: string | TextNodeOptions,
    subtitle?: string | TextNodeOptions,
    supertitle?: string | TextNodeOptions,
    caption?: string | TextNodeOptions,
    captionOptions?: CaptionOptions,
    avatar?: string,
    avatarOptions?: AvatarOptions,
    textColor?: string,
    link?: string,
    linkTitle?: string | TextNodeOptions,
    badges?: ItemBadgeOptions[],
    badgesOptions?: BadgesOptions,
};

• itemOrder?: ItemNodeOrder

  Item sorting inside DOM-node. Defined by structure ItemNodeOrder:

  export type ItemNodeOrder = (
    { [field: string]: 'asc' | 'desc' | 'asc nulls first' | 'asc nulls last' | 'desc nulls first' | 'desc nulls last' }
    |
    (a: ItemNode, b: ItemNode) => number
  );
  

  In standard case, item fields are indicated, used for sorting.

  const options = {
    itemOrder: { title: 'asc', sort: 'asc', id: 'desc' }
  };
  

  When sorting by field is insufficient, you can define your function defining sorting order.

  const options = {
    itemOrder: (nodeA: ItemNode, nodeB: ItemNode) => {
        const itemA = nodeA.getItem();
        const itemB = nodeB.getItem();
  
        return itemA.getSort() - itemB.getSort(); 
    }
  };
  



• open?: boolean

  Defines DOM-node size with nested items. For dynamic nodes, the true value leads to automatic loading of nested items.



• dynamic?: boolean

  Defines dynamic node. Clicking at such node executes query to backend for loading nested descendant items.



• title?: string | TextNodeOptions

  DOM-node title. Defined either by string or structure TextNodeOptions.
  When value is not indicated, searches the title in the item with associated DOM-node.



• subtitle?: string | TextNodeOptions

  DOM-node subtitle. Defined either by string or structure TextNodeOptions.
  When value is not indicated, searches subtitle in the item with associated DOM-node.



• supertitle?: string | TextNodeOptions

  DOM-node supertitle. Defined either by string or structure TextNodeOptions.
  When value is not indicated, searches supertitle in the item with associated DOM-node.



• caption?: string | TextNodeOptions

  DOM-node caption. Defined either by string or structure TextNodeOptions.
  When value is not indicated, searches in the item with associated DOM-node.



• captionOptions?: CaptionOptions

  Item additional caption settings. Defined by structure CaptionOptions.
  When value is not indicated, searches in the item with associated DOM-node.



• avatar?: string

  DOM-node avatar. Indicate either image path or file in format Data URL.
  When value is not indicated, searches in thenitem with associated DOM-node.

  • avatarOptions?: AvatarOptions

    Additional settings for DOM-node avatar .

    Defined by the structure AvatarOptions. When value is not indicated, searches avatar settings in the item with associated DOM-node.



• textColor?: string

  DOM-node text title color. When value is not indicated, searches text title color in the item with associated DOM-node.



• link?: string

  "More" link address. When value is not indicated, searches link address in the item with associated DOM-node.



• linkTitle?: string | TextNodeOptions

  "More" link title. When value is not indicated, searches link title in the item with associated DOM-node.



• badges?: ItemBadgeOptions[]

  DOM-node array with badges. Each badge is defined by the structure ItemBadgeOptions.
  When value is not indicated, searches badges in the item with associated DOM-node.



• badgesOptions?: BadgesOptions

  Additional settings for block with badges. Defined by structure BadgesOptions.
  When value is not indicated, searches settings in the itemwith associated DOM-node.

Methods

Method	Description	Available from version
getItem(): Item	Returns item with associated DOM-node.
getDialog(): Dialog	Returns dialog with rendered DOM-node.
getTab(): Tab	Returns tab with rendered DOM-node.
isRoot(): boolean	Returns true when DOM-node is a root node. Root nodes are created automatically for all tabs. They do not have visual view.
getParentNode(): ?ItemNode	Returns parent DOM-node.
getNextSibling(): ?ItemNode	Returns a next DOM-node.
getPreviousSibling(): ?ItemNode	Returns previous DOM-node.
addChildren(children: ItemOptions[]): void	Adds children DOM-nodes.
addChild(child: ItemNode): ItemNode	Adds a child DOM-node.
getDepthLevel(): number	Returns nesting level for DOM-node.
addItem(item: Item, nodeOptions: ItemNodeOptions): ItemNode	Adds a child item.
hasItem(item: Item): boolean	Returns true when the specified item is available among descendants.
removeChild(child: ItemNode): boolean	Deletes a child DOM-node.
removeChildren(): void	Deletes all child DOM-nodes.
hasChild(child: ItemNode): boolean	Returns true when specified DOM-node is a descendant child node.
isChildOf(parent: ItemNode): boolean	Returns true when specified DOM-node is a parent node.
getFirstChild(): ?ItemNode	Returns a first child DOM-node.
getLastChild(): ?ItemNode	Returns the last child DOM-node.
getChildren(): OrderedArray	Returns sorted collection of all descendants.
hasChildren(): boolean	Returns true when DOM-node has descendants.
loadChildren(): Promise	Loads child items from backend.
isOpen(): boolean	Returns true when DOM-node is opened.
setDynamic(dynamic: boolean): void	Sets or cancels dynamic attribute for DOM-node.
isDynamic(): boolean	Returns true when DOM-node is dynamic. When clicking on such node, executes query to the backend for loading nested child items.
isLoaded(): boolean	Returns true when DOM-node has already loaded nested items from the backend.
expand(): void	Expands DOM-node, if it has descendants.
collapse(): void	Collapses DOM-node, if it has descendants.
isRendered(): boolean	Returns true when DOM-node was inserted into dialog and rendered.
getTitle(): string	Returns DOM-node title. When values is not indicated for DOM-node, searches title in the item with associated DOM-node.
setTitle(title: string | TextNodeOptions): void	Sets DOM-node title. Title is defined by either string or structure TextNodeOptions.
getSubtitle(): ?string	Returns DOM-node subtitle. When values is not indicated for DOM-node, searches subtitle in the item with associated DOM-node.
setSubtitle(subtitle: string | TextNodeOptions): void	Sets DOM-node subtitle. Subtitle is defined by either a string. or structure TextNodeOptions.
getSupertitle(): ?string	Returns DOM-node supertitle. When value is not indicated for DOM-node, searches supertitle in the item with associated DOM-node.
setSupertitle(supertitle: string | TextNodeOptions): void	Sets DOM-node supertile. Supertitle is defined by either a string or structure TextNodeOptions.
getCaption(): ?string	Returns DOM-node caption. When DOM-node value is not indicated, searches caption in the item with associated DOM-node.
setCaption(caption: string | TextNodeOptions): void	Sets DOM-node caption. Caption is defined either by string or structure TextNodeOptions.
getAvatar(): ?string	Returns DOM-node avatar. When DOM-node value is not indicated, searches avatar in the item with associated DOM-node.
setAvatar(avatar: ?string): void	Sets DOM-node avatar. Indicates either image path or file in format Data URL.
getAvatarOption(option: $Keys): string | boolean | number | null	Returns settings value for DOM-node avatar. option name is defined by keys of structure AvatarOptions. When DOM-node value is not indicated, searches option in the item.
setAvatarOption(option: $Keys, value: string | boolean | number | null): void	Sets option value for DOM-node avatar. option name is defined by keys of structure AvatarOptions.
setAvatarOptions(options: AvatarOptions): void	Sets settings for DOM-node avatar. option settings are defined by structure AvatarOptions.
getTextColor(): ?string	Returns DOM-node text title color. When DOM-node value is not indicated, searches text title color in the item with associated DOM-node.
setTextColor(textColor: ?string): void	Sets text color for DOM-node title.
getLink(): ?string	Returns "more" link address. When DOM-node value is not indicated, searches link address in the item with associated DOM-node.
setLink(link: string): void	Sets "more" link address.
getLinkTitle(): ?string	Returns "more" link title. When DOM-node value is not indicated, searches link title in the item with associated DOM-node.
setLinkTitle(title: string | TextNodeOptions): void	Sets "more" link title. Title is defined by either a string or structure TextNodeOptions.
getBadges(): ItemBadge[]	Returns array with badges (objects of class ItemBadge) for DOM-node. When DOM-node value is not indicated, searches badges in the item with associated DOM-node.
setBadges(badges: ?ItemBadgeOptions[]): void	Sets DOM-node badges. Each badges is defined by structure ItemBadgeOptions.
focus(): void	Sets focus at DOM-node.
unfocus(): void	Resets focus from DOM-node.
isFocused(): boolean	Returns true when focus is set at DOM-node.
click(): void	Emulates clicking at a DOM-node.
scrollIntoView(): void	Scrolls tab content for DOM-node to be located in visibility area.