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:
http://docker.webcabin.org
146 stars 53 forks source link

Improved forked version available - bug fixes and performance #117

Open TimNZ opened 7 years ago

TimNZ commented 7 years ago

I've made various enhancements in a fork.

https://github.com/TimNZ/wcDocker

There are a few optimisations that reduce the scenarios when panel content is removed and re-added to the DOM.

More importantly I added a new wcAbsolute module which basically achieves the same as wcIFrame but is more general purpose.

Now embed a combination of anything and it won't be removed+added to the DOM triggering in iframe reloads or performance issues.

You can pass data into addPanel that is passed into onCreate:

this.dockingLayout.addPanel('webview', 'left', panel, null, {test: 1});

Example of wcAbsolute + React

        let panelTypeWebView2 = {
            faicon: 'address-book',
            onCreate: function (myPanel, panelOptions, data /* { test: 1 } */) {

                let id = uuid.v4();
                let panelId = uuid.v4();
                myPanel.id = panelId;
                var $container = $(`<div style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;"></div>`);
                var $content = $(`<div style="height: 100%; width: 100%" id="${id}"></div>`);
                var absolutePanel = new wcAbsolute($container, myPanel);
                absolutePanel.setContent($content);
                myPanel.layout().addItem($container);
                myPanel.closeable(true);
                setTimeout(() => {
                    render(
                        <WebView src="http://www.xero.com" style={{height: '100%', width: '100%'}}/>
                        , $content[0])
                }, 0);

            }
        };

Updated documentation coming at some stage.

ThemeBuilder is currently being excluded from my build as I have no need for it and its huge code size.