@itihon/split-pane

split-pane

Split pane web component. Resizable grid. Changes percentage for adjacent panes in CSS grid-template-columns/grid-template-rows when divider is being dragged by the user.

🕑 Developing...

Install

npm install @itihon/split-pane

Use

import splitPane from 'split-pane'
// TODO: describe usage

In HTML

<script type="module" src="/path/to/split-pane.js"></script>

<split-pane type="horizontal">
  <div>pane 1</div>
  <div>pane 2</div>
  <div>pane 3</div>
</split-pane>

<split-pane type="vertical">
  <div>pane 1</div>
  <div>pane 2</div>
  <div>pane 3</div>
</split-pane>

<!-- nested --->
<split-pane type="horizontal">
  <div>pane 1</div>
  <split-pane type="vertical">
    <div>pane 2</div>
    <div>pane 3</div>
  </split-pane>
</split-pane>

Do not add or remove child elements directly after an instance of component was mounted. Use addPane() and removePane() API methods instead.

In JS or TS

Create an instance and add to DOM:

import SplitPane from "@itihon/split-pane";

const splitPane = new SplitPane();

document.body.append(splitPane);

or get a reference to an existing instance:

const splitPane = document.getElementById('split-pane-1');

API

export default class SplitPane extends HTMLElement {
  get length(): number;
  getPane(idx: number): HTMLElement | null;
  getAllPanes(): NodeListOf<HTMLElement>;
  addPane(container: HTMLElement, idx?: number): void;
  removePane(idx: number): boolean;
  getState(): SplitPaneState;
}

Events

export type SplitPaneState = {
    gridTemplate: string;
    panes: NodeListOf<HTMLElement>;
};

type SplitPaneStateChangeKind = 'addpane' | 'removepane' | 'resizepane';

export default class SplitPaneStateChangeEvent extends Event {
  oldState: SplitPaneState;
  newState: SplitPaneState;
  kind: SplitPaneStateChangeKind;
}

import SplitPane from "@itihon/split-pane";

const splitPane = new SplitPane();

document.body.append(splitPane);

splitPane.addEventListener('statechange', event => {
  const { oldState, newState, kind, target } = event;
  // ...
  // ...
});

Related

TODO

Acknowledgments

TODO