The Panel is a Container that itself contains a header container and a content container. The respective Container functions work using the content container. One can also append elements to the header of the Panel.

Hierarchy (view full)

Constructors

Accessors

  • get enabled(): boolean
  • Gets whether the Element or its parent chain is enabled or not.

    Returns boolean

  • set enabled(value): void
  • Sets whether the Element or its parent chain is enabled or not. Defaults to true.

    Parameters

    • value: boolean

    Returns void

  • 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 ignoreParent(): boolean
  • Gets whether the Element will ignore parent events & variable states.

    Returns boolean

  • set ignoreParent(value): void
  • Sets whether the Element will ignore parent events & variable states.

    Parameters

    • value: boolean

    Returns void

  • get resizable(): string
  • Gets whether the Element is resizable and where the resize handle is located.

    Returns string

  • set resizable(value): void
  • 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
      • Optionalchildren?: any

        The children of the root node.

      • Optionalroot?: 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

    '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

    '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

    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: Element, index: number) => 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

  • Unbinds an event listener for the specified event name. If a callback function is provided, only that specific listener is removed. If no callback is provided, all listeners for the event are removed. If no event name is provided, all listeners for all events are removed.

    Parameters

    • Optionalname: string

      The name of the event to unbind. If not provided, all events are unbound.

    • Optionalfn: HandleEvent

      The specific callback function to remove. If not provided, all listeners for the event are removed.

    Returns Events

    The current instance for chaining.

    // Register an event listener
    const callback = (arg1, arg2) => {
    console.log('Event triggered with arguments:', arg1, arg2);
    };
    events.on('testEvent', callback);

    // Unbind the specific event listener
    events.unbind('testEvent', callback);

    // Unbind all listeners for a specific event
    events.unbind('testEvent');

    // Unbind all listeners for all events
    events.unbind();
  • 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.

    • OptionaldefaultArguments: any

      Default arguments when creating this type.

    Returns void

Events

EVENT_APPEND: "append" = 'append'

Fired when a child Element gets added to the Container.

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.

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

Fired when the panel gets collapsed.

const panel = new Panel();
panel.on('collapse', () => {
console.log('Panel collapsed');
});
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.

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.

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

Fired when the Element gets enabled.

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

Fired when the panel gets expanded.

const panel = new Panel();
panel.on('expand', () => {
console.log('Panel expanded');
});
EVENT_HIDE: "hide" = 'hide'

Fired when the Element gets hidden.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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