Module: wcDocker

Source:

Members


<static, constant> var COLLAPSED

Used when adding or moving a panel to designate the target location as collapsed.
Must be used with docking positions LEFT, RIGHT, or BOTTOM only.

Type:
  • String
Source:

<static, constant> var DOCK

Enumerated Docking positions.

Properties:
Name Type Default Description
MODAL String "modal" A floating panel that blocks input until closed
FLOAT String "float" A floating panel
TOP String "top" Docks to the top of a target or window
LEFT String "left" Docks to the left of a target or window
RIGHT String "right" Docks to the right of a target or window
BOTTOM String "bottom" Docks to the bottom of a target or window
STACKED String "stacked" Docks as another tabbed item along with the target
Version:
  • 3.0.0
Source:

<static, constant> var EVENT

Enumerated Internal events

Properties:
Name Type Default Description
INIT String "panelInit" When the panel is initialized
LOADED String "dockerLoaded" When all panels have finished loading
UPDATED String "panelUpdated" When the panel is updated
VISIBILITY_CHANGED String "panelVisibilityChanged" When the panel has changed its visibility
This event is called with the current visibility state as the first parameter
BEGIN_DOCK String "panelBeginDock" When the user begins moving any panel from its current docked position
END_DOCK String "panelEndDock" When the user finishes moving or docking a panel
GAIN_FOCUS String "panelGainFocus" When the user brings any panel within a tabbed frame into focus
LOST_FOCUS String "panelLostFocus" When the user leaves focus on any panel within a tabbed frame
CLOSING String "panelClosing" When the panel is about to be closed, but before it closes. If any event handler returns a falsey value, the close action will be canceled.
CLOSED String "panelClosed" When the panel is being closed
PERSISTENT_CLOSED String "panelPersistentClosed" When a persistent panel is being hidden
PERSISTENT_OPENED String "panelPersistentOpened" When a persistent panel is being shown
BUTTON String "panelButton" When a custom button is clicked, See wcPanel.addButton
ATTACHED String "panelAttached" When the panel has moved from floating to a docked position
DETACHED String "panelDetached" When the panel has moved from a docked position to floating
MOVE_STARTED String "panelMoveStarted" When the user has started moving the panel (top-left coordinates changed)
This event is called with an object of the current {x, y} position as the first parameter
MOVE_ENDED String "panelMoveEnded" When the user has finished moving the panel
This event is called with an object of the current {x, y} position as the first parameter
MOVED String "panelMoved" When the top-left coordinates of the panel has changed
This event is called with an object of the current {x, y} position as the first parameter
RESIZE_STARTED String "panelResizeStarted" When the user has started resizing the panel (width or height changed)
This event is called with an object of the current {width, height} size as the first parameter
RESIZE_ENDED String "panelResizeEnded" When the user has finished resizing the panel
This event is called with an object of the current {width, height} size as the first parameter
RESIZED String "panelResized" When the panels width or height has changed
This event is called with an object of the current {width, height} size as the first parameter
ORDER_CHANGED String "panelOrderChanged" This only happens with floating windows when the order of the windows have changed.
SCROLLED String "panelScrolled" When the contents of the panel has been scrolled
SAVE_LAYOUT String "layoutSave" When the layout is being saved, See wcDocker.save
RESTORE_LAYOUT String "layoutRestore" When the layout is being restored, See wcDocker.restore
CUSTOM_TAB_CHANGED String "customTabChanged" When the current tab on a custom tab widget associated with this panel has changed, See module:wcTabFrame
CUSTOM_TAB_CLOSED String "customTabClosed" When a tab has been closed on a custom tab widget associated with this panel, See module:wcTabFrame
Version:
  • 3.0.0
Source:

<static, constant> var LAYOUT

Enumerated Layout wcDocker.

Properties:
Name Type Default Description
SIMPLE String "wcLayoutSimple" Contains a single div item without management using a module:wcLayoutSimple, it is up to you to populate it however you wish.
TABLE String "wcLayoutTable" Manages a table grid layout using module:wcLayoutTable, this is the default layout used if none is specified.
Version:
  • 3.0.0
