Element that allows editing an array of values.

Hierarchy (view full)

Implements

  • IFocusable
  • IBindable

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

Methods

  • Executes the specified function for each array element.

    Parameters

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

      The function with signature (element, index) => bool to execute. If the function returns false then the iteration will early out.

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

          Returns false | void

    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_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_LINK_ELEMENT: "linkElement"

Fired when an array element is linked to observers.

Example

arrayInput.on('linkElement', (element: Element, index: number, path: string) => {
console.log(`Element ${index} is now linked to ${path}`);
});
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_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');
});
EVENT_UNLINK_ELEMENT: "unlinkElement"

Fired when an array element is unlinked from observers.

Example

arrayInput.on('unlinkElement', (element: Element, index: number) => {
console.log(`Element ${index} is now unlinked`);
});