Flex split pane

by HadarZ

HTML

<div id="container" class="container">
  <div id="glass" class="glass"></div>
  <div class="c1">
    <div class="grandchild"></div>
  </div>
  <div id="c2" class="c2"></div>
</div>

CSS

.container {
  display: flex;
  border: 1px solid;
  width: 500px;
  height: 300px;
  position: absolute;
}

.c1 {
  background-color: blue;
  flex: 1;
  height: 100%;
}

.c2 {
  background-color: green;
  width: 150px;
  /* transition: width 0.5s; */
  min-width: 50px;
  /* width: 0px; */
}

.splitter {
  width: 20px;
  cursor: col-resize;
}

.glass {
  height: 100%;
  width: 100%;
  cursor: col-resize;
  display: none;
  position: absolute;
}

.grandchild {
  background-color: red;
  width: 50px;
  height: 50px;
}

JavaScript

function startDrag() {
  console.log('down');
  glass.style = 'display: block;';
  glass.addEventListener('mousemove', drag, false);
}

function endDrag() {
  console.log('up');
  glass.removeEventListener('mousemove', drag, false);
  glass.style = '';
}

function drag(event) {
  console.log('move');
  var splitter = getSplitter();
  var panel = document.getElementById('c2');
  var currentWidth = panel.offsetWidth;
  var currentLeft = panel.offsetLeft;
  panel.style.width = (currentWidth - (event.clientX - currentLeft)) + "px";
}

function getSplitter() {
  return document.getElementById('splitter');
}

var con = document.getElementById('container');
var splitter = document.createElement('div');
var glass = document.getElementById('glass');
splitter.className = 'splitter';
splitter.id = 'splitter';
con.insertBefore(splitter, con.lastElementChild);
splitter.addEventListener('mousedown', startDrag, false);
glass.addEventListener('mouseup', endDrag, false);