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. It supports all three display modes on the wider web: flat, portal, and immersive.

Flat display mode is the original web, displayed on PC screens and handheld screens.

Flat display mode controls in a Component are represented by a DOM hierarchy.

Portal display mode is for "magic window" or "aquarium" setups. The most common portal display is a handheld screen that looks into a real or virtual space. A stationary wall screen could also be a portal, changing the view by tracking the user's eyes.

Portal display mode in a Component has two main parts:

  • a Three.js scene graph for spatial controls and environment objects
  • a DOM hierarchy that is laid on top of the 3D scene

Immersive display mode is for displays that you wear on your face:

  • an opaque head mounted display for VR
  • a opaque head mounted display with pass-through cameras for AR
  • see-through glasses for AR

(and everything in between)

Immersive display mode in a Component is represented by a Three.js scene graph

Components may also register themselves to accept text input actions by setting Component.acceptsTextInputFocus = true By default, if the component accepts text input actions and receives an /action/activate with a value of true, it will set itself as the global text input focus by setting Component.TextInputFocus = this

Static Member Summary

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

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
public
public
public get

flatEl: Element

public get
public get

immersiveGraph: THREE.Object3D

public

options: *

public get

portalEl: Element

public get

portalGraph: THREE.Object3D

public get
public get
public get
public get
public get
public get
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 flatEl, portalEl, portalGraph, and immersiveGraph 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

bindAttributeEl(fieldName: *, targetElement: *, attributeName: *, formatter: undefined, dataModel: *)

public

bindTextEl(fieldName: string, targetElement: Element, formatter: function, dataModel: DataModel)

Set the targetElement.innerText to the value of dataObject.get(fieldName) as it changes dataObject defaults to this.dataObject but can be any DataModel or DataCollection formatter defaults to the identity function but can be any function that accepts the value and returns a string

public

blur()

Call to remove this from text input focus

public
public

Call to set this to the text input focus

public

handleAction(actionName: *, value: *, actionParameters: *)

Called when an action is targeted at a Component

public
public

hide()

hides the flatEl, portalEl, portalGraph, and immersiveGraph if their uses* option was true

public

listenToEl(eventName: string, targetEl: Element, callback: function, context: function)

Listen to a DOM event.

public

removeClass(classNames: string[])

remove class attributes to both flat and portal DOM elements

public

removeComponent(childComponent: Component): *

removeComponent removes the childComponent's flatEl, portalEl, portalGraph, and immersiveGraph 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 flatEl and portalEl

public

show()

shows the flatEl, portalEl, portalGraph, and immersiveGraph 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 Constructors

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

Params:

NameTypeAttributeDescription
dataObject DataObject
  • optional
options Object
  • optional
options.flatEl Element
  • optional
options.portalEl Element
  • optional
options.portalGraph THREE.Object3D
  • optional
options.immersiveGraph THREE.Object3D
  • optional
options.usesFlat boolean
  • optional
  • default: true

if set to false the flatEl will be hidden

options.usesPortalOverlay boolean
  • optional
  • default: true

if set to false the portalEl will be hidden

options.usesPortalSpatial boolean
  • optional
  • default: true

if set to false the portalGraph will be hidden

options.usesImmersive boolean
  • optional
  • default: true

if set to false the immersiveGraph 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 boundCallbacks: *[] source

public cleanedUp: boolean source

public dataObject: * source

public domEventCallbacks: *[] source

public get flatEl: Element source

public get hasFocus: boolean source

public get immersiveGraph: THREE.Object3D source

public options: * source

public get portalEl: Element source

public get portalGraph: THREE.Object3D source

public get usesFlat: * source

public get usesImmersive: * source

public get usesPortal: * source

public get usesPortalOverlay: * source

public get usesPortalSpatial: * source

public get usesSpatial: * 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[]

public appendComponent(childComponent: Component): * source

appendComponent adds the childComponent's flatEl, portalEl, portalGraph, and immersiveGraph to this Component's equivalent attributes.

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 bindAttributeEl(fieldName: *, targetElement: *, attributeName: *, formatter: undefined, dataModel: *) source

Params:

NameTypeAttributeDescription
fieldName *
targetElement *
attributeName *
formatter undefined
  • optional
  • default: undefined
dataModel *
  • optional

public bindTextEl(fieldName: string, targetElement: Element, formatter: function, dataModel: DataModel) source

Set the targetElement.innerText to the value of dataObject.get(fieldName) as it changes dataObject defaults to this.dataObject but can be any DataModel or DataCollection formatter defaults to the identity function but can be any function that accepts the value and returns a string

Params:

NameTypeAttributeDescription
fieldName string
targetElement Element
formatter function
dataModel DataModel

public blur() source

Call to remove this from text input focus

public cleanup() source

public focus(): boolean source

Call to set this to the text input focus

Return:

boolean

public handleAction(actionName: *, value: *, actionParameters: *) source

Called when an action is targeted at a Component

Params:

NameTypeAttributeDescription
actionName *
value *
actionParameters *

public handleDisplayModeChange(mode: *) source

Params:

NameTypeAttributeDescription
mode *

public hide() source

hides the flatEl, portalEl, portalGraph, and immersiveGraph if their uses* option was true

public listenToEl(eventName: string, targetEl: Element, callback: function, context: function) source

Listen to a DOM event. For example: this.buttonEl = el.button() this.listenToEl('click', this.buttonEl, this.handleClick)

Params:

NameTypeAttributeDescription
eventName string
targetEl Element
callback function
context function

public removeClass(classNames: string[]) source

remove class attributes to both flat and portal DOM elements

Params:

NameTypeAttributeDescription
classNames string[]

public removeComponent(childComponent: Component): * source

removeComponent removes the childComponent's flatEl, portalEl, portalGraph, and immersiveGraph 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 flatEl and portalEl

Params:

NameTypeAttributeDescription
name *

public show() source

shows the flatEl, portalEl, portalGraph, and immersiveGraph if their uses* option was true