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 i