Keeping middle pane independent?

[tfierens]

Hi,

I've got a couple of questions rather than issues. Hope you don't mind but just couldn't find a place where to ask these:

1. Resize

Is there a way to have 3 panes and allow to resize the left pane and the right pane independently without resizing the middle or left/right pane depending on which one is being resized.

This is what I have:

<div id="main">
    <div class="resizable-left" id="win1">
    </div>
    <div class="resizable-right" id="win2">
        <div class="resizable-left" id="win4"></div>
        <div class="resizable-right" id="win5"></div>
    </div>
</div>

but the above resize the right pane and middle pane when I resize the left pane for example. When resizing the right pane, it is behaving as I'd like it. It resizes the right and content pane without changing the left pane. I can see why based on the above definition but ideally, I'd like to be something like this:

<div id="main">
    <div class="resizable-left" id="win1">
    </div>
    <div class="resizable-center-fix" id="win3">
    </div>
    <div class="resizable-right" id="win2">
    </div>
</div>

Where the "resizable-center-fix" only gets resized when either the left or right pane get resized. Hope this makes sense?

2. Are there events available? The reason I'm asking is that every time, a pane is resized, I'd like to save its size immediately to local storage so that I can restore it when my page is reloaded the next time the user opens my web app?

3. Hiding pane? Can a pane be hidden at run-time and if it is, will the other pane be adjusted accordingly? For example, imagine if I have a vertical split embedded in the left pane and I want to hide the bottom pane. Will the top pane stretch all the way to the bottom?

Thanks.

Thierry

[Tom-Rawlings]

Hi,

Sorry for the late reply. The 3 pane setup you described and hiding a pane to allow the other to fill the space isn't currently possible I'm afraid. Let me know if you still really need this and maybe I'll finally be able to get around to updating this haha

As for events, I've just added some in. I've added Resizable.resizingStarted and Resizable.resizingEnded which you can assign a function to that you want to run. Resizer.resizingStarted triggers whenever a resizer bar is clicked and Resizer.resizingEnded triggers on the next mouseup or touchend event. There's also Resizable.windowResized but this gets triggered continuously whenever the mouse is moved during resizing so it's not very helpful.

Here's how you could go about getting the sizes of all the windows after resizing.

Resizable.resizingEnded = () => {
  Resizable.activeContentWindows.forEach( window => {
    console.group(`${window.divId}`);
    console.log(`width = ${window.width}`);
    console.log(`height = ${window.height}`);
    console.groupEnd();
  })
}

Hope this at least helps a little.

Tom