Source:

<static, constant> var ORIENTATION

Used for the splitter bar orientation.

Properties:
Name Type Default Description
VERTICAL Boolean false Top and Bottom panes
HORIZONTAL Boolean true Left and Right panes
Version:
  • 3.0.0
Source:

<static, constant> var TAB

Used to determine the position of tabbed widgets for stacked panels.
Note: Not supported on IE8 or below.

Properties:
Name Type Default Description
TOP String "top" The default, puts tabs at the top of the frame
LEFT String "left" Puts tabs on the left side of the frame
RIGHT String "right" Puts tabs on the right side of the frame
BOTTOM String "bottom" Puts tabs on the bottom of the frame
Version:
  • 3.0.0
Source:

Methods


<static> function constructor(container [, options])

Parameters:
Name Type Argument Description
container external:jQuery~selector | external:jQuery~Object | external:domNode A container element to store the contents of wcDocker.
options module:wcDocker~Options <optional>
Options for constructing the instance.
Source:

function addPanel(typeName, location [, targetPanel] [, options]) -> module:wcPanel | Boolean

Add a new docked panel to the docker instance.
Note: It is best to use wcDocker.COLLAPSED after you have added your other docked panels, as it may ensure proper placement.

Parameters:
Name Type Argument Description
typeName String The name identifier of the panel to create.
location module:wcDocker.DOCK The docking location to place this panel.
targetPanel module:wcPanel | module:wcDocker.COLLAPSED <optional>
A target panel to dock relative to, or use wcDocker.COLLAPSED to collapse it to the side or bottom.
options module:wcDocker~PanelOptions <optional>
Other options for panel placement.
Source:
Returns:
- The newly created panel object, or false if no panel was created.
Type
module:wcPanel | Boolean

function basicMenu(selector, itemListOrBuildFunc, includeDefault)

Assigns a basic context menu to a selector element. The contextMenu is a simple list of options, no nesting or special options.

If you wish to use a more complex context menu, you can usejQuery.contextMenu directly.

Parameters:
Name Type Description
selector external:jQuery~selector A selector string that designates the elements who use this menu.
itemListOrBuildFunc Array.<external:jQuery#contextMenu~item> | function An array with each context menu item in it, or a function to call that returns one.
includeDefault Boolean If true, all default menu options will be included.
Deprecated:
  • Renamed to [wcDocker.menu}wcDocker#menu.
Source:

function bypassMenu()

Bypasses the next context menu event.Use this during a mouse up event in which you do not want thecontext menu to appear when it normally would have.

Source:

function clear()

Clears all contents from the docker instance.

Source:

function findPanels( [typeName]) -> Array.<module:wcPanel>

Finds all instances of a given panel type.

Parameters:
Name Type Argument Description
typeName String <optional>
The name identifier for the panel. If not supplied, all panels are retrieved.
Source:
Returns:
- A list of all panels found of the given type.
Type
Array.<module:wcPanel>

function finishLoading( [fadeDuration])

Hides the loading screen.

Parameters:
Name Type Argument Default Description
fadeDuration Number <optional>
0 The fade out duration for the loading screen.
Source:

function isCollapseEnabled() -> Boolean

Retrieves whether panel collapsers are enabled.

Version:
  • 3.0.0
Source:
Returns:
- Collapsers are enabled.
Type
Boolean

Assigns a basic context menu to a selector element. The contextMenu is a simple list of options, no nesting or special options.

If you wish to use a more complex context menu, you can usejQuery.contextMenu directly.

Parameters:
Name Type Description
selector external:jQuery~selector A selector string that designates the elements who use this menu.
itemListOrBuildFunc Array.<external:jQuery#contextMenu~item> | function An array with each context menu item in it, or a function to call that returns one.
includeDefault Boolean If true, all default menu options will be included.
Source:

function movePanel(panel, location [, targetPanel] [, options]) -> module:wcPanel | Boolean

Moves a docking panel from its current location to another.

