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 method 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.
autoHideboolean: Whether or not to automatically hide the dock when the flow lock is tapped.
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.
setPanelDisplay Method: Hide or show a panel in the layout.
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.

Report an issue with this page