Represents an information box.

Hierarchy (view full)

Accessors

  • get hiddenToRoot(): boolean
  • Gets whether the Element is hidden all the way up to the root. If the Element itself or any of its parents are hidden then this is true.

    Returns boolean

  • get resizable(): string
  • Returns string

  • set resizable(value): void
  • Gets / sets whether the Element is resizable and where the resize handle is located. Can be one of 'top', 'bottom', 'right', 'left'. Set to null to disable resizing.

    Parameters

    • value: string

    Returns void

Methods

  • If the current node contains a root, recursively append its children to this node and return it. Otherwise return the current node. Also add each child to the parent under its keyed name.

    Parameters

    • node: {
          children?: any;
          root?: any;
          [x: string]: any;
      }

      The current element in the dom structure which must be recursively traversed and appended to its parent.

      • [x: string]: any
      • Optional children?: any

        The children of the root node.

      • Optional root?: any

        The root node of the dom structure.

    Returns Container

    The recursively appended element node.

  • Appends an element to the container just after the specified reference element.

    Parameters

    • element: any

      The element to append.

    • referenceElement: any

      The element after which the element will be appended.

    Returns void

    Fires

    'append'

  • Appends an element to the container before the specified reference element.

    Parameters

    • element: any

      The element to append.

    • referenceElement: any

      The element before which the element will be appended.

    Returns void

    Fires

    'append'

  • Takes an array of pcui elements, each of which can contain their own child elements, and appends them to this container. These child elements are traversed recursively using _buildDomNode.

    Parameters

    • dom: any[]

      An array of child pcui elements to append to this container.

    Returns void

    Example

    buildDom([
    {
    child1: pcui.Label()
    },
    {
    root: {
    container1: pcui.Container()
    },
    children: [
    {
    child2: pcui.Label()
    },
    {
    child3: pcui.Label()
    }
    ]
    }
    ]);
  • Iterate over each child element using the supplied function. To early out of the iteration, return false from the function.

    Parameters

    • fn: ((child, index) => false | void)

      The function to call for each child element.

        • (child, index): false | void
        • Parameters

          Returns false | void

    Returns void

  • Links the specified observers and paths to the Element's data binding.

    Parameters

    • observers: Observer | Observer[]

      An array of observers or a single observer.

    • paths: string | string[]

      A path for the observer(s) or an array of paths that maps to each separate observer.

    Returns void

  • Creates a new Element of the desired type.

    Parameters

    • type: string

      The type of the Element (registered by Element#register).

    • args: ElementArgs

      Arguments for the Element.

    Returns any

    The new Element or undefined if type is not found.

  • Type Parameters

    • Type

    Parameters

    • type: string

      The type we want to reference this Element by.

    • cls: Object

      The actual class of the Element.

    • Optional defaultArguments: any

      Default arguments when creating this type.

    Returns void

Events

EVENT_APPEND: "append" = 'append'

Fired when a child Element gets added to the Container.

Example

const container = new Container();
container.on('append', (element: Element) => {
console.log('Element added to container:', element);
});
EVENT_CLICK: "click" = 'click'

Fired when the mouse is clicked on the Element but only if the Element is enabled. The native DOM MouseEvent is passed as a parameter to the event handler.

Example

const element = new Element();
element.on('click', (evt: MouseEvent) => {
console.log('Element clicked');
});
EVENT_DESTROY: "destroy" = 'destroy'

Fired after the element has been destroyed. Both the DOM element and the owner Element instance are passed as parameters to the event handler.

Example

const element = new Element();
element.on('destroy', (dom: HTMLElement, element: Element) => {
console.log('Element destroyed');
});
EVENT_DISABLE: "disable" = 'disable'

Fired when the Element gets disabled.

Example

const element = new Element();
element.on('disable', () => {
console.log('Element disabled');
});
EVENT_ENABLE: "enable" = 'enable'

Fired when the Element gets enabled.

Example

const element = new Element();
element.on('enable', () => {
console.log('Element enabled');
});
EVENT_HIDE: "hide" = 'hide'

Fired when the Element gets hidden.

Example

const element = new Element();
element.on('hide', () => {
console.log('Element hidden');
});
EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'

Fired when the Element or any of its parent get hidden.

Example

const element = new Element();
element.on('hideToRoot', () => {
console.log('Element or one of its parents hidden');
});
EVENT_HOVER: "hover" = 'hover'

Fired when the mouse starts hovering on the Element. The native DOM MouseEvent is passed as a parameter to the event handler.

Example

const element = new Element();
element.on('hover', (evt: MouseEvent) => {
console.log('Element hovered');
});
EVENT_HOVER_END: "hoverend" = 'hoverend'

Fired when the mouse stops hovering on the Element. The native DOM MouseEvent is passed as a parameter to the event handler.

Example

const element = new Element();
element.on('hoverend', (evt: MouseEvent) => {
console.log('Element hover ended');
});
EVENT_PARENT: "parent" = 'parent'

Fired when the Element's parent gets set.

Example

const element = new Element();
element.on('parent', (parent: Element) => {
console.log(`Element's parent is now ${parent}`);
});
EVENT_READ_ONLY: "readOnly" = 'readOnly'

Fired when the readOnly property of an Element changes.

Example

const element = new Element();
element.on('readOnly', (readOnly: boolean) => {
console.log(`Element is now ${readOnly ? 'read only' : 'editable'}`);
});
EVENT_REMOVE: "remove" = 'remove'

Fired when a child Element gets removed from the Container.

Example

const container = new Container();
container.on('remove', (element: Element) => {
console.log('Element removed from container:', element);
});
EVENT_RESIZE: "resize" = 'resize'

Fired when the container gets resized using the resize handle.

Example

const container = new Container();
container.on('resize', () => {
console.log('Container resized to:', container.width, container.height, 'px');
});
EVENT_SCROLL: "scroll" = 'scroll'

Fired when the container is scrolled. The native DOM scroll event is passed to the event handler.

Example

const container = new Container();
container.on('scroll', (event: Event) => {
console.log('Container scrolled:', event);
});
EVENT_SHOW: "show" = 'show'

Fired when the Element stops being hidden.

Example

const element = new Element();
element.on('show', () => {
console.log('Element shown');
});
EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'

Fired when the Element and all of its parents become visible.

Example

const element = new Element();
element.on('showToRoot', () => {
console.log('Element and all of its parents shown');
});