jQuery非依存の画面分割ライブラリSplit.jsを使ってみる

ふとした拍子に画面を分割したくなることがあると思いますが、大抵のライブラリはjQuery依存だったりメンテナンスが止まっていたりします。
そんな辛い状況の中、結構良さげなSplit.jsというものを発見しました。 github.com jQueryに依存せず軽量で中身も今風のJSで書かれています。

セットアップ

Split.jsと最低限必要なCSSを用意するだけです。

$ yarn add split.js
又は
$ npm install --save split.js

/* 分割のスタイル */
.split {
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;

  &.split-horizontal {
    height: 100%;
    float: left;
  }

}

/* 仕切りのスタイル*/
.gutter {
  background-color: #eee;
  background-repeat: no-repeat;
  background-position: 50%;

  &.gutter-vertical {
    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
    cursor: ns-resize;
  }

  &.gutter-horizontal {
    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
    cursor: ew-resize;
  }

  &.gutter-horizontal {
    height: 100%;
    float: left;
  }

}

2分割

HTML
各画面をwrapするdiv、各画面のdiv、仕切りのdivを用意するだけで簡単に分割ができます。

<div class="two-horizontal-split clearfix">
  <div class="left split split-horizontal">
    <!-- put truth html code -->　
  </div>
  <div class="gutter gutter-horizontal"></div>
  <div class="right split split-horizontal">
    <!-- put truth html code -->
  </div>
</div>

JavaScript
Splitに各画面を特定できるセレクタの配列とオプションを渡すだけです。
オプションのsizeは初期表示幅(単位は%)、minSizeは最小幅(単位はpx)です。
その他にも仕切りのサイズやドラッグ時のイベントハンドラ等のオプションがあります。

import Split from "split.js";

Split(['.two-horizontal-split .left', '.two-horizontal-split .right'], {
  sizes: [50, 50],
  minSize: [200, 200],
});

CSS
わかりやすいように見栄えを整えているだけなので略します。

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}

.two-horizontal-split {
   height: 250px;
   border: 1px solid #ddd;
   border-radius: 4px;

   .left {
     background: red;
   }

   .right {
     background: yellow;
   }
}

3分割

2分割ができれば3分割はdivタグを増やすだけで実現できます。

<div class="three-horizontal-split clearfix">
  <div class="left split split-horizontal">
    <!-- put truth html code -->
  </div>
  <div class="gutter gutter-horizontal"></div>
  <div class="center split split-horizontal">
    <!-- put truth html code -->
  </div>
  <div class="gutter gutter-horizontal"></div>
  <div class="right split split-horizontal">
    <!-- put truth html code -->
  </div>
</div>

import Split from "split.js";

Split(['.three-horizontal-split .left', '.three-horizontal-split .center', '.three-horizontal-split .right'], {
  sizes: [33, 34, 33],
  minSize: [200, 200, 200]
});

.three-horizontal-split {
   height: 250px;
   border: 1px solid #ddd;
   border-radius: 4px;

   .left {
     background: red;
   }

   .center {
     background: blue;
   }

   .right {
     background: yellow;
   }
}

垂直2分割

垂直方向の分割はdirectionオプションにverticalを指定するだけです。

<div class="two-vertical-split">
  <div class="top split">
    <!-- put truth html code -->
  </div>
  <div class="gutter gutter-vertical"></div>
  <div class="bottom split">
    <!-- put truth html code -->
  </div>
</div>

import Split from "split.js";

Split(['.two-vertical-split .top', '.two-vertical-split .bottom'], {
  direction: 'vertical',
  minSize: [50, 50]
});

.two-vertical-split {
  height: 250px;
  border: 1px solid #ddd;
  border-radius: 4px;

  .top {
    background: red;
  }

  .bottom {
    background: yellow;
  }
}

4分割

ここまでの知識を総動員するだけで4分割も実現できます。
ひたすらdivをネストしていきましょう。

<div class="four-split-wrap clearfix">
  <!-- 上 -->
  <div class="top">
    <!-- 左上 -->
    <div class="top-left split split-horizontal">
      <!-- put truth html code -->
    </div>
    <div class="gutter gutter-horizontal"></div>
    <!-- 右上 -->
    <div class="top-right split split-horizontal">
      <!-- put truth html code -->
    </div>
  </div>

  <div class="gutter gutter-vertical"></div>

  <!-- 下 -->
  <div class="bottom">
    <!-- 左下 -->
    <div class="bottom-left split split-horizontal">
      <!-- put truth html code -->
    </div>
    <div class="gutter gutter-horizontal"></div>
    <!-- 右下 -->
    <div class="bottom-right split split-horizontal">
      <!-- put truth html code -->
    </div>
  </div>

</div>

import Split from "split.js";

Split(['.four-split-wrap .top', '.four-split-wrap .bottom'], {
  direction: 'vertical',
  minSize: [50, 50]
});
Split(['.four-split-wrap .top .top-left', '.four-split-wrap .top .top-right'], {
  sizes: [50, 50],
  minSize: [200, 200]
});
Split(['.four-split-wrap .bottom .bottom-left', '.four-split-wrap .bottom .bottom-right'], {
  sizes: [50, 50],
  minSize: [200, 200]
});

.four-split-wrap {
  height: 250px;
  border: 1px solid #ddd;
  border-radius: 4px;

  .top-left {
    background: red;
  }

  .top-right {
    background: yellow;
  }

  .bottom-left {
    background: blue;
  }

  .bottom-right {
    background: green;
  }

}

まとめ

ここまでのコードは全て↓に置いておきます。
https://github.com/k213/playground/tree/master/css/split-view

他にもインスタンス経由での操作用のAPIも存在するので詳しくはドキュメントを参照してみてください。