Parameters:
Name Type Argument Description
panel module:wcPanel The panel to move.
location module:wcDocker.DOCK The new docking location of the panel.
targetPanel module:wcPanel | wcDocker.COLLAPSED <optional>
A target panel to dock relative to, or use wcDocker.COLLAPSED to collapse it to the side or bottom.
options module:wcDocker~PanelOptions <optional>
Other options for panel placement.
Source:
Returns:
- The panel that was created, or false on failure.
Type
module:wcPanel | Boolean

function off(eventType [, handler])

Unregisters a global event.

Parameters:
Name Type Argument Description
eventType module:wcDocker.EVENT The event type, can be a custom event string or a predefined event.
handler module:wcDocker~event:onEvent <optional>
The handler function registered with the event. If omitted, all events registered to the event type are unregistered.
Source:

function on(eventType, handler) -> Boolean

Registers a global event.

Parameters:
Name Type Description
eventType module:wcDocker.EVENT The event type, can be a custom event string or a predefined event.
handler module:wcDocker~event:onEvent A handler function to be called for the event.
Source:
Returns:
Success or failure that the event has been registered.
Type
Boolean

function panelTypeInfo(typeName) -> module:wcDocker~registerOptions

Retrieves the options data associated with a given panel type when it was registered.

Parameters:
Name Type Description
typeName String The name identifier of the panel.
Source:
Returns:
- Registered options of the panel type, or false if the panel was not found.
Type
module:wcDocker~registerOptions

function panelTypes(includePrivate) -> Array.<String>

Retrieves a list of all currently registered panel types.

Parameters:
Name Type Description
includePrivate Boolean If true, panels registered as private will also be included with this list.
Source:
Returns:
- A list of panel type names.
Type
Array.<String>

function registerPanelType(name, options [, isPrivate]) -> Boolean

Registers a new docking panel type to be used later.

Parameters:
Name Type Argument Description
name String The name identifier for the new panel type.
options module:wcDocker~registerOptions An options object for describing the panel type.
isPrivate Boolean <optional>
DEPRECATED: Use options.isPrivate instead.
Version:
  • 3.0.0
Source:
Returns:
- Success or failure. Failure usually indicates the type name already exists.
Type
Boolean

function removePanel(panel, dontDestroy) -> Boolean

Removes a docked panel from the window.

Parameters:
Name Type Description
panel module:wcPanel The panel to remove.
dontDestroy Boolean If true, the panel itself will not be destroyed.
Source:
Returns:
- Success or failure.
Type
Boolean

function restore(dataString)

Restores a previously saved configuration.

Parameters:
Name Type Description
dataString String A previously saved serialized string, See wcDocker.save.
Source:

function save() -> String

Saves the current panel configuration into a serializedstring that can be used later to restore it.

Source:
Returns:
- A serialized string that describes the current panel configuration.
Type
String

function startLoading( [label] [, opacity] [, textOpacity])

Shows the loading screen.

Parameters:
Name Type Argument Default Description
label String <optional>
An optional label to display.
opacity Number <optional>
0.4 If supplied, assigns a custom opacity value to the loading screen.
textOpacity Number <optional>
1 If supplied, assigns a custom opacity value to the loading icon and text displayed.
Source:

function theme(themeName) -> String

Gets, or Sets the current theme used by docker.

Parameters:
Name Type Description
themeName String If supplied, will activate a theme with the given name.
Source:
Returns:
- The currently active theme.
Type
String

function themePath(path) -> String

Gets, or Sets the path where all theme files can be found."Themes" is the default folder path.

Parameters:
Name Type Description
path String If supplied, will set the path where all themes can be found.
Source:
Returns:
- The currently assigned path.
Type
String

function trigger(eventType [, data]) -> Array.<Object>

Trigger an event on all panels.

Parameters:
Name Type Argument Description
eventType module:wcDocker.EVENT The event type, can be a custom event string or a predefined event.
data Object <optional>
A custom data object to be passed along with the event.
Source:
Fires:
  • wcDocker~event:onEvent
