Documentation

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.

© «Bitrix24», 2001-2024
Up