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

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

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

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

interface SplitPaneStateChangeEventDetail {
  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 } = event.detail;
  // ...
  // ...
});

Related

TODO

Acknowledgments

TODO