Returns:
results - Returns an array with all results returned by event handlers.
Type
Array.<Object>

Type Definitions


typedef var Anchor

Anchor data.

Type:
  • Object
Properties:
Name Type Argument Description
self Boolean Whether the anchor is hovering over the moving panel.
loc module:wcDocker.DOCK The location of the anchor on the panel.
item module:wcLayout The panel layout being hovered over.
tab module:wcDocker.TAB The tab location.
x Number <optional>
X coordinate of the anchor.
y Number <optional>
Y coordinate of the anchor.
w Number <optional>
Width of the anchor.
h Number <optional>
Height of the anchor.
Source:

typedef var AnchorRect

A rectangle structure.

Type:
  • Object
Properties:
Name Type Argument Description
x Number | String <optional>
X coordinate of the rectangle. Can be a pixel position, or a string with a 'px' or '%' suffix.
y Number | String <optional>
Y coordinate of the rectangle. Can be a pixel position, or a string with a 'px' or '%' suffix.
w Number | String <optional>
Width of the rectangle. Can be a pixel position, or a string with a 'px' or '%' suffix.
h Number | String <optional>
Height of the rectangle. Can be a pixel position, or a string with a 'px' or '%' suffix.
tabOrientation module:wcDocker.TAB <optional>
Desired orientation of tab widgets.
Source:

typedef var Bounds

A bounding structure

Type:
  • Object
Properties:
Name Type Description
top Number The upper, or top bound (percentage value between 0 and 1).
bottom Number The lower, or bottom bound (percentage value between 0 and 1).
left Number The left bound (percentage value between 0 and 1).
right Number The right bound (percentage value between 0 and 1).
Source:

typedef var Coordinate

A coordinate structure.

Type:
  • Object
Properties:
Name Type Description
x Number X coordinate.
y Number Y coordinate.
Source:

typedef var FitContents

Determines whether the container should fit the size of its contents instead of scroll for each axis.

Type:
  • Object
Properties:
Name Type Description
x Boolean Whether scrolling is enabled in the horizontal direction.
y Boolean Whether scrolling is enabled in the vertical direction.
Source:

typedef function onCreatePanel(panel [, options])

A function or an object constructor for the panel. This function is called using the 'new' operator.

Parameters:
Name Type Argument Description
panel module:wcPanel The panel being constructed.
options module:wcPanel~options <optional>
An options object passed in from wcDocker.registerPanelType()'s options.options parameter.
Source:

typedef var Options

Options for a docker instance.

Type:
  • Object
