adding and removing elements

[PerBothner]

What is the best way to add/remove elements dynamically? Consider a program like GNU Screen, where you want to dynamically add and remove sub-windows.

Is there any way to add a new element, except by calling destroy and then creating a new Split object? It would seem this could cause minor flicker or jumps.

I can see at least 3 useful add "modes" for adding an element at position i:

1. Initialize the sizes to all elements have the same size. That cause non-neighbor elements to "jump" so you probably wouldn't want that.
2. Split the "current" (either i or i-1) element into 2 equal halves.
3. Split the neighboring elements i-1 and i into thirds.

To delete an element there is collapse, but that doesn't seem to be what we're looping for.

[nathancahill]

I like this idea quite a lot. Mode 2 and 3 kind of match the logic Split.js uses for resizing elements in different positions. Mode 3 would probably look the best, but would be the hardest to implement. Mode 2 might be a good place to start. Let me think about the math of each of those modes, and sketch out how the new API would behave. Maybe something like:

.add(<DOMElement | Selector> element, <number> index) .remove(<number> index)

[PerBothner]

My ideal would be a general package for managing panes, that would support:

1. Create or remove panes using functions (which might be bound to keyboard events). This could use Split.js.
2. Re-arrange panes around by dragging. (The dragabilly package could be used.) (Bonus points if a pane can be dragged from one top-level window to another, but that has extra challenges.)
3. Optional tabs, and being able to re-order tabs or convert them to/from panes. (The chrome-tabs package makes use of dragabilly.) An advantage of supporting tabs is that tabs provide a natural "handle" for dragging panes.

Toolkits that I've used that support all of these include the Atom editor and the NetBeans IDE. It would be great to be able to do it with portable JavaScript.

I've been thinking about how to add these features to DomTerm, though for now I'm seeing whether I can get Atom to do what I want. That has its own challenges.

[nathancahill]

Split.js would certainly be interested in supporting #1. The others are outside the scope of this library, since it's single goal is to resize a dimension of two elements when the gutter is dragged, in as little code as possible. Your best bet for implementing #2 is destroying the split with .destroy(), handle the drag as normal DOM elements, and recreating a new split with the new resulting order (or new window). #3 could be implemented the same way with a little CSS.

[Wyzix33]

Hi, there are many libraries that does all that, but not production ready, and as far as i tested, there are a lot of bugs ...

Here is a list i tried before stopping to split.js

https://github.com/coderespawn/dock-spawn and a demo here http://www.dockspawn.com/demos/ide/dock_spawn_demo_ide.html

https://github.com/WebCabin/wcDocker

http://www.htmldockfloat.com/demo/JavaScriptDockFloatSimpleDemo.html

https://www.codeproject.com/tips/1155589/pure-html-css-js-panel-and-splitcontainer-in-net-s?fid=1913581&tid=5328182 even https://github.com/ritenv/retro-desktop all of them are hard to implement and overcomplicated ...

I think you can leave split.js just for resizeable split views and you can create some addons (maybe) for closing, stacking, dragging or spawning other views, and as i see it, those projects are not so popular..

[PerBothner]

Another library is GoldenLayout. The github version has an MIT license.

[lezhnev74]

I like the simplicity of this library, I believe it has big potential. Do you plan to extend API with mentioned add()/remove() commands or similar? My +1 for this.