An adapter allows BeamToIX to decouple from DOM by serving as an agent between the BeamToIX library and elements and scenes.
For DOM adapters, BeamToIX uses jQuery to query DOM and
maps special properties such text and html to
textContent and innerHTML.
DOM adapters map [DOM Properties](DOM Property) into either HtmlElement attributes or CSS properties, depending on the Animation Property name.
For HtmlElement attributes, the DOM Adapter uses element.getAttribute.
For CSS Properties, it uses element.style, but if it's empty,
it retrieves all the computed CSS properties via window.getComputedStyle
and caches its content.
DOM Adapters use the attribute data-beamtoix-display to define which
value will be used in display when visible is set to true.
If it's not defined, it will be set to inline for span tags,
and block for all the other tags.
'DOM Scenes' are typically a DIV. 'DOM Elements' can be any HtmlElement.
'DOM Scenes' can provide Virtual Elements via ids starting with %,
and story.onGetVirtualElement.
For Virtual adapters there is a direct connection to the Virtual Element and Scene property.
Unlike DOM elements which only provide textual values, Virtual Elements can get and set numerical values.
public export interface
DevToIXexport interface SimpleVirtualAnimator{ }
It simplifies the usage of VirtualAnimator by plugins.
In many cases plugins just need to receive the changing property,
in order to modify its state.
Override animateProp to receive the changing property.
animateProp isn't called if the property is uid.
public property [SimpleVirtualAnimator]
props: AnyParams;
public property [SimpleVirtualAnimator]
selector: string;
public property [SimpleVirtualAnimator]
propsChanged: boolean;
public property [SimpleVirtualAnimator]
onAnimateProp: (name: PropName, value: PropValue) => void;
public property [SimpleVirtualAnimator]
onAnimateProps: (args?: BeamToIXArgs) => void;
public method [SimpleVirtualAnimator]
animateProp(name: PropName, value: PropValue): void;
Called after property value changed.
Use this method instead animateProps, if the rendering should be right after
each property is updated, otherwise use animateProps.
public method [SimpleVirtualAnimator]
animateProps(args?: BeamToIXArgs): void;
Called after actions from the frame are rendered, and if at least one property changed.
Use this method instead animateProp, if the animation has multiple virtual properties and
each animation can be done after all are updated.
public method [SimpleVirtualAnimator]
getProp(name: PropName): PropValue;
public method [SimpleVirtualAnimator]
setProp(name: PropName, value: PropValue): void;
public method [SimpleVirtualAnimator]
frameRendered(args?: BeamToIXArgs);
public export interface
export interface AbstractAdapter{ }
Base class for all adapters: Element, Scene, Story, and both DOM and virtual.
public property [AbstractAdapter]
isVirtual: boolean;
public method [AbstractAdapter]
getProp(name: PropName, args?: BeamToIXArgs): PropValue;
public method [AbstractAdapter]
setProp(name: PropName, value: PropValue, args?: BeamToIXArgs): void;
public export interface
export interface ElementAdapter extends AbstractAdapter{ }
Base class for Element adapters both DOM and virtual.
public method [ElementAdapter]
getId(args?: BeamToIXArgs): string;
public export interface
export interface DOMElementAdapter extends ElementAdapter{ }
DOM Element adapter.
Gets and sets attributes from HTMLElements.
Maps the BeamToIX animation property names into DOM attributes.
public property [DOMElementAdapter]
htmlElement: HTMLElement;
public property [DOMElementAdapter]
compStyle: CSSStyleDeclaration;
public method [DOMElementAdapter]
getComputedStyle(): any;
Requests the DOM engine the calculated information for CSS property.
public method [DOMElementAdapter]
getProp(propName: PropName, args?: BeamToIXArgs): PropValue;
public method [DOMElementAdapter]
setProp(propName: PropName, value: PropValue, args?: BeamToIXArgs): void;
public export interface
export interface SceneAdapter extends AbstractAdapter{ }
Virtual Scene adapter.
Allows BeamToIX to decouple from the details of any virtual scene.
public method [SceneAdapter]
query(selector: string,
iterator: (element: PElement, index: uint) => void);
public export interface
export interface DOMSceneAdapter extends SceneAdapter{ }
DOM Scene and Story adapter.
Both of them are similar. No need for 2 separated classes.
Gets and sets properties from HTMLElements.
Maps the animation property names into DOM attributes.
public property [DOMSceneAdapter]
htmlElement: HTMLElement;
public property [DOMSceneAdapter]
compStyle: CSSStyleDeclaration;
public method [DOMSceneAdapter]
getComputedStyle(): any;
Requests the DOM engine the calculated information for CSS property.
public method [DOMSceneAdapter]
getProp(propName: PropName, args?: BeamToIXArgs): PropValue;
public method [DOMSceneAdapter]
setProp(propName: PropName, value: PropValue, args?: BeamToIXArgs): void;
public method [DOMSceneAdapter]
query(selector: string,
iterator: (element: PElement, index: uint) => void): void;
public export type
export type SpecialAdapterPropName =
// modifies the textContent property.
'text'
// same as text. It's preferable to use 'text'.
| 'textContent'
// modifies the innerHTML attribute.
| 'html'
// same as html. It's preferable to use 'html'.
| 'innerHTML'
// modifies outerHTML attribute.
| 'outerHTML'
// changes the style.display CSS property for DOM Elements/Scenes.
// Uses DOM attribute `data-beamtoix-display`.
| 'visible'
// modifies the attribute `src`.
| 'src'
// modifies the `classList` if it has `+` or `-` if has it starts a class.
// otherwise it sets `className`.
| 'class';
Defines the special names for [Adapter properties](#Adapter property) names.
public export type
export type DualPropName = 'width-height'
| 'left-top'
| 'right-top'
| 'left-bottom'
| 'right-bottom';
Dual properties are properties that map one animation property into 2 [DOM properties](DOM properties).
public export type
export type ElPropName = string
| 'id'
| 'visible'
| 'uid'
| 'data-beamtoix-display';
List of Property Names that a DOM or Virtual Element should support.
public export type
export type ScenePropName = string
| 'html'
| 'left'
| 'top'
| 'width'
| 'height'
/** If this value is set, it will for `Visible=true` */
| 'data-beamtoix-display';
List of Property Names that a DOM or Virtual Scene should support.
public export type
export type StoryPropName = string
| 'frame-width'
| 'frame-height'
/** clip-path is a set only. see CSS clip-story properties */
| 'clip-path'
| 'fps';
List of Property Names that a DOM or Virtual Story should support.
public export type
export type PropName = string
| ElPropName
| ScenePropName
| StoryPropName
| SpecialAdapterPropName
| DualPropName;
Union of Property Names that a DOM or Virtual Adapter should support.
public export type
export type PropValue = string | number | int | boolean;
Although, DOM only returns string values, a virtual Element can use
more rich data types.
e.g. DOM adapter maps a boolean visible into CSS display.
A virtual element can use directly booleans.
public export interface
export interface WaitFor{ }
public property [WaitFor]
prop: PropName;
public property [WaitFor]
value?: string | number;
public property [WaitFor]
what?: WaitForWhat;
public export type
export type WaitForList = WaitFor[];
public export interface
export interface VirtualElement{ }
Base interface for virtual elements such as WebGL, Canvas or Task animator.
public method [VirtualElement]
getProp(name: PropName, args?: BeamToIXArgs): PropValue;
public method [VirtualElement]
setProp(name: PropName, value: PropValue, args?: BeamToIXArgs): void;
public property [VirtualElement]
waitFor?(waitFor: WaitFor, onDone: DoneFunc, args?: BeamToIXArgs): void;
public property [VirtualElement]
frameRendered?(args?: BeamToIXArgs): void;
Called after the frame is rendered, and before moves to the next frame.
This method is called even if no property changed.
It's an optional method, but future version might require its implementation.
public export type
export type PElement = HTMLElement | VirtualElement;
public export interface
export interface VirtualAnimator extends VirtualElement{ }
Used by plugin creators to allow their content to be animated.
A plugin can animate canvas, WebGl, svg or reduce the complexity of a CSS animation.
The story uses uid to manage animators.
public property [VirtualAnimator]
selector: string;
public export class
export class SimpleVirtualAnimator implements VirtualAnimator{ }
It simplifies the usage of VirtualAnimator by plugins.
In many cases plugins just need to receive the changing property,
in order to modify its state.
Override animateProp to receive the changing property.
animateProp isn't called if the property is uid.
public property [SimpleVirtualAnimator]
props: AnyParams = {};
public property [SimpleVirtualAnimator]
selector: string;
public property [SimpleVirtualAnimator]
propsChanged: boolean = false;
public property [SimpleVirtualAnimator]
onAnimateProp: (name: PropName, value: PropValue) => void;
public property [SimpleVirtualAnimator]
onAnimateProps: (args?: BeamToIXArgs) => void;
public method [SimpleVirtualAnimator]
animateProp(name: PropName, value: PropValue): void;
Called after property value changed.
Use this method instead animateProps, if the rendering should be right after
each property is updated, otherwise use animateProps.
public method [SimpleVirtualAnimator]
animateProps(args?: BeamToIXArgs): void;
Called after actions from the frame are rendered, and if at least one property changed.
Use this method instead animateProp, if the animation has multiple virtual properties and
each animation can be done after all are updated.
public method [SimpleVirtualAnimator]
getProp(name: PropName): PropValue;
public method [SimpleVirtualAnimator]
setProp(name: PropName, value: PropValue): void;
public method [SimpleVirtualAnimator]
frameRendered(args?: BeamToIXArgs);
public export interface
export interface VirtualScene{ }
Base interface for virtual scenes such as WebGL, Canvas.
public method [VirtualScene]
getProp(name: PropName, args?: BeamToIXArgs): string;
Must support id and visible attributes.
public method [VirtualScene]
setProp(name: PropName, value: string, args?: BeamToIXArgs): void;
Must support visible and uid attributes.
public method [VirtualScene]
query(selector: string,
iterator: (element: PElement, index: uint) => void);
Must call iterator for each element represented on the selector.
param: selector CSS style selectors
public export type
export type SceneSelector = string | JQuery | VirtualScene;
Scene Selector defined by the user.
public export type
export type ElSelector = JQuery
// (DOM or virtual) selectors
| string
// list of (DOM or virtual) elements ids
| string[]
// list of html elements
| HTMLElement[]
// list of virtual elements
| VirtualElement[]
// An pEls containing elements
| pEls;
Defines css selectors, JQuery, meta-selectors, and Virtual selectors.
Virtual selectors start with %.
public export type
export type ElSelectorFunc = (args?: BeamToIXArgs) => ElSelector;
User defined function that return an Element Selector.
Doesn't supports remote rendering.
public export type
export type ElSelectorHandler = ElSelector | ElSelectorFunc;
Element Selector defined by the user.
public export interface
export interface Browser{ }
public property [Browser]
isMsIE: boolean;
public property [Browser]
vendorPrefix: string;
public property [Browser]
prefixedProps: string[];