JavaScript

A5PanelLayout Class

Arguments

panelsarray

The panels to use in the layout. See A5.PanelLayout Panel Object.

settingsobject

Settings for the panel layout. This will override the initial values of the properties of the A5.PanelLayout class.

Description

Panel layout.

Discussion

The panel layout can be used to layout multiple panels either horizontally or vertically.

Panels in the layout can be docked, so that they are viewed by request only. Docking can be done either at the start (before) or end (after) the flow of the layout. Panels can be set to auto collapse when there is not enough space to show all panels.

The layout will dynamically hide panels if there is not enough room to show them, even if the panels are not set to auto dock. When this happens, navigating the hidden panels can be accomplished by using the A5.PanelLayout.firstPanel/A5.PanelLayout.prevPanel/A5.PanelLayout.nextPanel/A5.PanelLayout.lastPanel methods, or setting a particular panel active using A5.PanelLayout.setActivePanel.

Layouts also support flow collapsing - useful to allow the user to temporarily increase the size of a portion of the layout. When the A5.PanelLayout.collapseFlow method is used, all the panels before the indicated panel will be collapsed, so that the indicated panel is the first visible panel. If multiple panels are collapse, the expanding of them may be done in the reverse order of which they were collapsed, or all collapsing can be removed at once.

Name
Description
A5.PanelLayout.Panel Object

Definition of a panel in the panel layout.

Properties

themestring

The theme to use on the panel layout.

overridestring

The overrides to use on the panel layout.

renderModestring

If the panel layout is in a navigator or layout, renderMode controls when the panel layout is created. A blank value (the default) will create the panel automatically when the parent is created. A value of "auto-create" will create the panel when it becomes. A value of "auto-create-destroy" will do the same, but also destroy it when it is hidden.

flowstring

The flow of the panels in the layout. Values can be "ltr" (left to right), "rtl" (right to left), "ttb" (top to bottom) or "btt" (bottom to top). The default is "ltr".

placeholderHTMLstring

If the panel layout is created dynamically the placeholder HTML to use until it has been created. This can be used to display a waiting message while the panel is being rendered.

classNamestring

The class name to put on the panel layout.

headerobject

The panel header settings.

showboolean

Whether or not to show the panel header. The default value is false if the HTML is blank, and true if it is not.

htmlstring

The HTML to put in the panel header. The placeholders "{panel.id}" (the ID of the panel), "{panel.name}" (the name of the panel if it is in a panel navigator or layout) and "{panel.title}" (the title of the panel if it is in a panel navigator or layout) will be automatically replaced.

classNamestring

The class name to put on the panel header.

stylestring

The inline CSS to put on the panel header.

bodyobject

The panel body settings.

classNamestring

The class name to put on the panel body.

ltrClassNamestring

The class name to put on the panel body when the flow is "ltr".

rtlClassNamestring

The class name to put on the panel body when the flow is "rtl".

ttbClassNamestring

The class name to put on the panel body when the flow is "ttb".

bttClassNamestring

The class name to put on the panel body when the flow is "btt".

stylestring

The inline CSS to put on the panel body.

footerobject

The panel footer settings.

showboolean

Whether or not to show the panel footer. The default value is false if the HTML is blank, and true if it is not.

htmlstring

The HTML to put in the panel footer. The placeholders "{panel.id}" (the ID of the panel), "{panel.name}" (the name of the panel if it is in a panel navigator or layout) and "{panel.title}" (the title of the panel if it is in a panel navigator or layout) will be automatically replaced.

classNamestring

The class name to put on the panel footer.

stylestring

The inline CSS to put on the panel footer.

overlayobject

The panel overlay settings. The panel overlay is for HTML elements to be absolutely positioned over the panel (such as floating buttons).

showboolean

Whether or not to show the panel overlay.The default value is false if the HTML is blank, and true if it is not.

htmlstring

The HTML to put in the panel overlay. The placeholders "{panel.id}" (the ID of the panel), "{panel.name}" (the name of the panel if it is in a panel navigator or layout) and "{panel.title}" (the title of the panel if it is in a panel navigator or layout) will be automatically replaced.

dockobject

The docked panel settings.

methodstring

The mother by which to show docks. Values can be "overlay" (float docked panels over the main layout), "underlay" (show docked panels as if they where hidden under the main layout) and "push" (show docks by pushing the main layout aside). The default is "overlay".

panelobject

Docked panel settings.

beforeClassNamestring

The class name to put on a docked panel if it is docked to the start of the flow.

afterClassNamestring

The class name to put on a docked panel if it is docked to the end of the flow.

flowLockobject

Flow lock settings for when a dock panel is shown.

hasboolean

Whether or not to lock the flow so the user cannot interact with non-docked panels when a docked panel is shown. The default value is true.

classNamestring

The class name to put on the element used to lock the flow.

controlsobject

Layout control bindings.

prevobject

A previous panel button.

hasboolean

Whether or not the panel layout has a previous panel button. The default value is false.

idstring

