webcabin/wcdocker

wcDocker (Web Cabin Docker) is a powerful window layout system with a responsive and completely interactive design. Move, remove, create, and duplicate panel windows at any time! Organize how you wish! View the demo here:

Welcome!

Welcome to WebCabin.org! Your developers cabin, on the web!

Here at Web Cabin, we sincerely believe that anyone with the proper tools can become a developer! The open source community provides us with a powerful network for sharing, inspiring, and revolutionizing the world! It is awfully daunting, viewing the long road ahead through our small cabin window, but all memorable journeys must have a beginning. Will you join us?

---

New!

I've create a new theme builder panel that appears right on the demonstration front page! Build your own custom themes live within the page view!

---

What is wcDocker?

wcDocker (Web Cabin Docker) is a responsive IDE interface designed for the developer at heart! Compartmentalize your environment into smaller components, put each of those parts into a docker panel, and organize your environment however you like, whenever you like!

http://docker.webcabin.org

• Try the front page demo.

http://docker.api.webcabin.org

• View the API documentation.

https://github.com/WebCabin/wcDocker

• View the source code.

http://arpg.webcabin.org

• Try out our upcoming project (currently in alpha development), a completely web based Action RPG Maker tool!

---

Features

• Extremely responsive design!
• Organization and duplication of panels at any time!
• Easily create your own themes!
• Comprehensive API Documentation!
• Easily save and restore your layout!
• Compatible with all major browsers, including IE8.
• Completely free!

---

Getting Started

See the Getting Started tutorial.

---

Change Log

Version: (pre-release) 3.0.0

• WARNING: Before upgrading to this version from 2.2.0, You will need to make the following changes in your implementation:

• Themes are no longer linked directly to the page using the <link> tag, instead use wcDocker.theme().

• If your themes are not found in the "Themes" folder, you will need to assign the correct path when you construct your wcDocker instance.

  new wcDocker(domNode, {themePath: 'New/theme/folder'});
  

• All wcDocker.DOCK, wcDocker.EVENT, and wcDocker.ORIENTATION enumerations have changed slightly, instead of each being one variable, they are broken into objects.

  // OLD format...
  wcDocker.DOCK_LEFT;
  wcDocker.EVENT_BUTTON;
  wcDocker.ORIENTATION_HORIZONTAL;
  
  // NEW format...
  wcDocker.DOCK.LEFT;
  wcDocker.EVENT.BUTTON;
  wcDocker.ORIENTATION.HORIZONTAL;
  
  // Notice how each used to be one variable name...
  // Now they each are an object with the same enumeration inside them,
  // just replace the first '_' with a '.' and they should work fine again!
  

• wcLayout's have changed in the following ways:

  • The original layout class has been renamed to wcLayoutTable, and another type of layout now exists as wcLayoutSimple.

  • wcLayoutTable.addItem() and wcLayoutTable.item() no longer return a jQuery object. Instead, they return a layout table item that can be used to make alterations to that cell.

  • To use the simple layout on your panel, include the layout option when registering your panel:

    myDocker.registerPanelType('Simple Panel', {
      // Use the simple layout for the entire panel.
      layout: wcDocker.LAYOUT.SIMPLE,
      onCreate: function(myPanel) {
    
        // Create a splitter widget with simple layouts.
        var splitter = new wcSplitter($someContainer, myPanel, wcDocker.ORIENTATION.HORIZONTAL);
        splitter.initLayouts(wcDocker.LAYOUT.SIMPLE, wcDocker.LAYOUT.SIMPLE);
    
        // Create a tab frame widget with a tab that uses a simple layout.
        var tabFrame = new wcTabFrame($someContainer, myPanel);
        tabFrame.addTab('Custom Tab 1', 0, wcDocker.LAYOUT.SIMPLE).addItem($someItem);
      }
    });
    

• The following functions are now deprecated and will be removed in an upcoming version:

  • wcDocker.basicMenu(), renamed to wcDocker.menu().

