Description

An adapter allows ABeamer to decouple from DOM by serving as an agent between the ABeamer library and elements and scenes.

For DOM adapters, ABeamer uses jQuery to query DOM and maps special properties such text and html to textContent and innerHTML.

DOM adapters map DOM Properties 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-abeamer-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.

 

API

 

SimpleVirtualAnimator

public export interface

export 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.

SimpleVirtualAnimator.props

public property [SimpleVirtualAnimator]

props: AnyParams;

SimpleVirtualAnimator.selector

public property [SimpleVirtualAnimator]

selector: string;

SimpleVirtualAnimator.propsChanged

public property [SimpleVirtualAnimator]

propsChanged: boolean;

SimpleVirtualAnimator.onAnimateProp

public property [SimpleVirtualAnimator]

onAnimateProp: (name: PropName, value: PropValue) => void;

SimpleVirtualAnimator.onAnimateProps

public property [SimpleVirtualAnimator]

onAnimateProps: (args?: ABeamerArgs) => void;

SimpleVirtualAnimator.animateProp()

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.

SimpleVirtualAnimator.animateProps()

public method [SimpleVirtualAnimator]

animateProps(args?: ABeamerArgs): 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.

SimpleVirtualAnimator.getProp()

public method [SimpleVirtualAnimator]

getProp(name: PropName): PropValue;

SimpleVirtualAnimator.setProp()

public method [SimpleVirtualAnimator]

setProp(name: PropName, value: PropValue): void;

SimpleVirtualAnimator.frameRendered()

public method [SimpleVirtualAnimator]

frameRendered(args?: ABeamerArgs);
 

AbstractAdapter

public export interface

export interface AbstractAdapter{ }

Base class for all adapters: Element, Scene, Story, and both DOM and virtual.

AbstractAdapter.isVirtual

public property [AbstractAdapter]

isVirtual: boolean;

AbstractAdapter.getProp()

public method [AbstractAdapter]

getProp(name: PropName, args?: ABeamerArgs): PropValue;

AbstractAdapter.setProp()

public method [AbstractAdapter]

setProp(name: PropName, value: PropValue, args?: ABeamerArgs): void;
 

ElementAdapter

public export interface

export interface ElementAdapter extends AbstractAdapter{ }

Base class for Element adapters both DOM and virtual.

ElementAdapter.getId()

public method [ElementAdapter]

getId(args?: ABeamerArgs): string;
 

DOMElementAdapter

public export interface

export interface DOMElementAdapter extends ElementAdapter{ }

DOM Element adapter.
Gets and sets attributes from HTMLElements.
Maps the ABeamer animation property names into DOM attributes.

DOMElementAdapter.htmlElement

public property [DOMElementAdapter]

htmlElement: HTMLElement;

DOMElementAdapter.compStyle

public property [DOMElementAdapter]

compStyle: CSSStyleDeclaration;

DOMElementAdapter.getComputedStyle()

public method [DOMElementAdapter]

getComputedStyle(): any;

Requests the DOM engine the calculated information for CSS property.

DOMElementAdapter.getProp()

public method [DOMElementAdapter]

getProp(propName: PropName, args?: ABeamerArgs): PropValue;

DOMElementAdapter.setProp()

public method [DOMElementAdapter]

setProp(propName: PropName, value: PropValue, args?: ABeamerArgs): void;
 

SceneAdapter

public export interface

export interface SceneAdapter extends AbstractAdapter{ }

Virtual Scene adapter.
Allows ABeamer to decouple from the details of any virtual scene.

SceneAdapter.query()

public method [SceneAdapter]

query(selector: string,
      iterator: (element: PElement, index: uint) => void);
 

DOMSceneAdapter

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.

DOMSceneAdapter.htmlElement

public property [DOMSceneAdapter]

htmlElement: HTMLElement;

DOMSceneAdapter.compStyle

public property [DOMSceneAdapter]

compStyle: CSSStyleDeclaration;

DOMSceneAdapter.getComputedStyle()

public method [DOMSceneAdapter]

getComputedStyle(): any;

Requests the DOM engine the calculated information for CSS property.

DOMSceneAdapter.getProp()

public method [DOMSceneAdapter]

getProp(propName: PropName, args?: ABeamerArgs): PropValue;

DOMSceneAdapter.setProp()

public method [DOMSceneAdapter]

setProp(propName: PropName, value: PropValue, args?: ABeamerArgs): void;

DOMSceneAdapter.query()

public method [DOMSceneAdapter]

query(selector: string,
      iterator: (element: PElement, index: uint) => void): void;

