splittings.dom.js

just like vscode

Installation

To get started, clone the repository and install the dependencies:

npm install splittings-dom

Build

To build the project, run the following command:

npm run build

This will bundle the application using Rollup.

Usage

// custom style
styling(e => e.setAttribute('stay_at_bottom', '1'))
  .override('line_and_crossdot', {
    backgroundColor: 'rgb(0,120,212)',
    transitionDelay: 0,
    transitionDuration: 100,
    zIndex: 2
  })
  .build()
  .mount();

const adapter = new DomAdapter(document.getElementById('root')!)
const workspaces = new Workspaces(adapter)

workspaces.add(0, 'up') // split it.
workspaces.add(0, 'right') // split it again.

workspaces.on_leaves_changed = () => {
  for (const leaf of workspaces.leaves) {
    const cell = adapter.get_cell(leaf)
    if (!cell || cell.children.length) continue;

    // In some situations, a "cell" will be removed from the "DOM". 
    // You need to add it to the container again.
    if (!cell.parentElement) adapter.container.appendChild(cell)

    // When a new "cell" comes out, add your own element to it.
    const ev = document.createElement('div')
    ev.style.border = '1px solid white'
    ev.style.position = 'absolute'
    ev.style.inset = '2px'
    cell.append(ev)
  }
}

Contributing

If you would like to contribute to this project, please fork the repository and submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for more details.