Class Element

The base class for all UI elements.

Hierarchy (view full)

Constructors

constructor

Accessors

alignItems alignSelf binding class dom enabled error flexBasis flexDirection flexGrow flexShrink flexWrap height hidden hiddenToRoot ignoreParent justifyContent justifySelf parent readOnly style tabIndex width

Methods

destroy flash link unbind unlink create register unregister

Events

EVENT_CLICK EVENT_DESTROY EVENT_DISABLE EVENT_ENABLE EVENT_HIDE EVENT_HIDE_TO_ROOT EVENT_HOVER EVENT_HOVER_END EVENT_PARENT EVENT_READ_ONLY EVENT_SHOW EVENT_SHOW_TO_ROOT

Constructors

constructor

Accessors

alignItems

alignSelf

binding

class

dom

enabled

error

flexBasis

flexDirection

flexGrow

flexShrink

flexWrap

height

hidden

hiddenToRoot

ignoreParent

justifyContent

justifySelf

parent

readOnly

style

tabIndex

width

Methods

destroy

flash

link

  • link(observers, paths): 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

unbind

  • unbind(name?, fn?): Events

  • 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.

    Example

    // 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();

unlink

Staticcreate

  • create(type, args): any

  • 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.

Staticregister

  • register<Type>(type, cls, defaultArguments?): void

  • 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

Staticunregister

Events

Static ReadonlyEVENT_CLICK

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');
});

Static ReadonlyEVENT_DESTROY

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');
});

Static ReadonlyEVENT_DISABLE

EVENT_DISABLE: "disable" = 'disable'

Fired when the Element gets disabled.

Example

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

Static ReadonlyEVENT_ENABLE

EVENT_ENABLE: "enable" = 'enable'

Fired when the Element gets enabled.

Example

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

Static ReadonlyEVENT_HIDE

EVENT_HIDE: "hide" = 'hide'

Fired when the Element gets hidden.

Example

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

Static ReadonlyEVENT_HIDE_TO_ROOT

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');
});

Static ReadonlyEVENT_HOVER

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');
});

Static ReadonlyEVENT_HOVER_END

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');
});

Static ReadonlyEVENT_PARENT

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}`);
});

Static ReadonlyEVENT_READ_ONLY

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'}`);
});

Static ReadonlyEVENT_SHOW

EVENT_SHOW: "show" = 'show'

Fired when the Element stops being hidden.

Example

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

Static ReadonlyEVENT_SHOW_TO_ROOT

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');
});

Settings

Member Visibility

On This Page

Constructors
Accessors
Methods
Events