-
Notifications
You must be signed in to change notification settings - Fork 82
Javascript API
While layerJS can be controlled completely from HTML (through attributes and links) it is still possible to interact through a JavaScript API. This can be helpful if the UI should change based on an event in the app (instead of a user interaction) or if the app needs to react to changes in the UI.
layerJS.select(selector: string)
get a specific layerJS object (a stage, layer or frame)
| Parameter | Description |
| selector | a css selector for any layerJS object |
layerJS.select('#layerid');
layerJS.getState(document)
get the state object for a document. See below for what you can do with it.
| Parameter | Description |
| document | optional document for which you would like to get the state. defaults to window.document |
layerJS.getState();
State.transitionTo(state: array, transitionOptions: object|array)
can be used to change the state of one or more layers. This will be animated according to the transitionOptions.
| Parameter | Description |
| state | an array of paths. A path is a string representing the active frame in a layer. e.g. "stage1.contentlayer.frame2" will make frame2 the active frame in contentlayer which is in stage1. The begining of the path can be omitted if the path is unique e.g. "contentlayer.frame2" or even "frame2" |
| transitionOptions | array of transitons object or a single object:{
type: transition type, e.g. "left",
duration: time in milliseconds,
startPosition: initial scroll position, e.g. "top"
}
if only one object is given it will be used for all layers that are changed. otherwiese provide one transitionObject for each path your specify.
|
layerJS.getState().transitionTo(['menulayer.!none','backdrop.!none','contentlayer.frame2'],{type:'left', duration: '500'});
State.exportState():array
returns an array of active paths in the current document
| Parameter | Description |
| returns: array | returns an array of paths. This has the same syntax as the parameter to State.transitionsTo(), eg. ["stage1.contentlayer.frame2","stage1.menulayer.menu"]. You can feed this (or a subset) back into transitionTo. |
layerJS.getState().exportState();
Router.navigate(url_fragment: string)
can be used to change the state using the link syntax of the hashrouter.
| Parameter | Description |
| url_fragment | the "hash" part of the url in the format of the hashrouter. e.g. "#contentlayer.frame2;menulayer.!none" |
layerJS.router.navigate('#contentlayer.frame2;menulayer.!none');
Layer.transitionTo(framename: string, transitionOptions: object)
can be used to change the active frame of a layer. This will be animated according to the transitionOptions.
| Parameter | Description |
| framename | the name of the frame to which it should transition |
| transitionOptions | an object:{
type: transition type, e.g. "left",
duration: time in milliseconds,
startPosition: initial scroll position, e.g. "top"
}
|
layerJS.select('#layerid').transitionTo('frame1',{type:'left', duration: '500'});
Layer.scrollTo(x: number, y: number, transitionOptions: object)
scroll to a specific position in the current frame
| Parameter | Description |
| x | horizontal scroll position |
| y | vertical scroll position |
| transitionOptions | an object:{
duration: time in milliseconds,
}
|
layerJS.select('#layerid').scrollTo(0, 200,{duration: '500'});
State.on('stateChanged', callback: function())
will trigger the callback function whenever thes state is changed.
Example:
layerJS.getState().on('stateChanged', function(){ ... });
Layer.on('transitionPrepared', callback: function())
will trigger right before the transition animation actually starts. if more than one transition will be run at the same time those will actually start at the same time.
layerJS.select('menulayer').on('transitionPrepared', function(){ ... });
Layer.on('transitionFinished', callback: function(framename))
will trigger after the transition animations ends. Will provide the new active framename as parameter.
layerJS.select('menulayer').on('transitionFinished', function(framename){ ... });