Home Reference Source
import Component from 'potassium-es/src/Component.js'
public class | source

Component

Extends:

EventHandler → Component

Component contains the reactive logic for a responsive UI element.

Component supports all three display modes on the wider web: flat, portal, and immersive. It help create and manage UI controls in pages, overlaid on top of portal displays, and inside 3D spatial scenes.

'Component' responds to the many wider web input hardware types (tracked wands, hand gestures, voice commands, keyboards, mice, touch, etc) by reacting to actions generated by the Mozilla Action-input library.

See:

Static Member Summary

Static Public Members
public static get
public static get
public static set
public static get

Constructor Summary

Public Constructor
public

constructor(dataObject: DataObject, options: Object)

Member Summary

Public Members
public set
public get

True if action-input text actions are accepted by this Component

public get
public set
public
public get
public
public get
public get

flatDOM: HTMLElement

public get
public get

immersiveSOM: THREE.Object3D

public get

inherited options that should be passed into children Components like so:

public

options: *

public get

portalDOM: HTMLElement

public get

portalSOM: THREE.Object3D

public get

usesDOM: *

public get
public get
public get
public get
public get
public get

usesSOM: *

public get

usesValues: {"usesFlat": *, "usesPortalOverlay": *, "usesPortalSpatial": *, "usesImmersive": *}

Method Summary

Public Methods
public

addClass(classNames: string[]): *

add class attributes to both flat and portal DOM elements

public

appendComponent(childComponent: Component): *

appendComponent adds the childComponent's flatDOM, portalDOM, portalSOM, and immersiveSOM to this Component's equivalent attributes.

public

appendTo(parentComponent: Component): *

A handy method for quick creation and setting of a parent: this._fooComponent = new FooComponent().appendTo(parentComponent)

public

bindAttribute(dataField: *, target: *, attributeName: *, formatter: undefined, dataModel: *)

public

bindText(dataField: string, target: HTMLElement or Object3D, formatter: function, dataModel: DataModel)

public

blur(): *

Call to remove this from text input focus

public

cleanup(): *

Called to dispose of any resources used by this component.

public

focus(): *

Call to set this to the text input focus

public

handleAction(actionName: *, active: *, value: *, actionParameters: *, filterParameters: *, inputSource: *)

Called when an action is targeted at a Component

public

handleDisplayModeChange(eventName: *, mode: *, displayModeTracker: *)

public

hide(): *

hides the flatDOM, portalDOM, portalSOM, and immersiveSOM if their uses* option was true

public

listenTo(eventName: string, target: HTMLElement or EventHandler, callback: function, context: function)

Listen to a DOM or Component event.

public

removeClass(classNames: string[]): *

remove class attributes to both flat and portal DOM elements

public

removeComponent(childComponent: Component): *

removeComponent removes the childComponent's flatDOM, portalDOM, portalSOM, and immersiveSOM from this Component's equivalent attributes.

public

setName(name: *): *

Sets the name attribute on portal and immersive graphs as well as the data-name attribute on flatDOM and portalDOM

public

show(): *

shows the flatDOM, portalDOM, portalSOM, and immersiveSOM if their uses* option was true

Inherited Summary

From class EventHandler
public get

listeners: EventListener[]: *

public

addListener(callback: function(eventName: string, eventSource: EventHandler), eventName: Object | Symbol, once: bool)

public
public

removeListener(callback: *, eventName: undefined)

public

trigger(eventName: *, params: ...*)

Send an event to listeners

Static Public Members

public static get AudioManager: AudioManager source

public static get TextInputFocus: Component source

public static set TextInputFocus: Component source

public static get TextInputReceiver: TextInputReceiver source

Public Constructors

public constructor(dataObject: DataObject, options: Object) source

Params:

NameTypeAttributeDescription
dataObject DataObject
  • optional
options Object
  • optional
options.flatDOM HTMLElement
  • optional
options.portalDOM HTMLElement
  • optional
options.portalSOM THREE.Object3D
  • optional
options.immersiveSOM THREE.Object3D
  • optional
options.name string
  • optional
  • default: null

= if not null, use Component.setName with the value

options.usesFlat boolean
  • optional
  • default: true

if set to false the flatDOM will be hidden

options.usesPortalOverlay boolean
  • optional
  • default: true

if set to false the portalDOM will be hidden

options.usesPortalSpatial boolean
  • optional
  • default: true

if set to false the portalSOM will be hidden

options.usesImmersive boolean
  • optional
  • default: true

if set to false the immersiveSOM is hidden

options.activationAnchor string
  • optional
  • default: null

if defined, activating this Component will change the document.href.location to this URL

