Layout: main panel resize

[matthjes]

Hi,

How do I get real-time size updates when the main panel in a layout is resized?

I'm currently rendering a three.js renderer into the main panel of a three panel layout. If the panels get resized the renderer needs to be resized as well, so I added a resize event listener:

w2ui['layout'].on('resize', function(target, data) {
   var width = w2ui['layout'].get('main').width;
   var height = w2ui['layout'].get('main').height;
   renderer.setSize(width, height);
   ...
});

However, during the resize the width and height values of the main panels do not change. I can only get a continuous width and height update of all other panels by attaching a 'resizing' event listener (here I get updates for, e.g., the left and right panel, depending which is getting resized).

Is there a better way to update the main panel content when the panels get resized?

And how do I attach event listeners to panels?

[vitmalina]

All event handlers are called before any changes applied to the object. It is done this way to allow events to be cancelable. However, if you need to execute a function after changes applied to the object you can do it this way:

w2ui['layout'].on('resize', function(target, data) {
    data.onComplete = function () {
        var width = w2ui['layout'].get('main').width;
        var height = w2ui['layout'].get('main').height;
        console.log(width + 'x' + height);
    }
});

You can read more about event flow here: http://w2ui.com/web/docs/utils/events

[vitmalina]

You can attach event listeners to the panels, but there is no onResize for the panel, only entire layout. I have noticed, when layout is resized, main panel always resized and possibly some other panel (if it was not window resize). I have added data.panel variable to indicate what panel in addition to main was resized. Just checked into current working version.

[matthjes]

Thanks for you help! it's working now. It's not a continuous update, but it still sets the values after the resize operation has finished.

[matthjes]

Ok, as I don't use facebook, here is my comment: Great library, just what I was looking for: small, fast, easy to use, with a good set of widgets, a great layout system and MIT license. Was kind of hard to find, though, well, it's also very new. Keep up the good work!!