<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title> Module: wcPanel</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/sunlight.dark.css">
<link type="text/css" rel="stylesheet" href="styles/site.slate.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html"><div style='font-size:15px;line-height:15px;margin-top:-5px;'>Web Cabin Docker<br>v3.0.0 (pre-release)</div></a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#topNavigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="topNavigation">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="modules.list.html" class="dropdown-toggle" data-toggle="dropdown">Modules<b class="caret"></b></a>
<ul class="dropdown-menu inline">
<li><a href="module-wcBase.html">wcBase</a></li><li><a href="module-wcCollapser.html">wcCollapser</a></li><li><a href="module-wcDocker.html">wcDocker</a></li><li><a href="module-wcDrawer.html">wcDrawer</a></li><li><a href="module-wcFrame.html">wcFrame</a></li><li><a href="module-wcGhost.html">wcGhost</a></li><li><a href="module-wcIFrame.html">wcIFrame</a></li><li><a href="module-wcLayout.html">wcLayout</a></li><li><a href="module-wcLayoutSimple.html">wcLayoutSimple</a></li><li><a href="module-wcLayoutTable.html">wcLayoutTable</a></li><li><a href="module-wcPanel.html">wcPanel</a></li><li><a href="module-wcSplitter.html">wcSplitter</a></li><li><a href="module-wcTabFrame.html">wcTabFrame</a></li>
</ul>
</li>
<li class="dropdown">
<a href="events.list.html" class="dropdown-toggle" data-toggle="dropdown">Events<b class="caret"></b></a>
<ul class="dropdown-menu inline">
<li><a href="module-wcDocker.html#event:onEvent">wcDocker#event:onEvent</a></li>
</ul>
</li>
<li class="dropdown">
<a href="tutorials.list.html" class="dropdown-toggle" data-toggle="dropdown">Tutorials<b class="caret"></b></a>
<ul class="dropdown-menu inline">
<li><a href="tutorial-1.0-getting-started.html">Getting Started</a></li><li><a href="tutorial-2.0-tips-and-tricks.html">Tips and Tricks</a></li><li><a href="tutorial-3.0-widgets.html">Widgets</a></li>
</ul>
</li>
<li class="dropdown">
<a href="externals.list.html" class="dropdown-toggle" data-toggle="dropdown">Externals<b class="caret"></b></a>
<ul class="dropdown-menu inline">
<li><a href="external-domNode.html">domNode</a></li><li><a href="external-jQuery.html">jQuery</a></li>
</ul>
</li>
</ul>
<div class="col-sm-3 col-md-3">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q" id="search-input">
<div class="input-group-btn">
<button class="btn btn-default" id="search-submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="container" id="toc-content">
<div class="row">
<div class="col-md-8">
<div id="main">
<h1 class="page-title">Module: wcPanel</h1>
<section>
<header>
</header>
<article>
<div class="container-overview">
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-1">line 1</a>
</li>
</ul>
</dd>
</dl>
</div>
<h3 class="subsection-title">Methods</h3>
<dl>
<hr>
<dt>
<h4 class="name" id="addButton"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>addButton</b>(name, className, text, tip [, isTogglable] [, toggleClassName])</toc>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Creates a new custom button that will appear in the title bar when the panel is active.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="attributes">
</td>
<td class="description last">The name of the button, to identify it later.</td>
</tr>
<tr>
<td class="name"><code>className</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="attributes">
</td>
<td class="description last">A CSS class name to apply to the button.</td>
</tr>
<tr>
<td class="name"><code>text</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="attributes">
</td>
<td class="description last">Text to apply to the button.</td>
</tr>
<tr>
<td class="name"><code>tip</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="attributes">
</td>
<td class="description last">Tooltip text for the user.</td>
</tr>
<tr>
<td class="name"><code>isTogglable</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">If true, will make the button toggle on and off per click.</td>
</tr>
<tr>
<td class="name"><code>toggleClassName</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">If this button is toggleable, you can designate an optional CSS class name that will replace the original class name.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-247">line 247</a>
</li>
</ul>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="buttonState"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>buttonState</b>(name [, toggleState])</toc>
->
<i><small>
<span class="param-type">Boolean</span>
</small></i>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Gets, or Sets the current toggle state of a custom button that was
added using <a href="module-wcPanel.html#addButton">wcPanel.addButton</a>.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="attributes">
</td>
<td class="description last">The name identifier of the button.</td>
</tr>
<tr>
<td class="name"><code>toggleState</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">If supplied, will assign a new toggle state to the button.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-297">line 297</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
- The current toggle state of the button.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Boolean</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="close"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>close</b>()</toc>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Forces the window to close.</p>
</div>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-638">line 638</a>
</li>
</ul>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="closeable"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>closeable</b>( [enabled])</toc>
->
<i><small>
<span class="param-type">Boolean</span>
</small></i>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Gets, or Sets whether this dock window can be closed by the user.
Note: The panel can still be closed programmatically.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>enabled</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">If supplied, toggles whether it can be closed.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-620">line 620</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
the current closeable status.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Boolean</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="collapseDirection"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>collapseDirection</b>(direction)</toc>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Gets, or Sets the collapse direction for this panel.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>direction</code></td>
<td class="type">
<span class="param-type">module:wcPanel~CollapseDirection</span>
|
<span class="param-type">wcDocker.DOCK</span>
</td>
<td class="description last">The collapse direction to use for this panel.<br>If this value is omitted, the default collapse direction will be used.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-204">line 204</a>
</li>
</ul>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="collapsible"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>collapsible</b>( [enabled])</toc>
->
<i><small>
<span class="param-type">Boolean</span>
</small></i>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Gets, or Sets whether this panel can be collapsed to the side or bottom.<br>
This only works if the collapse feature is enabled <a href="module-wcDocker.html#~Options">module:wcDocker~Options</a>.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>enabled</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">If supplied, assigns whether collapsing is enabled.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-544">line 544</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
- The current collapsible enabled state.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Boolean</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="detachable"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>detachable</b>( [enabled])</toc>
->
<i><small>
<span class="param-type">Boolean</span>
</small></i>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Sets, or Gets whether this panel can be detached into a floating panel.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>enabled</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">If supplied, assigns whether this panel can be detached.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-606">line 606</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
- Whether this panel can detach.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Boolean</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="faicon"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>faicon</b>(icon)</toc>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Sets the icon for the panel, shown in the panels tab widget,
to an icon defined from the <a href="http://fortawesome.github.io/Font-Awesome/">Font-Awesome</a> library.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>icon</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="description last">The font-awesome icon name.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-477">line 477</a>
</li>
</ul>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="finishLoading"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>finishLoading</b>( [fadeDuration])</toc>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Hides the loading screen.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>fadeDuration</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
0
</td>
<td class="description last">If supplied, assigns a fade out duration for the loading screen.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-695">line 695</a>
</li>
</ul>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="focus"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>focus</b>( [flash])</toc>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Brings this panel into focus. If it is floating, it will be moved to the front of all other panels.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>flash</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">If true, in addition to bringing the panel into focus, it will also flash for the user.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-179">line 179</a>
</li>
</ul>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="height"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>height</b>()</toc>
->
<i><small>
<span class="param-type">Number</span>
</small></i>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Retrieves the height of the panel contents.</p>
</div>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-446">line 446</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
- Panel height.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Number</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="icon"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>icon</b>(icon)</toc>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Sets the icon for the panel, shown in the panels tab widget. Must be a css class name that contains the icon.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>icon</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="description last">The icon class name.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-458">line 458</a>
</li>
</ul>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="info"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>info</b>()</toc>
->
<i><small>
<span class="param-type"><a href="module-wcDocker.html#~registerOptions">module:wcDocker~registerOptions</a></span>
</small></i>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Retrieves the registration info of the panel as declared from
<a href="module-wcDocker.html#registerPanelType">wcDocker.registerPanelType</a>;</p>
</div>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-159">line 159</a>
</li>
</ul>
</dd>
<dt class="tag-see method-doc-label method-doc-details-label">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-wcDocker.html#panelTypeInfo">wcDocker.panelTypeInfo</a>.</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
- Registered options of the panel type.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="module-wcDocker.html#~registerOptions">module:wcDocker~registerOptions</a></span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="initPos"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>initPos</b>( [x] [, y])</toc>
->
<i><small>
<span class="param-type"><a href="module-wcDocker.html#~Coordinate">module:wcDocker~Coordinate</a></span>
</small></i>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Gets, or Sets the default position of the panel if it is floating. <b>Warning: after the panel has been initialized, this value no longer reflects the current position of the panel.</b></p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>x</code></td>
<td class="type">
<span class="param-type">Number</span>
|
<span class="param-type">String</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">If supplied, sets the horizontal position of the floating panel. Can be a percentage position, or a string with a 'px' or '%' suffix.</td>
</tr>
<tr>
<td class="name"><code>y</code></td>
<td class="type">
<span class="param-type">Number</span>
|
<span class="param-type">String</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">If supplied, sets the vertical position of the floating panel. Can be a percentage position, or a string with a 'px' or '%' suffix.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-325">line 325</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
- The current default position of the panel.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="module-wcDocker.html#~Coordinate">module:wcDocker~Coordinate</a></span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="initSize"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>initSize</b>( [x] [, y])</toc>
->
<i><small>
<span class="param-type"><a href="module-wcDocker.html#~Size">module:wcDocker~Size</a></span>
</small></i>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Gets, or Sets the desired size of the panel. <b>Warning: after the panel has been initialized, this value no longer reflects the current size of the panel.</b></p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>x</code></td>
<td class="type">
<span class="param-type">Number</span>
|
<span class="param-type">String</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">If supplied, sets the desired initial horizontal size of the panel. Can be a pixel position, or a string with a 'px' or '%' suffix.</td>
</tr>
<tr>
<td class="name"><code>y</code></td>
<td class="type">
<span class="param-type">Number</span>
|
<span class="param-type">String</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">If supplied, sets the desired initial vertical size of the panel. Can be a pixel position, or a string with a 'px' or '%' suffix.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-353">line 353</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
- The current initial size of the panel.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="module-wcDocker.html#~Size">module:wcDocker~Size</a></span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="isFloating"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>isFloating</b>()</toc>
->
<i><small>
<span class="param-type">Boolean</span>
</small></i>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Retrieves whether this panel is floating.</p>
</div>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-222">line 222</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Boolean</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="isInFocus"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>isInFocus</b>()</toc>
->
<i><small>
<span class="param-type">Boolean</span>
</small></i>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Retrieves whether this panel is in focus.</p>
</div>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-234">line 234</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Boolean</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="isVisible"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>isVisible</b>()</toc>
->
<i><small>
<span class="param-type">Boolean</span>
</small></i>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Retrieves whether this panel can be seen by the user.</p>
</div>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-213">line 213</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
- Visibility state.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Boolean</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="layout"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>layout</b>()</toc>
->
<i><small>
<span class="param-type"><a href="module-wcLayoutSimple.html">module:wcLayoutSimple</a></span>
|
<span class="param-type">wcLayoutTable</span>
</small></i>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Retrieves the layout instance.</p>
</div>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-170">line 170</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
- The layout instance.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="module-wcLayoutSimple.html">module:wcLayoutSimple</a></span>
|
<span class="param-type">wcLayoutTable</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="maxSize"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>maxSize</b>( [x] [, y])</toc>
->
<i><small>
<span class="param-type"><a href="module-wcDocker.html#~Size">module:wcDocker~Size</a></span>
</small></i>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Gets, or Sets the maximum size constraint of the panel.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>x</code></td>
<td class="type">
<span class="param-type">Number</span>
|
<span class="param-type">String</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">If supplied, sets the desired maximum horizontal size of the panel. Can be a pixel position, or a string with a 'px' or '%' suffix.</td>
</tr>
<tr>
<td class="name"><code>y</code></td>
<td class="type">
<span class="param-type">Number</span>
|
<span class="param-type">String</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">If supplied, sets the desired maximum vertical size of the panel. Can be a pixel position, or a string with a 'px' or '%' suffix.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-407">line 407</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
- The current maximum size.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="module-wcDocker.html#~Size">module:wcDocker~Size</a></span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="minSize"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>minSize</b>( [x] [, y])</toc>
->
<i><small>
<span class="param-type"><a href="module-wcDocker.html#~Size">module:wcDocker~Size</a></span>
</small></i>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Gets, or Sets the minimum size constraint of the panel.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>x</code></td>
<td class="type">
<span class="param-type">Number</span>
|
<span class="param-type">String</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">If supplied, sets the desired minimum horizontal size of the panel. Can be a pixel position, or a string with a 'px' or '%' suffix.</td>
</tr>
<tr>
<td class="name"><code>y</code></td>
<td class="type">
<span class="param-type">Number</span>
|
<span class="param-type">String</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">If supplied, sets the desired minimum vertical size of the panel. Can be a pixel position, or a string with a 'px' or '%' suffix.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-380">line 380</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
- The current minimum size.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="module-wcDocker.html#~Size">module:wcDocker~Size</a></span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="moveable"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>moveable</b>( [enabled])</toc>
->
<i><small>
<span class="param-type">Boolean</span>
</small></i>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Sets, or Gets the moveable status of the window.
Note: Other panels can not dock beside a non-moving panel as doing so could cause it to move.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>enabled</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">If supplied, assigns whether this panel can be moved.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-589">line 589</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
- Whether the panel is moveable.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Boolean</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="off"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>off</b>(eventType [, handler])</toc>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Unregisters an <a href="module-wcDocker.html#.EVENT">event</a> associated with this panel.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>eventType</code></td>
<td class="type">
<span class="param-type"><a href="module-wcDocker.html#.EVENT">module:wcDocker.EVENT</a></span>
</td>
<td class="attributes">
</td>
<td class="description last">The event type, can be a custom event string or a <a href="module-wcDocker.html#.EVENT">predefined event</a>.</td>
</tr>
<tr>
<td class="name"><code>handler</code></td>
<td class="type">
<span class="param-type">module:wcDocker~event:onEvent</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">The handler function registered with the event. If omitted, all events registered to the event type are unregistered.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-742">line 742</a>
</li>
</ul>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="on"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>on</b>(eventType, handler)</toc>
->
<i><small>
<span class="param-type">Boolean</span>
</small></i>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Registers an <a href="module-wcDocker.html#.EVENT">event</a> associated with this panel.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>eventType</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="description last">The event type, can be a custom event string or a <a href="module-wcDocker.html#.EVENT">predefined event</a>.</td>
</tr>
<tr>
<td class="name"><code>handler</code></td>
<td class="type">
<span class="param-type">module:wcDocker#onEvent</span>
</td>
<td class="description last">An event handler function to be called when the event is fired.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-718">line 718</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
- Event registration success or failure.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Boolean</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="overflowVisible"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>overflowVisible</b>( [visible])</toc>
->
<i><small>
<span class="param-type">Boolean</span>
</small></i>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Gets, or Sets whether overflow on this panel is visible.
Use this if a child element within this panel is intended to 'popup' and be visible outside of its parent area.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>visible</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">If supplied, assigns whether overflow is visible.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-559">line 559</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
- The current overflow visibility.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Boolean</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="removeButton"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>removeButton</b>(name)</toc>
->
<i><small>
<span class="param-type">Boolean</span>
</small></i>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Removes a custom button from the panel.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="description last">The name identifier for the button to remove.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-273">line 273</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
- Success or failure.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Boolean</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="resizeVisible"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>resizeVisible</b>( [visible])</toc>
->
<i><small>
<span class="param-type">Boolean</span>
</small></i>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Gets, or Sets whether the contents of the panel are visible on resize.
Use this if the panel has extremely expensive contents which take a long time to resize.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>visible</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">If supplied, assigns whether panel contents are visible during resize.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-574">line 574</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
- The current resize visibility.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Boolean</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="scroll"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>scroll</b>( [x] [, y] [, duration])</toc>
->
<i><small>
<span class="param-type"><a href="module-wcDocker.html#~Coordinate">module:wcDocker~Coordinate</a></span>
</small></i>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Gets, or Sets the scroll position of the panel's contents if it is scrollable; See <a href="module-wcPanel.html#scrollable">wcPanel.scrollable</a>).</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>x</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">If supplied, sets the scroll horizontal position of the panel.</td>
</tr>
<tr>
<td class="name"><code>y</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">If supplied, sets the scroll vertical position of the panel.</td>
</tr>
<tr>
<td class="name"><code>duration</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">If supplied, will animate the scroll movement with the supplied duration (in milliseconds).</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-513">line 513</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
The current scroll position.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="module-wcDocker.html#~Coordinate">module:wcDocker~Coordinate</a></span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="scrollable"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>scrollable</b>( [x] [, y])</toc>
->
<i><small>
<span class="param-type"><a href="module-wcDocker.html#~Scrollable">module:wcDocker~Scrollable</a></span>
</small></i>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Gets, or Sets whether the window is scrollable.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>x</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">If supplied, assigns whether the window is scrollable in the horizontal direction.</td>
</tr>
<tr>
<td class="name"><code>y</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">If supplied, assigns whether the window is scrollable in the vertical direction.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-497">line 497</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
- The current scrollable status.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="module-wcDocker.html#~Scrollable">module:wcDocker~Scrollable</a></span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="startLoading"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>startLoading</b>( [label] [, opacity] [, textOpacity])</toc>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Shows the loading screen.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>label</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">An optional label to display.</td>
</tr>
<tr>
<td class="name"><code>opacity</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
0.4
</td>
<td class="description last">If supplied, assigns a custom opacity value to the loading screen.</td>
</tr>
<tr>
<td class="name"><code>textOpacity</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
1
</td>
<td class="description last">If supplied, assigns a custom opacity value to the loading icon and text displayed.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-649">line 649</a>
</li>
</ul>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="title"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>title</b>(title)</toc>
->
<i><small>
<span class="param-type">String</span>
|
<span class="param-type">Boolean</span>
</small></i>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Gets, or Sets the title for this panel.
Titles appear in the tab widget associated with the panel.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>title</code></td>
<td class="type">
<span class="param-type">String</span>
|
<span class="param-type">Boolean</span>
</td>
<td class="description last">If supplied, sets the new title (this can be html text). If false, the title bar will be removed.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-130">line 130</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
- The current title.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">String</span>
|
<span class="param-type">Boolean</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="trigger"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>trigger</b>(eventType [, data])</toc>
->
<i><small>
<span class="param-type">Array.<Object></span>
</small></i>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Triggers an <a href="module-wcDocker.html#.EVENT">event</a> of a given type to all panels, including itself.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>eventType</code></td>
<td class="type">
<span class="param-type"><a href="module-wcDocker.html#.EVENT">module:wcDocker.EVENT</a></span>
</td>
<td class="attributes">
</td>
<td class="description last">The event type, can be a custom event string or a <a href="module-wcDocker.html#.EVENT">predefined event</a>.</td>
</tr>
<tr>
<td class="name"><code>data</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">A custom data object to pass into all handlers.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-768">line 768</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
results - Returns an array with all results returned by event handlers.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Array.<Object></span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="width"><toc class="attribs"><span class="type-signature"></span></toc>function <toc class="method"><b>width</b>()</toc>
->
<i><small>
<span class="param-type">Number</span>
</small></i>
</h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">Retrieves the width of the panel contents.</p>
</div>
<dl class="details">
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-434">line 434</a>
</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
- Panel width.
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Number</span>
</dd>
</dl>
</dd>
</dl>
<h3 class="subsection-title">Type Definitions</h3>
<dl>
<hr>
<dt class="name" id="~options">
<h4 id="~options"><toc class="attribs"></toc>typedef var <toc class="member"><b>options</b></toc></h4>
</dt>
<dd>
<div class="description">
<p style="margin-left:20px;">An options object for the <a href="module-wcPanel.html">panel</a> constructor.</p>
</div>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>icon</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">A CSS classname that represents the icon that should display on this panel's tab widget.</td>
</tr>
<tr>
<td class="name"><code>faicon</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">An icon name using the <a href="http://fortawesome.github.io/Font-Awesome/">Font-Awesome</a> library.</td>
</tr>
<tr>
<td class="name"><code>title</code></td>
<td class="type">
<span class="param-type">String</span>
|
<span class="param-type">Boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">A custom title to display for this panel, if false, title bar will not be shown.</td>
</tr>
<tr>
<td class="name"><code>detachToWidth</code></td>
<td class="type">
<span class="param-type">Number</span>
|
<span class="param-type">String</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
600
</td>
<td class="description last">Determines the new width when the panel is detached (0 = Don't change). Can be a pixel value, or a string with a 'px' or '%' suffix.</td>
</tr>
<tr>
<td class="name"><code>detachToHeight</code></td>
<td class="type">
<span class="param-type">Number</span>
|
<span class="param-type">String</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
400
</td>
<td class="description last">Determines the new height when the panel is detached (0 = Don't change). Can be a pixel value, or a string with a 'px' or '%' suffix.</td>
</tr>
</tbody>
</table>
</dl>
<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="panel.js.html">panel.js</a>,
<a href="panel.js.html#sunlight-1-line-26">line 26</a>
</li>
</ul>
</dd>
</dl>
</dd>
</dl>
</article>
</section>
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-3">
<div id="toc" class="col-md-3 hidden-xs hidden-sm hidden-md"></div>
</div>
</div>
</div>
<div class="modal fade" id="searchResults">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Search results</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<footer>
<span class="copyright">
2014-2016 Jeff Houde (<a href='mailto:lochemage@webcabin.org'>lochemage@webcabin.org</a>)
</span>
<span class="jsdoc-message">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.0</a>
on 2016-08-28
using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
</span>
</footer>
<script src="scripts/docstrap.lib.js"></script>
<script src="scripts/toc.js"></script>
<script type="text/javascript" src="scripts/fulltext-search-ui.js"></script>
<script>
$( function () {
$( "[id*='$']" ).each( function () {
var $this = $( this );
$this.attr( "id", $this.attr( "id" ).replace( "$", "__" ) );
} );
$( ".tutorial-section pre, .readme-section pre" ).each( function () {
var $this = $( this );
var example = $this.find( "code" );
exampleText = example.html();
var lang = /{@lang (.*?)}/.exec( exampleText );
if ( lang && lang[1] ) {
exampleText = exampleText.replace( lang[0], "" );
example.html( exampleText );
lang = lang[1];
} else {
var langClassMatch = example.parent()[0].className.match(/lang\-(\S+)/);
lang = langClassMatch ? langClassMatch[1] : "javascript";
}
if ( lang ) {
$this
.addClass( "sunlight-highlight-" + lang )
.addClass( "linenums" )
.html( example.html() );
}
} );
Sunlight.highlightAll( {
lineNumbers : true,
showMenu : true,
enableDoclinks : true
} );
$.catchAnchorLinks( {
navbarOffset: 10
} );
$( "#toc" ).toc( {
anchorName : function ( i, heading, prefix ) {
return $( heading ).attr( "id" ) || ( prefix + i );
},
selectors : "#toc-content h1,#toc-content h2,#toc-content h3,#toc-content h4",
showAndHide : false,
smoothScrolling: true
} );
$( "#main span[id^='toc']" ).addClass( "toc-shim" );
$( '.dropdown-toggle' ).dropdown();
$( "table" ).each( function () {
var $this = $( this );
$this.addClass('table');
} );
} );
</script>
<!--Navigation and Symbol Display-->
<!-- Piwik Analytics -->
<script type="text/javascript">
var _paq = _paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://analytics.webcabin.org/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', 6]);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<noscript><p><img src="https://analytics.webcabin.org/piwik.php?idsite=6" style="border:0;" alt="" /></p></noscript>
<!-- End Piwik Code -->
<script type="text/javascript">
$(document).ready(function() {
SearcherDisplay.init();
});
</script>
</body>
</html>