Properties:
Name Type Argument Default Description
themePath String <optional>
'Themes' A folder path where all docker theme files can be found.
theme String <optional>
'default' The active docker theme.
loadingClass String <optional>
'fa fa-spinner fa-pulse' Any class name to use for the loading screen icon.
allowContextMenu Boolean <optional>
true Overrides the default right click menu with ones that interact with docker.
hideOnResize Boolean <optional>
false If true, panels will hide their contents as they are being resized.
allowCollapse Boolean <optional>
true Allows users to collapse panels to the sides of the docker view.
responseRate Number <optional>
10 This determines how often updates are performed (in milliseconds).
moveStartDelay Number <optional>
300 The time delay (in milliseconds) before a panel drag operation will start.
edgeAnchorSize Number | String <optional>
50 Determines the size of the anchor points when docking a panel to the outer edge of the window. Can be a pixel value, or a string with a 'px' or '%' suffix.
panelAnchorSize Number | String <optional>
'15%' Determines the size of the anchor points when docking a panel along the side of another panel. Can be a pixel value, or a string with a 'px' or '%' suffix.
detachToWidth Number | String <optional>
600 Determines the new width when a panel is detached (0 = Don't change). Can be a pixel value, or a string with a 'px' or '%' suffix.
detachToHeight Number | String <optional>
400 Determines the new height when a panel is detached (0 = Don't change). Can be a pixel value, or a string with a 'px' or '%' suffix.
wcPanelClass Object <optional>
Defines a class object to use in replacement of the default wcPanel object.
wcGhostClass Object <optional>
Defines a class object to use in replacement of the default wcGhost object.
wcSplitterClass Object <optional>
Defines a class object to use in replacement of the default wcSplitter object.
wcFrameClass Object <optional>
Defines a class object to use in replacement of the default wcFrame object.
wcCollapserClass Object <optional>
Defines a class object to use in replacement of the default wcCollapser object.
wcLayoutSimpleClass Object <optional>
Defines a class object to use in replacement of the default wcLayoutSimple object.
wcLayoutTableClass Object <optional>
Defines a class object to use in replacement of the default wcLayoutTable object.
wcDrawerClass Object <optional>
Defines a class object to use in replacement of the default wcDrawer object.
wcTabFrameClass Object <optional>
Defines a class object to use in replacement of the default wcTabFrame object.
Source:

typedef var PanelOptions

Options for adding a new panel.

Type:
  • Object
Properties:
Name Type Argument Description
x Number | String <optional>
X coordinate of the panel center (if floating). Can be a pixel position, or a string with a 'px' or '%' suffix.
y Number | String <optional>
Y coordinate of the panel center (if floating). Can be a pixel position, or a string with a 'px' or '%' suffix.
w Number | String <optional>
Desired width of the panel. Can be a pixel position, or a string with a 'px' or '%' suffix.
h Number | String <optional>
Desired height of the panel. Can be a pixel position, or a string with a 'px' or '%' suffix.
tabOrientation module:wcDocker.TAB <optional>
Desired position of tab widgets when using wcDocker.DOCK.STACKED. Not supported on IE8 or below.
Source:

typedef var Rect

A rectangle structure.

Type:
  • Object
Properties:
Name Type Argument Description
x Number | String <optional>
X coordinate of the rectangle. Can be a pixel position, or a string with a 'px' or '%' suffix.
y Number | String <optional>
Y coordinate of the rectangle. Can be a pixel position, or a string with a 'px' or '%' suffix.
w Number | String <optional>
Width of the rectangle. Can be a pixel position, or a string with a 'px' or '%' suffix.
h Number | String <optional>
Height of the rectangle. Can be a pixel position, or a string with a 'px' or '%' suffix.
Source:

typedef var registerOptions

Options object for registering new panel types.

Properties:
Name Type Argument Default Description
onCreate module:wcDocker~onCreatePanel A function or an object constructor for the panel.
layout module:wcDocker.LAYOUT <optional>
wcDocker.LAYOUT.TABLE If supplied, overrides the default layout used for this panel.
icon String <optional>
A CSS class name to draw an icon in the panels tab widget.
faicon String <optional>
An icon name using the Font-Awesome library. You must download and link to the library first.
title String | Boolean <optional>
Assign a custom name to the panels tab. A false value will hide the tab entirely.
isPrivate Boolean <optional>
If true, the user will not be able to create this panel type.
isPersistent Boolean <optional>
If true, when the user closes this panel, it will only be hidden instead of completely destroyed. When the user creates an instance of this panel, it will first attempt to un-hide an already existing panel before creating a new instance.
limit Number <optional>
Enforces a limited number of this panel type from being created by the user.
options Object <optional>
A custom options object to be passed into the new panel constructor or creation function as the second parameter.
Source:

typedef var Scrollable

Determines whether the container will allow scroll bars to appear on each axis.

Type:
  • Object
Properties:
Name Type Description
x Boolean Whether scrolling is enabled in the horizontal direction.
y Boolean Whether scrolling is enabled in the vertical direction.
Source:

typedef var Size

A 2D size structure.

Type:
  • Object
Properties:
Name Type Description
x Number Width.
y Number Height.
Source:

Events


function onEvent

An event handler callback. Each is registered to a event type using the wcDocker.on() or wcPanel.on() functions.

Type: function
Parameters:
Name Type Argument Description
panel module:wcPanel | NULL The panel invoking the event, or NULL if global.
data Object <optional>
A data object passed by the invoker.
Source: