JQuery layout fixed width when closed

Question

I'm trying to set the width of the ui-layout-west pane at a specific dimension, when it is closed. By default, when pressing the "toggler", the pane gets completely closed, as can be seen in this example. What I want is the "west-pane" to be set to "40px" and still retain part of the content. Currently I can set this trough CSS but the west pane disappears. See my JsFidle example to better understand.

div.ui-layout-resizer.ui-layout-resizer-west.ui-layout-resizer-closed.ui-layout-resizer-west-closed {
    left: 40px !important;
}

How can I best obtain this effect? I would like to rely as much as possible on the JQuery plug-in settings and less on CSS.

Answer 1

I think the problem is that closed means closed and gone, and so you're not supposed to still be able to see the frame. If I understand what you want to do correctly you can fake it by overriding the close action with custom code.

This involves overriding the onclose_start callback, setting the size, then returning false to prevent the pane closing. Note this means that as far as the system is concerned the pane isn't really closed.

The code below does all of that, it makes a new variable on the west pane state object to store the old size. It defines that at the start of the creation function (although the system doesn't complain if it's not defined). You could also use a global variable or some other storage. You could make the function more generic to not just work for west, etc.

I'm not sure exactly how you want the system to work, you might need to fiddle with the if conditions.

$(document).ready(function () {
    var mylayout = $("body").layout(
        {west: {
            minSize: 40,
            onclose_start: function() {                     
                var closed_size = 40;          
                var current_size = mylayout.state.west.size;

                if (current_size <= closed_size) { 
                    mylayout.sizePane('west', mylayout.state.west.old_size);                    
                } else { 
                    mylayout.sizePane('west', closed_size);                    
                    mylayout.state.west.old_size = current_size;
                }                    
                return false;
            }}
        });
    mylayout.state.west.old_size = mylayout.state.west.size;
    });