Component
Extends:
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.
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 |
dataObject: * |
|
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 |
usesFlat: * |
|
public get |
|
|
public get |
usesPortal: * |
|
public get |
|
|
public get |
|
|
public get |
usesSOM: * |
|
public get |
usesValues: {"usesFlat": *, "usesPortalOverlay": *, "usesPortalSpatial": *, "usesImmersive": *} |
Method Summary
Public Methods | ||
public |
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 |
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 |
|
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 |
Inherited Summary
From class EventHandler | ||
public get |
listeners: EventListener[]: * |
|
public |
addListener(callback: function(eventName: string, eventSource: EventHandler), eventName: Object | Symbol, once: bool) |
|
public |
cleanup() |
|
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 TextInputReceiver: TextInputReceiver source
Public Constructors
public constructor(dataObject: DataObject, options: Object) source
Params:
Name | Type | Attribute | Description |
dataObject | DataObject |
|
|
options | Object |
|
|
options.flatDOM | HTMLElement |
|
|
options.portalDOM | HTMLElement |
|
|
options.portalSOM | THREE.Object3D |
|
|
options.immersiveSOM | THREE.Object3D |
|
|
options.name | string |
|
= if not null, use Component.setName with the value |
options.usesFlat | boolean |
|
if set to false the flatDOM will be hidden |
options.usesPortalOverlay | boolean |
|
if set to false the portalDOM will be hidden |
options.usesPortalSpatial | boolean |
|
if set to false the portalSOM will be hidden |
options.usesImmersive | boolean |
|
if set to false the immersiveSOM is hidden |
options.activationAnchor | string |
|
if defined, activating this Component will change the document.href.location to this URL |
Public Members
public get acceptsTextInputFocus: boolean source
True if action-input text actions are accepted by this Component
public get currentDisplayMode: * source
public dataObject: * source
public get displayModeTracker: * source
public get flatDOM: HTMLElement 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:
Name | Type | Attribute | Description |
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:
Name | Type | Attribute | Description |
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:
Name | Type | Attribute | Description |
parentComponent | Component |
Return:
* |
public bindAttribute(dataField: *, target: *, attributeName: *, formatter: undefined, dataModel: *) source
Params:
Name | Type | Attribute | Description |
dataField | * | ||
target | * | ||
attributeName | * | ||
formatter | undefined |
|
|
dataModel | * |
|
public bindText(dataField: string, target: HTMLElement or Object3D, formatter: function, dataModel: DataModel) source
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#cleanupReturn:
* |
public handleAction(actionName: *, active: *, value: *, actionParameters: *, filterParameters: *, inputSource: *) source
Called when an action is targeted at a Component
Params:
Name | Type | Attribute | Description |
actionName | * | ||
active | * | ||
value | * | ||
actionParameters | * | ||
filterParameters | * | ||
inputSource | * |
public handleDisplayModeChange(eventName: *, mode: *, displayModeTracker: *) source
Params:
Name | Type | Attribute | Description |
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) => { ... })
public removeClass(classNames: string[]): * source
remove class attributes to both flat and portal DOM elements
Params:
Name | Type | Attribute | Description |
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:
Name | Type | Attribute | Description |
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:
Name | Type | Attribute | Description |
name | * |
Return:
* |
public show(): * source
shows the flatDOM, portalDOM, portalSOM, and immersiveSOM if their uses*
option was true
Return:
* |