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!

Getting Started

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!

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.

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);

License

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 (lochemage@webcabin.org), 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!