The ID of the button element (which must already be in the DOM). The default is "{panel.id}.CTRL.PREV".

settingsobject

The button settings.

nextobject

A next panel button.

hasboolean

Whether or not the panel layout has a next panel button. The default value is false.

idstring

The ID of the button element (which must already be in the DOM). The default is "{panel.id}.CTRL.NEXT".

settingsobject

The button settings.

dockarray

An array of buttons to bind to the showing of individual docked panels. The array should contain objects, each of which have an "id" property with the id of the button, a "panel" property with the name of the panel in the layout, and a "settings" property with the button settings. The "panel" property can be set to one of three system options instead of a panel name. These are "*before" (all the panels docked at the start), "*after" (all the panels docked at the end) and "*generic" (all docked panels). These values will dropdown a menu from the button with the a list of all the docked panels at the start and/or end of the layout.

animationobject

Re-layout animation.

typestring

The type of animation to use. Values can be "slide" (the default) or "none".

durationnumber

How long the animation should take in millisecond. The default is 400.

stateobject

The current state of the panel layout.

activePanelstring

The name of the active panel.

firstPanelstring

The name of the first panel visible in the layout.

lastPanelstring

The name of the last panel visible in the layout.

flowCollapsedboolean

Whether or not the layout flow has been collapsed.

hasPrevPanelboolean

Whether or not there is a previous panel.

prevPanelstring

The name of the previous panel.

hasNextPanelboolean

Whether or not there is a next panel.

nextPanelstring

The name of the next panel.

hasDockPanelboolean

Whether or not there are any docked panels in the layout.

beforeDockPanelsarray

The names of all the panels docked to the start of the flow.

afterDockPanelsarray

The names of all the panels docked to the end of the flow.

dockPanelShownboolean

Whether or not a docked panel is shown.

currentDockPanelstring

The name of the currently shown docked panel.

onInitializefunction()

Event fired when the panel is initialized. This does not necessarily mean the panel elements have been created, but rather that the class was.

onSizefunction(data)

Event fired when the panel is sized.

dataobject

The sizing data.

widthnumber

The width of the panel in pixels.

heightnumber

The height of the panel in pixels.

changedboolean

Whether the size actually changed.

oldobject

The old size of the panel.

widthnumber

The old width of the panel in pixels.

heightnumber

The old height of the panel in pixels.

onCreatefunction(element,bodyElement,headerElement,footerElement)

Event fired when the panel is created.

elementelement

The panel element.

bodyElementelement

The panel body element.

headerElementelement

The panel header element.

footerElementelement

The panel footer element.

onActivatefunction()

Event fired when the panel is activated by a parent panel navigator or layout.

onViewfunction()

Event fired when the panel is viewed by a parent panel navigator or layout. It should be noted that unlike the onActivate event, this event will fire regardless of the panel already being active.

onBeforeDestroyfunction()

Event fired before the panel is destroyed.

onDestroyfunction()

Event fired when the panel is destroyed.

onLayoutRefreshfunction()

Event fired when the panel layout is refreshed.

onDockPanelShowfunction(panel)

Event fired when a docked panel is shown.

panelstring

The name of the dock panel shown.

onDockPanelHidefunction(panel)

Event fired when a docked panel is hidden.

panelstring

The name of the dock panel hidden.

onBeforePanelActivatefunction(panel,index)

Event fired before a panel in the layout is activated. Can return false to stop activation.

panelstring

The name of the panel being activated.

indexnumber

The index of the panel being activated.

onPanelActivatefunction(panel,index)

Event fired when a panel in the layout is activated.

panelstring

The name of the panel being activated.

indexnumber

The index of the panel being activated.

onPanelViewfunction(panel,index)

Event fired when a panel in the layout is views.

panelstring

The name of the panel being activated.

indexnumber

The index of the panel being activated.

Methods

bindSize Method

Bind the panel sizing.

collapseFlow Method

Collapse all the panels before the passed in panel, so that the passed in panel is the first panel visible in the layout.

create Method

Create the panel.

destroy Method

Destroy the panel.

expandFlow Method

Activate a child panel of the layout.

firstPanel Method

Navigate to the first panel in the panel layout.

getPanel Method

Get a child panel of the layout.

getPanelId Method

Get the ID of the panel, or one of its sub-parts.

getState Method

Get the current display state of the layout and all its children. Can be used in conjunction with A5.PanelLayout.setState to restore panels to a previously cached state.

hideDock Method

Hide any shown docks.

lastPanel Method

Navigate to the last panel in the panel layout.

nextPanel Method

Navigate to the next panel in the panel layout.

prevPanel Method

Navigate to the previous panel in the panel layout.

refresh Method

Refresh the panel.

resize Method

Resize the panel.

setActivePanel Method

Activate a child panel of the layout.

setDisplay Method

Show or hide the panel header, footer, or overlay.

setSize Method

Set the panel to a specific size.

setState Method

Set the current display state of the layout and all its children. Can be used in conjunction with A5.PanelLayout.getState to restore panels to a previously cached state.