Skip to content

wcPanel

Jump to bottom
Lochemage edited this page Oct 12, 2014 · 39 revisions

wcPanel API

The public interface for the docking panel, it contains a layout that can be filled with custom elements and a number of convenience functions for use.

new wcPanel(type)

You should not be constructing these by hand, instead use wcDocker.addPanel()
for proper construction.

type
Type: String
The type name of the panel, pre-registered using wcDocker.registerPanelType().

docker()

Provides access to the main wcDocker object.

title(title)

Gets, or Sets the displayed title for this panel.  If false is
passed in, the title bar and all tabs will be removed from the panel.

title
Type: String
If supplied, will assign a new title for this panel.

layout()

Provides access to the internal wcLayout object.

focus(flash)

Brings this panel into focus by making its floating window top-most and
activating its current tab item.

flash
Type: Boolean
An optional parameter to cause a flashing effect on the window.

isVisible()

Version: 2.1.0
Retrieves whether the panel is currently visible in its frame.

addButton(name, className, text, tip, isTogglable, toggleClassName)

Version: 2.0.0

Creates a custom button that appears on the upper right of the panels title bar.
You can respond to press or toggle actions by catching the wcDocker.EVENT_BUTTON event.

name
String: The custom name of the button, used to identify it.

className
String: A custom class name to apply to the button. Usually to define a custom icon for display. Font Awesome http://fortawesome.github.io/Font-Awesome/ icons can also be used here, must supply all appropriate class names.

text
String: In the case that the button icon does not display, you can associate a small (usually a single letter) text to appear in the button instead.

tip
String: A tooltip string for the button.

isTogglable
Boolean: True to make the button a toggle button.

toggleClassName
String: An optional class name to be applied to the button when it is toggled, the original class name will be removed and replaced with this one. Good for having a different icon when the button is toggled. Font Awesome icons can also be used here, see className.

removeButton(name)

Version: 2.0.0

Removes a previously added button, identified by its name.

name
String: The previously assigned name of the button to identify it.

buttonState(name, isToggled)

Version: 2.0.0

Gets, or Sets the current state of a custom button added with addButton().

name
String: The name identifier of the button.

isToggled
Boolean: An optional value to assign as the toggle state of the current button.

pos(x, y)

Gets, or Sets the desired starting position for the panel.  Note: Setting the
position only works during the creation callback of a new panel and only if it
is floating.

x, y
Type: Number
The desired X and Y screen position (in a percentage value from 0-1) in which to center the floating panel.

size(x, y)

Sets the initial desired size of the panel.  Note: Setting the size will
only work during the creation callback of a new panel.

x, y
Type: Number
The desired X and Y size, in pixels, for the panel.

minSize

Designates a minimum constraint size for this panel.  It is recommended
that you minimize use of this function except in extreme circumstances,
as it can severely limit the users interaction.

x, y
Type: Number
The minimum X and Y size, in pixels, for this panel.

maxSize(x, y)

Designates a maximum constraint size for this panel.  It is recommended
that you minimize use of this function except in extreme circumstances,
as it can severely limit the users interaction.

x, y
Type: Number
The maximum X and Y size, in pixels, for this panel.

icon(icon)

Sets the icon to use with the panel, shown in the panels tab widget as
well as the context menu item when adding a new instance of the panel.
Note: It is recommended that you supply the icon as an options parameter
on wcDocker.registerPanelType() function instead of using this function
directly.

icon
Type: String
A CSS class name that defines the icon to display.

faicon(icon)

