Class Component<P, E>

Type Parameters

Hierarchy

Constructors

Properties

#m_timers: Map<string, Function>
m_dom: HTMLElement
m_iprops: CInternalProps
m_props: P
__capture: ICaptureInfo = null
__capture_mask: any = null
__comp_guid: number = 1000
__createObserver: MutationObserver
__css: any = null
__privateEvents: any = {}
__sb_width: any
__sizeObserver: ResizeObserver

Accessors

  • get dom(): HTMLElement
  • return the DOM associated with the Component (if any)

    Returns HTMLElement

Methods

  • Parameters

    • name: string
    • handler: Function
    • Optional passive: boolean

    Returns void

  • Parameters

    • with_dom: boolean
    • timers: boolean

    Returns void

  • generate classes from the component inheritance

    Example

    Button extends Component will give
    x-comp x-button

    Returns void

  • prepend the system class name prefix on a name if needed (if class starts with @)

    Parameters

    • cls: string

    Returns string

  • Parameters

    • name: string
    • value: string

    Returns void

  • Parameters

    • type: string
    • listener: EventListener
    • Optional passive: boolean

    Returns void

  • Parameters

    • name: string
    • value: string | number

    Returns void

  • Parameters

    • tabIndex: number | boolean
    • defValue: number = 0

    Returns void

  • a some classnames to the component classes can be separated by a space

    Example

    addClass( 'my class name @flex' );
    

    Parameters

    • name: string

    Returns void

  • remove all classes from the object this is usefull for component recycling & reusing

    Returns string

  • emit an event you can stop propagation of event or prevent default

    Type Parameters

    • K extends string | number | symbol

    Parameters

    • type: K
    • Optional event: E[K]

      event data

    Returns void

  • enable or disable the element

    Parameters

    • Optional enable: boolean

    Returns void

  • enum all children recursively

    Parameters

    • cb: ((child) => boolean | void)

      callback return true to stop enumeration

    • recursive: boolean = false

      if true do a full sub-child search

    Returns boolean

  • get an attribute value

    Example

    let chk = el.getAttribute( 'checked' );
    @review double cache

    Parameters

    • name: string

      attribute name

    Returns string

    attribute value

  • Example

    let rc = el.getBoundingRect( );
    console.log( rc.left, rc.top, rc.right, rc.bottom );

    Parameters

    • withMargins: boolean = false

    Returns Rect

    the bounding rectangle

  • get the Component data value

    Parameters

    • name: string | Symbol

      name to get

    Returns any

  • return a single stype value

    Parameters

    • name: string

      value to get

    Returns any

  • check if the element has an attribute

    Example

    if( el.hasAttribute('checked') ) {
    }

    Parameters

    • name: string

      attribute name

    Returns boolean

    true is attribute is present

  • check if the object has the class

    Parameters

    • cls: string

    Returns boolean

  • check if the Component is visible to the user

    Returns boolean

  • find a child with the given ID

    Example

    let btn = this.childWithId<Button>( 'myButtonId' );
    

    Type Parameters

    Parameters

    • id: string

      id (without '#')

    Returns T

    child or null

  • stop listening to an event

    Type Parameters

    • K extends string | number | symbol

    Parameters

    • type: K
    • callback: ((ev) => any)

      callback to remove (must be the same as in on )

        • (ev): any
        • Parameters

          • ev: E[K]

          Returns any

    Returns void

  • handle an event one time

    Type Parameters

    • K extends string | number | symbol

    Parameters

    • type: K
    • callback: ((ev) => any)

      callback to call when event is signaled

        • (ev): any
        • Parameters

          • ev: E[K]

          Returns any

    Returns void

    Promise if callback is null

    take care with that because if the event is never fired and you await it, the system may overflow

  • remove an atrribute

    Parameters

    • name: string

      name of the attribute

    Returns void

  • Remove a class from the element

    Example

    el.removeClass( 'myclass' );
    el.removeClass( 'myclass1 myclass2' );

    Parameters

    • name: string

      classes in string form can be space separated

    Returns void

  • ensure the component is visible @param: alignToTop

    Parameters

    • Optional arg: boolean | ScrollIntoViewOptions

    Returns void

  • change a single attribute

    Parameters

    • name: string

      attribute name

    • value: any

      new value

    Returns void

  • define the elements attributes

    Parameters

    • attrs: any

    Returns void

  • change the component content

    Parameters

    Returns void

  • set the Component data value

    Parameters

    • name: string | Symbol

      name to get

    • value: any

    Returns void

  • append a new dom event handler

    Example

    this.setDomEvent( 'drag drop', this._handleDrag, this );
    this.setDomEvent( 'dblclick', this._handleDblClick, this );

    Type Parameters

    Parameters

    • type: K
    • listener: ((this, ev) => void)
        • (this, ev): void
        • Parameters

          Returns void

    • Optional passive: boolean

    Returns void

  • change the object style

    Example

    el.setStyle( {left:100} );
    

    Parameters

    • style: object

      style to add

    Returns void

  • change a style value

    Parameters

    • name: string

      string style nale

    • value: any

      any style value or null to remove style

    Returns void

  • Parameters

    • tag: string
    • Optional namespace: string

    Returns void

  • shows the element

    Parameters

    • Optional show: boolean

    Returns void

  • signal en event signaled event are notification : no way to prevent default not stop propagation

    Type Parameters

    • K extends string | number | symbol

    Parameters

    • type: K
    • event: E[K]

      event data

    • delay: number = -1

    Returns void

  • start a new timer

    Parameters

    • name: string

      timer name

    • timeout: number

      time out in ms

    • repeat: boolean = true

      if true this is an auto repeat timer

    • callback: TimerCallback = null

      if !null, the callback to call else a EvTimer is fired

    Returns void

  • Toggle a class from the element (if present remove, if absent add)

    Example

    el.toggleClass( 'myclass' );
    el.toggleClass( 'myclass1 myclass2');
    el.toggleClass( ['myclass1','myclass2']);

    Parameters

    • name: string

      classes in string form can be space separated

    Returns void

  • dispatch a dom event to the appropriated component called by the system

    Parameters

    • ev: any

    Returns void

  • dispatch a dom event to the appropriated component called by the system

    Parameters

    • ev: any

    Returns void

  • Parameters

    • mutations: MutationRecord[]

    Returns void

  • called when a size change on an observed component

    Parameters

    • entries: ResizeObserverEntry[]

    Returns void

  • get a component from a DOM element move up to the hierarchy to find the request class type.

    Example

    with a DOM like that:
    Button
    Label
    Icon <- the DOM you have (dom-icon)

    let btn = Component.getElement( dom-icon, Button );

    Type Parameters

    Parameters

    • dom: Element | HTMLElement
    • Optional classname: string | Constructor<T>

    Returns T

  • compute the scrollbar size ( width = height)

    Returns any

  • capture mouse events

    Example

    Component.setCapture( this, ( ev: MouseEvent, initiator: Component ) => {
    if( ev.type=='mousemove' ) {
    this.setStyle( {
    left: ev.clientX,
    top: ev.clientY
    } );
    }
    else if( ev.type=='mouseup' ) {
    Component.releaseCapture( );
    }
    } );

    Parameters

    Returns void

Generated using TypeDoc