• Collapsible panels: Panels can now be collapsed to the side or bottom of the screen, where they become a slide-out drawer above the main layout.

• Panel creation elements: Instead of relying on the context-menu controls to add new panels, you can now add the CSS class "wcCreatePanel" to any dom element along with the data attribute "panel" and wcDocker will treat it as a panel creation control. A user will then be able to drag-drop that element into their view to create new panels of the specified type.

  {@lang xml}<span class="wcCreatePanel" data-panel="My Custom Panel Type">Create My Custom Panel Type</span>
  

• Tab orientation: Tab controls displayed on panels and the custom tab widget can now be oriented to the left, right, or bottom edges (browser must support css transforms).

  myDocker.addPanel('Some Panel', wcDocker.DOCK.STACKED, parentPanel, {tabOrientation: wcDocker.TAB.BOTTOM});
  
  var myCustomTabFrame = new wcTabFrame(domElem, myPanel);
  myCustomTabFrame.tabOrientation(wcDocker.TAB.LEFT);
  

• Built in loading screens for both panels (wcPanel.startLoading() and wcPanel.finishLoading()), and the entire window (wcDocker.startLoading() and wcDocker.finishLoading()), and also included a new wcDocker.EVENT.LOADED event that is triggered once all panels have been initialized and have finished their loading screens if they've started one.

• Great improvements to splitter bar movement, moving one splitter no longer causes others to move (unless it explicitly pushes them).

• Improvements to the wcLayout object, css changes to the table cells and rows are now persistent even if the grid size changes.

• Tab widgets now only show on panel frames that contain more than one panel.

• Panels can now be registered as persistent.

  • When the user closes a persistent panel, it is hidden instead of destroyed.
  • When the user adds that panel back into their view, if there are any previously hidden panels of that type, it will be shown instead of creating a new panel instance.

    myDocker.registerPanelType('persistent panel', {
      isPersistent: true,
      onCreate: function(myPanel) {
        myPanel.on(wcDocker.EVENT.PERSISTENT_CLOSED, function() {
          // The user has closed this panel, but instead of being destroyed, it is only hidden.
        });
        myPanel.on(wcDocker.EVENT.PERSISTENT_OPENED, function() {
          // The user added this panel type, but actually only re-shown this persistent version of the panel instead.
        });
      }
    });
    

• The collapse direction button on a panel can now be overridden if the built in calculation does not meet your needs. See wcPanel#collapseDirection for more information.

  // You can override the direction with your own calculation function callback
  myPanel.collapseDirection(function(bounds) {
    return wcDocker.DOCK.LEFT;
  });
  
  // Or you can set it to a static direction
  myPanel.collapseDirection(wcDocker.DOCK.RIGHT);
  
  // Or you can restore it back to the default calculation
  myPanel.collapseDirection(false);
  

• Source code now supports DCL!

• Front page Theme Builder is now built into the libraries.

  • To include it in your project, you will need to include spectrum into your project as well as register a panel to be used for the theme builder:

    myDocker.registerPanelType('Theme Builder', {
      faicon: 'map',
      onCreate: wcThemeBuilder
    });
    

• wcDocker is now published to npm.

Version: 2.2.0

• Separated the default theme out of wcDocker.css (now use wcDocker.css with Themes/default.css).
• Added wcDocker.panelTypeInfo() and wcPanel.info() that will retrieve the registration data of a panel.
• Added wcDocker.panelTypes() to retrieve a list of all registered panel types.
• New event type wcDocker.EVENT.INIT.
• Panel width and height can now be retrieved.
• wcPanel functions initPos, initSize, minSize, and maxSize can now take a string value with a 'px' or '%' suffix.
• Fixed issue with using normal CSS icons in the context menu.
• Improved auto scrolling of tab items when clicked.
• Create your own wcTabFrame widget within your panels.
• Create your own wcIFrame widget within your panels.
• Floating panels can now be modal.

