splitview.js

SplitView implementation based on Split.js

Live Demo

There are two implementations:

split-percent

• layout: flexbox
• property: flex-basis
• unit: percent
• embed and absolute gutters
• collapse with animation
• disable pane

split-absolute

• layout: absolute position
• property: left, top, width, height
• unit: pixel
• absolute gutters
• collapse, expand, toggle with animation
• disable pane
• smart size distribution

Installation

Using npm:

npm install splitview.js

Using yarn:

yarn add splitview.js

Usage

import SplitView from 'splitview.js'
import 'splitview.js/dist/splitview.css';

const panes = [
  document.getElementById('pane1'),
  document.getElementById('pane2')
];
const splitview = SplitView(panes, options?);

Default HTML:

<div>
  <div id="pane1"></div>
  <div id="pane2"></div>
</div>

Documentation

Pane options:

| Name | Type | Default | Description | | -------------------- | -------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------- | | id | Number, String | null | Unique pane id. Used in api methods. (optional) | | element | HTMLElement | null | Pane element. (required) | | size | Number, String | 0 | Initial size of pane element in percents. In split-absolute availabe 'px' and '%', 0 value take up the remaining size. (optional) | | minSize | Number | 0 | Minimum size of pane element in pixels. (optional) | | disabled | Boolean | false | Disable resize of pane element. (optional) | | fallbackExpandSize | Number | null | Fallback expand size in pixels. Only in split-absolute. (optional) |

Options:

| Name | Type | Default | Description | | ----------------------- | -------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------- | | percent | Boolean | true | Create percent or absolute splitview. (optional) | | expandToMin | Boolean | false | Grow initial sizes to pane minSize. (optional) | | gutterSize | Number | 4 | Gutter size in pixels. (optional) | | gutterAlign | String | 'center' | Gutter alignment between elements. (optional) | | gutterMode | String | 'embed' | Gutter takes size between elements. Value: 'embed' or 'absolute'. In split-absolute is always 'absolute'. (optional) | | snapOffset | Number | 0 | Snap to minimum size offset in pixels. (optional) | | dragInterval | Number | 1 | Number of pixels to drag. (optional) | | direction | String | vertical | Direction to split: 'vertical' or 'horizontal'. (optional) | | cursor | String | col-resize | Cursor to display while dragging. (optional) | | createGutter | Function | null | Create custom gutter element. (optional) | | elementStyle | Function | null | Set the custom style of each element. (optional) | | gutterStyle | Function | null | Set the custom style of the gutter. (optional) | | customGutterClassName | String | null | Additional gutter class name. (optional) | | onDrag | Function | null | Callback on drag. (optional) | | onDragStart | Function | null | Callback on drag start. (optional) | | onDragEnd | Function | null | Callback on drag end. (optional) | | onResize | Function | null | Callback on resize panes. (optional) |

Examples

Create percent slitview:

const panes = [
  {
    element: document.getElementById('pane1'),
    size: 30 //%,
    minSize: 100 //px
  },
  {
    element: document.getElementById('pane2'),
    size: 40 //%,
    minSize: 200 //px
  },
  {
    element: document.getElementById('pane3'),
    size: 30 //%,
    minSize: 0 //px
  }
];

const options = {
  onResize: ({percentSizes, sender}) => console.log(percentSizes, sender);
};

const splitview = SplitView(panes, options);

Create absolute slitview:

const panes = [
  {
    element: document.getElementById('pane1'),
    size: "300px"
    minSize: 40 //px
  },
  {
    element: document.getElementById('pane2'),
    size: 0, // take up the remaining size
    minSize: 300 //px
  },
  {
    element: document.getElementById('pane3'),
    size: "20%",
    minSize: 0 //px
  }
];

const options = {
  percent: false,
  snapOffset: 30,
  onResize: ({percentSizes, sender}) => console.log(percentSizes, sender);
};

const splitview = SplitView(panes, options);

// Distribute sizes on window resize
window.addEventListener("resize", () => {
  splitview.invalidateSize();
});

More expamples see demo.

API

Create percent splitview instance:

const instance = SplitView(panes, options);

Create absolute splitview instance:

  const instance = SplitView(panes, {
    percent: false,
    ...
  });

Directly instantiate SplitPercent:

const instance = new SplitView.SplitPercent(panes, options);

Directly instantiate SplitAbsolute:

const instance = new SplitView.SplitAbsolute(panes, options);

SplitPercent:

.collapsePaneAt(index, animated? = false)

.collapsePane(id, animated? = false)

.disablePaneAt(index)

.disablePane(id)

.destroy()

SplitAbsolute:

.invalidateSize()

.collapsePaneAt(index, animated? = false)

.collapsePane(id, animated? = false)

.expandPaneAt(index, size, animated? = false)

.expandPane(id, size, animated? = false)

.togglePaneAt(index, size? = null, animated? = false)

.togglePane(id, size? = null, animated? = false)

.isCollapsedPaneAt(index)

.isCollapsedPane(id)

.disablePaneAt(index)

.disablePane(id)

.destroy()

License

Licensed under the MIT License.