Public Members

public set acceptsTextInputFocus: boolean source

public get acceptsTextInputFocus: boolean source

True if action-input text actions are accepted by this Component

public get activationAnchor: string source

public set activationAnchor: string source

public cleanedUp: boolean source

public get currentDisplayMode: * source

public dataObject: * source

public get displayModeTracker: * source

public get flatDOM: HTMLElement source

public get hasFocus: boolean source

public get immersiveSOM: THREE.Object3D source

public get inheritedOptions: Object source

inherited options that should be passed into children Components like so:

this._childComponent = new Component( dataObject, options, this.inheritedOptions ).appendTo(this)

The main function of the inherited options is to pass down the information of whether to use each display mode. This will make your application faster by giving Components the ability to save a lot of memory and processing time when entire display modes like immersive aren't wanted.

public options: * source

public get portalDOM: HTMLElement source

public get portalSOM: THREE.Object3D source

public get usesDOM: * source

public get usesFlat: * source

public get usesImmersive: * source

public get usesPortal: * source

public get usesPortalOverlay: * source

public get usesPortalSpatial: * source

public get usesSOM: * source

public get usesValues: {"usesFlat": *, "usesPortalOverlay": *, "usesPortalSpatial": *, "usesImmersive": *} source

Public Methods

public addClass(classNames: string[]): * source

add class attributes to both flat and portal DOM elements

Params:

NameTypeAttributeDescription
classNames string[]

Return:

*

public appendComponent(childComponent: Component): * source

appendComponent adds the childComponent's flatDOM, portalDOM, portalSOM, and immersiveSOM to this Component's equivalent attributes. Note, it is sensitive to the uses* options and will not append the child to specific DOM and SOM trees if a specific display mode is not used.

Params:

NameTypeAttributeDescription
childComponent Component

Return:

*

public appendTo(parentComponent: Component): * source

A handy method for quick creation and setting of a parent: this._fooComponent = new FooComponent().appendTo(parentComponent)

Params:

NameTypeAttributeDescription
parentComponent Component

Return:

*

public bindAttribute(dataField: *, target: *, attributeName: *, formatter: undefined, dataModel: *) source

Params:

NameTypeAttributeDescription
dataField *
target *
attributeName *
formatter undefined
  • optional
  • default: undefined
dataModel *
  • optional

public bindText(dataField: string, target: HTMLElement or Object3D, formatter: function, dataModel: DataModel) source

Params:

NameTypeAttributeDescription
dataField string
target HTMLElement or Object3D
formatter function
dataModel DataModel

public blur(): * source

Call to remove this from text input focus

Return:

*

public cleanup(): * source

Called to dispose of any resources used by this component. Extending classes should override and call cleanup on sub-Components.

Override:

EventHandler#cleanup

Return:

*

public focus(): * source

Call to set this to the text input focus

Return:

*

public handleAction(actionName: *, active: *, value: *, actionParameters: *, filterParameters: *, inputSource: *) source

Called when an action is targeted at a Component

Params:

NameTypeAttributeDescription
actionName *
active *
value *
actionParameters *
filterParameters *
inputSource *

public handleDisplayModeChange(eventName: *, mode: *, displayModeTracker: *) source

Params:

NameTypeAttributeDescription
eventName *
mode *
displayModeTracker *

public hide(): * source

hides the flatDOM, portalDOM, portalSOM, and immersiveSOM if their uses* option was true

Return:

*

public listenTo(eventName: string, target: HTMLElement or EventHandler, callback: function, context: function) source

Listen to a DOM or Component event. For example: this.buttonDOM = dom.button() this.listenTo('click', this.buttonDOM, this.handleClick)

this.textComponent = new TextComponent(...) this.listenTo(Component.TextInputEvent, this.textComponent, (eventName, ...params) => { ... })

Params:

NameTypeAttributeDescription
eventName string
target HTMLElement or EventHandler
callback function
context function

public removeClass(classNames: string[]): * source

remove class attributes to both flat and portal DOM elements

Params:

NameTypeAttributeDescription
classNames string[]

Return:

*

public removeComponent(childComponent: Component): * source

removeComponent removes the childComponent's flatDOM, portalDOM, portalSOM, and immersiveSOM from this Component's equivalent attributes.

Params:

NameTypeAttributeDescription
childComponent Component

Return:

*

public setName(name: *): * source

Sets the name attribute on portal and immersive graphs as well as the data-name attribute on flatDOM and portalDOM

Params:

NameTypeAttributeDescription
name *

Return:

*

public show(): * source

shows the flatDOM, portalDOM, portalSOM, and immersiveSOM if their uses* option was true

Return:

*