Version: 2.1.0

• wcDocker now has Bower support for easy package management.
• wcSplitter is now usable inside a panel.
• Improved performance of panel resizing.
• wcPanel.focus() now actually sets itself as the current active tab.
• wcDocker.registerPanelType() has a new option {limit: Number} that limits the total number of copies for this panel.
• New event type wcDocker.EVENT.VISIBILITY_CHANGED, triggered whenever the panel gains or loses visibility. Use wcPanel.isVisible() to retrieve the current state.
• Reduced DOM changes during tab change and resize.
• New event types wcDocker.EVENT.BEGIN_DOCK and wcDocker.EVENT.END_DOCK that trigger whenever the user is dragging a panel to a new location.
• New event types wcDocker.EVENT.GAIN_FOCUS and wcDocker.EVENT.LOST_FOCUS that trigger whenever a panel is brought it and out of focus.
• Floating panels no longer change size whenever a new panel is added to it as a tab.

Version: 2.0.0

• Layout grid can now have a spacing size.
• Layout grid can now be set to alternating row color.
• wcLayout.item() added to retrieve an already existing item in the layout.
• wcDocker can now send and receive events.
• wcLayout can now batch large numbers of elements added without page refreshing between each.
• wcPanel can now contain custom buttons that appear within the title bar.
• wcDocker.basicMenu() now has an option to include the default menu options along with your custom ones.
• wcDocker.basicMenu() can now accept a dynamic callback function that returns custom menu's at the time of the event.
• New events added for resize start, resize end, move start, and move end.
• Panels can now be set to hide their contents whenever they are resized.
• wcDocker constructor now takes an options object.
• wcDocker now has an option to disable the default context menu.
• Panel tabs are now scrollable.
• Icons are now supported using regular CSS or the Font-Awesome library http://fortawesome.github.io/Font-Awesome/.
• wcDocker.registerPanelType() can now take an options object instead of just a single callback.
• Fixed layout save/restore.
• Fixed layout clear not actually removing elements.
• Fixed compatibility with IE8.
• Fixed tabs disappearing when the panel is too small to fit them.

---

Dependencies

• JQuery Library version 1.11.1 http://jquery.com/
• JQuery ContextMenu Library https://github.com/swisnl/jQuery-contextMenu
• Font-Awesome http://fortawesome.github.io/Font-Awesome/

---

License

MIT License

© 2014-2016 Jeff Houde ([email protected])

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

---

Suggestions/Comments?

Please feel free to contact me, Jeff Houde ([email protected]), for any information or to give feedback and suggestions. Also, if you are a web programmer, and believe you can help, please let me know!

Thank you

wcdocker's Issues

CRLF line endings

@Lochemage

Is that the repo storing the code files with windows-style CRLF line endings? I am using linux and somethimes git is thinking that all the lines are modified while I change just a few lines. When I check the differencies, I always found that the original file is CRLF and modified one is a LF style file.

I think a .gitattributes file may need to be added to the repo (and maybe a line ending fix commit). According to information I found on the web, that file is taking care of the platform differences in terms of line endings.

If you see this is an issue to be fixed, I can work on the possible solutions.

Related pages for information :
https://help.github.com/articles/dealing-with-line-endings/
http://stackoverflow.com/questions/8461528/replace-github-repo-while-preserving-issues-wiki-etc

Adding a new button to a panel does not immediately show the button on the panel.

Same with removal.

Default theme should be separated from wcDocker.css

Hi

Currently the default theme is in wcDocker.css. Whilst this is convenient if the user only wants to use that theme, it makes it harder to create custom themes as they may need to reset or worse clear some of the default styles. For example, in my theme I wish to use the platform/browser standard scrollbars and not the custom ones set in wcDocker.css.

Can this change be made please?

Thanks.

Collapse / Expand panel API

Thanks for this very nice jQuery based docking layout! Looks very nice and pretty powerful.

