webcabin / wcdocker Goto Github PK

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.

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.

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)

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.

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.

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.

should wait for mouse up

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.

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

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

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

@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.

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.

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.

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

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

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.

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

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.

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.

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

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.

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

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

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.

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.

@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.

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?

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!

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:

@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

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.

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

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.

Same with removal.

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 ?

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

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

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

@Lochemage

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

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?

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

Need to handle touch events, rather than mouse.