htmlPane Class Reference

Subscribe to a VFS path and render received html into a pane. More...

#include "remoto!stdlib:js/panes/panes/html.js"

Inheritance diagram for htmlPane:

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...
Public Member Functions inherited from pane
	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...

Detailed Description

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 content
• dissolve - default if none provided
• dipToBlack - dip to transparent
• roll - rolls new content in
• flip - flips new content in like a card
• alert - swaps content instantly and sets background to fading red

If a template is not provided, a series of divs will be created in the order specified in fields. Templates should be in the form:

<div class='something'>
     <span field='attributes.field1.value'>something that will be replaced when we receive 'field1' data</span>
     <div class='blah' field='data'/>
</div>

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 css field or by including stylesheet through any other means.

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.

Member Enumeration Documentation

transitionTypes

enum htmlPane::transitionTypes

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 pane
  • start - 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.

Enumerator
replace	Replaces the content with no transition.
dissolve	A basic crossfade transition.
dipToBlack	Initial content will fade to transparent, and then incoming content will fade to opaque. The fades to/from transparency will be half of the total duration
roll	A roll over transition.
flip	A flip transition.
alert	An alert transition, swaps content instantly and sets background to fading red.

Definition at line 6 of file htmlPane.h.

Constructor & Destructor Documentation

htmlPane()

htmlPane

(

layout

)

Parameters

layout

The layout for this pane

The content attribute of the layout will be appended to the DOM as html.

Member Function Documentation

applyDiff()

applyDiff	(		diff,
			user
	)

Apply a diff to the fields of this content.

Parameters

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()

applySettings

(

settings

)

Parameters

settings

DOCME

attach()

attach

(

)

This node has been attached to the DOM.

createHTML()

createHTML

(

)

Create the html representation of this pane, and store that DOM element as this._html.

Returns

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

(

)

Destroy the content html and call the base destructor.

fieldsString()

getter fieldsString

a getter, used for _saveFields

---

The documentation for this class was generated from the following files:

• htmlPane.h
• html.js