An alternative to the normal css icon, this uses the Font Awesome
[http://fortawesome.github.io/Font-Awesome/](http://fortawesome.github.io/Font-Awesome/) library.
Note: It is recommended that you supply the faicon as an options parameter
on wcDocker.registerPanelType() function instead of using this function
directly.

icon
Type: String
The name of the icon defined by Font Awesome's library.

scroll(x, y)

Either scrolls the panel to a given position, or retrieves the current
scroll position.

x, y
Type: Number
If supplied, will assign a new X and Y scroll position for the panel.

overflowVisible(visible)

Allows elements to draw beyond the bounds of the panel, good for popup menus and the
like. Note, enabling this feature will cause scrolling of the panel to be disabled.
If the visibility is not supplied, will retrieve the current visibility instead.

visible
Type: Boolean If supplied, will assign the overflow visibility.

scrollable(x, y)

Designates whether the inner layout can show its scroll bars (if needed).
By default, x and y scroll is enabled.

x, y
Type: Boolean
Whether the layout can scroll in a direction.

moveable(enabled)

Gets, or Sets the moveable status of the panel.  A non-moving panel appears
with no title bar and no panels can be docked relative to it.

enabled
Type: Boolean
If supplied, will assign whether the panel can be moved.

closeable(enabled)

Gets, or Sets whether the panel can be closed by the user via 'X' button.

enabled
Type: Boolean
If supplied, will assign whether the panel can be closed.

close()

Closes the panel, this can be done even if closeable is not enabled.

on(eventType, handler)

Registers the panel to receive an event.

eventType
Type: String
The event type, case sensitive. Any type name can be used and triggered manually with an optional data object that is passed in as the first parameter to any receiver. In addition to custom events, wcDocker also provides its own internal event types:

  • wcDocker.EVENT_UPDATED
    • Internal Value: 'panelUpdated'
    • Data: None
    • When the panel is updated internally (usually when it is resized).
  • wcDocker.EVENT_CLOSED
    • Internal Value: 'panelClosed'
    • Data: None
    • When the panel has been closed and is about to be destroyed.
  • wcDocker.EVENT_ATTACHED
    • Internal Value: 'panelAttached'
    • Data: None
    • When the panel has changed from a floating panel to a docked panel.
  • wcDocker.EVENT_DETACHED
    • Internal Value: 'panelDetached'
    • Data: None
    • When the panel has changed from a docked panel to a floating panel.
  • wcDocker.EVENT_MOVED
    • Internal Value: 'panelMoved'
    • Data: None
    • Whenever the position of the panel has changed.
  • wcDocker.EVENT_RESIZED
    • Internal Value: 'panelResized'
    • Data: None
    • Whenever the size of the panel has changed.
  • wcDocker.EVENT_SCROLLED
    • Internal Value: 'panelScrolled'
    • Data: None
    • Whenever the contents of the panel has scrolled.
  • wcDocker.EVENT_SAVE_LAYOUT
    • Internal Value: 'layoutSave'
    • Data: An empty object which can be assigned any options you wish to save for the given panel.
    • Whenever the layout is being saved on this panel.
  • wcDocker.EVENT_RESTORE_LAYOUT
    • Internal Value: 'layoutRestore'
    • Data: An object that matches the previously saved data from wcDocker.EVENT_SAVE_LAYOUT.
    • Whenever the layout is being restored on this panel.

Version: 2.0.0

  • wcDocker.EVENT_BUTTON
    • Internal Value: 'panelButton'
    • Data: {name: String, isToggled: Boolean}
    • Whenever a custom button, added with wcPanel.addButton(), for the panel is pressed or toggled by the user, this event is triggered with a data object in the form {name:String, isToggled:Boolean}. The name is the name identifier used as the first parameter of the addButton() function and isToggled shows whether a toggle-able button is toggled.
  • wcDocker.EVENT_MOVE_STARTED
    • Internal Value: 'panelMoveStarted'
    • Data: None
    • When the position of the panel has started moving.
  • wcDocker.EVENT_MOVE_ENDED
    • Internal Value: 'panelMoveEnded'
    • Data: None
    • When the position of the panel has stopped moving.
  • wcDocker.EVENT_RESIZE_STARTED
    • Internal Value: 'panelResizeStarted'
    • Data: None
    • Whenever the size of the panel has started changing.
  • wcDocker.EVENT_RESIZE_ENDED
    • Internal Value: 'panelResizeEnded'
    • Data: None
    • Whenever the size of the panel has stopped changing.

Version: 2.1.0

  • wcDocker.EVENT_VISIBILITY_CHANGED
    • Internal Value: 'panelVisibilityChanged'
    • Data: None
    • Whenever the panel becomes visible or invisible to the user (via tab change). See wcPanel.isVisible().
  • wcDocker.EVENT_BEGIN_DOCK
    • Internal Value: 'panelBeginDock'
    • Data: None
    • Triggered when the user begins moving a panel via drag-drop.
  • wcDocker.EVENT_END_DOCK
    • Internal Value: 'panelEndDock'
    • Data: None
    • Triggered when the user releases the moving panel to a location.
  • wcDocker.EVENT_GAIN_FOCUS
    • Internal Value: 'panelGainFocus'
    • Data: None
    • Triggered whenever the user clicks on the panel to bring it into focus.
  • wcDocker.EVENT_LOST_FOCUS
    • Internal Value: 'panelLostFocus'
    • Data: None
    • Triggered whenever a currently in-focus panel loses its focus.

handler
Type: Function(data)
The function callback to be called whenever this event has been triggered. 'this' is the panel itself and the parameter given is the custom data object defined by the event type received.

off(eventType, handler)

Unregisters an event on this panel.

eventType
Type: String
The event type to unregister, case sensitive. If the parameter is omitted, all events on the panel will be removed.

handler
Type: Function(panel, data)
If supplied, will only remove an event that matches the given handler function.

trigger(eventType, data)

Manually triggers an event.  This will propagate to all panels and has
the same functionality as wcDocker.trigger().

eventType
Type: String
The event type to trigger, case sensitive.

data
Type: Object
Any custom data object that will be passed into all receiving event handlers.

Home

How-To

API Documentation:

wcDocker
wcPanel
wcLayout
wcSplitter

Custom Widgets:

wcTabFrame
wcIFrame

Clone this wiki locally