I'd like to add a Collapse / Expand panel button and I don't see an API to allow sizing the panel at runtime (using a basic sample below of what I'm doing).

Also, it would seem that the addButton method requires two more options if isTogglable is true to allow the toggable text to be potentially reverse in addition to the icon: toggableText and toggableTip

myPanel.addButton('Collapse', 'fa fa-arrow-left', '<', 'Collapse Files Panel', true, 'fa fa-arrow-right');
    myPanel.on(wcDocker.EVENT_BUTTON, function(data) {
        //note sure how to get the current size and change it accordingly?
    });

Unable to dock a panel if it is in floating state

Hi,
I really appreciated the library, it is so cool and powerfull. I have never seen such well done docking manager in Html5/jquery. I m exploring to use it and from the demo app i found out that if a pane went in floating state i cannot dock it anymore.
Is that a bug or is there any way to dock a panel from a floating state?

Thanks for your precious help.

Best regards.

moveable(false) is not fully preventing the panel move.

Assume that we have a "fixed" panel made by calling movable(false) & closable(false) just like the header on the demo page.

If we drag one of the other panels next to the "fixed" panel, it is actually possible to dock it between the windows edge and the fixed panel. This causes the fixed panel to move to the position after the newly docked panel.

As it is not easy to reproduce this problem, I uploaded a video of it.
http://youtu.be/r593qJTiMks

Bulent

Moving a panel into an existing floating panel as a new tab should not resize the window.

Currently the window is sized based on the panels inside, but this should only happen on the very first tab to set the initial size. From there, the only time it should resize is if a new panel has some size restriction on it.

wcPanel.close() is closing the wrong tabbed panel

I'm trying to dynamically create / close tabbed windows. So I'm using wcDocker.addPanel and wcPanel.close() members to do this. But if the order of .close() calls ar not same with the .addPanel() calls, wcDocker is closing a different tabbed panel instead of the one is called.

Please take the slightly modified demo.js from here and try to run /indexDev.html with devtools open. There are two 'debugger;' calls to stop the execution on the lines that creation of the panels and close calls.

iFrame panels not working in Firefox

I have a number of iFrame panels in my app, which work fine in Chrome and Safari but remain blank in Firefox. They are being built like so:

// Build an iFrame dock panel
function buildIFramePanel(docker, name, title, width, height, showTitle, isCloseable, isPrivate, url) {
    docker.registerPanelType(name, {
        title: title,
        isPrivate: isPrivate,
        onCreate: function(myPanel) {
            myPanel.initSize(width, height);

            if (showTitle == false) 
                myPanel.title(false);

            myPanel.closeable(isCloseable);

            var $frameArea = $('<div style="width:100%;height:100%;position:relative;">');
            myPanel.layout().addItem($frameArea);

            var iFrame = new wcIFrame($frameArea, myPanel);
            iFrame.openURL(url);
        }
    });
}

The result looks as follows:

Font Awesome icons do not work when creating a basic menu without including the original menu.

The third parameter of wcDocker.basicMenu() allows you to optionally include the original panel options along with your custom ones. When you do not include the original menu, Font Awesome icons do not work.

Option to hide and show panels

Hello

I found wcPanel.__isVisible() triggers VISIBILITY_CHANGED event and iframe listens to it.

        myDocker.registerPanelType('My Panel', {
            faicon: 'gears',
            onCreate: function (myPanel) {

                var $container = $('<div style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;"></div>');
                myPanel.layout().addItem($container);

                var iFrame = new wcIFrame($container, myPanel);
                iFrame.openURL('some url');
              }
        });


        myDocker.addPanel('My Panel', wcDocker.DOCK.TOP);
        var first = myDocker.findPanels('My Panel')[0];
        first.__isVisible(false);

But the above code does not work.

Is there a way to hide and show panel (frame + iframe) without destroying it ?

three or more IFrame appear over each other

Adding 3 iframes and overlapping the bottom two with last one focus. the bottom two z-index are not correct and the frame borders are hidden

Sometimes resizing a splitter panel causes other splitters to resize as well.

This happens when you have nested splitter windows, and you resize the outer one. The splitter window inside will shrink in overall size, causing the location of its split bar to move.

To fix this, I would need to re-adjust the split position of affected splitters so they appear not to be moving.

This will not be an easy fix, but fortunately it does not prevent wcDocker from being used, so it is of low importance.

Create a theme builder

A single website page that allows you to build custom docker themes and download them!

Add a panel button separator bar that can be added between buttons.

Error While docking : Unable to get property '_parent' of undefined

I setup a simple page using the instruction from the Getting Started page:

HTML:

<div id="docker"></div>
<div id="simple"><h2>Simple Panel!</h2></div>

JS:

$(function(){ 
    var myDocker = new wcDocker('#docker', {
        themePath: 'libs/wcDocker/Themes'
    });

    myDocker.registerPanelType('SimplePanel', {
        onCreate : function(myPanel, options){
            myPanel.layout().addItem("#simple");
        }
    });

    var panel = myDocker.addPanel('SimplePanel', wcDocker.DOCK.LEFT);
...

Whenever I click the collapse button, I get an error in all three browsers (Firefox, Chrome, IE).
The error is coming from the following section of code:

function __createCollapser(location) {
  this._collapser[location] = this.__addCollapser(location, parent);
  parent = this._collapser[location]._parent;
  this._frameList.push(this._collapser[location]._drawer._frame);
}

The error can be seen here: https://rawgit.com/jxc876/docker-demo/master/index.html
The project is here: https://github.com/jxc876/docker-demo

Resize desired panel during browser resize

Is it possible to choose/mark a panel which should be resized when browser size is changing?
I had a three panels: two narrow side panels (one on the left, and one on the right) and "main" wide panel in the middle. When I resize (more precisely enlarge) the browser widow, right panel is getting wider - but I would like the middle ("main") panel to get wider, while both side panel should retain their widths.

PS: Really great library, the best in the world (I couldn't find anything better free or commercial) - you are doing amazing job!

Floating panel as a host for other dragged panels

Thank you for this great library!

Enhancements :
It would be good to make the floating panels also able to get other windows to create splitted and/or tabbed windows that are floating or popped up.

Issue:
When the user starts dragging a panel, it's like it wants to be docked somewhere as soon as possible and resists to become floated. :) I think the boundary of key positions to decide suggesting to user to dock the window to the nearest position should be tweaked to allow for a possibility to float it in more balanced way.

Add a new method of setting up the initial panel layout all at once instead of addPanel for each one.

Optimization needed especially for mobile devices.

The most obvious optimizations can be made by reducing the responsive update rate. Unfortunately, this would mean interactions will seem choppy. Other interfaces avoid this problem by not updating panels while splitter bars are moving, they just show a ghost splitter overlayed on top until the position is set.

Localisation of panel names

My app uses the Python Flask framework on the backend, with Flask-Babel to provide localisation for the Python code and HTML/JS. I cannot seem to figure out a reliable way of localising panel titles however, largely due to the fact that they're stored in the panel layout and thus get restored along with the layout when a user re-runs the app. That's fine if they're using the same language as before, but not if they've switched (perhaps because they're using a different browser).

It seems to me that an ID should be used when registering panels and when saving/restoring the layout, so that I can re-assign the panel titles in the correct language to the appropriate panels based on the ID. The ID would then be stored in the layout data and be the primary identifier for the panels, thus allowing the titles to be arbitrarily changed.

Is there a way to achieve this that I'm missing?

Tabs disappear if they don't fit within the panels title bar.

SSL Demo site is not loading

@Lochemage,

I think something is wrong with either the SSL certificate or the server itself at https://docker.webcabin.org. It is not loading. Non-SSL site is fine.

Impossible to remove the last panel in the layout

Hi,
I m using wcDocker to manage dynamically a docking layout by adding or removing panels. I need to be able to remove a panel even if it is the last one in the layout. How can achieve that?

Thanks for your help.

Alinoson.

Add a close button to every panel tab that appears on hover.

Right click menu pops up on mouse down on mac chrome/safari

should wait for mouse up

CLOSED panel event handler not triggered

@Lochemage

The wcDocker.EVENT.CLOSED event handler is not invoked when panel events are hooked up after onCreate function.

Problem with button events in floating panels (differs by browser)

buttons added to a panel which is in "wcDocker.DOCK_FLOAT" mode
exhibit different behaviors by browser:

1. chrome - buttons will not fire any click event at all.
2. Internet Explorer - buttons fire their click event only on a rapid double-click.
3. Firefox - button events work fine.

other types of elements events appear unaffected, but should probably be reviewed.
(also, the other browsers should probably be looked at (i.e. safari, opera etc.)

this bug is evident in the wcDocker demo: just drag and drop the 'Control Panel' so its floating, and you will not be able to get it to remember or reset the layout.

IFrame panel click does not focus the panel

Dynamically created IFrame panels do not get focus when layout of a non-active panel is clicked,

Text selection preventation during drag / resize does not work on floating panels.

Floating panels' DOM elements are moved out of the main container which is a common approach to set them free-moving. I think this causes here a side effect to temporary text selection disablement which is another necessity to prevent messing up the view during drag/resize operations.

Since the .wcDisableSelection is applied only to main container, floating panels are not taking it.
Preventing the text selection on the whole "body" would be a better action.

Please see the suggested fix

Issues With wcSplitter in a Vertical Orientation

I am attempting to create a vertical splitter inside of my panel; however, it is not showing either the top or bottom layout.

    myDocker.registerPanelType('Dynamic View', {
        onCreate: function(myPanel, options) {
            myPanel.initSize(800, 800);
            var layout = myPanel.layout();

            var container = $('<div style="position:absolute:top:0px;left:0px;right:0px;bottom:0px;"></div>');
            layout.addItem(container);

            var splitter = new wcSplitter(container, myPanel, wcDocker.ORIENTATION.VERTICAL);
            splitter.initLayouts();

            var top = splitter.top();
            var bottom = splitter.bottom();

            top.addItem($("<div id='vtimelinebox'></div>"));
            top.addItem($($("#dynamic-template").remove().text()), 1, 0);

            bottom.addItem($($("#hexeditor-template").remove().text()), 0, 0);
            dynamicDef.resolve();
        },
    });

If I instead define it is a horizontal splitter (wcSplitter(container, myPanel, wcDocker.ORIENTATION.HORIZONTAL)the layouts work as expected.

Add a sidebar 'panel picker'.

A side menu that contains a list of all available panels a user can create, that user can then drag-drop a panel from that list directly into their layout.

Implement the ability to assign a floating panel as modal.

Modal panels block all input to panels beneath until they are closed (either by close button, or a yes/no response).

Ability to configure the threshold of docking anchors.

This issue is taken from report #51 from bulentv:

When the user starts dragging a panel, it's like it wants to be docked somewhere as soon as possible and resists to become floated. :) I think the boundary of key positions to decide suggesting to user to dock the window to the nearest position should be tweaked to allow for a possibility to float it in more balanced way.

Allow scroll wheel, or side scroll if your mouse has it, to also scroll the tabs on the tab bar.

Add compatibility with mobile tablet devices.

Need to handle touch events, rather than mouse.

losing focus on resize

input fields on any tab loses focus on window resize. that makes impossible to type something on mobile device, as we have such process: focusing input field -> showing keyboard -> window resize -> losing focus -> hiding keyboard

IFrames become non-interactive

@Lochemage,

While using IFRAMES docked panels become non-interactive due to div with wcIFrameFocus.

Ref screenshot: the iframe panel on the right is not getting focus due to below div.

Context menu icons are missing

The context menu icons are missing in the demo hosted at http://docker.webcabin.org/.

Tested in: Chrome 37 & Firefox 32 (currently the latest stable releases)

A floating panel/frame cannot be reattached

In example (indexDev.html), if we detach the Control Panel, and make it a floating panel, we can not reattach it to docking layout.

Add ability to minimize panels

Minimizing a panel keeps it docked in the same location, except the content area will be shrunk (or even minimized entirely, only showing a title bar).

This feature still requires a few design decisions before it can be fully carried out:

• Will minimizing leave you with only a title bar?
• Does minimizing mean only that a smaller alternative view appears instead of the full?
• Does minimizing also minimize all other panels that may have been tabbed together with it, or does it somehow separate itself?

Adding wcIFrame as floating panel hides the iframe DOM element

Adding a floating panel and creating a wcIFrame on onCreate callback will not show the IFRAME DOM element. It is hidden by the panel above it.

Create a dedicated panel that contains an iFrame.

Special management is needed to handle iFrames, since they very much dislike DOM hierarchy changes and tend to reset their contents every time they are moved. This version of the panel will store an iFrame in a global location in the DOM tree, but in such a way that it is always positioned and sized to match the bounds of the frame.

Use JSDoc to generate source documentation.

Resizing icon shows on fixed panels

If you can't move it, the cursor shouldn't imply it.

Separate the panel tabbing system so users can easily create their own tabbed widgets inside their panels for their own use.

Things will have to change a bit so that the user created tabs can not be dragged to other panels and docked.

Simplify wcSplitter so users can create their own inside their panels.

You can currently use a wcSplitter inside a panel, but the setup for it is very inconvenient.

wcSplitter Directional Pane Selection Undefined

I was following along the tutorial here and was trying to implement a wcSplitter with the following code.

$(document).ready(function() {
    var myDocker = new wcDocker(document.body,
                                {"theme": "shadow"});

    myDocker.registerPanelType('StaticView', {
        onCreate: function(myPanel, options) {
            var layout = myPanel.layout();
            var container = $("<div id='static-container'></div>");

            layout.addItem(container);

            var splitter = new wcSplitter(container, myPanel, wcDocker.ORIENTATION.HORIZONTAL);

            splitter.initLayouts();

            var vtimelineLayout = splitter.left();
            vtimelineLayout.addItem($("<p>test left</p>"));

            var traceLayout = splitter.right();
            traceLayout.addItem($("<p>test right</p>"));
        },
    });
    var staticPanel = myDocker.addPanel("StaticView", wcDocker.DOCK_RIGHT);
});

However both vtimelineLayout and traceLayout were undefined. I looked into the code and noticed that left and right were defined as follows:

  /**
   * Gets, or Sets the element associated with the left side pane (for horizontal layouts).
   *
   * @param {wcLayout|wcPanel|wcFrame|wcSplitter} [item] - If supplied, the pane will be replaced with this item.
   *
   * @returns {wcLayout|wcPanel|wcFrame|wcSplitter|Boolean} - The current object assigned to the pane, or false.
   */
  left: function(item) {
    this.pane(0, item);
  },

  /**
   * Gets, or Sets the element associated with the right side pane (for horizontal layouts).
   *
   * @param {wcLayout|wcPanel|wcFrame|wcSplitter} [item] - If supplied, the pane will be replaced with this item.
   *
   * @returns {wcLayout|wcPanel|wcFrame|wcSplitter|Boolean} - The current object assigned to the pane, or false.
   */
  right: function(item) {
    this.pane(1, item);
  },

and wondered if it was supposed to instead return this.pane(n, item) for left, right, top, and bottom. Changing this fixed the issue for me. If this is a bug I have the code ready for a pull request.

Allow panels to be docked onto the sides as slide out panels.

A floating panel/frame cannot be reattached

In example (indexDev.html), if we detach the Control Panel, and make it a floating panel, we can not reattach it to docking layout.