Remoto - VFS
|
Subscribe to a VFS path and render received html into a pane. More...
#include "remoto!stdlib:js/panes/panes/html.js"
Public Member Functions | |
htmlPane (layout) | |
applyDiff (diff, user) | |
Apply a diff to the fields of this content. More... | |
applySettings (settings) | |
attach () | |
This node has been attached to the DOM. More... | |
createHTML () | |
Create the html representation of this pane, and store that DOM element as this._html . More... | |
destroy () | |
Destroy the content html and call the base destructor. More... | |
Getters & Setters | |
getter | fieldsString |
a getter, used for _saveFields More... | |
![]() | |
pane (layout, object) | |
activate () | |
DOCME. More... | |
applyDiff (data, user) | |
applyReleaseLock (data) | |
applyRequestError (command, id, reason) | |
applyRequestLock (data) | |
applyRequestSuccess (command, id, data, metadata) | |
applySettings (settings) | |
applySubscription (data, metadata) | |
area () | |
attach () | |
Provides an opportunity for a pane to pass an attach command to its object. More... | |
attached () | |
Detects is this pane is attached to the DOM. More... | |
createHTML () | |
deactivate () | |
If a deactivate method is present on this pane's _object, call it. More... | |
destroy () | |
DOCME. More... | |
detach () | |
Detach this._html and call this._object.detach() . More... | |
find (p, type) | |
hasHelp () | |
mounted (mountState) | |
Notify this pane that the mounted state has changed. More... | |
rename (name) | |
resize () | |
DOCME. More... | |
saveLayout () | |
Build the layout for this pane. More... | |
triggerCurrentPane () | |
DOCME. More... | |
getter | help |
A getter that will return a pane object's help message, or a default message indicating that no help is available. More... | |
getter | paneType |
A getter which will calculate the pane type based on the _object, or return the default "pane". More... | |
Private Types | |
enum | transitionTypes { replace , dissolve , dipToBlack , roll , flip , alert } |
The transition types available for template fields. More... | |
Subscribe to a VFS path and render received html into a pane.
This is useful for dynamic content coming from the VFS in JSON fields.
Each field will be given its own div with ‘field='field’` for use with css styling.
As new (subscription) data is received from the VFS, div contents will be replaced by new values, optionally using a transition.
The supplied layout object should contain:
path
- The path to the VFS resource.template
- A template with field tokens supplied. These entries can contain a dot syntax for members of objects. If template is present, fields
is unused.fields
- An optional comma separated list of json fields for data. These entries can contain a dot syntax for members of objects. If template is missing, a template will be created using these fields.transition
- An optional transition to use. Defaults to dissolve
.duration
- The duration for transitions, in milliseconds. Defaults to 1000 ms = 1 second.css
- An optional css file that can be included either over http (css!
) or using remoto!
syntax to pull from a plugin.~~Basic transitions are included:
replace
- hard cut to new contentdissolve
- default if none provideddipToBlack
- dip to transparentroll
- rolls new content inflip
- flips new content in like a cardalert
- swaps content instantly and sets background to fading redIf a template is not provided, a series of divs will be created in the order specified in fields. Templates should be in the form:
Additional transitions can be dynamically added by writing new entries to the htmlPane.transitions
object.
Note that transitions require you to use css to set field sizes and hide overflow, otherwise your layout will jump and pop as content of different sizes is transitioned.
Styles can be included using the optional or by including stylesheet through any other means.css
field
Data received from the VFS can contain html markup.
Field names can contain dots to access sub fields: attributes.field.value
Definition at line 4 of file htmlPane.h.
|
private |
The transition types available for template fields.
A transition type definition will consist of three parts:
easing
- The css easing function: https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function or https://cubic-bezier.com/new
- The states for a new panestart
- The css state of the pane before it is shown, when the transition begins.end
- The css state at the end of the transition, after it is complete.complete
- The css state after transition completes, for both old and new. This should reset all attributes animated during the transition to empty: "".old
- The state to transition the current pane to during the transition. This cannot be empty, as we trigger completion of transition based on this. Definition at line 6 of file htmlPane.h.
htmlPane | ( | layout | ) |
layout | The layout for this pane |
The content
attribute of the layout will be appended to the DOM as html.
applyDiff | ( | diff, | |
user | |||
) |
Apply a diff to the fields of this content.
diff | The incoming diff |
user | The user who issued the diff |
Because fields may have names that collide with our layout variables, we don't change attributes of this pane using a diff. For instance, the template
cannot be changed after the object is created by sending a diff with a template
field.
Perhaps in the future I'll add a syntax to fix this. :)
applySettings | ( | settings | ) |
settings |
DOCME
attach | ( | ) |
This node has been attached to the DOM.
createHTML | ( | ) |
Create the html representation of this pane, and store that DOM element as this._html
.
this._html
, which is a jQuery object. It will be created if needed.One should always call the base class pane.prototype.createHTML.call(this,boolHeader)
as well as use if (this._html) return this._html;
as a first line.
destroy | ( | ) |
Destroy the content html and call the base destructor.
getter fieldsString |
a getter, used for _saveFields