SpecialAdapterPropName

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-abeamer-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 names.

DualPropName

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.

ElPropName

public export type

export type ElPropName = string
    | 'id'
    | 'visible'
    | 'uid'
    | 'data-abeamer-display';

List of Property Names that a DOM or Virtual Element should support.

ScenePropName

public export type

export type ScenePropName = string
    | 'html'
    | 'left'
    | 'top'
    | 'width'
    | 'height'
    /** If this value is set, it will for `Visible=true` */
    | 'data-abeamer-display';

List of Property Names that a DOM or Virtual Scene should support.

StoryPropName

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.

PropName

public export type

export type PropName = string
    | ElPropName
    | ScenePropName
    | StoryPropName
    | SpecialAdapterPropName
    | DualPropName;

Union of Property Names that a DOM or Virtual Adapter should support.

PropValue

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.

 

WaitFor

public export interface

export interface WaitFor{ }

WaitFor.prop

public property [WaitFor]

prop: PropName;

WaitFor.value

public property [WaitFor]

value?: string | number;

WaitFor.what

public property [WaitFor]

what?: WaitForWhat;

WaitForList

public export type

export type WaitForList = WaitFor[];
 

VirtualElement

public export interface

export interface VirtualElement{ }

Base interface for virtual elements such as WebGL, Canvas or Task animator.

VirtualElement.getProp()

public method [VirtualElement]

getProp(name: PropName, args?: ABeamerArgs): PropValue;

VirtualElement.setProp()

public method [VirtualElement]

setProp(name: PropName, value: PropValue, args?: ABeamerArgs): void;

VirtualElement.waitFor

public property [VirtualElement]

waitFor?(waitFor: WaitFor, onDone: DoneFunc, args?: ABeamerArgs): void;

VirtualElement.frameRendered

public property [VirtualElement]

frameRendered?(args?: ABeamerArgs): 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.

PElement

public export type

export type PElement = HTMLElement | VirtualElement;
 

VirtualAnimator

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.

VirtualAnimator.selector

public property [VirtualAnimator]

selector: string;
 

SimpleVirtualAnimator

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.

SimpleVirtualAnimator.props

public property [SimpleVirtualAnimator]

props: AnyParams = {};

SimpleVirtualAnimator.selector

public property [SimpleVirtualAnimator]

selector: string;

SimpleVirtualAnimator.propsChanged

public property [SimpleVirtualAnimator]

propsChanged: boolean = false;

SimpleVirtualAnimator.onAnimateProp

public property [SimpleVirtualAnimator]

onAnimateProp: (name: PropName, value: PropValue) => void;

SimpleVirtualAnimator.onAnimateProps

public property [SimpleVirtualAnimator]

onAnimateProps: (args?: ABeamerArgs) => void;

SimpleVirtualAnimator.animateProp()

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.

SimpleVirtualAnimator.animateProps()

public method [SimpleVirtualAnimator]

animateProps(args?: ABeamerArgs): 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.

SimpleVirtualAnimator.getProp()

public method [SimpleVirtualAnimator]

getProp(name: PropName): PropValue;

SimpleVirtualAnimator.setProp()

public method [SimpleVirtualAnimator]

setProp(name: PropName, value: PropValue): void;

SimpleVirtualAnimator.frameRendered()

public method [SimpleVirtualAnimator]

frameRendered(args?: ABeamerArgs);
 

VirtualScene

public export interface

export interface VirtualScene{ }

Base interface for virtual scenes such as WebGL, Canvas.

VirtualScene.getProp()

public method [VirtualScene]

getProp(name: PropName, args?: ABeamerArgs): string;

Must support id and visible attributes.

VirtualScene.setProp()

public method [VirtualScene]

setProp(name: PropName, value: string, args?: ABeamerArgs): void;

Must support visible and uid attributes.

VirtualScene.query()

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

SceneSelector

public export type

export type SceneSelector = string | JQuery | VirtualScene;

Scene Selector defined by the user.

ElSelector

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 %.

ElSelectorFunc

public export type

export type ElSelectorFunc = (args?: ABeamerArgs) => ElSelector;

User defined function that return an Element Selector.
Doesn't supports remote rendering.

ElSelectorHandler

public export type

export type ElSelectorHandler = ElSelector | ElSelectorFunc;

Element Selector defined by the user.

 

Browser

public export interface

export interface Browser{ }

Browser.isMsIE

public property [Browser]

isMsIE: boolean;

Browser.vendorPrefix

public property [Browser]

vendorPrefix: string;

Browser.prefixedProps

public property [Browser]

prefixedProps: string[];